/* arabic 400 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plex/plex-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin 400 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plex/plex-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic 500 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plex/plex-arabic-500.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin 500 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plex/plex-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic 600 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/plex/plex-arabic-600.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin 600 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/plex/plex-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic 700 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/plex/plex-arabic-700.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin 700 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/plex/plex-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Dorat Shaqra (درة شقراء للاستقدام) — design system
   Palette taken from the logo.
   ========================================================================== */

:root {
    --ds-blue: #1B6FB5;
    --ds-blue-600: #155a94;
    --ds-blue-50: #eef5fb;
    --ds-blue-100: #dbe9f6;
    --ds-navy: #14285F;
    --ds-navy-700: #0e1d46;
    --ds-red: #B3202E;
    --ds-orange: #F2991F;
    --ds-green: #6FA64A;
    --ds-gray: #9A9A9A;

    --ds-ink: #0f1b3d;
    --ds-text: #3b4560;
    --ds-muted: #6b7691;
    --ds-line: #e3eaf3;
    --ds-bg: #f6f9fc;
    --ds-white: #fff;

    --ds-radius: 16px;
    --ds-radius-sm: 10px;
    --ds-radius-lg: 24px;
    --ds-shadow-sm: 0 1px 2px rgba(20, 40, 95, .06), 0 2px 8px rgba(20, 40, 95, .05);
    --ds-shadow: 0 8px 30px rgba(20, 40, 95, .10);
    --ds-shadow-lg: 0 20px 60px rgba(20, 40, 95, .16);
    --ds-grad: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-navy) 100%);
    --ds-font: "IBM Plex Sans Arabic", "Almarai", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

    /* bootstrap overrides */
    --bs-primary: #1B6FB5;
    --bs-primary-rgb: 27, 111, 181;
    --bs-blue: #1B6FB5;
    --bs-link-color: #1B6FB5;
    --bs-body-font-family: var(--ds-font);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ds-font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ds-text);
    background: var(--ds-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ds-font);
    color: var(--ds-ink);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--ds-blue); text-decoration: none; transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s; }
a:hover { color: var(--ds-navy); }
img { max-width: 100%; }
ul { padding: 0; margin: 0; list-style: none; }
button, input, select, textarea { font-family: var(--ds-font); }
body, body *:not(i):not(svg):not(svg *):not([class*="fa-"]):not([class^="ri-"]):not([class*=" ri-"]):not(.odometer-digit *):not(.select2-selection__arrow) { font-family: var(--ds-font); }
img.is-fallback { object-fit: contain !important; background: var(--ds-bg); padding: 2rem; }
.ds-hero__frame .swiper-slide:has(img.is-fallback)::after { display: none; }
.ds-float { z-index: 3; }
:focus-visible { outline: 3px solid rgba(27, 111, 181, .35); outline-offset: 2px; }

.container { max-width: 1200px; }
.ds-section { padding: 88px 0; position: relative; }
.ds-section--tint { background: var(--ds-bg); }
.ds-section--navy { background: var(--ds-navy); color: #dbe4f7; }
.ds-section--navy h2, .ds-section--navy h3, .ds-section--navy h4 { color: #fff; }
.ds-section--sm { padding: 56px 0; }
@media (max-width: 767.98px) { .ds-section, .ds-section--sm { padding: 0 !important; } }

/* ---------- section heading ---------- */
.ds-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.ds-head--start { margin-inline: 0; text-align: start; }
.ds-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .85rem; font-weight: 600; letter-spacing: .02em;
    color: var(--ds-blue); background: var(--ds-blue-50);
    padding: .3rem .9rem; border-radius: 999px; margin-bottom: 1rem;
}
.ds-eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ds-orange), var(--ds-red));
}
.ds-head p { color: var(--ds-muted); font-size: 1.05rem; margin: 0; }

