/* ============================================================
   Lead to Leads — Bundled Stylesheet
   Project    : Lead to Leads (leadtoleads.com)
   Colors     : #5cb85c / #ffffff / #000000
   Namespace  : ksza...ltlb
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  --ksza-primary:   #5cb85c;
  --ksza-secondary: #ffffff;
  --ksza-helper:    #000000;
}

/* ===== Base / Global Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { direction: rtl; overflow-x: hidden; font-family: 'Cairo', 'Tajawal', sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }



/* ==== kszatbltlb ==== */
/* ============================================================
   KSZATBLTLB — Top-Bar
   Namespace  : kszatbltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszatbltlb {
  --kszatbltlb-primary:   var(--ksza-primary);
  --kszatbltlb-secondary: var(--ksza-secondary);
  --kszatbltlb-helper:    var(--ksza-helper);

  --kszatbltlb-padding-top:    0.5rem;
  --kszatbltlb-padding-bottom: 0.5rem;

  --kszatbltlb-icon-bg:    color-mix(in srgb, var(--kszatbltlb-secondary) 16%, transparent);
  --kszatbltlb-text-soft:  color-mix(in srgb, var(--kszatbltlb-secondary) 88%, transparent);
}

/* 2. Reset داخل الـ namespace */
.kszatbltlb *,
.kszatbltlb *::before,
.kszatbltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszatbltlb {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  direction: rtl;
  background: var(--kszatbltlb-primary);
  padding-top: var(--kszatbltlb-padding-top);
  padding-bottom: var(--kszatbltlb-padding-bottom);
}

.kszatbltlb__container {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.kszatbltlb__text {
  display: none;
  color: var(--kszatbltlb-text-soft);
  font-size: clamp(0.75rem, 3vw, 0.9rem);
  font-weight: 500;
}

.kszatbltlb__socials {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}

.kszatbltlb__socials-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--kszatbltlb-icon-bg);
  color: var(--kszatbltlb-secondary);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kszatbltlb__socials-link:hover,
.kszatbltlb__socials-link:focus-visible {
  background: var(--kszatbltlb-secondary);
  color: var(--kszatbltlb-primary);
  transform: translateY(-0.1rem);
}

.kszatbltlb__socials-link:focus-visible {
  outline: 0.15rem solid var(--kszatbltlb-secondary);
  outline-offset: 0.15rem;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszatbltlb__container {
    justify-content: space-between;
  }

  .kszatbltlb__text {
    display: block;
  }
}

@media (min-width: 769px) {
  .kszatbltlb__socials-link {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 1025px) {
  .kszatbltlb__text {
    font-size: 0.95rem;
  }
}

/* ==== kszahdrltlb ==== */
/* ============================================================
   KSZAHDRLTLB — Header / Navigation
   Namespace  : kszahdrltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszahdrltlb {
  --kszahdrltlb-primary:   var(--ksza-primary);
  --kszahdrltlb-secondary: var(--ksza-secondary);
  --kszahdrltlb-helper:    var(--ksza-helper);

  --kszahdrltlb-padding-top:    0;
  --kszahdrltlb-padding-bottom: 0;

  /* مشتقّات من الـ 3 متغيرات فقط */
  --kszahdrltlb-primary-dark: color-mix(in srgb, var(--kszahdrltlb-primary) 78%, var(--kszahdrltlb-helper));
  --kszahdrltlb-primary-soft: color-mix(in srgb, var(--kszahdrltlb-primary) 9%,  var(--kszahdrltlb-secondary));
  --kszahdrltlb-primary-line: color-mix(in srgb, var(--kszahdrltlb-primary) 18%, var(--kszahdrltlb-secondary));

  --kszahdrltlb-bg:         var(--kszahdrltlb-secondary);
  --kszahdrltlb-text:       var(--kszahdrltlb-helper);
  --kszahdrltlb-text-muted: color-mix(in srgb, var(--kszahdrltlb-helper) 55%, var(--kszahdrltlb-secondary));
  --kszahdrltlb-border:     var(--kszahdrltlb-primary-line);
  --kszahdrltlb-shadow:     0 0.5rem 1.5rem color-mix(in srgb, var(--kszahdrltlb-helper) 10%, transparent);

  --kszahdrltlb-overlay-bg: color-mix(in srgb, var(--kszahdrltlb-helper) 55%, transparent);

  --kszahdrltlb-container-max: 90rem;
  --kszahdrltlb-container-pad: 1.25rem;

  font-family: 'Cairo', 'Tajawal', sans-serif;
  direction: rtl;
  /* الـ sticky لازم يبقى على العنصر الجذر (اللي أبوه <body> وله مساحة سكرول حقيقية)
     مش على __main اللي أبوه (هذا العنصر) بالظبط بنفس ارتفاعه، عشان الـ sticky يشتغل صح */
  position: sticky;
  top: 0;
  z-index: 101;
  padding-top: var(--kszahdrltlb-padding-top);
  padding-bottom: var(--kszahdrltlb-padding-bottom);
}

/* 2. Reset داخل الـ namespace */
.kszahdrltlb *,
.kszahdrltlb *::before,
.kszahdrltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.kszahdrltlb a { text-decoration: none; color: inherit; }
.kszahdrltlb ul { list-style: none; }
.kszahdrltlb button { font-family: inherit; }

.kszahdrltlb :focus-visible {
  outline: 0.15rem solid var(--kszahdrltlb-primary);
  outline-offset: 0.15rem;
}

/* 3. Base Styles — Mobile */
.kszahdrltlb__container {
  max-width: var(--kszahdrltlb-container-max);
  margin-inline: auto;
  padding-inline: var(--kszahdrltlb-container-pad);
}

.kszahdrltlb__main {
  background: var(--kszahdrltlb-bg);
  border-bottom: 0.0625rem solid var(--kszahdrltlb-border);
  transition: box-shadow 0.25s ease, padding 0.25s ease;
  padding-block: 0.5rem;
}

.kszahdrltlb--scrolled .kszahdrltlb__main {
  box-shadow: var(--kszahdrltlb-shadow);
  padding-block: 0.55rem;
}

.kszahdrltlb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kszahdrltlb__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  max-width: calc(100% - 65px);
  min-width: 0;
  overflow: hidden;
}

.kszahdrltlb__logo {
  height: auto;
  max-height: 38px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: max-height 0.25s ease;
}

/* --- Actions (CTA + Hamburger) --- */
.kszahdrltlb__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kszahdrltlb__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--kszahdrltlb-primary);
  color: var(--kszahdrltlb-secondary);
  padding: 0.55rem 1.1rem;
  border-radius: 3rem;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.kszahdrltlb__cta:hover,
.kszahdrltlb__cta:focus-visible {
  background: var(--kszahdrltlb-primary-dark);
  transform: translateY(-0.1rem);
}

.kszahdrltlb__cta i { font-size: 1rem; }

.kszahdrltlb__hamburger {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.85rem;
  background: var(--kszahdrltlb-primary-soft);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.kszahdrltlb__hamburger:hover,
.kszahdrltlb__hamburger:focus-visible {
  background: var(--kszahdrltlb-primary-soft);
  transform: translateY(-0.05rem);
}

.kszahdrltlb__hamburger:active { transform: scale(0.94); }

.kszahdrltlb--nav-open .kszahdrltlb__hamburger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.kszahdrltlb__hamburger-box {
  position: relative;
  width: 1.15rem;
  height: 0.85rem;
}

.kszahdrltlb__hamburger-bar {
  position: absolute;
  inset-inline: 0;
  height: 0.135rem;
  background: var(--kszahdrltlb-helper);
  border-radius: 0.2rem;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, top 0.35s ease, background 0.2s ease;
}

.kszahdrltlb__hamburger-bar:nth-child(1) { top: 0; }
.kszahdrltlb__hamburger-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.kszahdrltlb__hamburger-bar:nth-child(3) { top: 100%; transform: translateY(-100%); }

.kszahdrltlb--nav-open .kszahdrltlb__hamburger-bar { background: var(--kszahdrltlb-primary); }
.kszahdrltlb--nav-open .kszahdrltlb__hamburger-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.kszahdrltlb--nav-open .kszahdrltlb__hamburger-bar:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); }
.kszahdrltlb--nav-open .kszahdrltlb__hamburger-bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* --- Nav drawer --- */
.kszahdrltlb__nav {
  position: fixed;
  z-index: 110; /* أعلى من الأوفرلاي (100) عشان الدروار يبان فوق الطبقة الرمادية */
  inset-block: 0;
  right: 0;
  width: min(82vw, 19rem);
  height: 100vh;
  background: var(--kszahdrltlb-secondary);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  padding: 1rem 1.1rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s;
  box-shadow: -0.5rem 0 2rem color-mix(in srgb, var(--kszahdrltlb-helper) 18%, transparent);
}

.kszahdrltlb--nav-open .kszahdrltlb__nav {
  transform: translateX(0);
  visibility: visible;
}

.kszahdrltlb__drawer-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-block-end: 0.5rem;
  margin-block-end: 0.4rem;
}

.kszahdrltlb__drawer-close {
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  background: var(--kszahdrltlb-primary-soft);
  color: var(--kszahdrltlb-primary-dark);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.kszahdrltlb__drawer-close:hover,
.kszahdrltlb__drawer-close:focus-visible {
  background: var(--kszahdrltlb-primary);
  color: var(--kszahdrltlb-secondary);
}

.kszahdrltlb__link {
  display: block;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kszahdrltlb-text);
  opacity: 0;
  transform: translateX(0.6rem);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.35s ease, transform 0.35s ease;
}

.kszahdrltlb--nav-open .kszahdrltlb__link {
  opacity: 1;
  transform: translateX(0);
}

.kszahdrltlb__link:hover,
.kszahdrltlb__link:focus-visible {
  background: var(--kszahdrltlb-primary-soft);
  color: var(--kszahdrltlb-primary-dark);
}

.kszahdrltlb__link--lang { color: var(--kszahdrltlb-primary-dark); }

/* --- Dropdown (mobile: accordion) --- */
.kszahdrltlb__dropdown {
  width: 100%;
  opacity: 0;
  transform: translateX(0.6rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.kszahdrltlb--nav-open .kszahdrltlb__dropdown {
  opacity: 1;
  transform: translateX(0);
}

.kszahdrltlb__dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  border-radius: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kszahdrltlb-text);
  padding: 0.7rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.kszahdrltlb__dropdown-toggle:hover,
.kszahdrltlb__dropdown-toggle:focus-visible {
  background: var(--kszahdrltlb-primary-soft);
  color: var(--kszahdrltlb-primary-dark);
}

.kszahdrltlb__dropdown-arrow {
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 0.11rem solid currentColor;
  border-block-end: 0.11rem solid currentColor;
  color: var(--kszahdrltlb-text-muted);
  transform: rotate(45deg);
  transition: transform 0.25s ease, color 0.2s ease;
  flex-shrink: 0;
}

.kszahdrltlb--dropdown-open .kszahdrltlb__dropdown-arrow {
  transform: rotate(-135deg);
  color: var(--kszahdrltlb-primary);
}

.kszahdrltlb__dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.kszahdrltlb--dropdown-open .kszahdrltlb__dropdown-menu {
  max-height: 62.5rem;
  padding-block: 0.3rem 0.5rem;
}

.kszahdrltlb__dropdown-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kszahdrltlb-text);
  transition: background 0.15s ease, color 0.15s ease;
}

.kszahdrltlb__dropdown-card:hover,
.kszahdrltlb__dropdown-card:focus-visible {
  background: var(--kszahdrltlb-primary-soft);
  color: var(--kszahdrltlb-primary-dark);
}

.kszahdrltlb__dropdown-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  background: var(--kszahdrltlb-primary-soft);
  flex-shrink: 0;
}

