/* Add custom CSS styles below */ 
/*
 * ═══════════════════════════════════════════════════════
 *  كرم النخيل — Features Section · karam_features
 *  CSS Override Only · No HTML changes
 * ═══════════════════════════════════════════════════════
 */


/* ── Section ─────────────────────────────────────────── */

.karam_features {
  position: relative;
  /* خلفية بسيطة: نقاط خفيفة على أبيض دافئ */
  background-color: #FDFAF5;
  background-image: radial-gradient(circle, #DED0A2 1px, transparent 1px);
  background-size: 22px 22px;
}

/* طبقة بيضاء شفافة تخفف النقاط */
.karam_features::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(253, 250, 245, 0.82);
  pointer-events: none;
  z-index: 0;
}

.karam_features .container {
  position: relative;
  z-index: 1;
}


/* ── Heading ─────────────────────────────────────────── */

/* Eyebrow pill فوق العنوان */
.karam_features .s-block__title .right-side::before {
  content: '✦  ابرز المميزات';
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  background: #F6F0E4;
  color: #8B7C38;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 5px 16px;
  border-radius: 100px;
}

.karam_features .s-block__title h2 {
  font-size: 2.1rem;
  font-weight: 800;
  color: #1B1809;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.karam_features .s-block__title p {
  color: #7A6A4A !important;
  font-size: 0.88rem !important;
  line-height: 1.8 !important;
  max-width: 440px;
  margin: 0 auto;
  opacity: 0.85;
}


/* ── Cards ───────────────────────────────────────────── */

.karam_features .feature-card {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 22px !important;
  padding: 28px 18px 24px !important;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 2px 16px rgba(139, 124, 56, 0.07),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.35s ease !important;
}

/* خط علوي ذهبي يمتد من اليمين على Hover */
.karam_features .s-block--features__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(to left, #C8B474, #DED0A2);
  border-radius: 22px 22px 0 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.karam_features .feature-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 20px 44px rgba(139, 124, 56, 0.12),
    0 4px 12px rgba(139, 124, 56, 0.06) !important;
  background: #FFFFFF !important;
}

.karam_features .s-block--features__item:hover::after {
  transform: scaleX(1);
}


/* ── Icon ────────────────────────────────────────────── */

.karam_features .icon-container {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  background: #F6F0E4 !important;
  color: #8B7C38 !important;
  position: relative;
  z-index: 1;
  box-shadow: none !important;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

/* Warm halo على Hover */
.karam_features .feature-card:hover .icon-container {
  background: #EDE5CA !important;
  box-shadow:
    0 0 0 7px rgba(200, 180, 116, 0.12),
    0 0 0 14px rgba(200, 180, 116, 0.06) !important;
  transform: scale(1.05) !important;
}

/* Override Tailwind group-hover:scale-105 */
.karam_features .group:hover .icon-container {
  --tw-scale-x: 1 !important;
  --tw-scale-y: 1 !important;
}

.karam_features .animated-icon {
  font-size: 1.55rem !important;
}


/* ── Text ────────────────────────────────────────────── */

.karam_features .feature-icon {
  position: relative;
  z-index: 1;
  transform: none !important;
  transition: none !important;
}

.karam_features .group:hover .feature-icon {
  --tw-translate-x: 0 !important;
  transform: translateX(0) !important;
}

.karam_features .feature-icon h2 {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1B1809 !important;
  margin-bottom: 6px !important;
  transition: color 0.3s ease;
}

.karam_features .feature-card:hover .feature-icon h2 {
  color: #6E6129 !important;
}

.karam_features .feature-icon p {
  font-size: 0.80rem !important;
  color: #7A6A4A !important;
  line-height: 1.75 !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease;
}

.karam_features .feature-card:hover .feature-icon p {
  opacity: 1 !important;
}


/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 640px) {
  .karam_features .s-block__title h2 {
    font-size: 1.65rem;
  }
  .karam_features .feature-card:hover {
    transform: translateY(-5px) !important;
  }
}