/* ---------- buttons ---------- */
.ds-btn, .defaultBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-weight: 600; font-size: 1rem; line-height: 1.2;
    padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    color: #fff; background: var(--ds-grad);
    box-shadow: 0 6px 18px rgba(27, 111, 181, .28);
}
.ds-btn:hover, .defaultBtn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 111, 181, .34); }
.ds-btn:disabled { opacity: .6; pointer-events: none; }
.ds-btn--light { background: #fff; color: var(--ds-navy); box-shadow: var(--ds-shadow-sm); }
.ds-btn--light:hover { color: var(--ds-blue); }
.ds-btn--outline { background: transparent; color: var(--ds-blue); border-color: var(--ds-blue); box-shadow: none; }
.ds-btn--outline:hover { background: var(--ds-blue); color: #fff; }
.ds-btn--orange { background: linear-gradient(135deg, var(--ds-orange), #e07d05); box-shadow: 0 6px 18px rgba(242, 153, 31, .35); }
.ds-btn--green { background: linear-gradient(135deg, #7cb857, #559036); box-shadow: 0 6px 18px rgba(111, 166, 74, .35); }
.ds-btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }
.ds-btn--block { display: flex; width: 100%; }
.defaultBtn span { display: none; }

/* ---------- top bar ---------- */
.ds-topbar { background: var(--ds-navy); color: #cfd9f2; font-size: .85rem; }
.ds-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; flex-wrap: wrap; }
.ds-topbar a { color: #e8eefc; }
.ds-topbar a:hover { color: #fff; }
.ds-topbar__info { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ds-topbar__info i { color: var(--ds-orange); margin-inline-end: .4rem; }
.ds-topbar__social { display: flex; gap: .4rem; }
.ds-topbar__social a {
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.ds-topbar__social a:hover { background: var(--ds-blue); }

/* ---------- navbar ---------- */
.ds-nav {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ds-line);
}
.ds-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; }
.ds-nav__brand img { height: 62px; width: auto; display: block; }
.ds-nav__menu { display: flex; align-items: center; gap: .25rem; margin: 0; }
.ds-nav__link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .55rem .9rem; border-radius: 999px;
    color: var(--ds-ink); font-weight: 500; font-size: .98rem; background: none; border: 0;
}
.ds-nav__link:hover, .ds-nav__link.is-active { color: var(--ds-blue); background: var(--ds-blue-50); }
.ds-nav__actions { display: flex; align-items: center; gap: .6rem; }
.ds-nav__toggle {
    display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--ds-line);
    background: #fff; color: var(--ds-navy); font-size: 1.3rem; align-items: center; justify-content: center;
}
.ds-dropdown { position: relative; }
.ds-dropdown__panel {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 220px;
    background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: all .18s ease;
}
.ds-dropdown:hover .ds-dropdown__panel, .ds-dropdown:focus-within .ds-dropdown__panel, .ds-dropdown.is-open .ds-dropdown__panel {
    opacity: 1; visibility: visible; transform: none;
}
.ds-dropdown__panel a {
    display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: 8px;
    color: var(--ds-ink); font-weight: 500;
}
.ds-dropdown__panel a i { color: var(--ds-blue); width: 20px; text-align: center; }
.ds-dropdown__panel a:hover { background: var(--ds-blue-50); color: var(--ds-blue); }

@media (max-width: 991.98px) {
    .ds-nav__toggle { display: inline-flex; }
    .ds-nav__panel {
        position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(340px, 88vw); background: #fff; z-index: 1050;
        padding: 1.2rem; overflow-y: auto; transform: translateX(-100%); transition: transform .28s ease;
        box-shadow: var(--ds-shadow-lg); display: flex; flex-direction: column; gap: 1rem;
    }
    [dir="rtl"] .ds-nav__panel { transform: translateX(100%); }
    body.nav-open .ds-nav__panel { transform: none; }
    .ds-nav__overlay { position: fixed; inset: 0; background: rgba(10, 20, 50, .5); z-index: 1040; opacity: 0; visibility: hidden; transition: .25s; }
    body.nav-open .ds-nav__overlay { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }
    .ds-nav__menu { flex-direction: column; align-items: stretch; }
    .ds-nav__link { padding: .8rem 1rem; border-radius: 12px; }
    .ds-dropdown__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 .5rem 0 0; min-width: 0; display: none; }
    .ds-dropdown.is-open .ds-dropdown__panel { display: block; }
    .ds-nav__actions .ds-btn { width: 100%; }
    .ds-nav__brand img { height: 54px; }
    .ds-topbar__social { display: none; }
}
@media (min-width: 992px) {
    .ds-nav__overlay, .ds-nav__close { display: none; }
    .ds-nav__panel { display: flex; align-items: center; gap: 1.2rem; flex: 1; justify-content: space-between; margin-inline-start: 1.2rem; }
}
.ds-nav__close { align-self: flex-start; }

/* ---------- hero ---------- */
.ds-hero {
    position: relative; overflow: hidden; padding: 72px 0 96px;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(27, 111, 181, .14), transparent 60%),
        radial-gradient(700px 420px at -5% 110%, rgba(242, 153, 31, .12), transparent 60%),
        linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%);
}
.ds-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.ds-hero h1 { margin-bottom: 1.1rem; }
.ds-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--ds-blue), var(--ds-navy)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-hero__lead { font-size: 1.15rem; color: var(--ds-muted); max-width: 560px; margin-bottom: 2rem; }
.ds-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.ds-hero__trust { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.ds-trust { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ds-ink); font-size: .95rem; }
.ds-trust i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--ds-shadow-sm); color: var(--ds-green); }
.ds-hero__visual { position: relative; }
.ds-hero__frame {
    position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4;
    background: var(--ds-grad); box-shadow: var(--ds-shadow-lg);
}
.ds-hero__frame .swiper, .ds-hero__frame .swiper-slide { width: 100%; height: 100%; }
.ds-hero__frame .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.ds-hero__frame .swiper-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 29, 70, .55)); }
.ds-hero__frame .swiper-pagination { bottom: 14px !important; }
.ds-hero__frame .swiper-pagination-bullet { background: #fff; opacity: .6; width: 8px; height: 8px; }
.ds-hero__frame .swiper-pagination-bullet-active { opacity: 1; width: 22px; border-radius: 8px; }
.ds-hero__logo {
    width: 100%; height: 100%; display: grid; place-items: center; background: #fff; padding: 2rem;
}
.ds-hero__logo img { max-height: 100%; object-fit: contain; }
.ds-float {
    position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--ds-shadow);
    padding: .8rem 1.1rem; display: flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--ds-ink);
    animation: ds-bob 5s ease-in-out infinite;
}
.ds-float i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.ds-float small { display: block; color: var(--ds-muted); font-weight: 400; font-size: .8rem; }
.ds-float--a { inset-block-end: -22px; inset-inline-start: -18px; }
.ds-float--a i { background: var(--ds-green); }
.ds-float--b { inset-block-start: 26px; inset-inline-end: -14px; animation-delay: 1.4s; }
.ds-float--b i { background: var(--ds-orange); }
@keyframes ds-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ds-hero__shape { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .9; pointer-events: none; }
.ds-hero__shape--1 { width: 14px; height: 14px; background: var(--ds-red); inset-block-start: 14%; inset-inline-start: 6%; }
.ds-hero__shape--2 { width: 22px; height: 22px; background: var(--ds-green); inset-block-end: 18%; inset-inline-start: 46%; }
.ds-hero__shape--3 { width: 12px; height: 12px; background: var(--ds-orange); inset-block-start: 20%; inset-inline-end: 48%; }