.kszahdrltlb__dropdown-icon {
  width: 1.05rem;
  height: 1.05rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--kszahdrltlb-primary-deep, var(--kszahdrltlb-primary-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Overlay --- */
.kszahdrltlb__overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: var(--kszahdrltlb-overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.kszahdrltlb--nav-open .kszahdrltlb__overlay {
  opacity: 1;
  visibility: visible;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 601px) {
  .kszahdrltlb__cta { display: inline-flex; }
}

@media (min-width: 769px) {
  .kszahdrltlb__nav { width: min(50vw, 21rem); }
}

@media (min-width: 1025px) {
  .kszahdrltlb__hamburger,
  .kszahdrltlb__drawer-head,
  .kszahdrltlb__overlay {
    display: none;
  }

  .kszahdrltlb__nav {
    position: static;
    z-index: auto;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    margin-inline-start: 2rem;
    box-shadow: none;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .kszahdrltlb__link {
    width: auto;
    padding: 0.5rem 0.85rem;
    opacity: 1;
    transform: none;
  }

  .kszahdrltlb__link--lang { margin-inline-start: 0.4rem; }

  .kszahdrltlb__dropdown {
    width: auto;
    position: relative;
    opacity: 1;
    transform: none;
  }

  .kszahdrltlb__dropdown-toggle {
    width: auto;
    padding: 0.5rem 0.85rem;
    gap: 0.45rem;
  }

  .kszahdrltlb__dropdown-menu {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    margin-block-start: 0.6rem;
    max-height: none;
    overflow: visible;
    width: 15.5rem;
    background: var(--kszahdrltlb-secondary);
    border-radius: 0.85rem;
    border: 0.0625rem solid var(--kszahdrltlb-border);
    box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--kszahdrltlb-helper) 14%, transparent);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.4rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .kszahdrltlb__dropdown:hover .kszahdrltlb__dropdown-menu,
  .kszahdrltlb--dropdown-open .kszahdrltlb__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (min-width: 1281px) {
  .kszahdrltlb__container { padding-inline: 2rem; }
  .kszahdrltlb__nav { gap: 0.5rem; }
}

@media (min-width: 1441px) {
  .kszahdrltlb__logo {
  height: auto;
  max-height: 38px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: max-height 0.25s ease;
}
}

@media (min-width: 1921px) {
  .kszahdrltlb__container { padding-inline: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kszahdrltlb * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}


/* ============================================================
   RESPONSIVE DESIGN FIXES
============================================================ */

/* Global Horizontal Scroll Protection */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Header Responsive Logo & Layout */
.kszahdrltlb__logo {
  height: auto;
  max-height: 38px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: max-height 0.25s ease;
}

@media (min-width: 601px) {
  .kszahdrltlb__logo {
  height: auto;
  max-height: 38px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: max-height 0.25s ease;
}
}

@media (min-width: 1025px) {
  .kszahdrltlb__logo {
    height: auto;
    max-height: 2.375rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    transition: max-height 0.25s ease;
  }
}

/* Logo Width Overflow Protection */
.kszahdrltlb__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  max-width: calc(100% - 4rem);
  min-width: 0;
  overflow: hidden;
}

.kszahdrltlb__logo {
  height: auto;
  max-height: 2.375rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (min-width: 601px) {
  .kszahdrltlb__brand {
    max-width: none;
  }
  .kszahdrltlb__logo {
    max-height: 3.25rem;
  }
}

/* Mobile Accordion Dropdown */
@media (max-width: 1024px) {
  .kszahdrltlb--dropdown-open .kszahdrltlb__dropdown-menu,
  .kszahdrltlb__dropdown.is-active .kszahdrltlb__dropdown-menu {
    display: flex;
    max-height: 125rem;
    opacity: 1;
    visibility: visible;
    padding-block: 0.5rem;
  }

  .kszahdrltlb__dropdown-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    color: var(--kszahdrltlb-text);
    font-size: 0.9rem;
    border-radius: 0.5rem;
  }

  .kszahdrltlb__dropdown-card:hover {
    background: var(--kszahdrltlb-primary-soft);
  }
}

/* ==== kszahroltlb ==== */
/* ============================================================
   KSZAHROLTLB — Hero
   Namespace  : kszahroltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */

/* 1. Variables & Colors (local ترث من :root) */
.kszahroltlb {
  --kszahroltlb-primary:   var(--ksza-primary);
  --kszahroltlb-secondary: var(--ksza-secondary);
  --kszahroltlb-helper:    var(--ksza-helper);

  --kszahroltlb-primary-soft:  color-mix(in srgb, var(--kszahroltlb-primary) 12%, var(--kszahroltlb-secondary));
  --kszahroltlb-primary-soft2: color-mix(in srgb, var(--kszahroltlb-primary) 26%, var(--kszahroltlb-secondary));
  --kszahroltlb-primary-deep:  color-mix(in srgb, var(--kszahroltlb-primary) 78%, var(--kszahroltlb-helper));

  --kszahroltlb-bg:    var(--kszahroltlb-secondary);
  --kszahroltlb-text:  color-mix(in srgb, var(--kszahroltlb-helper) 90%, var(--kszahroltlb-secondary));
  --kszahroltlb-title: color-mix(in srgb, var(--kszahroltlb-helper) 90%, var(--kszahroltlb-secondary));

  --kszahroltlb-card-bg:     color-mix(in srgb, var(--kszahroltlb-secondary) 85%, transparent);
  --kszahroltlb-card-border: color-mix(in srgb, var(--kszahroltlb-primary) 24%, var(--kszahroltlb-secondary));
  --kszahroltlb-card-text:   color-mix(in srgb, var(--kszahroltlb-helper) 90%, var(--kszahroltlb-secondary));
  --kszahroltlb-card-fill:   linear-gradient(180deg, var(--kszahroltlb-primary) 0%, var(--kszahroltlb-primary-deep) 100%);

  --kszahroltlb-circuit-line: color-mix(in srgb, var(--kszahroltlb-primary) 22%, transparent);
  --kszahroltlb-circuit-dot:  var(--kszahroltlb-primary);

  --kszahroltlb-padding-top:    2.5rem;
  --kszahroltlb-padding-bottom: 2.5rem;
}

/* 2. Reset داخل الـ namespace */
.kszahroltlb,
.kszahroltlb *,
.kszahroltlb *::before,
.kszahroltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszahroltlb {
  position: relative;
  overflow: hidden;
  direction: rtl;
  background: var(--kszahroltlb-bg);
  color: var(--kszahroltlb-text);
  font-family: 'Cairo', 'Tajawal', sans-serif;
  padding-top: var(--kszahroltlb-padding-top);
  padding-bottom: var(--kszahroltlb-padding-bottom);
}

.kszahroltlb a { text-decoration: none; color: inherit; }
.kszahroltlb ul { list-style: none; }

.kszahroltlb__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.kszahroltlb__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--kszahroltlb-primary) 8%, transparent) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, color-mix(in srgb, var(--kszahroltlb-primary) 8%, transparent) 0.0625rem, transparent 0.0625rem);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(ellipse at 50% 30%, var(--kszahroltlb-helper) 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, var(--kszahroltlb-helper) 30%, transparent 75%);
}

.kszahroltlb__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(4.5rem);
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, var(--kszahroltlb-primary-soft2), transparent 70%);
  animation: kszahroltlb-float 16s ease-in-out infinite;
}

.kszahroltlb__blob--1 {
  width: 55vw;
  height: 55vw;
  top: -18vw;
  inset-inline-end: -16vw;
}

.kszahroltlb__blob--2 {
  width: 42vw;
  height: 42vw;
  bottom: -16vw;
  inset-inline-start: -12vw;
  animation-delay: -8s;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--kszahroltlb-primary) 18%, var(--kszahroltlb-secondary)), transparent 70%);
}

.kszahroltlb__circuit {
  position: absolute;
  inset: -1.5rem;
  z-index: 0;
  width: calc(100% + 3rem);
  height: calc(100% + 3rem);
  opacity: 0.8;
  pointer-events: none;
}

.kszahroltlb__circuit-line {
  fill: none;
  stroke: var(--kszahroltlb-circuit-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kszahroltlb__circuit-line--sm { opacity: 0.6; }

.kszahroltlb__circuit-dot {
  fill: var(--kszahroltlb-circuit-dot);
  filter: drop-shadow(0 0 0.4rem var(--kszahroltlb-primary));
}

.kszahroltlb__circuit-dot--sm { opacity: 0.8; }

.kszahroltlb__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.kszahroltlb__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  text-align: start;
  max-width: 50rem;
}

.kszahroltlb__title {
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(1.75rem, 6.5vw, 3.4rem);
  color: var(--kszahroltlb-title);
  opacity: 0;
  transform: translateY(1.25rem);
  animation: kszahroltlb-fade-up 0.85s ease forwards;
  animation-delay: 0.15s;
}

.kszahroltlb__note {
  border-inline-start: 0.18rem solid var(--kszahroltlb-primary);
  padding-inline-start: 1rem;
  opacity: 0;
  transform: translateY(1rem);
  animation: kszahroltlb-fade-up 0.85s ease forwards;
  animation-delay: 0.35s;
}

.kszahroltlb__subtitle {
  font-size: clamp(0.92rem, 3.2vw, 1.08rem);
  line-height: 1.8;
  color: var(--kszahroltlb-text);
}

.kszahroltlb__cards-wrap {
  position: relative;
  width: 100%;
}

/* شبكة الكروت: 2 كارت في كل صف في الموبايل */
.kszahroltlb__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  perspective: 62.5rem;
}

.kszahroltlb__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.95rem 0.55rem;
  border-radius: 0.95rem;
  text-align: center;
  background: var(--kszahroltlb-card-bg);
  border: 0.0625rem solid var(--kszahroltlb-card-border);
  backdrop-filter: blur(0.6rem);
  box-shadow: 0 0.4rem 1.2rem -0.4rem color-mix(in srgb, var(--kszahroltlb-helper) 8%, transparent);
  transform-style: preserve-3d;
  opacity: 0;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}

.kszahroltlb__card[data-dir="right"] { transform: translateX(2rem); }
.kszahroltlb__card[data-dir="left"]  { transform: translateX(-2rem); }

.kszahroltlb__card.kszahroltlb--in {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.kszahroltlb__card:hover,
.kszahroltlb__card:focus-within {
  border-color: var(--kszahroltlb-primary);
  box-shadow: 0 0.8rem 2rem -0.4rem color-mix(in srgb, var(--kszahroltlb-primary) 35%, transparent);
  transform: translateY(-0.2rem);
}

.kszahroltlb__card-fill {
  position: absolute;
  inset: 0;
  height: 0%;
  background: var(--kszahroltlb-card-fill);
  transition: height 0.35s ease;
  z-index: 0;
}

.kszahroltlb__card:hover .kszahroltlb__card-fill,
.kszahroltlb__card:focus-within .kszahroltlb__card-fill {
  height: 100%;
}

.kszahroltlb__card-icon {
  position: relative;
  z-index: 1;
  font-size: 1.35rem;
  color: var(--kszahroltlb-primary);
  transition: color 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kszahroltlb__card:hover .kszahroltlb__card-icon,
.kszahroltlb__card:focus-within .kszahroltlb__card-icon {
  color: var(--kszahroltlb-secondary);
  transform: scale(1.12);
}

.kszahroltlb__card-label {
  position: relative;
  z-index: 1;
  font-size: clamp(0.78rem, 2.7vw, 0.92rem);
  font-weight: 700;
  color: var(--kszahroltlb-card-text);
  line-height: 1.35;
  transition: color 0.35s ease;
}

.kszahroltlb__card:hover .kszahroltlb__card-label,
.kszahroltlb__card:focus-within .kszahroltlb__card-label {
  color: var(--kszahroltlb-secondary);
}

.kszahroltlb__card-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ctad: الأزرار في آخر جزء من الهيرو بتصميم مميز وفخم */
.kszahroltlb__cta-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-block-start: 0.5rem;
  opacity: 0;
  transform: translateY(1rem);
  animation: kszahroltlb-fade-up 0.85s ease forwards;
  animation-delay: 0.5s;
}

.kszahroltlb__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.6rem;
  border-radius: 2.5rem;
  font-size: clamp(0.92rem, 3.2vw, 1.05rem);
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kszahroltlb__cta-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 0.95rem;
  transition: transform 0.25s ease;
}

.kszahroltlb__cta:hover .kszahroltlb__cta-icon-box {
  transform: scale(1.15) rotate(8deg);
}

.kszahroltlb__cta--call {
  background: linear-gradient(135deg, var(--kszahroltlb-primary) 0%, var(--kszahroltlb-primary-deep) 100%);
  color: var(--kszahroltlb-secondary);
  border: 0.0625rem solid var(--kszahroltlb-primary);
  box-shadow: 0 0.5rem 1.4rem -0.2rem color-mix(in srgb, var(--kszahroltlb-primary) 40%, transparent);
}

.kszahroltlb__cta--call .kszahroltlb__cta-icon-box {
  background: color-mix(in srgb, var(--kszahroltlb-secondary) 25%, transparent);
  color: var(--kszahroltlb-secondary);
}

.kszahroltlb__cta--call:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.8rem 2rem -0.2rem color-mix(in srgb, var(--kszahroltlb-primary) 55%, transparent);
}

.kszahroltlb__cta--whatsapp {
  background: var(--kszahroltlb-secondary);
  color: color-mix(in srgb, var(--kszahroltlb-primary) 85%, var(--kszahroltlb-helper));
  border: 0.12rem solid var(--kszahroltlb-primary);
  box-shadow: 0 0.35rem 1rem -0.2rem color-mix(in srgb, var(--kszahroltlb-helper) 8%, transparent);
}