/* ── Reduced Motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .karam_features .feature-card,
  .karam_features .icon-container,
  .karam_features .s-block--features__item::after {
    transition: none !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_statics {
  background-color: #FDFAF5 !important;
  background-image: none !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  position: relative;
  overflow: hidden;
  font-family: 'Tajawal', 'IBM Plex Arabic', 'Segoe UI', Arial, sans-serif;
}

/* Decorative gold blob */
.karam_statics::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #F2EBD0;
  filter: blur(90px);
  opacity: 0.5;
  top: -180px;
  right: -180px;
  pointer-events: none;
  z-index: 0;
}

.karam_statics > .container {
  position: relative;
  z-index: 1;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_statics .s-block__title {
  margin-bottom: 56px;
}

/* Eyebrow قبل العنوان — عبر ::before على right-side */
.karam_statics .right-side::before {
  content: '✦  بالأرقام';
  display: inline-block;
  background: #F6F0E4;
  color: #8B7C38;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.karam_statics .s-block__title h2 {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  color: #1B1809 !important;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 10px;
}

.karam_statics .s-block__title p {
  color: #7A6A4A !important;
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto;
  opacity: 0.85;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_statics .content {
  gap: 20px !important;
}

@media (min-width: 1024px) {
  .karam_statics .content {
    gap: 24px !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STAT ITEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_statics .statistics-item {
  counter-increment: kn-stat;
  position: relative;
}

.karam_statics .statistics-item > div {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 32px 22px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(139, 124, 56, 0.06);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.35s ease;
}

/* Editorial number marker (٠١ / ٠٢ / ٠٣ / ٠٤) في الزاوية العلوية */
.karam_statics .statistics-item > div::before {
  content: '٠' counter(kn-stat);
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #C8B474;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* الخط الذهبي السفلي — expands on hover */
.karam_statics .statistics-item > div::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to left, #C8B474, #8B7C38);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.karam_statics .statistics-item:hover > div {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(139, 124, 56, 0.13),
              0 4px 12px rgba(139, 124, 56, 0.06);
}

.karam_statics .statistics-item:hover > div::after {
  transform: scaleX(1);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NUMBERS + LABELS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* الحاوية الداخلية */
.karam_statics .statistics-item > div > div {
  color: #1B1809 !important;
  width: 100%;
}

/* الرقم الكبير */
.karam_statics .anime-item--counter {
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  color: #1B1809 !important;
  letter-spacing: -1.5px;
  line-height: 1 !important;
  height: auto !important;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

@media (max-width: 768px) {
  .karam_statics .anime-item--counter {
    font-size: 2.2rem !important;
  }
}

.karam_statics .statistics-item:hover .anime-item--counter {
  color: #8B7C38 !important;
}

/* التسمية أسفل الرقم */
.karam_statics .statistics-item p {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #7A6A4A !important;
  line-height: 1.65 !important;
  margin-top: 8px !important;
  opacity: 0.85;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COUNTER RESET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_statics .content {
  counter-reset: kn-stat;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  .karam_statics {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .karam_statics .s-block__title h2 {
    font-size: 1.85rem !important;
  }
  .karam_statics .s-block__title {
    margin-bottom: 36px;
  }
  .karam_statics .statistics-item > div {
    padding: 24px 16px !important;
  }
  .karam_statics .statistics-item > div::before {
    top: 12px;
    right: 14px;
    font-size: 10px;
  }
  .karam_statics .statistics-item p {
    font-size: 0.75rem !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REDUCED MOTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
  .karam_statics .statistics-item > div,
  .karam_statics .statistics-item > div::after,
  .karam_statics .anime-item--counter {
    transition: none !important;
  }
}
/*
 * ════════════════════════════════════════════════════
 *  كرم النخيل — ذوقك، أولويتنا
 *  CSS Override · Scoped: .karam_about
 *  الصق في Custom CSS بلوحة تحكم سلة
 * ════════════════════════════════════════════════════
 */


/* ─── Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1 · SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_about {
  background-color: #FDFBF5 !important;
  background-image:
    radial-gradient(ellipse 900px 500px at 20% 20%, rgba(255, 254, 250, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 700px 400px at 85% 85%, rgba(248, 240, 220, 0.35) 0%, transparent 55%) !important;
  color: #1A1509 !important;
  font-family: 'Tajawal', 'IBM Plex Arabic', sans-serif !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  position: relative;
  overflow: hidden;
}

/* Subtle grain overlay */
.karam_about::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.karam_about > .container {
  position: relative;
  z-index: 2;
  gap: 5rem !important;
  align-items: center !important;
}

@media (min-width: 1280px) {
  .karam_about > .container { gap: 6.5rem !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2 · HEADING BLOCK (eyebrow via ::before)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Eyebrow "— من نحن" مضاف عبر pseudo — بدون تعديل HTML */
.karam_about .flex-1 > div:first-child::before {
  content: '—  من نحن';
  display: block;
  font-family: 'Tajawal', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #8B7C38;
  letter-spacing: 3px;
  margin-bottom: 28px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3 · HEADING — split coloring via first-line trick
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/*
 * تقنية:
 * word-spacing: 100vw → يفرض فاصل سطر بين "ذوقك" و "أولويتنا"
 * ::first-line → يستهدف السطر الأول فقط ("ذوقك")
 * الـ default style ينطبق على السطر الثاني ("أولويتنا")
 */

.karam_about h2 {
  font-family: 'Amiri', 'Tajawal', serif !important;
  font-size: clamp(2.8rem, 5.5vw, 5rem) !important;
  font-weight: 400 !important;          /* لـ "أولويتنا" */
  font-style: italic !important;
  color: #8B7C38 !important;             /* ذهبي لـ "أولويتنا" */
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  word-spacing: 100vw !important;        /* يفرض السطرين */
  margin: 0 0 24px 0 !important;
  font-feature-settings: "kern", "liga", "calt";
}

/* السطر الأول = "ذوقك" — يظهر داكن bold */
.karam_about h2::first-line {
  color: #1A1509;
  font-weight: 700;
  font-style: normal;
}

/* خط ذهبي رفيع بعد العنوان */
.karam_about h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: linear-gradient(to left, #8B7C38, transparent);
  margin-top: 24px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4 · BODY PARAGRAPH
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_about .flex-1 > div:first-child > p.text-gray-600 {
  font-family: 'Tajawal', sans-serif !important;
  color: #5C4B2E !important;
  font-size: 1rem !important;
  line-height: 1.9 !important;
  max-width: 480px;
  margin-top: 24px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5 · STAT CARDS — elevated glass design
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_about .grid {
  gap: 20px !important;
}

/* Card */
.karam_about .grid > div {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 0.5px solid rgba(139, 124, 56, 0.14) !important;
  border-radius: 18px !important;
  padding: 28px 22px !important;
  gap: 18px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(139, 124, 56, 0.05);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

/* Gold accent line — appears on hover */
.karam_about .grid > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to left, #C8B474, #8B7C38);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.karam_about .grid > div:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(139, 124, 56, 0.13);
  border-color: rgba(139, 124, 56, 0.32) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

.karam_about .grid > div:hover::before {
  transform: scaleX(1);
}


/* Icon container */
.karam_about .grid > div > div:first-child {
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, #F5EDD8 0%, #EDDDB8 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.karam_about .grid > div:hover > div:first-child {
  transform: scale(1.08) rotate(-4deg);
}

.karam_about .grid i {
  background: transparent !important;
  border: none !important;
  color: #8B7C38 !important;
  font-size: 1.5rem !important;
  width: auto !important;
  height: auto !important;
}


/* Number — Amiri elegant */
.karam_about .grid .text-xl {
  font-family: 'Amiri', serif !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #1A1509 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  display: block;
  margin-bottom: 6px !important;
  transition: color 0.3s ease;
}

.karam_about .grid > div:hover .text-xl {
  color: #6E6129 !important;
}


/* Label */
.karam_about .grid p.text-gray-600 {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 0.82rem !important;
  color: #7A6A4A !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6 · CTA BUTTON
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_about .inline-block.mx-auto {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  width: auto !important;
}

.karam_about .s-button-btn {
  background: #1A1509 !important;
  color: #FDFBF5 !important;
  border-color: #1A1509 !important;
  border-radius: 100px !important;
  padding: 14px 34px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 1.5px !important;
  transition:
    background 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease !important;
}

.karam_about .s-button-btn:hover {
  background: #8B7C38 !important;
  border-color: #8B7C38 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 21, 9, 0.22) !important;
}

.karam_about .s-button-btn .text {
  color: inherit !important;
}

.karam_about .s-button-btn .arrow-icon {
  transition: transform 0.35s ease !important;
  margin-inline-start: 10px !important;
}

.karam_about .s-button-btn:hover .arrow-icon {
  transform: translateX(-6px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7 · IMAGES — Ken Burns + floating badge
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Images container */
.karam_about [class*="basis-"] {
  padding-top: 0 !important;
  height: 620px;
  position: relative;
}

/* Radial glow behind images */
.karam_about [class*="basis-"]::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 237, 216, 0.5) 0%, transparent 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}

/* Floating "جودة موثوقة" badge — top-left of images */
.karam_about [class*="basis-"]::after {
  content: 'جودة موثوقة';
  position: absolute;
  top: 24px;
  left: 20px;
  z-index: 5;
  background: rgba(253, 251, 245, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px 10px 30px;
  border-radius: 100px;
  font-family: 'Tajawal', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1A1509;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background-image: radial-gradient(circle at 14px 50%, #4B7C3A 4px, transparent 4.5px);
  animation: karam-float-mark 5s ease-in-out 1s infinite;
}


/* Main image (relative parallax-item) */
.karam_about .parallax-item:not(.absolute) {
  position: absolute !important;
  top: 0;
  right: 0;
  width: 82% !important;
  max-width: unset !important;
  height: 100% !important;
  border-radius: 8px !important;
  z-index: 1;
  box-shadow: 0 40px 90px rgba(60, 40, 15, 0.2) !important;
  overflow: hidden !important;
}

.karam_about .parallax-item:not(.absolute) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  animation: karam-kenburns-a 16s ease-in-out infinite alternate;
  will-change: transform;
}


/* Overlapping image (absolute parallax-item) */
.karam_about .parallax-item.absolute {
  bottom: -32px !important;
  top: auto !important;
  left: 0 !important;
  width: 48% !important;
  max-width: unset !important;
  height: 280px !important;
  border-radius: 8px !important;
  border: 8px solid #FDFBF5;
  box-shadow: 0 30px 60px rgba(60, 40, 15, 0.18) !important;
  z-index: 3;
  overflow: hidden !important;
  animation: karam-float 6s ease-in-out infinite;
}

.karam_about .parallax-item.absolute img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  animation: karam-kenburns-b 14s ease-in-out infinite alternate;
  animation-delay: -3s;
  will-change: transform;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8 · KEYFRAMES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes karam-kenburns-a {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-2%, -1.5%); }
}

@keyframes karam-kenburns-b {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(1.5%, -1%); }
}

@keyframes karam-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes karam-float-mark {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9 · RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablet */
@media (max-width: 1024px) {
  .karam_about {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .karam_about > .container { gap: 3rem !important; }
  .karam_about [class*="basis-"] { height: 520px; }
}

/* Mobile — reorder: images first */
@media (max-width: 768px) {
  .karam_about {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .karam_about > .container {
    flex-direction: column !important;
    gap: 3.5rem !important;
  }

  .karam_about [class*="basis-"] {
    order: -1;
    height: 440px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .karam_about .flex-1 > div:first-child::before {
    letter-spacing: 2px;
  }

  .karam_about .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .karam_about .flex-1 > div:first-child > p.text-gray-600 {
    max-width: 100%;
  }
}

/* Small mobile */
@media (max-width: 560px) {
  .karam_about {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .karam_about [class*="basis-"] { height: 380px; }
  .karam_about .parallax-item:not(.absolute) { width: 82% !important; }
  .karam_about .parallax-item.absolute {
    width: 52% !important;
    height: 190px !important;
    bottom: -20px !important;
  }
  .karam_about [class*="basis-"]::after {
    top: 14px;
    left: 12px;
    font-size: 0.66rem;
    padding: 8px 16px 8px 26px;
  }

  .karam_about .grid { grid-template-columns: 1fr !important; }
  .karam_about .grid > div { padding: 22px 20px !important; }
  .karam_about .grid .text-xl { font-size: 1.55rem !important; }

  .karam_about .s-button-btn {
    padding: 12px 28px !important;
    font-size: 0.82rem !important;
    letter-spacing: 1px !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10 · REDUCED MOTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
  .karam_about .parallax-item img,
  .karam_about .parallax-item.absolute,
  .karam_about [class*="basis-"]::after,
  .karam_about .grid > div,
  .karam_about .s-button-btn {
    animation: none !important;
    transition: none !important;
  }
}

/*
 * ═══════════════════════════════════════════════════════
 *  كرم النخيل — Background Harmony Patch
 *  توحيد خلفيات الأقسام الثلاثة
 *  ألصق هذا في نهاية ملف CSS الحالي
 * ═══════════════════════════════════════════════════════
 *
 *  المنطق:
 *  ├── نفس اللون الأساسي (#FDFBF5)
 *  ├── نفس الـ radial gradients الخفيفة
 *  └── نفس الـ grain overlay
 *
 *  الفرق بين الأقسام يجي من المحتوى — مش من الخلفية
 * ═══════════════════════════════════════════════════════
 */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1 · UNIFIED BASE + RADIALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_features,
.karam_statics,
.karam_about {
  background-color: #FDFBF5 !important;
  background-image:
    radial-gradient(ellipse 900px 500px at 20% 20%, rgba(255, 254, 250, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 700px 400px at 85% 85%, rgba(248, 240, 220, 0.35) 0%, transparent 55%) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2 · OVERRIDE — karam_features::before
   (كان طبقة شفافة للنقاط → نحوله لـ grain)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_features::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E") !important;
  opacity: 0.12 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3 · OVERRIDE — karam_statics::before
   (كان blob ذهبي → نحوله لـ grain)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.karam_statics::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E") !important;
  filter: none !important;
  opacity: 0.12 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.karam_special1 .s-product-options-option {
    background-color: #fcf9f2 !important;
}

.karam_special1 .text-center.py-10.md\:py-24.rounded-t-\[56px\].relative {
    border-radius: 0px;
}

/* لون الخلفية الرئيسي للفوتر */
.store-footer-wrap {
  background-color: #fbf4f1 !important;
}

/* =========================================
   1. العناوين الرئيسية والأيقونات (#8a7f3f)
   ========================================= */

/* العناوين الرئيسية */
.store-footer-wrap h3, 
.store-footer-wrap .collapse-trigger,
.store-footer-wrap .s-contacts-title {
  color: #8a7f3f !important;
  font-weight: bold !important;
}

/* أيقونات SVG (السوشيال ميديا، وغيرها) */
.store-footer-wrap svg,
.store-footer-wrap svg path {
  fill: #8a7f3f !important;
}

/* أيقونات سلة المخصصة (أيقونة الكرة الأرضية، الأسهم، أيقونات التواصل) */
.store-footer-wrap .s-social-icon, 
.store-footer-wrap .s-contacts-icon,
.store-footer-wrap .sicon-earth,
.store-footer-wrap .sicon-arrow-left,
.store-footer-wrap .sicon-keyboard_arrow_down {
  color: #8a7f3f !important;
}


/* =========================================
   2. النصوص الفرعية والروابط (#000000)
   ========================================= */

/* توحيد جميع النصوص الفرعية باللون الأسود */
.store-footer-wrap p, 
.store-footer-wrap a, 
.store-footer-wrap b, 
.store-footer-wrap .text-gray-600,
.store-footer-wrap .text-gray-400,
.store-footer-wrap .footer-menu span,
.store-footer-wrap .unicode,
.store-footer-wrap .copyright-text,
.store-footer-wrap .s-trust-badges-label,
.store-footer-wrap .s-trust-badges-number,
.store-footer-wrap .s-button-text span:not([class^="sicon"]) {
  color: #000000 !important;
}

/* تأثير احترافي: تحول الروابط للون الزيتوني عند تمرير الماوس */
.store-footer-wrap a:hover,
.store-footer-wrap a:hover span,
.store-footer-wrap a:hover p {
  color: #8a7f3f !important;
  transition: color 0.3s ease;
}


/* =========================================
   3. تحسينات الهيكل والمسافات
   ========================================= */

/* تخصيص لون الحدود الفاصلة بشفافية خفيفة */
.store-footer-wrap .border-b,
.store-footer-wrap .border {
  border-color: rgba(138, 127, 63, 0.25) !important;
}

/* تخصيص الشريط السفلي (شريط الحقوق وطرق الدفع) */
.store-footer__bottom-bar {
  background-color: #ffffff !important;
  border: 1px solid rgba(138, 127, 63, 0.2) !important;
}

/* ترتيب مسافات روابط القائمة */
.store-footer-wrap .footer-menu li {
  margin-bottom: 10px;
}

/* تكبير أيقونات الدفع قليلاً وإضافة تأثير عند التأشير */
.store-footer-wrap .s-payments-list-item img {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}

.store-footer-wrap .s-payments-list-item:hover img {
  transform: scale(1.25);
}

/* إزالة خلفية زر تغيير اللغة ليتماشى مع التصميم */
.store-footer-wrap .s-button-element {
  background: transparent !important;
  box-shadow: none !important;
}


/* ============================================
   KARAM HERO — Dual-Source, Zero Crop
   ============================================ */

.karam_hero salla-slider,
.karam_hero .s-slider-container,
.karam_hero .swiper,
.karam_hero .swiper-wrapper,
.karam_hero .swiper-slide {
  height: var(--kh-height) !important;
  min-height: 0 !important;
  max-height: none !important;
}

.karam_hero {
  --kh-height: 46.875vw; /* fallback: 1440x675 */
  background-color: #f7f3ef;
}

.karam_hero .swiper-slide {
  background-color: #f7f3ef !important;
  overflow: visible !important;
}

.karam_hero .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Desktop image = first <img>, mobile = second */
.karam_hero .swiper-slide img[data-kh="desktop"] { display: none !important; }
.karam_hero .swiper-slide img[data-kh="mobile"]  { display: none !important; }

.karam_hero[data-kh-mode="desktop"] .swiper-slide img[data-kh="desktop"] { display: block !important; }
.karam_hero[data-kh-mode="mobile"]  .swiper-slide img[data-kh="mobile"]  { display: block !important; }

.karam_hero .swiper-pagination { bottom: 16px !important; }

.karam_hero .swiper-lazy-preloader.is-white {
  border-color: #222222;
  border-top-color: transparent;
}










/* ═══ قسم الكرة الأرضية — ثيم فاتح منسجم مع المتجر ═══ */
.kng-section{
  --g-primary:#c9a481;        /* لون الهوية */
  --g-primary-dark:#a37e5b;
  --g-olive:#8a7f3f;          /* لون أزرار المتجر */
  --g-ajwa:#3a2416;           /* لون العجوة الداكن */
  --g-text:#222222;
  --g-muted:#666666;
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(201,164,129,.12), transparent 60%),
    radial-gradient(700px 420px at 8% 100%, rgba(138,127,63,.08), transparent 60%),
    #fcf9f2;
  padding:70px 15px;
  direction:rtl;
  overflow:hidden;
  position:relative;
}
.kng-wrap{max-width:1200px;margin:0 auto;position:relative;z-index:2}

/* الترويسة — نفس أسلوب عناوين متجرك */
.kng-head{text-align:center;margin-bottom:36px}
.kng-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.9);color:#444;
  border:1px solid rgba(201,164,129,.35);
  padding:6px 18px;border-radius:100px;font-size:.85rem;font-weight:700;margin-bottom:14px;
}
.kng-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--g-primary);animation:knSoft 2s infinite}
@keyframes knSoft{0%{box-shadow:0 0 0 0 rgba(201,164,129,.55)}100%{box-shadow:0 0 0 12px rgba(201,164,129,0)}}
.kng-head h2{color:var(--g-text);font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:800;margin:0 0 10px}
.kng-head h2 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--g-primary-dark),var(--g-primary));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.kng-head p{color:var(--g-muted);font-size:clamp(.9rem,2vw,1.05rem);margin:0 auto;max-width:640px;line-height:1.9}

.kng-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:start}

/* إطار الكرة — بطاقة بيضاء بنفس لغة بطاقات منتجاتك */
.kng-globe-card{position:relative}
.kng-globe-frame{
  position:relative;aspect-ratio:1/1;max-width:620px;margin-inline:auto;width:100%;
  background:#ffffff;border:1px solid #eeeeee;border-radius:28px;
  box-shadow:0 24px 60px -30px rgba(74,37,2,.25);
  padding:14px;overflow:hidden;
}
.kng-globe-frame svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none;border-radius:20px}
.kng-globe-frame svg:active{cursor:grabbing}
.kng-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--g-muted);font-size:.9rem;z-index:1}

/* أزرار الزوم */
.kng-zoom{
  position:absolute;bottom:18px;inset-inline-start:18px;z-index:3;
  display:flex;flex-direction:column;gap:6px;
}
.kng-zoom button{
  width:40px;height:40px;border-radius:12px;border:1px solid #eeeeee;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  color:#4a2502;font-size:1.15rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.25s;box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.kng-zoom button:hover{background:var(--g-primary);color:#fff;border-color:var(--g-primary)}

.kng-hint{
  position:absolute;bottom:18px;inset-inline-end:18px;z-index:3;
  background:rgba(255,255,255,.85);backdrop-filter:blur(4px);
  border:1px solid #eeeeee;border-radius:100px;
  padding:6px 14px;font-size:.72rem;color:#888;pointer-events:none;
}

/* وسيلة الإيضاح */
.kng-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.kng-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #eeeeee;border-radius:100px;
  padding:7px 16px;font-size:.8rem;color:#555;
}
.kng-chip i{width:11px;height:11px;border-radius:50%;display:inline-block}

/* بطاقات المراحل — أبيض بحدود مثل بطاقات "رضاك أولويتنا" */
.kng-timeline{display:flex;flex-direction:column;gap:14px}
.kng-stage{
  position:relative;background:#ffffff;border:1px solid #eeeeee;
  border-radius:18px;padding:20px 24px;cursor:pointer;transition:.35s;overflow:hidden;
}
.kng-stage::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--g-primary),var(--g-primary-dark));
  transform:scaleY(0);transition:.35s;transform-origin:top;
}
.kng-stage:hover{border-color:var(--g-primary);transform:translateY(-3px);box-shadow:0 12px 28px -14px rgba(74,37,2,.2)}
.kng-stage.active{border-color:var(--g-primary);background:#fffdf8;box-shadow:0 12px 28px -14px rgba(74,37,2,.22)}
.kng-stage.active::before{transform:scaleY(1)}
.kng-stage .num{font-size:.72rem;color:var(--g-primary-dark);letter-spacing:2px;margin-bottom:6px;display:block;font-weight:700}
.kng-stage h4{color:var(--g-text);margin:0 0 6px;font-size:1.05rem;font-weight:800}
.kng-stage p{color:var(--g-muted);margin:0;font-size:.85rem;line-height:1.8}

/* الإحصائيات */
.kng-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.kng-stat{
  text-align:center;background:#fff;border:1px solid #eeeeee;border-radius:16px;padding:16px 8px;
  transition:.3s;
}
.kng-stat:hover{border-color:var(--g-primary)}
.kng-stat b{display:block;color:#4a2502;font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:800}
.kng-stat span{color:var(--g-muted);font-size:.75rem}

@media(max-width:900px){
  .kng-grid{grid-template-columns:1fr}
  .kng-section{padding:50px 12px}
  .kng-hint{display:none}
}

/* ═══════════════════════════════════════════
   قسم الأسئلة الشائعة — karam_faq
   ═══════════════════════════════════════════ */

/* ── 1) ألوان العناوين والأسئلة ── */
.karam_faq .s-block__title h2,
.karam_faq dt .collapse-trigger > span:first-child,
.karam_faq dt .collapse-trigger i{
  color:#8a7f3f !important;
}

/* تلوين ناعم عند فتح السؤال */
.karam_faq dt .collapse-trigger[aria-expanded="true"] > span:first-child{
  color:#6f6531 !important;
}

/* الإجابات تبقى رمادية كما هي — لا تعديل عليها */


/* ── 2) دمج الصورة مع الخلفية بلا حواف ── */
.karam_faq .rounded-2xl.lg\:w-5\/12{
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* إلغاء طبقة التدرج الزيتوني التي كانت تحدّ أسفل الصورة */
.karam_faq .rounded-2xl.lg\:w-5\/12 > .absolute.inset-0{
  background:radial-gradient(
      ellipse at 50% 60%,
      rgba(138,127,63,.28) 0%,
      rgba(138,127,63,.10) 45%,
      rgba(255,255,255,0) 72%
  ) !important;
  z-index:2 !important;
  pointer-events:none;
  /* الطبقة نفسها تتلاشى من الأطراف */
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 38%, transparent 74%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 38%, transparent 74%);
}

/* ذوبان الصورة نفسها من كل الاتجاهات */
.karam_faq .rounded-2xl.lg\:w-5\/12 img{
  border-radius:0 !important;
  -webkit-mask-image:
      radial-gradient(ellipse 78% 78% at 50% 48%, #000 34%, rgba(0,0,0,.55) 62%, transparent 82%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-image:
      radial-gradient(ellipse 78% 78% at 50% 48%, #000 34%, rgba(0,0,0,.55) 62%, transparent 82%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  filter:saturate(1.02) contrast(1.02);
}

/* توهج دافئ خلف الصورة يزيد الاندماج مع بياض القسم */
.karam_faq .rounded-2xl.lg\:w-5\/12::after{
  content:"";
  position:absolute;
  inset:-6%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(
      ellipse at 50% 50%,
      rgba(201,164,129,.16) 0%,
      rgba(201,164,129,.05) 45%,
      transparent 70%
  );
}

/* منع تجاوز التكبير عند الـ hover لحدود القسم */
.karam_faq{overflow:hidden}
.karam_faq .rounded-2xl.lg\:w-5\/12 img{
  transform-origin:center;
}
.karam_faq .group:hover img{
  transform:scale(1.06) !important;
  filter:saturate(1.05) contrast(1.03) brightness(1.04);
}

/* ── 3) الجوال: تخفيف الذوبان لأن المساحة أضيق ── */
@media(max-width:1024px){
  .karam_faq .rounded-2xl.lg\:w-5\/12 img{
    -webkit-mask-image:radial-gradient(ellipse 88% 82% at 50% 50%, #000 46%, transparent 88%);
    mask-image:radial-gradient(ellipse 88% 82% at 50% 50%, #000 46%, transparent 88%);
  }

  /* مؤشر النقر + تكبير خفيف عند المرور على الشريحة القابلة للنقر */
.karam_hero .swiper-slide:has(.kh-slide-link) img{
  transition:transform .5s ease;
}
.karam_hero .swiper-slide:has(.kh-slide-link):hover img{
  transform:scale(1.02);
}

/* إبقاء نقاط الترقيم فوق طبقة الرابط وقابلة للنقر */
.karam_hero .swiper-pagination{
  z-index:10 !important;
  pointer-events:auto;
}
}