@media (max-width: 991.98px) {
    .ds-hero { padding: 40px 0 72px; }
    .ds-hero__grid { grid-template-columns: 1fr; gap: 2.4rem; }
    .ds-hero__visual { order: -1; }
    .ds-float--a { inset-inline-start: 8px; }
    .ds-float--b { inset-inline-end: 8px; }
}

/* ---------- quick actions (overlap hero) ---------- */
.ds-quick { margin-top: -56px; position: relative; z-index: 3; }
.ds-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ds-quick__item {
    display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border-radius: var(--ds-radius);
    background: #fff; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); color: var(--ds-ink);
}
.ds-quick__item:hover { transform: translateY(-4px); border-color: var(--ds-blue); color: var(--ds-ink); }
.ds-quick__icon { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; }
.ds-quick__item:nth-child(1) .ds-quick__icon { background: var(--ds-blue); }
.ds-quick__item:nth-child(2) .ds-quick__icon { background: var(--ds-orange); }
.ds-quick__item:nth-child(3) .ds-quick__icon { background: var(--ds-green); }
.ds-quick__item:nth-child(4) .ds-quick__icon { background: var(--ds-red); }
.ds-quick__item strong { display: block; font-size: 1.05rem; }
.ds-quick__item div span { font-size: .85rem; color: var(--ds-muted); }
.ds-quick__icon, .ds-quick__icon i { color: #fff; }
.ds-quick__icon { font-size: 1.4rem; }
@media (max-width: 991.98px) { .ds-quick__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .ds-quick__item { flex-direction: column; text-align: center; padding: 1rem .6rem; } }

/* ---------- about ---------- */
.ds-about { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ds-about__media { position: relative; }
.ds-about__media img.main { width: 100%; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; background: var(--ds-blue-50); }
.ds-about__badge {
    position: absolute; inset-block-end: -24px; inset-inline-end: -12px; background: var(--ds-grad); color: #fff;
    padding: 1.1rem 1.5rem; border-radius: 20px; box-shadow: var(--ds-shadow); text-align: center;
}
.ds-about__badge strong { display: block; font-size: 2rem; line-height: 1.1; }
.ds-about__badge span { font-size: .85rem; opacity: .9; }
.ds-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.8rem; }
.ds-feature { display: flex; gap: .8rem; align-items: flex-start; }
.ds-feature i { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ds-blue-50); color: var(--ds-blue); }
.ds-feature:nth-child(2) i { background: #fdf1de; color: var(--ds-orange); }
.ds-feature:nth-child(3) i { background: #eaf4e2; color: var(--ds-green); }
.ds-feature:nth-child(4) i { background: #f8e3e5; color: var(--ds-red); }
.ds-feature p { margin: 0; font-weight: 500; color: var(--ds-ink); font-size: .96rem; line-height: 1.6; }
@media (max-width: 991.98px) { .ds-about { grid-template-columns: 1fr; gap: 2.6rem; } .ds-features { grid-template-columns: 1fr; } }

/* ---------- cards / grids ---------- */
.ds-grid { display: grid; gap: 1.3rem; }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) { .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .ds-grid--2, .ds-grid--3 { grid-template-columns: 1fr; } .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } }

.ds-card {
    background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
    padding: 1.6rem; box-shadow: var(--ds-shadow-sm); height: 100%;
}
.ds-card--hover:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow); border-color: var(--ds-blue-100); }
.ds-card__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1rem; background: var(--ds-blue-50); color: var(--ds-blue); }