.kszahroltlb__cta--whatsapp .kszahroltlb__cta-icon-box {
  background: color-mix(in srgb, var(--kszahroltlb-primary) 15%, transparent);
  color: var(--kszahroltlb-primary);
}

.kszahroltlb__cta--whatsapp:hover {
  background: var(--kszahroltlb-primary-soft);
  transform: translateY(-0.2rem);
  box-shadow: 0 0.7rem 1.6rem -0.2rem color-mix(in srgb, var(--kszahroltlb-primary) 25%, transparent);
}

@keyframes kszahroltlb-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kszahroltlb-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(2rem, 1.5rem) rotate(4deg); }
  66%      { transform: translate(-1.5rem, 2.5rem) rotate(-3deg); }
}

/* 4. Breakpoints بالترتيب (min-width فقط) */
@media (min-width: 481px) {
  .kszahroltlb__cta-group {
    flex-direction: row;
    justify-content: center;
    max-width: 34rem;
    margin-inline: auto;
  }
  .kszahroltlb__cta {
    flex: 1 1 50%;
  }
}

@media (min-width: 601px) {
  .kszahroltlb {
    --kszahroltlb-padding-top: 3.5rem;
    --kszahroltlb-padding-bottom: 3.5rem;
  }
  .kszahroltlb__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
  }
  .kszahroltlb__card {
    padding: 1.2rem 0.75rem;
    gap: 0.6rem;
  }
  .kszahroltlb__card-icon {
    font-size: 1.6rem;
  }
}

@media (min-width: 1025px) {
  .kszahroltlb {
    --kszahroltlb-padding-top: 4.5rem;
    --kszahroltlb-padding-bottom: 4.5rem;
  }
  .kszahroltlb__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .kszahroltlb__card {
    padding: 1.45rem 1rem;
  }
}

@media (min-width: 1441px) {
  .kszahroltlb__container {
    max-width: 88rem;
  }
}

/* ==== kszaptltlb ==== */
/* ============================================================
   KSZAPTLTLB — Points (كيف نضمن نجاحك؟)
   Namespace  : kszaptltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszaptltlb {
  --kszaptltlb-primary:   var(--ksza-primary);
  --kszaptltlb-secondary: var(--ksza-secondary);
  --kszaptltlb-helper:    var(--ksza-helper);

  --kszaptltlb-bg-light:    color-mix(in srgb, var(--kszaptltlb-helper) 2%, var(--kszaptltlb-secondary));
  --kszaptltlb-text-dark:   color-mix(in srgb, var(--kszaptltlb-helper) 85%, var(--kszaptltlb-secondary));
  --kszaptltlb-text-muted:  color-mix(in srgb, var(--kszaptltlb-helper) 55%, var(--kszaptltlb-secondary));
  --kszaptltlb-card-border: color-mix(in srgb, var(--kszaptltlb-helper) 6%, var(--kszaptltlb-secondary));
  --kszaptltlb-shadow-base:  color-mix(in srgb, var(--kszaptltlb-helper) 3%, transparent);
  --kszaptltlb-shadow-hover: color-mix(in srgb, var(--kszaptltlb-primary) 12%, transparent);

  --kszaptltlb-padding-top:    4rem;
  --kszaptltlb-padding-bottom: 4rem;
}

/* 2. Reset داخل الـ namespace */
.kszaptltlb *,
.kszaptltlb *::before,
.kszaptltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszaptltlb {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  direction: rtl;
  background-color: var(--kszaptltlb-bg-light);
  color: var(--kszaptltlb-text-dark);
  padding-top: var(--kszaptltlb-padding-top);
  padding-bottom: var(--kszaptltlb-padding-bottom);
  line-height: 1.7;
  overflow: hidden;
}

.kszaptltlb__container {
  width: 100%;
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.kszaptltlb__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.kszaptltlb__title {
  font-size: clamp(1.65rem, 5vw, 2.3rem);
  color: var(--kszaptltlb-helper);
  font-weight: 700;
}

.kszaptltlb__content { width: 100%; }

.kszaptltlb__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.kszaptltlb__card {
  background-color: var(--kszaptltlb-secondary);
  border: 0.0625rem solid var(--kszaptltlb-card-border);
  border-radius: 1.25rem;
  padding: 2.75rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-shadow: 0 0.5rem 2rem var(--kszaptltlb-shadow-base);
  opacity: 0;
  animation: kszaptltlbFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

.kszaptltlb__grid .kszaptltlb__card:nth-child(1) { animation-delay: 0.1s; }
.kszaptltlb__grid .kszaptltlb__card:nth-child(2) { animation-delay: 0.2s; }
.kszaptltlb__grid .kszaptltlb__card:nth-child(3) { animation-delay: 0.3s; }
.kszaptltlb__grid .kszaptltlb__card:nth-child(4) { animation-delay: 0.4s; }
.kszaptltlb__grid .kszaptltlb__card:nth-child(5) { animation-delay: 0.5s; }

@keyframes kszaptltlbFadeInUp {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.kszaptltlb__card:hover {
  transform: translateY(-0.5rem);
  border-color: color-mix(in srgb, var(--kszaptltlb-primary) 40%, var(--kszaptltlb-secondary));
  box-shadow: 0 1rem 2.5rem var(--kszaptltlb-shadow-hover);
}

.kszaptltlb__icon-wrapper {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kszaptltlb__icon-box {
  width: 4.5rem;
  height: 4.5rem;
  aspect-ratio: 1 / 1;
  background-color: color-mix(in srgb, var(--kszaptltlb-primary) 10%, var(--kszaptltlb-secondary));
  color: var(--kszaptltlb-primary);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.4s ease,
              color 0.4s ease;
}

.kszaptltlb__card:hover .kszaptltlb__icon-box {
  transform: scale(1.15);
  background-color: var(--kszaptltlb-primary);
  color: var(--kszaptltlb-secondary);
}

.kszaptltlb__card-title {
  font-size: clamp(1.25rem, 4.5vw, 1.4rem);
  color: var(--kszaptltlb-helper);
  font-weight: 700;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.kszaptltlb__card:hover .kszaptltlb__card-title {
  color: var(--kszaptltlb-primary);
}

.kszaptltlb__card-text {
  font-size: clamp(0.96rem, 3.8vw, 1.02rem);
  color: var(--kszaptltlb-text-muted);
  text-align: justify;
  text-align-last: center;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszaptltlb__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 601px) {
  .kszaptltlb {
    --kszaptltlb-padding-top: 5rem;
    --kszaptltlb-padding-bottom: 5rem;
  }
}

@media (min-width: 769px) {
  .kszaptltlb__grid { gap: 2rem; }
}

@media (min-width: 1025px) {
  .kszaptltlb {
    --kszaptltlb-padding-top: 6rem;
    --kszaptltlb-padding-bottom: 6rem;
  }
  .kszaptltlb__grid { grid-template-columns: repeat(6, 1fr); }
  .kszaptltlb__grid .kszaptltlb__card { grid-column: span 2; }
  .kszaptltlb__grid .kszaptltlb__card:nth-child(4) { grid-column: 2 / span 2; }
  .kszaptltlb__grid .kszaptltlb__card:nth-child(5) { grid-column: 4 / span 2; }
}

@media (min-width: 1281px) {
  .kszaptltlb__container { padding-right: 0; padding-left: 0; }
}

@media (min-width: 1441px) {
  .kszaptltlb__title { font-size: 2.6rem; }
}

@media (min-width: 1921px) {
  .kszaptltlb {
    --kszaptltlb-padding-top: 7.5rem;
    --kszaptltlb-padding-bottom: 7.5rem;
  }
}

/* ==== kszafqltlb ==== */
/* ============================================================
   KSZAFQLTLB — FAQ (الأسئلة الشائعة)
   Namespace  : kszafqltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszafqltlb {
  --kszafqltlb-primary:   var(--ksza-primary);
  --kszafqltlb-secondary: var(--ksza-secondary);
  --kszafqltlb-helper:    var(--ksza-helper);

  --kszafqltlb-primary-soft: color-mix(in srgb, var(--kszafqltlb-primary) 10%, var(--kszafqltlb-secondary));
  --kszafqltlb-primary-deep: color-mix(in srgb, var(--kszafqltlb-primary) 78%, var(--kszafqltlb-helper));
  --kszafqltlb-helper-soft:  color-mix(in srgb, var(--kszafqltlb-helper) 55%, var(--kszafqltlb-secondary));

  --kszafqltlb-bg:     var(--kszafqltlb-secondary);
  --kszafqltlb-text:   color-mix(in srgb, var(--kszafqltlb-helper) 88%, var(--kszafqltlb-secondary));

  --kszafqltlb-padding-top:    4.5rem;
  --kszafqltlb-padding-bottom: 4.5rem;
}

/* 2. Reset داخل الـ namespace */
.kszafqltlb,
.kszafqltlb *,
.kszafqltlb *::before,
.kszafqltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszafqltlb {
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  background-color: var(--kszafqltlb-bg);
  color: var(--kszafqltlb-text);
  padding-top: var(--kszafqltlb-padding-top);
  padding-bottom: var(--kszafqltlb-padding-bottom);
}

.kszafqltlb__container {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.kszafqltlb__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.kszafqltlb__eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  letter-spacing: 0.08em;
  color: var(--kszafqltlb-primary-deep);
  background-color: var(--kszafqltlb-primary-soft);
  padding: 0.4rem 1rem;
  border-radius: 3rem;
  margin-bottom: 0.9rem;
}

.kszafqltlb__title {
  color: var(--kszafqltlb-helper);
  font-weight: 700;
  font-size: clamp(1.4rem, 5.5vw, 2.25rem);
  line-height: 1.35;
}

.kszafqltlb__rule {
  display: block;
  width: 3.5rem;
  height: 0.22rem;
  border-radius: 1rem;
  background-color: var(--kszafqltlb-primary);
  margin: 1.1rem auto 0;
}

/* --- القائمة --- */
.kszafqltlb__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kszafqltlb__item {
  position: relative;
  background-color: var(--kszafqltlb-secondary);
  border: 0.06rem solid var(--kszafqltlb-primary-soft);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.kszafqltlb__item[open] {
  border-color: var(--kszafqltlb-primary);
}

.kszafqltlb__item > summary { list-style: none; }
.kszafqltlb__item > summary::-webkit-details-marker { display: none; }

.kszafqltlb__summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  padding-inline-start: 1.5rem;
  cursor: pointer;
}

.kszafqltlb__rail {
  position: absolute;
  inset-block: 0.6rem;
  inset-inline-start: 0;
  width: 0.2rem;
  border-radius: 1rem;
  background-color: var(--kszafqltlb-primary-soft);
  transition: background-color 0.3s ease;
}

.kszafqltlb__item[open] .kszafqltlb__rail {
  background-color: var(--kszafqltlb-primary);
}

.kszafqltlb__question {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  color: var(--kszafqltlb-helper);
  line-height: 1.5;
}

.kszafqltlb__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--kszafqltlb-primary-soft);
  color: var(--kszafqltlb-primary-deep);
  font-size: 0.85rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.kszafqltlb__toggle i { transition: transform 0.3s ease; }

.kszafqltlb__item[open] .kszafqltlb__toggle {
  background-color: var(--kszafqltlb-primary);
  color: var(--kszafqltlb-secondary);
}

.kszafqltlb__item[open] .kszafqltlb__toggle i {
  transform: rotate(45deg);
}

/* --- المحتوى --- */
.kszafqltlb__panel {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.kszafqltlb__panelinner {
  padding: 0 1.25rem 1.25rem 1.25rem;
  padding-inline-start: calc(1.5rem + 1rem);
}

.kszafqltlb__answer {
  font-weight: 400;
  font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  line-height: 1.75;
  color: var(--kszafqltlb-helper-soft);
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszafqltlb__summary {
    padding: 1.3rem 1.5rem;
    padding-inline-start: 1.75rem;
  }
}

@media (min-width: 601px) {
  .kszafqltlb__title {
    max-width: 34rem;
    margin-inline: auto;
  }
}

@media (min-width: 769px) {
  .kszafqltlb__container { padding-inline: 2.5rem; }
  .kszafqltlb__list { gap: 1.25rem; }
  .kszafqltlb__question { font-size: 1.15rem; }
}

@media (min-width: 1025px) {
  .kszafqltlb {
    --kszafqltlb-padding-top: 6rem;
    --kszafqltlb-padding-bottom: 6rem;
  }
  .kszafqltlb__summary:hover .kszafqltlb__toggle {
    background-color: var(--kszafqltlb-primary);
    color: var(--kszafqltlb-secondary);
  }
}

@media (min-width: 1281px) {
  .kszafqltlb__container { max-width: 60rem; }
}

@media (min-width: 1441px) {
  .kszafqltlb__title { font-size: 2.5rem; }
}

@media (min-width: 1921px) {
  .kszafqltlb__container { max-width: 66rem; }
}

/* ==== kszasrvltlb ==== */
/* ============================================================
   KSZASRVLTLB — Services (خدماتنا الرقمية والتسويقية)
   Namespace  : kszasrvltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */

/* 1. Variables & Colors (local ترث من :root) */
.kszasrvltlb {
  --kszasrvltlb-bg:          color-mix(in srgb, var(--ksza-secondary) 96%, var(--ksza-primary));
  --kszasrvltlb-text:        color-mix(in srgb, var(--ksza-helper) 80%, var(--ksza-secondary));
  --kszasrvltlb-title:       var(--ksza-helper);
  --kszasrvltlb-subtitle:    color-mix(in srgb, var(--ksza-helper) 70%, var(--ksza-secondary));
  --kszasrvltlb-card-bg:     var(--ksza-secondary);
  --kszasrvltlb-card-border: color-mix(in srgb, var(--ksza-primary) 18%, var(--ksza-secondary));
  --kszasrvltlb-card-hover:  color-mix(in srgb, var(--ksza-primary) 8%, var(--ksza-secondary));
  --kszasrvltlb-card-title:  var(--ksza-helper);
  --kszasrvltlb-card-text:   color-mix(in srgb, var(--ksza-helper) 75%, var(--ksza-secondary));
  --kszasrvltlb-card-btn:    var(--ksza-primary);
  --kszasrvltlb-btn-text:    var(--ksza-secondary);
  --kszasrvltlb-btn-bg:      var(--ksza-primary);
  --kszasrvltlb-btn-hover:   color-mix(in srgb, var(--ksza-primary) 80%, var(--ksza-helper));
  --kszasrvltlb-tag-bg:      color-mix(in srgb, var(--ksza-primary) 12%, var(--ksza-secondary));
  --kszasrvltlb-tag-text:    color-mix(in srgb, var(--ksza-primary) 85%, var(--ksza-helper));
  --kszasrvltlb-shadow:      color-mix(in srgb, var(--ksza-helper) 7%, transparent);
  --kszasrvltlb-glow:        color-mix(in srgb, var(--ksza-primary) 25%, transparent);

  --kszasrvltlb-padding-top:    3.5rem;
  --kszasrvltlb-padding-bottom: 3.5rem;
}

/* 2. Reset داخل الـ namespace */
.kszasrvltlb *,
.kszasrvltlb *::before,
.kszasrvltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszasrvltlb {
  position: relative;
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  background-color: var(--kszasrvltlb-bg);
  color: var(--kszasrvltlb-text);
  padding-top: var(--kszasrvltlb-padding-top);
  padding-bottom: var(--kszasrvltlb-padding-bottom);
  overflow: hidden;
}

.kszasrvltlb__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.kszasrvltlb__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(4rem);
  opacity: 0.45;
}

.kszasrvltlb__orb--start {
  width: 18rem;
  height: 18rem;
  inset-inline-start: -6rem;
  inset-block-start: 10%;
  background: radial-gradient(circle, var(--kszasrvltlb-glow) 0%, transparent 70%);
}

.kszasrvltlb__orb--end {
  width: 22rem;
  height: 22rem;
  inset-inline-end: -8rem;
  inset-block-end: 5%;
  background: radial-gradient(circle, var(--kszasrvltlb-glow) 0%, transparent 70%);
}

.kszasrvltlb__mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ksza-primary) 12%, transparent) 0.08rem, transparent 0.08rem);
  background-size: 1.5rem 1.5rem;
  opacity: 0.35;
}