/* countries */
.ds-country {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem;
    background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 1.5rem 1rem;
    box-shadow: var(--ds-shadow-sm); color: var(--ds-ink);
}
.ds-country:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow); border-color: var(--ds-blue); }
.ds-country img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: var(--ds-bg); padding: 6px; }
.ds-country h3 { font-size: 1.05rem; margin: 0; }
.ds-country span { font-size: .85rem; font-weight: 600; color: var(--ds-blue); }
.ds-country span i { margin-inline-start: .3rem; transition: transform .2s; }
.ds-country:hover span i { transform: translateX(-4px); }

/* steps */
.ds-steps { counter-reset: step; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.ds-step-box { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: 2rem; box-shadow: var(--ds-shadow-sm); }
.ds-step-box > h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.ds-step-box > h3 i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--ds-blue); font-size: 1.1rem; }
.ds-step-box:nth-child(2) > h3 i { background: var(--ds-orange); }
.ds-step-box > p { color: var(--ds-muted); font-size: .95rem; }
.ds-list { display: grid; gap: .3rem; margin-top: 1rem; }
.ds-list li { counter-increment: step; display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; border-radius: 12px; background: var(--ds-bg); font-weight: 500; color: var(--ds-ink); }
.ds-list li::before {
    content: counter(step); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; color: var(--ds-blue); font-weight: 700; font-size: .9rem; box-shadow: var(--ds-shadow-sm);
}
.ds-step-box { counter-reset: step; }
.ds-list li i { color: var(--ds-blue); margin-inline-start: auto; opacity: .8; }
@media (max-width: 991.98px) { .ds-steps { grid-template-columns: 1fr; } }