.kszasrvltlb__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.kszasrvltlb__header {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
  margin-block-end: 2.5rem;
}

.kszasrvltlb__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 2rem;
  background: var(--kszasrvltlb-tag-bg);
  color: var(--kszasrvltlb-tag-text);
  font-size: clamp(0.78rem, 2.5vw, 0.88rem);
  font-weight: 700;
  margin-block-end: 0.85rem;
  border: 0.0625rem solid color-mix(in srgb, var(--ksza-primary) 30%, transparent);
}

.kszasrvltlb__badge-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--ksza-primary);
  box-shadow: 0 0 0.5rem var(--ksza-primary);
}

.kszasrvltlb__title {
  color: var(--kszasrvltlb-title);
  font-size: clamp(1.45rem, 4.5vw, 2.35rem);
  font-weight: 800;
  line-height: 1.35;
  margin-block-end: 0.9rem;
}

.kszasrvltlb__subtitle {
  color: var(--kszasrvltlb-subtitle);
  font-size: clamp(0.9rem, 2.8vw, 1.05rem);
  line-height: 1.7;
}

.kszasrvltlb__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* بطاقة الخدمة مع شكل هندسي مقصوص وزاوية تفاعلية */
.kszasrvltlb__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kszasrvltlb-card-bg);
  border: 0.0625rem solid var(--kszasrvltlb-card-border);
  border-radius: 1.2rem;
  padding: 1.5rem;
  box-shadow: 0 0.4rem 1.2rem -0.2rem var(--kszasrvltlb-shadow);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease,
              background-color 0.3s ease;
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 0 100%);
  overflow: hidden;
}

.kszasrvltlb__card-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ksza-primary) 8%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.kszasrvltlb__card:hover {
  transform: translateY(-0.35rem);
  border-color: var(--ksza-primary);
  box-shadow: 0 0.9rem 2.2rem -0.4rem var(--kszasrvltlb-glow);
  background-color: var(--kszasrvltlb-card-hover);
}

.kszasrvltlb__card:hover .kszasrvltlb__card-sheen {
  opacity: 1;
}

.kszasrvltlb__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1.2rem;
}

.kszasrvltlb__icon-box {
  width: 3.2rem;
  height: 3.2rem;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--ksza-primary), color-mix(in srgb, var(--ksza-primary) 70%, var(--ksza-helper)));
  color: var(--ksza-secondary);
  box-shadow: 0 0.35rem 0.85rem -0.2rem var(--kszasrvltlb-glow);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kszasrvltlb__card:hover .kszasrvltlb__icon-box {
  transform: scale(1.08) rotate(-4deg);
}

.kszasrvltlb__icon {
  font-size: 1.25rem;
  display: inline-flex;
}

.kszasrvltlb__card-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 0.5rem;
  background: var(--kszasrvltlb-tag-bg);
  color: var(--kszasrvltlb-tag-text);
  border: 0.0625rem solid color-mix(in srgb, var(--ksza-primary) 20%, transparent);
}

.kszasrvltlb__card-body {
  flex: 1 1 auto;
  margin-block-end: 1.4rem;
}

.kszasrvltlb__card-title {
  color: var(--kszasrvltlb-card-title);
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  margin-block-end: 0.6rem;
}

.kszasrvltlb__card-text {
  color: var(--kszasrvltlb-card-text);
  font-size: 0.92rem;
  line-height: 1.65;
}

.kszasrvltlb__card-footer {
  margin-block-start: auto;
}

.kszasrvltlb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1.1rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--ksza-primary) 10%, var(--ksza-secondary));
  color: color-mix(in srgb, var(--ksza-primary) 90%, var(--ksza-helper));
  border: 0.0625rem solid color-mix(in srgb, var(--ksza-primary) 30%, transparent);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.kszasrvltlb__btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--ksza-primary);
  color: var(--ksza-secondary);
  font-size: 0.75rem;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.kszasrvltlb__btn:hover,
.kszasrvltlb__card:hover .kszasrvltlb__btn {
  background: var(--kszasrvltlb-btn-bg);
  color: var(--kszasrvltlb-btn-text);
  border-color: var(--ksza-primary);
  box-shadow: 0 0.35rem 0.9rem -0.2rem var(--kszasrvltlb-glow);
}

.kszasrvltlb__btn:hover .kszasrvltlb__btn-arrow,
.kszasrvltlb__card:hover .kszasrvltlb__btn .kszasrvltlb__btn-arrow {
  transform: translateX(-0.3rem);
  background: var(--ksza-secondary);
  color: var(--ksza-primary);
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszasrvltlb__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 769px) {
  .kszasrvltlb {
    --kszasrvltlb-padding-top: 4.5rem;
    --kszasrvltlb-padding-bottom: 4.5rem;
  }
  .kszasrvltlb__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }
}

@media (min-width: 1025px) {
  .kszasrvltlb {
    --kszasrvltlb-padding-top: 5.5rem;
    --kszasrvltlb-padding-bottom: 5.5rem;
  }
  .kszasrvltlb__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .kszasrvltlb__header {
    margin-block-end: 3.5rem;
  }
}

@media (min-width: 1441px) {
  .kszasrvltlb__container {
    max-width: 88rem;
  }
}

/* ==== kszaprwltlb ==== */
/* ============================================================
   KSZAPRWLTLB — Previous-Work (معرض الأعمال)
   Namespace  : kszaprwltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszaprwltlb {
  --kszaprwltlb-primary:   var(--ksza-primary);
  --kszaprwltlb-secondary: var(--ksza-secondary);
  --kszaprwltlb-helper:    var(--ksza-helper);

  --kszaprwltlb-primary-soft: color-mix(in srgb, var(--kszaprwltlb-primary) 12%, var(--kszaprwltlb-secondary));
  --kszaprwltlb-primary-mid:  color-mix(in srgb, var(--kszaprwltlb-primary) 45%, var(--kszaprwltlb-secondary));
  --kszaprwltlb-primary-deep: color-mix(in srgb, var(--kszaprwltlb-primary) 78%, var(--kszaprwltlb-helper));
  --kszaprwltlb-helper-soft:  color-mix(in srgb, var(--kszaprwltlb-helper) 55%, var(--kszaprwltlb-secondary));

  --kszaprwltlb-bg:          var(--kszaprwltlb-secondary);
  --kszaprwltlb-text:        color-mix(in srgb, var(--kszaprwltlb-helper) 88%, var(--kszaprwltlb-secondary));
  --kszaprwltlb-chrome-bg:   color-mix(in srgb, var(--kszaprwltlb-helper) 4%, var(--kszaprwltlb-secondary));
  --kszaprwltlb-card-border: var(--kszaprwltlb-primary-soft);
  --kszaprwltlb-dot:         var(--kszaprwltlb-primary-mid);

  --kszaprwltlb-padding-top:    4.5rem;
  --kszaprwltlb-padding-bottom: 4.5rem;
}

/* 2. Reset داخل الـ namespace */
.kszaprwltlb,
.kszaprwltlb *,
.kszaprwltlb *::before,
.kszaprwltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszaprwltlb {
  direction: rtl;
  position: relative;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  background-color: var(--kszaprwltlb-bg);
  color: var(--kszaprwltlb-text);
  padding-top: var(--kszaprwltlb-padding-top);
  padding-bottom: var(--kszaprwltlb-padding-bottom);
  overflow: hidden;
}

.kszaprwltlb__glow {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -15%;
  width: 45rem;
  height: 45rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kszaprwltlb-primary-soft) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.kszaprwltlb__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.kszaprwltlb__header {
  text-align: center;
  margin-bottom: 2.25rem;
}

.kszaprwltlb__eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  letter-spacing: 0.08em;
  color: var(--kszaprwltlb-primary-deep);
  background-color: var(--kszaprwltlb-primary-soft);
  padding: 0.4rem 1rem;
  border-radius: 3rem;
  margin-bottom: 0.9rem;
}

.kszaprwltlb__title {
  color: var(--kszaprwltlb-helper);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.5vw, 2.6rem);
  line-height: 1.3;
}

.kszaprwltlb__rule {
  display: block;
  width: 3.5rem;
  height: 0.22rem;
  border-radius: 1rem;
  background-color: var(--kszaprwltlb-primary);
  margin: 1.1rem auto 0;
}

/* --- صف التبويبات --- */
.kszaprwltlb__tabsrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.75rem;
}

.kszaprwltlb__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  background-color: var(--kszaprwltlb-primary-soft);
  color: var(--kszaprwltlb-primary-deep);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.kszaprwltlb__arrow:hover {
  background-color: var(--kszaprwltlb-primary);
  color: var(--kszaprwltlb-secondary);
}

.kszaprwltlb__arrow:focus-visible {
  outline: 0.15rem solid var(--kszaprwltlb-primary);
  outline-offset: 0.15rem;
}

.kszaprwltlb__tabswrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.kszaprwltlb__tabsview {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.kszaprwltlb__tabsview::-webkit-scrollbar { display: none; }

.kszaprwltlb__tabstrack {
  position: relative;
  display: flex;
  gap: 0.3rem;
  width: max-content;
  background-color: var(--kszaprwltlb-chrome-bg);
  border-radius: 3rem;
  padding: 0.3rem;
}

.kszaprwltlb__tabindicator {
  position: absolute;
  inset-block: 0.3rem;
  left: 0.3rem;
  width: 0;
  border-radius: 3rem;
  background-color: var(--kszaprwltlb-primary);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}

.kszaprwltlb__tab {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border: none;
  background-color: transparent;
  color: var(--kszaprwltlb-helper-soft);
  font-family: inherit;
  font-size: clamp(0.8rem, 2.5vw, 0.95rem);
  font-weight: 600;
  padding: 0.6rem 1.15rem;
  border-radius: 3rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.kszaprwltlb__tab--active { color: var(--kszaprwltlb-secondary); }

.kszaprwltlb__tab:focus-visible {
  outline: 0.15rem solid var(--kszaprwltlb-primary-deep);
  outline-offset: 0.1rem;
}

/* --- البانلات --- */
.kszaprwltlb__panel { display: none; }
.kszaprwltlb__panel--active { display: block; }

.kszaprwltlb__empty {
  text-align: center;
  color: var(--kszaprwltlb-helper-soft);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  padding-block: 3rem;
}

.kszaprwltlb__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3.25rem 1.75rem;
}

.kszaprwltlb__card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* منصّة خضراء فوق بس، والجهازين نازلين منها ومتدلّيين تحت حافتها */
.kszaprwltlb__mock {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  width: 100%;
  padding: 1.2rem 1rem 0;
  perspective: 55rem;
}

.kszaprwltlb__mock::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  inset-block-end: 2.4rem;
  border-radius: 1rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--kszaprwltlb-primary) 30%, var(--kszaprwltlb-secondary)) 0%,
    color-mix(in srgb, var(--kszaprwltlb-primary) 15%, var(--kszaprwltlb-secondary)) 100%);
  box-shadow:
    inset 0 -0.6rem 1rem -0.6rem color-mix(in srgb, var(--kszaprwltlb-helper) 20%, transparent),
    0 0.8rem 2rem -0.9rem color-mix(in srgb, var(--kszaprwltlb-primary) 45%, transparent);
}

/* الديسكتوب = متصفح + شاشة فوق بعض */
.kszaprwltlb__frame {
  flex: 1 1 auto;
  min-width: 0;
  transform: rotateY(9deg) rotateX(2deg);
  transform-origin: right center;
  box-shadow: -0.7rem 1rem 2rem -0.7rem color-mix(in srgb, var(--kszaprwltlb-helper) 32%, transparent);
  border-radius: 0.7rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.kszaprwltlb__card:hover .kszaprwltlb__frame {
  transform: rotateY(0) rotateX(0) translateY(-0.3rem);
}

.kszaprwltlb__browser {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--kszaprwltlb-helper);
  border-radius: 0.7rem 0.7rem 0 0;
  padding: 0.55rem 0.8rem;
}

.kszaprwltlb__dot {
  width: 0.5rem;
  height: 0.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--kszaprwltlb-secondary) 35%, transparent);
}

.kszaprwltlb__dot:first-child {
  background-color: color-mix(in srgb, var(--kszaprwltlb-primary) 70%, var(--kszaprwltlb-secondary));
}

.kszaprwltlb__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 0.22rem solid var(--kszaprwltlb-helper);
  border-top: none;
  border-radius: 0 0 0.7rem 0.7rem;
  background-color: color-mix(in srgb, var(--kszaprwltlb-helper) 4%, var(--kszaprwltlb-secondary));
}

.kszaprwltlb__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.5s ease;
}

.kszaprwltlb__card:hover .kszaprwltlb__screen img { transform: scale(1.04); }

.kszaprwltlb__phone {
  flex: 0 0 auto;
  align-self: flex-end;
  width: clamp(3.4rem, 26%, 5.25rem);
  aspect-ratio: 9 / 18.5;
  background-color: var(--kszaprwltlb-helper);
  border-radius: 0.9rem;
  padding: 0.26rem;
  transform: rotateY(-12deg) rotateX(2deg);
  transform-origin: left center;
  box-shadow: 0.6rem 1rem 1.8rem -0.5rem color-mix(in srgb, var(--kszaprwltlb-helper) 38%, transparent);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.kszaprwltlb__card:hover .kszaprwltlb__phone {
  transform: rotateY(0) rotateX(0) translateY(-0.4rem);
}

@media (prefers-reduced-motion: reduce) {
  .kszaprwltlb__frame,
  .kszaprwltlb__phone {
    transform: none !important;
    transition: none !important;
  }
}

.kszaprwltlb__phonescreen {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 18.5;
  border-radius: 0.62rem;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--kszaprwltlb-helper) 4%, var(--kszaprwltlb-secondary));
}

.kszaprwltlb__phonescreen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.kszaprwltlb__info { padding-inline-start: 0.2rem; }

.kszaprwltlb__label {
  color: var(--kszaprwltlb-helper);
  font-weight: 700;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  margin-bottom: 0.35rem;
}

.kszaprwltlb__desc {
  color: var(--kszaprwltlb-helper-soft);
  font-weight: 400;
  font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  line-height: 1.55;
  margin-bottom: 0.9rem;
}

.kszaprwltlb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--kszaprwltlb-primary-deep);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  padding: 0;
  border-bottom: 0.09rem solid var(--kszaprwltlb-primary-deep);
  transition: gap 0.2s ease, color 0.2s ease;
}

.kszaprwltlb__btn:hover {
  gap: 0.75rem;
  color: var(--kszaprwltlb-primary);
}

.kszaprwltlb__btn i { font-size: 0.75rem; }

/* --- عرض محدود + زر عرض المزيد --- */
.kszaprwltlb__card--hidden { display: none; }

.kszaprwltlb__more {
  display: block;
  margin: 2.5rem auto 0;
  padding: 0.8rem 2.25rem;
  border-radius: 3rem;
  border: 0.125rem solid var(--kszaprwltlb-primary);
  background: transparent;
  color: var(--kszaprwltlb-primary-deep);
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.88rem, 3vw, 1rem);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kszaprwltlb__more:hover,
.kszaprwltlb__more:focus-visible {
  background: var(--kszaprwltlb-primary);
  color: var(--kszaprwltlb-secondary);
  transform: translateY(-0.15rem);
  outline: none;
}

.kszaprwltlb__more[hidden] { display: none; }

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszaprwltlb__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
  .kszaprwltlb__container { padding-inline: 2.5rem; }
  .kszaprwltlb__grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
  .kszaprwltlb__arrow { width: 2.75rem; height: 2.75rem; }
}

@media (min-width: 1025px) {
  .kszaprwltlb {
    --kszaprwltlb-padding-top: 6rem;
    --kszaprwltlb-padding-bottom: 6rem;
  }
  .kszaprwltlb__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1281px) {
  .kszaprwltlb__container { padding-inline: 4rem; }
}

@media (min-width: 1441px) {
  .kszaprwltlb__title { font-size: 2.75rem; }
}

@media (min-width: 1921px) {
  .kszaprwltlb__container { max-width: 100rem; }
}

/* ==== kszatstltlb ==== */
/* ============================================================
   KSZATSTLTLB — Testimonial (آراء العملاء)
   Namespace  : kszatstltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszatstltlb {
  --kszatstltlb-primary:   var(--ksza-primary);
  --kszatstltlb-secondary: var(--ksza-secondary);
  --kszatstltlb-helper:    var(--ksza-helper);

  --kszatstltlb-primary-soft:  color-mix(in srgb, var(--kszatstltlb-primary) 10%, var(--kszatstltlb-secondary));
  --kszatstltlb-primary-soft2: color-mix(in srgb, var(--kszatstltlb-primary) 22%, var(--kszatstltlb-secondary));
  --kszatstltlb-primary-deep:  color-mix(in srgb, var(--kszatstltlb-primary) 80%, var(--kszatstltlb-helper));

  --kszatstltlb-bg:          var(--kszatstltlb-secondary);
  --kszatstltlb-text:        color-mix(in srgb, var(--kszatstltlb-helper) 88%, var(--kszatstltlb-secondary));
  --kszatstltlb-card-border: color-mix(in srgb, var(--kszatstltlb-helper) 6%, transparent);
  --kszatstltlb-circuit-line: color-mix(in srgb, var(--kszatstltlb-primary) 20%, transparent);
  --kszatstltlb-circuit-dot:  var(--kszatstltlb-primary);

  --kszatstltlb-dock-bg:      var(--kszatstltlb-helper);
  --kszatstltlb-dock-text:    var(--kszatstltlb-secondary);
  --kszatstltlb-dock-divider: color-mix(in srgb, var(--kszatstltlb-secondary) 20%, transparent);

  --kszatstltlb-caption: color-mix(in srgb, var(--kszatstltlb-helper) 55%, transparent);

  --kszatstltlb-padding-top:    4rem;
  --kszatstltlb-padding-bottom: 4rem;
}

/* 2. Reset داخل الـ namespace */
.kszatstltlb,
.kszatstltlb *,
.kszatstltlb *::before,
.kszatstltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszatstltlb {
  position: relative;
  overflow: hidden;
  direction: rtl;
  background: var(--kszatstltlb-bg);
  color: var(--kszatstltlb-text);
  font-family: 'Cairo', 'Tajawal', sans-serif;
  padding-top: var(--kszatstltlb-padding-top);
  padding-bottom: var(--kszatstltlb-padding-bottom);
}

.kszatstltlb a { text-decoration: none; color: inherit; }
.kszatstltlb ul { list-style: none; }
.kszatstltlb button { font-family: inherit; }

.kszatstltlb__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.kszatstltlb__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--kszatstltlb-primary) 6%, transparent) 0.0625rem, transparent 0.0625rem),
    linear-gradient(90deg, color-mix(in srgb, var(--kszatstltlb-primary) 6%, transparent) 0.0625rem, transparent 0.0625rem);
  background-size: 2.5rem 2.5rem;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
}

.kszatstltlb__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(3rem);
  opacity: 0.5;
  background: radial-gradient(circle at 30% 30%, var(--kszatstltlb-primary-soft2), transparent 70%);
  animation: kszatstltlb-float 16s ease-in-out infinite;
}

.kszatstltlb__blob--1 {
  width: 55vw;
  height: 55vw;
  top: -20vw;
  inset-inline-start: -18vw;
}

.kszatstltlb__blob--2 {
  width: 42vw;
  height: 42vw;
  bottom: -16vw;
  inset-inline-end: -12vw;
  animation-delay: -8s;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--kszatstltlb-primary) 18%, var(--kszatstltlb-secondary)), transparent 70%);
}

.kszatstltlb__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.kszatstltlb__header {
  text-align: center;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.kszatstltlb__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--kszatstltlb-primary-soft2);
  color: var(--kszatstltlb-primary-deep);
  font-weight: 600;
  font-size: clamp(0.7rem, 3vw, 0.8rem);
  padding: 0.4rem 1rem;
  border-radius: 999rem;
  letter-spacing: 0.02em;
}

.kszatstltlb__eyebrow i { font-size: 0.7em; }

.kszatstltlb__title {
  font-weight: 700;
  font-size: clamp(1.7rem, 6.5vw, 2.75rem);
  color: var(--kszatstltlb-helper);
  line-height: 1.2;
}

.kszatstltlb__subtitle {
  max-width: 34rem;
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  color: color-mix(in srgb, var(--kszatstltlb-helper) 62%, transparent);
  line-height: 1.6;
}

.kszatstltlb__slider { position: relative; }
.kszatstltlb__cards-wrap { position: relative; }

.kszatstltlb__circuit {
  position: absolute;
  inset: -1.5rem;
  z-index: 0;
  width: calc(100% + 3rem);
  height: calc(100% + 3rem);
  opacity: 0.8;
  pointer-events: none;
}