/* stats */
.ds-stats { background: var(--ds-navy); position: relative; overflow: hidden; }
.ds-stats::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(500px 260px at 90% 0, rgba(27, 111, 181, .55), transparent 70%),
    radial-gradient(420px 240px at 5% 100%, rgba(242, 153, 31, .22), transparent 70%); }
.ds-stats .container { position: relative; }
.ds-stat { text-align: center; padding: 1.4rem 1rem; border-radius: var(--ds-radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ds-stat i { font-size: 1.6rem; color: var(--ds-orange); margin-bottom: .6rem; display: block; }
.ds-stat .odometer, .ds-stat__num { font-size: 2.3rem; font-weight: 700; color: #fff; line-height: 1.2; display: block; }
.ds-stat h5 { color: #b9c6e6; font-weight: 500; font-size: .95rem; margin: .2rem 0 0; }

/* reps */
.ds-rep { text-align: center; }
.ds-rep img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid var(--ds-blue-50); margin-bottom: .8rem; background: var(--ds-bg); }
.ds-rep h3 { font-size: 1.05rem; }
.ds-rep .actions { display: flex; gap: .5rem; justify-content: center; margin-top: .8rem; }
.ds-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.15rem; }
.ds-icon-btn--wa { background: #25d366; }
.ds-icon-btn--tel { background: var(--ds-blue); }
.ds-icon-btn:hover { color: #fff; transform: translateY(-3px); }

/* app promo */
.ds-app {
    background: var(--ds-grad); border-radius: 32px; padding: 3rem; color: #e4ecfb; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: center;
}
.ds-app::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; inset-inline-end: -120px; inset-block-start: -140px; background: rgba(255, 255, 255, .07); }
.ds-app h2 { color: #fff; }
.ds-app p { color: #cdd9f3; }
.ds-store { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; position: relative; z-index: 1; }
.ds-store a {
    display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1.3rem; border-radius: 14px;
    background: #fff; color: var(--ds-navy); min-width: 190px;
}
.ds-store a:hover { transform: translateY(-3px); color: var(--ds-blue); }
.ds-store a i { font-size: 1.8rem; }
.ds-store a small { display: block; font-size: .72rem; color: var(--ds-muted); line-height: 1.2; }
.ds-store a strong { display: block; line-height: 1.2; }
.ds-app__art { position: relative; z-index: 1; text-align: center; }
.ds-app__art i { font-size: 8rem; color: rgba(255, 255, 255, .85); }
@media (max-width: 767.98px) { .ds-app { grid-template-columns: 1fr; padding: 2rem 1.4rem; } .ds-app__art { display: none; } }

/* faq */
.ds-faq { max-width: 820px; margin-inline: auto; display: grid; gap: .8rem; }
.ds-faq details { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-sm); }
.ds-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-weight: 600; color: var(--ds-ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: .8rem; color: var(--ds-blue); transition: transform .2s; }
.ds-faq details[open] summary::after { transform: rotate(180deg); }
.ds-faq details[open] { border-color: var(--ds-blue-100); }
.ds-faq .body { padding: 0 1.3rem 1.2rem; color: var(--ds-muted); }

/* contact */
.ds-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.4rem; align-items: start; }
.ds-contact__info { background: var(--ds-grad); color: #dbe6fa; border-radius: var(--ds-radius-lg); padding: 2.2rem; }
.ds-contact__info h3 { color: #fff; margin-bottom: 1.4rem; }
.ds-contact__row { display: flex; gap: 1rem; margin-bottom: 1.3rem; }
.ds-contact__row i { flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: #fff; }
.ds-contact__row small { display: block; opacity: .75; }
.ds-contact__row a, .ds-contact__row strong { color: #fff; font-weight: 600; word-break: break-word; }
.ds-contact__form { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: 2.2rem; box-shadow: var(--ds-shadow); }
@media (max-width: 991.98px) { .ds-contact { grid-template-columns: 1fr; } }

/* partners */
.ds-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.4rem 3.4rem; }
.ds-partners img { height: 58px; width: auto; filter: grayscale(1); opacity: .7; transition: .25s; }
.ds-partners img:hover { filter: none; opacity: 1; }

/* ---------- forms ---------- */
.form-label { font-weight: 600; color: var(--ds-ink); font-size: .92rem; margin-bottom: .4rem; }
.form-control, .form-select, .select2-container--default .select2-selection--single {
    border: 1.5px solid var(--ds-line); border-radius: 12px; padding: .72rem 1rem; min-height: 50px;
    font-size: 1rem; color: var(--ds-ink); background-color: #fff; box-shadow: none;
}
.form-control:focus, .form-select:focus { border-color: var(--ds-blue); box-shadow: 0 0 0 4px rgba(27, 111, 181, .12); }
.form-control::placeholder { color: #9aa5bd; }
textarea.form-control { min-height: 130px; resize: vertical; }
.form-control.valid { border-color: var(--ds-green); }
.form-error, .invalid-feedback, .help-block.form-error { color: var(--ds-red) !important; font-size: .82rem; }
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--ds-ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: var(--ds-muted); pointer-events: none; }
.input-icon .form-control { padding-inline-start: 2.8rem; }

/* ---------- footer ---------- */
.ds-footer { background: var(--ds-navy-700); color: #b9c6e6; padding-top: 72px; position: relative; overflow: hidden; }
.ds-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--ds-blue), var(--ds-green), var(--ds-orange), var(--ds-red), var(--ds-navy)); }
.ds-footer__grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1fr; gap: 2.4rem; padding-bottom: 48px; }
.ds-footer__logo { display: inline-block; background: #fff; border-radius: 18px; padding: .7rem 1.1rem; margin-bottom: 1.1rem; }
.ds-footer__logo img { height: 74px; display: block; }
.ds-footer h5 { color: #fff; font-size: 1.05rem; margin-bottom: 1.1rem; position: relative; padding-bottom: .7rem; }
.ds-footer h5::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--ds-orange); }
.ds-footer a { color: #b9c6e6; }
.ds-footer a:hover { color: #fff; }
.ds-footer__links li { margin-bottom: .55rem; }
.ds-footer__links a::before { content: "\f104"; font-family: "Font Awesome 6 Pro"; font-weight: 400; margin-inline-end: .55rem; color: var(--ds-orange); }
.ds-footer__contact li { display: flex; gap: .8rem; margin-bottom: .9rem; }
.ds-footer__contact i { color: var(--ds-orange); margin-top: .35rem; width: 18px; text-align: center; }
.ds-footer__social { display: flex; gap: .5rem; margin-top: 1.2rem; }
.ds-footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; }
.ds-footer__social a:hover { background: var(--ds-blue); transform: translateY(-3px); }
.ds-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.3rem 0; font-size: .9rem; }
.ds-footer__bottom .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ds-footer__bottom p { margin: 0; }
@media (max-width: 991.98px) { .ds-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .ds-footer__grid { grid-template-columns: 1fr; } }

/* floating contact */
.ds-totop { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 1000; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ds-navy); color: #fff; box-shadow: var(--ds-shadow); opacity: 0; visibility: hidden; transition: .25s; }
.ds-totop.show { opacity: 1; visibility: visible; }

/* ---------- reveal (wow-style bounce in from right / left / up) ---------- */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation-duration: .9s; animation-fill-mode: backwards; animation-timing-function: cubic-bezier(.2, .7, .3, 1); animation-delay: var(--rv-delay, 0ms); }
.reveal.in.rv-right { animation-name: dsBounceInRight; }
.reveal.in.rv-left { animation-name: dsBounceInLeft; }
.reveal.in.rv-up { animation-name: dsBounceInUp; }
@keyframes dsBounceInRight { 0% { opacity: 0; transform: translateX(90px); } 60% { opacity: 1; transform: translateX(-14px); } 80% { transform: translateX(6px); } 100% { transform: none; } }
@keyframes dsBounceInLeft { 0% { opacity: 0; transform: translateX(-90px); } 60% { opacity: 1; transform: translateX(14px); } 80% { transform: translateX(-6px); } 100% { transform: none; } }
@keyframes dsBounceInUp { 0% { opacity: 0; transform: translateY(60px); } 60% { opacity: 1; transform: translateY(-10px); } 80% { transform: translateY(4px); } 100% { transform: none; } }
html.ds-loading, html.ds-loading body { overflow: hidden; }
#ds-preloader { position: fixed; inset: 0; z-index: 99999; background: #fff; display: grid; place-items: center; transition: opacity .45s ease, visibility .45s ease; }
html:not(.ds-loading) #ds-preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.ds-preloader__box { display: grid; gap: 1.2rem; justify-items: center; }
.ds-preloader__box img { width: 150px; height: auto; animation: dsPulse 1.4s ease-in-out infinite; }
.ds-preloader__bar { width: 150px; height: 4px; border-radius: 4px; background: #e6ecf3; position: relative; overflow: hidden; }
.ds-preloader__bar::after { content: ""; position: absolute; inset-block: 0; width: 45%; background: linear-gradient(90deg, var(--ds-blue), var(--ds-orange)); border-radius: 4px; animation: dsBar 1.1s ease-in-out infinite; }
@keyframes dsPulse { 50% { transform: scale(1.07); opacity: .85; } }
@keyframes dsBar { 0% { inset-inline-start: -45%; } 100% { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; animation: none !important; } .ds-float, .ds-preloader__box img, .ds-preloader__bar::after { animation: none; } html { scroll-behavior: auto; } }

/* ---------- misc third-party ---------- */
.swiper-button-next, .swiper-button-prev { color: var(--ds-blue); }
.pagination { gap: .3rem; flex-wrap: wrap; justify-content: center; }
.page-link { border-radius: 10px !important; border: 1px solid var(--ds-line); color: var(--ds-navy); padding: .5rem .9rem; }
.page-item.active .page-link { background: var(--ds-blue); border-color: var(--ds-blue); color: #fff; }
.modal-content { border: 0; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); }
.btn-primary { --bs-btn-bg: var(--ds-blue); --bs-btn-border-color: var(--ds-blue); --bs-btn-hover-bg: var(--ds-blue-600); --bs-btn-hover-border-color: var(--ds-blue-600); --bs-btn-active-bg: var(--ds-navy); --bs-btn-active-border-color: var(--ds-navy); }
#botmanWidgetRoot .desktop-closed-message-avatar { background: var(--ds-blue) !important; }
.linear-background { height: 260px; border-radius: 16px; background: linear-gradient(90deg, #eef2f8 25%, #f8fafd 37%, #eef2f8 63%); background-size: 400% 100%; animation: ds-shimmer 1.3s ease infinite; }
@keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* map */
.ds-map { margin-top: 2.4rem; border-radius: var(--ds-radius-lg); overflow: hidden; box-shadow: var(--ds-shadow); border: 1px solid var(--ds-line); }
.ds-map iframe { width: 100%; height: 360px; border: 0; display: block; }