.kszatstltlb__circuit-line {
  fill: none;
  stroke: var(--kszatstltlb-circuit-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kszatstltlb__circuit-dot {
  fill: var(--kszatstltlb-circuit-dot);
  filter: drop-shadow(0 0 0.4rem var(--kszatstltlb-primary));
}

.kszatstltlb__viewport {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 1.25rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.kszatstltlb__viewport--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.kszatstltlb__viewport::-webkit-scrollbar { display: none; }

.kszatstltlb__viewport:focus-visible {
  outline: 0.15rem solid var(--kszatstltlb-primary);
  outline-offset: 0.3rem;
}

.kszatstltlb__track {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: max-content;
  padding-inline: 0.25rem;
}

.kszatstltlb__slide {
  flex: 0 0 auto;
  width: 82vw;
  scroll-snap-align: start;
}

.kszatstltlb__card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 0.75rem;
  border-radius: 1.35rem;
  background: var(--kszatstltlb-secondary);
  border: 0.18rem solid var(--kszatstltlb-primary);
  box-shadow: 0 0.8rem 2.2rem -0.6rem color-mix(in srgb, var(--kszatstltlb-primary) 25%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.kszatstltlb__card:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1.3rem 3rem -0.5rem color-mix(in srgb, var(--kszatstltlb-primary) 45%, transparent);
}

.kszatstltlb__card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.1rem 0.2rem 0.45rem;
  border-bottom: 0.08rem solid color-mix(in srgb, var(--kszatstltlb-primary) 28%, var(--kszatstltlb-secondary));
}

.kszatstltlb__card-dots {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.kszatstltlb__card-dots span {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kszatstltlb-primary) 35%, var(--kszatstltlb-secondary));
}

.kszatstltlb__card-dots span:first-child {
  background: var(--kszatstltlb-primary);
  box-shadow: 0 0 0.35rem var(--kszatstltlb-primary);
}

.kszatstltlb__card-dots span:nth-child(2) {
  background: color-mix(in srgb, var(--kszatstltlb-primary) 65%, var(--kszatstltlb-secondary));
}

.kszatstltlb__card-frame {
  position: relative;
  border-radius: 0.85rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--kszatstltlb-primary) 2%, var(--kszatstltlb-secondary));
  border: 0.0625rem solid color-mix(in srgb, var(--kszatstltlb-primary) 20%, transparent);
  box-shadow: inset 0 0 0.8rem color-mix(in srgb, var(--kszatstltlb-primary) 6%, transparent);
}

.kszatstltlb__card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.kszatstltlb__dock {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: fit-content;
  margin: 1.75rem auto 0;
  background: var(--kszatstltlb-dock-bg);
  border-radius: 999rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 2.2rem -1.2rem color-mix(in srgb, var(--kszatstltlb-helper) 40%, transparent);
}

.kszatstltlb__dock-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  color: var(--kszatstltlb-dock-text);
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(0.75rem, 3vw, 0.85rem);
  padding: 0.85rem 1.25rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.kszatstltlb__dock-btn i { font-size: 0.85em; }
.kszatstltlb__dock-btn span { display: none; }

.kszatstltlb__dock-btn:hover,
.kszatstltlb__dock-btn:focus-visible {
  background: var(--kszatstltlb-primary);
  color: var(--kszatstltlb-secondary);
}

.kszatstltlb__dock-btn:focus-visible {
  outline: 0.12rem solid var(--kszatstltlb-secondary);
  outline-offset: -0.25rem;
}

.kszatstltlb__dock-divider {
  width: 0.0625rem;
  background: var(--kszatstltlb-dock-divider);
}

.kszatstltlb__google-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 2.75rem;
  padding-inline: 1.25rem;
}

.kszatstltlb__google-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--kszatstltlb-secondary);
  color: var(--kszatstltlb-helper);
  padding: 0.65rem 1.15rem 0.65rem 0.75rem;
  border-radius: 2.5rem;
  border: 0.0625rem solid color-mix(in srgb, var(--kszatstltlb-primary) 28%, var(--kszatstltlb-secondary));
  box-shadow: 0 0.4rem 1.4rem -0.3rem color-mix(in srgb, var(--kszatstltlb-helper) 10%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
}

.kszatstltlb__google-badge:hover,
.kszatstltlb__google-badge:focus-visible {
  transform: translateY(-0.15rem);
  border-color: var(--kszatstltlb-primary);
  box-shadow: 0 0.8rem 2rem -0.4rem color-mix(in srgb, var(--kszatstltlb-primary) 30%, transparent);
}

.kszatstltlb__google-glogo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--kszatstltlb-primary);
  color: var(--kszatstltlb-secondary);
  font-size: 1.05rem;
  box-shadow: 0 0.2rem 0.6rem -0.1rem color-mix(in srgb, var(--kszatstltlb-primary) 40%, transparent);
}

.kszatstltlb__google-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: start;
}

.kszatstltlb__google-stars {
  display: flex;
  gap: 0.2rem;
  color: var(--kszatstltlb-primary);
  font-size: 0.8rem;
}

.kszatstltlb__google-caption {
  font-size: clamp(0.78rem, 2.8vw, 0.88rem);
  font-weight: 700;
  color: var(--kszatstltlb-helper);
}

.kszatstltlb__google-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--kszatstltlb-primary-soft);
  color: var(--kszatstltlb-primary-deep);
  font-size: 0.85rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.kszatstltlb__google-badge:hover .kszatstltlb__google-cta {
  background: var(--kszatstltlb-primary);
  color: var(--kszatstltlb-secondary);
  transform: translateX(-0.2rem);
}

.kszatstltlb__google-badge:focus-visible {
  outline: 0.15rem solid var(--kszatstltlb-primary);
  outline-offset: 0.2rem;
}

/* Keyframes */
@keyframes kszatstltlb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2vw, 2vw) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .kszatstltlb__blob,
  .kszatstltlb__circuit-dot { animation: none !important; }
  .kszatstltlb__viewport { scroll-behavior: auto; }
  .kszatstltlb__circuit { display: none; }
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszatstltlb__container { padding-inline: 2rem; }
  .kszatstltlb__slide { width: 70vw; }
  .kszatstltlb__dock-btn span { display: inline; }
}

@media (min-width: 601px) {
  .kszatstltlb {
    --kszatstltlb-padding-top: 5rem;
    --kszatstltlb-padding-bottom: 5rem;
  }
  .kszatstltlb__slide { width: 46vw; }
}

@media (min-width: 769px) {
  .kszatstltlb__slide { width: 34vw; }
  .kszatstltlb__dock-btn { padding: 0.95rem 1.6rem; }
}

@media (min-width: 1025px) {
  .kszatstltlb {
    --kszatstltlb-padding-top: 6rem;
    --kszatstltlb-padding-bottom: 6rem;
  }
  .kszatstltlb__container { padding-inline: 3rem; }
  .kszatstltlb__slide { width: 26vw; }
}

@media (min-width: 1281px) {
  .kszatstltlb__slide { width: 21vw; }
}

@media (min-width: 1441px) {
  .kszatstltlb__container { padding-inline: 4rem; max-width: 96rem; }
  .kszatstltlb__slide { width: 18vw; }
}

@media (min-width: 1921px) {
  .kszatstltlb__container { max-width: 110rem; }
  .kszatstltlb__slide { width: 15vw; }
}

/* ==== kszaprcltlb ==== */
/* ============================================================
   KSZAPRCLTLB — Prices (اسعار الخدمات)
   Namespace  : kszaprcltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszaprcltlb {
  --kszaprcltlb-primary:   var(--ksza-primary);
  --kszaprcltlb-secondary: var(--ksza-secondary);
  --kszaprcltlb-helper:    var(--ksza-helper);

  --kszaprcltlb-primary-soft: color-mix(in srgb, var(--kszaprcltlb-primary) 12%, var(--kszaprcltlb-secondary));
  --kszaprcltlb-primary-dark: color-mix(in srgb, var(--kszaprcltlb-primary) 80%, var(--kszaprcltlb-helper));

  --kszaprcltlb-bg:          var(--kszaprcltlb-secondary);
  --kszaprcltlb-text:        color-mix(in srgb, var(--kszaprcltlb-helper) 90%, var(--kszaprcltlb-secondary));
  --kszaprcltlb-title:       color-mix(in srgb, var(--kszaprcltlb-helper) 90%, var(--kszaprcltlb-secondary));
  --kszaprcltlb-card-border: color-mix(in srgb, var(--kszaprcltlb-primary) 25%, var(--kszaprcltlb-secondary));
  --kszaprcltlb-card-shadow: color-mix(in srgb, var(--kszaprcltlb-helper) 8%, transparent);

  --kszaprcltlb-padding-top:    3.5rem;
  --kszaprcltlb-padding-bottom: 3.5rem;
}

/* 2. Reset داخل الـ namespace */
.kszaprcltlb,
.kszaprcltlb *,
.kszaprcltlb *::before,
.kszaprcltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszaprcltlb {
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  background: radial-gradient(120% 60% at 50% 0%, var(--kszaprcltlb-primary-soft) 0%, var(--kszaprcltlb-secondary) 55%);
  color: var(--kszaprcltlb-text);
  padding-top: var(--kszaprcltlb-padding-top);
  padding-bottom: var(--kszaprcltlb-padding-bottom);
  width: 100%;
  overflow: hidden;
}

.kszaprcltlb__container {
  width: 100%;
  max-width: 92%;
  margin-inline: auto;
}

/* --- Intro --- */
.kszaprcltlb__intro {
  text-align: center;
  margin-bottom: 2.5rem;
}

.kszaprcltlb__eyebrow {
  display: inline-block;
  background-color: var(--kszaprcltlb-primary);
  color: var(--kszaprcltlb-secondary);
  font-size: clamp(0.7rem, 3vw, 0.8rem);
  font-weight: 700;
  padding: 0.35rem 1.1rem;
  border-radius: 3rem;
  margin-bottom: 0.9rem;
  letter-spacing: 0.02rem;
}

.kszaprcltlb__title {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 700;
  color: var(--kszaprcltlb-title);
}

/* --- Grid / Service groups --- */
.kszaprcltlb__grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.kszaprcltlb__service-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.kszaprcltlb__service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.9rem;
  background-color: var(--kszaprcltlb-helper);
  color: var(--kszaprcltlb-secondary);
  font-size: 1.1rem;
}

.kszaprcltlb__service-name {
  font-size: clamp(1.1rem, 4vw, 1.35rem);
  font-weight: 700;
  color: var(--kszaprcltlb-title);
}

/* --- Slider / Viewport / Track --- */
.kszaprcltlb__slider { position: relative; }

.kszaprcltlb__viewport {
  overflow: hidden;
  width: 100%;
}

.kszaprcltlb__track {
  display: flex;
  list-style: none;
  transition: transform 0.45s ease;
}

.kszaprcltlb__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0.4rem;
}

/* --- Card --- */
.kszaprcltlb__card {
  position: relative;
  background-color: var(--kszaprcltlb-secondary);
  border: 0.09rem solid var(--kszaprcltlb-card-border);
  border-radius: 1.4rem;
  padding: 1.8rem 1.4rem 2rem;
  box-shadow: 0 1rem 2.5rem var(--kszaprcltlb-card-shadow);
  overflow: hidden;
}

.kszaprcltlb__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.4rem;
  background-color: var(--kszaprcltlb-primary);
}

.kszaprcltlb__slide--featured .kszaprcltlb__card {
  border-color: var(--kszaprcltlb-primary);
  box-shadow: 0 1.4rem 3rem color-mix(in srgb, var(--kszaprcltlb-primary) 18%, transparent);
}

.kszaprcltlb__slide--featured .kszaprcltlb__card::before {
  height: 0.55rem;
  background-color: var(--kszaprcltlb-primary-dark);
}

.kszaprcltlb__badge {
  position: absolute;
  top: 1.1rem;
  left: -2.4rem;
  transform: rotate(-40deg);
  background-color: var(--kszaprcltlb-primary);
  color: var(--kszaprcltlb-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 2.8rem;
  box-shadow: 0 0.3rem 0.6rem color-mix(in srgb, var(--kszaprcltlb-helper) 15%, transparent);
}

.kszaprcltlb__card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.kszaprcltlb__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--kszaprcltlb-primary-soft);
  border: 0.06rem solid var(--kszaprcltlb-card-border);
  overflow: hidden;
}

.kszaprcltlb__card-icon img {
  width: 60%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.kszaprcltlb__card-title {
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 700;
  color: var(--kszaprcltlb-title);
  line-height: 1.4;
}

/* --- Price Block --- */
.kszaprcltlb__price-block {
  text-align: center;
  background-color: var(--kszaprcltlb-primary-soft);
  border-radius: 1rem;
  padding: 1.2rem 1rem;
  margin-bottom: 1.4rem;
}

.kszaprcltlb__price-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.kszaprcltlb__amount {
  font-size: clamp(2.2rem, 9vw, 2.8rem);
  font-weight: 700;
  color: var(--kszaprcltlb-primary-dark);
  line-height: 1;
}

.kszaprcltlb__currency-symbol {
  font-size: clamp(0.9rem, 3.5vw, 1rem);
  font-weight: 600;
  color: var(--kszaprcltlb-text);
}

.kszaprcltlb__period {
  font-size: clamp(0.8rem, 3vw, 0.9rem);
  color: var(--kszaprcltlb-text);
  opacity: 0.7;
}

.kszaprcltlb__price-note {
  margin-top: 0.6rem;
  font-size: clamp(0.7rem, 3vw, 0.78rem);
  color: var(--kszaprcltlb-text);
  opacity: 0.65;
  line-height: 1.5;
}

/* --- Divider Label --- */
.kszaprcltlb__divider {
  display: block;
  font-size: clamp(0.8rem, 3vw, 0.9rem);
  font-weight: 700;
  color: var(--kszaprcltlb-primary-dark);
  margin-bottom: 0.9rem;
  padding-inline-start: 0.8rem;
  border-inline-start: 0.22rem solid var(--kszaprcltlb-primary);
}

/* --- Features --- */
.kszaprcltlb__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.kszaprcltlb__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: clamp(0.82rem, 3.2vw, 0.92rem);
  line-height: 1.5;
}

.kszaprcltlb__feature-icon {
  flex-shrink: 0;
  color: var(--kszaprcltlb-primary);
  font-size: 1rem;
  margin-top: 0.15rem;
}

/* --- Buttons --- */
.kszaprcltlb__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kszaprcltlb__btn {
  display: block;
  text-align: center;
  font-size: clamp(0.85rem, 3.2vw, 0.95rem);
  font-weight: 700;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  text-decoration: none;
  border: 0.09rem solid var(--kszaprcltlb-primary);
  color: var(--kszaprcltlb-primary-dark);
  background-color: var(--kszaprcltlb-secondary);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.kszaprcltlb__btn:hover { transform: translateY(-0.1rem); }

.kszaprcltlb__btn--primary {
  background-color: var(--kszaprcltlb-primary);
  color: var(--kszaprcltlb-secondary);
  border-color: var(--kszaprcltlb-primary);
}

.kszaprcltlb__btn--primary:hover {
  background-color: var(--kszaprcltlb-primary-dark);
  border-color: var(--kszaprcltlb-primary-dark);
}

/* --- Controls (nav + dots) --- */
.kszaprcltlb__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
}

.kszaprcltlb__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 0.06rem solid var(--kszaprcltlb-primary);
  background-color: var(--kszaprcltlb-secondary);
  color: var(--kszaprcltlb-primary);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.kszaprcltlb__nav:hover {
  background-color: var(--kszaprcltlb-primary);
  color: var(--kszaprcltlb-secondary);
}

.kszaprcltlb__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kszaprcltlb__dot {
  width: 0.55rem;
  height: 0.55rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: var(--kszaprcltlb-card-border);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.kszaprcltlb__dot.kszaprcltlb--active {
  background-color: var(--kszaprcltlb-primary);
  transform: scale(1.25);
}

.kszaprcltlb :focus-visible {
  outline: 0.15rem solid var(--kszaprcltlb-primary);
  outline-offset: 0.2rem;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszaprcltlb__container { max-width: 88%; }
}

@media (min-width: 601px) {
  .kszaprcltlb__slide { flex: 0 0 50%; }
}

@media (min-width: 769px) {
  .kszaprcltlb__container { max-width: 82%; }
}

@media (min-width: 1025px) {
  .kszaprcltlb__container { max-width: 72%; }
  .kszaprcltlb__grid { flex-direction: row; gap: 2.5rem; }
  .kszaprcltlb__slider { flex: 1; }
  .kszaprcltlb__slide { flex: 0 0 100%; }
}

@media (min-width: 1281px) {
  .kszaprcltlb__container { max-width: 65%; }
  .kszaprcltlb__card { padding: 2.2rem 1.8rem 2.4rem; }
}

@media (min-width: 1441px) {
  .kszaprcltlb__container { max-width: 58%; }
}

@media (min-width: 1921px) {
  .kszaprcltlb__container { max-width: 48%; }
}

/* ==== kszaciltlb ==== */
/* ============================================================
   KSZACILTLB — Contact Info (معلومات التواصل)
   Namespace  : kszaciltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */

/* 1. Variables & Colors (local ترث من :root) */
.kszaciltlb {
  --kszaciltlb-primary:      var(--ksza-primary);
  --kszaciltlb-secondary:    var(--ksza-secondary);
  --kszaciltlb-helper:       var(--ksza-helper);

  --kszaciltlb-primary-soft: color-mix(in srgb, var(--kszaciltlb-primary) 10%, var(--kszaciltlb-secondary));
  --kszaciltlb-primary-deep: color-mix(in srgb, var(--kszaciltlb-primary) 78%, var(--kszaciltlb-helper));
  --kszaciltlb-text:         color-mix(in srgb, var(--kszaciltlb-helper) 85%, var(--kszaciltlb-secondary));
  --kszaciltlb-card-border:  color-mix(in srgb, var(--kszaciltlb-helper) 9%, var(--kszaciltlb-secondary));
  --kszaciltlb-shadow:       color-mix(in srgb, var(--kszaciltlb-helper) 6%, transparent);
  --kszaciltlb-shadow-focus: color-mix(in srgb, var(--kszaciltlb-primary) 22%, transparent);

  --kszaciltlb-padding-top:    4rem;
  --kszaciltlb-padding-bottom: 4rem;
}

/* 2. Reset داخل الـ namespace */
.kszaciltlb *,
.kszaciltlb *::before,
.kszaciltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszaciltlb {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  direction: rtl;
  background: var(--kszaciltlb-secondary);
  color: var(--kszaciltlb-text);
  padding-top: var(--kszaciltlb-padding-top);
  padding-bottom: var(--kszaciltlb-padding-bottom);
  line-height: 1.7;
}

.kszaciltlb a { text-decoration: none; color: inherit; }

.kszaciltlb__container {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.kszaciltlb__grid,
.kszaciltlb__info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kszaciltlb__header {
  text-align: center;
  margin-bottom: 1rem;
}

.kszaciltlb__title {
  position: relative;
  display: inline-block;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--kszaciltlb-helper);
  font-weight: 700;
  padding-bottom: 0.6rem;
}

.kszaciltlb__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  width: 3rem;
  height: 0.2rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--kszaciltlb-primary), var(--kszaciltlb-primary-deep));
  transform: translateX(50%);
}

.kszaciltlb__item {
  width: 100%;
}

.kszaciltlb__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0.0625rem solid var(--kszaciltlb-card-border);
  border-radius: 0.9rem;
  background: var(--kszaciltlb-secondary);
  font-size: clamp(0.9rem, 3.6vw, 1rem);
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.kszaciltlb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--kszaciltlb-primary-soft);
  color: var(--kszaciltlb-primary-deep);
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.kszaciltlb__text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.kszaciltlb__link:hover,
.kszaciltlb__link:focus-visible {
  border-color: var(--kszaciltlb-primary);
  background: var(--kszaciltlb-primary-soft);
  transform: translateY(-0.15rem);
  box-shadow: 0 0.7rem 1.6rem -0.6rem var(--kszaciltlb-shadow-focus);
  outline: none;
}

.kszaciltlb__link:hover .kszaciltlb__icon,
.kszaciltlb__link:focus-visible .kszaciltlb__icon {
  background: var(--kszaciltlb-primary);
  color: var(--kszaciltlb-secondary);
}

.kszaciltlb__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.kszaciltlb__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--kszaciltlb-primary-soft);
  color: var(--kszaciltlb-primary-deep);
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kszaciltlb__social-link:hover,
.kszaciltlb__social-link:focus-visible {
  background: var(--kszaciltlb-primary);
  color: var(--kszaciltlb-secondary);
  transform: translateY(-0.15rem) scale(1.05);
  outline: none;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 601px) {
  .kszaciltlb {
    --kszaciltlb-padding-top: 5rem;
    --kszaciltlb-padding-bottom: 5rem;
  }
  .kszaciltlb__header { text-align: start; }
  .kszaciltlb__title::after { inset-inline-start: 0; transform: none; }
  .kszaciltlb__socials { justify-content: flex-start; }
}

@media (min-width: 1025px) {
  .kszaciltlb {
    --kszaciltlb-padding-top: 6rem;
    --kszaciltlb-padding-bottom: 6rem;
  }
}

@media (min-width: 1921px) {
  .kszaciltlb {
    --kszaciltlb-padding-top: 7.5rem;
    --kszaciltlb-padding-bottom: 7.5rem;
  }
}

/* ==== kszasvlltlb ==== */
/* ============================================================
   KSZASVLLTLB — Service-Location (نقدّم خدماتنا في)
   Namespace  : kszasvlltlb
   Project    : Lead to Leads (leadtoleads.com)
   موبايل: تاج واحد في السطر، يدخل بالتناوب من اليمين/الشمال.
============================================================ */



/* Global colors — تُكتب مرة واحدة في الملف المجمّع lead-new */


/* 1. Variables & Colors (local ترث من :root) */
.kszasvlltlb {
  --kszasvlltlb-primary:   var(--ksza-primary);
  --kszasvlltlb-secondary: var(--ksza-secondary);
  --kszasvlltlb-helper:    var(--ksza-helper);

  --kszasvlltlb-primary-soft: color-mix(in srgb, var(--kszasvlltlb-primary) 10%, var(--kszasvlltlb-secondary));
  --kszasvlltlb-primary-deep: color-mix(in srgb, var(--kszasvlltlb-primary) 78%, var(--kszasvlltlb-helper));

  --kszasvlltlb-bg:          color-mix(in srgb, var(--kszasvlltlb-helper) 2%, var(--kszasvlltlb-secondary));
  --kszasvlltlb-text:        color-mix(in srgb, var(--kszasvlltlb-helper) 82%, var(--kszasvlltlb-secondary));
  --kszasvlltlb-box-bg:      var(--kszasvlltlb-secondary);
  --kszasvlltlb-box-border:  color-mix(in srgb, var(--kszasvlltlb-primary) 22%, var(--kszasvlltlb-secondary));
  --kszasvlltlb-box-shadow:  color-mix(in srgb, var(--kszasvlltlb-helper) 8%, transparent);
  --kszasvlltlb-focus-shadow: color-mix(in srgb, var(--kszasvlltlb-primary) 32%, transparent);

  --kszasvlltlb-padding-top:    4rem;
  --kszasvlltlb-padding-bottom: 4rem;
}

/* 2. Reset داخل الـ namespace */
.kszasvlltlb *,
.kszasvlltlb *::before,
.kszasvlltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszasvlltlb {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  direction: rtl;
  background:
    radial-gradient(60% 45% at 100% 0%, var(--kszasvlltlb-primary-soft) 0%, transparent 65%),
    var(--kszasvlltlb-bg);
  color: var(--kszasvlltlb-text);
  padding-top: var(--kszasvlltlb-padding-top);
  padding-bottom: var(--kszasvlltlb-padding-bottom);
  line-height: 1.7;
  overflow: hidden;
}

.kszasvlltlb__container {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
}

.kszasvlltlb__title {
  position: relative;
  display: inline-block;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  color: var(--kszasvlltlb-helper);
  font-weight: 700;
  padding-bottom: 0.7rem;
}

.kszasvlltlb__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  width: 3rem;
  height: 0.22rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--kszasvlltlb-primary), var(--kszasvlltlb-primary-deep));
  transform: translateX(50%);
}

/* موبايل: تاج واحد في السطر */
.kszasvlltlb__grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

/* التاج = شارة: بادج دائري + اسم المنطقة */
.kszasvlltlb__box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.45rem 1.2rem 0.45rem 0.45rem;
  border-radius: 3rem;
  background: var(--kszasvlltlb-box-bg);
  border: 0.0625rem solid var(--kszasvlltlb-box-border);
  box-shadow: 0 0.35rem 0.9rem -0.4rem var(--kszasvlltlb-box-shadow);
  color: inherit;
  font-family: inherit;
  font-size: clamp(0.85rem, 3.4vw, 1rem);
  font-weight: 600;
  cursor: pointer;
  /* حالة الدخول */
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s ease,
              border-color 0.2s ease,
              background 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease;
}

/* بالتناوب: فردي يدخل من اليمين، زوجي من الشمال */
.kszasvlltlb__box:nth-child(odd)  { transform: translateX(3rem); }
.kszasvlltlb__box:nth-child(even) { transform: translateX(-3rem); }

.kszasvlltlb--in .kszasvlltlb__box { opacity: 1; transform: translateX(0); }

.kszasvlltlb--in .kszasvlltlb__box:nth-child(1)  { transition-delay: 0.05s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(2)  { transition-delay: 0.10s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(3)  { transition-delay: 0.15s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(4)  { transition-delay: 0.20s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(5)  { transition-delay: 0.25s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(6)  { transition-delay: 0.30s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(7)  { transition-delay: 0.35s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(8)  { transition-delay: 0.40s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(9)  { transition-delay: 0.45s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(10) { transition-delay: 0.50s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(11) { transition-delay: 0.55s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(12) { transition-delay: 0.60s; }
.kszasvlltlb--in .kszasvlltlb__box:nth-child(13) { transition-delay: 0.65s; }

/* زوجي: البادج على الطرف الآخر (شكل زجزاج) */
.kszasvlltlb__box:nth-child(even) {
  flex-direction: row-reverse;
  padding: 0.45rem 0.45rem 0.45rem 1.2rem;
}

.kszasvlltlb__box i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--kszasvlltlb-primary), var(--kszasvlltlb-primary-deep));
  color: var(--kszasvlltlb-secondary);
  font-size: 0.74rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.kszasvlltlb__box span {
  flex: 1 1 auto;
  text-align: center;
}

/* الحالة النشطة/الهوفر — المنطقة دي تبرز عن الباقي */
.kszasvlltlb__box:hover,
.kszasvlltlb__box:focus-visible {
  border-color: var(--kszasvlltlb-primary);
  background: linear-gradient(145deg, var(--kszasvlltlb-primary), var(--kszasvlltlb-primary-deep));
  color: var(--kszasvlltlb-secondary);
  box-shadow: 0 0.8rem 1.6rem -0.5rem var(--kszasvlltlb-focus-shadow);
  outline: none;
}

.kszasvlltlb--in .kszasvlltlb__box:hover,
.kszasvlltlb--in .kszasvlltlb__box:focus-visible {
  transform: translateX(0) translateY(-0.2rem);
}

.kszasvlltlb__box:hover i,
.kszasvlltlb__box:focus-visible i {
  background: var(--kszasvlltlb-secondary);
  color: var(--kszasvlltlb-primary-deep);
}

@media (prefers-reduced-motion: reduce) {
  .kszasvlltlb__box {
    opacity: 1 !important;
    transform: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  }
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 601px) {
  .kszasvlltlb {
    --kszasvlltlb-padding-top: 5rem;
    --kszasvlltlb-padding-bottom: 5rem;
  }
  /* من التابلت وفوق: شبكة أعمدة عادية */
  .kszasvlltlb__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .kszasvlltlb__box,
  .kszasvlltlb__box:nth-child(even) {
    flex-direction: row;
    padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  }
  .kszasvlltlb__box:nth-child(odd),
  .kszasvlltlb__box:nth-child(even) { transform: translateY(1rem); }
  .kszasvlltlb--in .kszasvlltlb__box { transform: translateY(0); }
  .kszasvlltlb--in .kszasvlltlb__box:hover,
  .kszasvlltlb--in .kszasvlltlb__box:focus-visible { transform: translateY(-0.2rem); }
}

@media (min-width: 769px) {
  .kszasvlltlb__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1025px) {
  .kszasvlltlb {
    --kszasvlltlb-padding-top: 6rem;
    --kszasvlltlb-padding-bottom: 6rem;
  }
}

@media (min-width: 1281px) {
  .kszasvlltlb__grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1921px) {
  .kszasvlltlb {
    --kszasvlltlb-padding-top: 7.5rem;
    --kszasvlltlb-padding-bottom: 7.5rem;
  }
}

/* ==== kszactafltlb ==== */
/* ============================================================
   KSZACTAFLTLB — Fixed Floating CTA (أزرار التواصل الثابتة والرجوع لأعلى)
   Namespace  : kszactafltlb
   Project    : Lead to Leads (leadtoleads.com)
   الألوان     : ألوان الموقع الأساسية (#5cb85c / #ffffff / #000000)
============================================================ */

/* 1. Variables & Colors (local ترث من :root) */
.kszactafltlb {
  --kszactafltlb-primary:      var(--ksza-primary);
  --kszactafltlb-secondary:    var(--ksza-secondary);
  --kszactafltlb-helper:       var(--ksza-helper);

  --kszactafltlb-primary-deep: color-mix(in srgb, var(--ksza-primary) 78%, var(--ksza-helper));
  --kszactafltlb-primary-soft: color-mix(in srgb, var(--ksza-primary) 15%, var(--ksza-secondary));
  --kszactafltlb-btn-bg:       var(--ksza-primary);
  --kszactafltlb-btn-text:     var(--ksza-secondary);
  --kszactafltlb-scroll-bg:    color-mix(in srgb, var(--ksza-helper) 85%, var(--ksza-secondary));
  --kszactafltlb-shadow:       color-mix(in srgb, var(--ksza-helper) 20%, transparent);
  --kszactafltlb-glow:         color-mix(in srgb, var(--ksza-primary) 40%, transparent);
}

/* 2. Reset داخل الـ namespace */
.kszactafltlb *,
.kszactafltlb *::before,
.kszactafltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszactafltlb {
  position: static;
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  pointer-events: none;
}

/* منصة الأزرار الثابتة على جانب الشاشة */
.kszactafltlb__dock {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1rem;
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  pointer-events: auto;
}

.kszactafltlb__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem 0.55rem 0.65rem;
  border-radius: 2.5rem;
  background: linear-gradient(135deg, var(--kszactafltlb-primary) 0%, var(--kszactafltlb-primary-deep) 100%);
  color: var(--kszactafltlb-btn-text);
  text-decoration: none;
  border: 0.0625rem solid color-mix(in srgb, var(--ksza-secondary) 25%, transparent);
  box-shadow: 0 0.5rem 1.4rem -0.2rem var(--kszactafltlb-shadow);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s ease,
              background 0.25s ease;
}

.kszactafltlb__btn:hover {
  transform: translateY(-0.2rem) scale(1.04);
  box-shadow: 0 0.8rem 1.8rem -0.2rem var(--kszactafltlb-glow);
}

.kszactafltlb__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ksza-secondary) 22%, transparent);
  font-size: 1.05rem;
  color: var(--ksza-secondary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.kszactafltlb__btn:hover .kszactafltlb__icon-box {
  transform: rotate(10deg) scale(1.1);
}

.kszactafltlb__label {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ksza-secondary);
  letter-spacing: 0.01rem;
}

/* حلقة النبض باستخدام لون الموقع الأساسي */
.kszactafltlb__pulse-ring {
  position: absolute;
  inset: -0.25rem;
  border-radius: 2.5rem;
  border: 0.08rem solid var(--ksza-primary);
  opacity: 0;
  pointer-events: none;
  animation: kszactafltlb-ring 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes kszactafltlb-ring {
  0%   { transform: scale(0.95); opacity: 0.8; }
  60%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* زر الرجوع لأعلى الصفحة */
.kszactafltlb__scroll-top {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-start: 1rem;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--kszactafltlb-scroll-bg);
  border: 0.0625rem solid color-mix(in srgb, var(--ksza-secondary) 20%, transparent);
  color: var(--ksza-secondary);
  cursor: pointer;
  box-shadow: 0 0.5rem 1.4rem -0.2rem var(--kszactafltlb-shadow);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease;
  pointer-events: auto;
}

.kszactafltlb__scroll-top--visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.kszactafltlb__scroll-top:hover {
  background: var(--ksza-primary);
  transform: translateY(-0.2rem) scale(1.08);
  box-shadow: 0 0.8rem 1.6rem -0.2rem var(--kszactafltlb-glow);
}

.kszactafltlb__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.kszactafltlb__ring-track {
  fill: none;
  stroke: color-mix(in srgb, var(--ksza-secondary) 20%, transparent);
  stroke-width: 2.5;
}

.kszactafltlb__ring-progress {
  fill: none;
  stroke: var(--ksza-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

.kszactafltlb__scroll-icon {
  font-size: 0.88rem;
  display: inline-flex;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszactafltlb__dock {
    inset-block-end: 1.75rem;
    inset-inline-end: 1.5rem;
    gap: 0.75rem;
  }
  .kszactafltlb__scroll-top {
    inset-block-end: 1.75rem;
    inset-inline-start: 1.5rem;
    width: 3rem;
    height: 3rem;
  }
  .kszactafltlb__btn {
    padding: 0.65rem 1.15rem 0.65rem 0.85rem;
  }
  .kszactafltlb__label {
    font-size: 0.92rem;
  }
  .kszactafltlb__icon-box {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.15rem;
  }
}

@media (min-width: 1025px) {
  .kszactafltlb__dock {
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
  }
  .kszactafltlb__scroll-top {
    inset-block-end: 2rem;
    inset-inline-start: 2rem;
  }
}

/* ==== kszaftrltlb ==== */
/* ============================================================
   KSZAFTRLTLB — Footer (فاتح وعصري)
   Namespace  : kszaftrltlb
   Project    : Lead to Leads (leadtoleads.com)
============================================================ */

/* 1. Variables & Colors (local ترث من :root) */
.kszaftrltlb {
  --kszaftrltlb-primary:      var(--ksza-primary);
  --kszaftrltlb-secondary:    var(--ksza-secondary);
  --kszaftrltlb-helper:       var(--ksza-helper);

  --kszaftrltlb-primary-deep: color-mix(in srgb, var(--ksza-primary) 78%, var(--ksza-helper));
  --kszaftrltlb-primary-soft: color-mix(in srgb, var(--ksza-primary) 12%, var(--ksza-secondary));

  /* خلفية فاتحة أنيقة */
  --kszaftrltlb-bg:           color-mix(in srgb, var(--ksza-secondary) 96%, var(--ksza-primary));
  --kszaftrltlb-text:         color-mix(in srgb, var(--ksza-helper) 75%, var(--ksza-secondary));
  --kszaftrltlb-title:        var(--ksza-helper);
  --kszaftrltlb-line:         color-mix(in srgb, var(--ksza-primary) 20%, var(--ksza-secondary));

  --kszaftrltlb-link:         color-mix(in srgb, var(--ksza-helper) 75%, var(--ksza-secondary));
  --kszaftrltlb-link-hover:   var(--ksza-primary);

  --kszaftrltlb-icon-bg:      color-mix(in srgb, var(--ksza-primary) 15%, var(--ksza-secondary));
  --kszaftrltlb-icon-color:   var(--ksza-primary);

  --kszaftrltlb-padding-top:    3.5rem;
  --kszaftrltlb-padding-bottom: 1.5rem;
}

/* 2. Reset داخل الـ namespace */
.kszaftrltlb,
.kszaftrltlb *,
.kszaftrltlb *::before,
.kszaftrltlb *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.kszaftrltlb {
  position: relative;
  background-color: var(--kszaftrltlb-bg);
  color: var(--kszaftrltlb-text);
  font-family: 'Cairo', 'Tajawal', sans-serif;
  direction: rtl;
  padding-top: var(--kszaftrltlb-padding-top);
  padding-bottom: var(--kszaftrltlb-padding-bottom);
  overflow: hidden;
  border-top: 0.15rem solid color-mix(in srgb, var(--ksza-primary) 35%, transparent);
}

.kszaftrltlb a { text-decoration: none; color: inherit; }

.kszaftrltlb__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.kszaftrltlb__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

.kszaftrltlb__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kszaftrltlb__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--kszaftrltlb-title);
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 800;
}

.kszaftrltlb__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.6rem;
  background: var(--kszaftrltlb-icon-bg);
  color: var(--kszaftrltlb-icon-color);
  font-size: 0.88rem;
  flex-shrink: 0;
}

.kszaftrltlb__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.kszaftrltlb__item {
  display: flex;
  align-items: center;
}

.kszaftrltlb__link {
  color: var(--kszaftrltlb-link);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.6;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.kszaftrltlb__link:hover,
.kszaftrltlb__link:focus-visible {
  color: var(--kszaftrltlb-link-hover);
  transform: translateX(-0.35rem);
}

.kszaftrltlb__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--kszaftrltlb-line);
}

.kszaftrltlb__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

.kszaftrltlb__copy {
  font-size: 0.88rem;
  color: var(--kszaftrltlb-text);
  font-weight: 600;
}

.kszaftrltlb__copy-link {
  color: var(--kszaftrltlb-primary);
  font-weight: 800;
  transition: color 0.2s ease;
}

.kszaftrltlb__copy-link:hover,
.kszaftrltlb__copy-link:focus-visible {
  color: var(--kszaftrltlb-primary-deep);
  text-decoration: underline;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
  .kszaftrltlb__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 601px) {
  .kszaftrltlb__container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .kszaftrltlb__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: right;
  }
}

@media (min-width: 769px) {
  .kszaftrltlb__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .kszaftrltlb { --kszaftrltlb-padding-top: 4.5rem; }
}

@media (min-width: 1025px) {
  .kszaftrltlb__container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1281px) {
  .kszaftrltlb__grid { gap: 4rem; }
}