/* Marketiro — زرار «احجز تشخيص مجاني» في الهيدر (menu item class: header-cta) */
.site-header .menu-item.header-cta > a,
.site-navigation-dropdown .menu-item.header-cta > a {
  background-color: var(--e-global-color-accent, #FF6600);
  color: var(--e-global-color-white, #FFFFFF) !important;
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
  line-height: 1.3;
  transition: filter .2s ease;
}
.site-header .menu-item.header-cta > a:hover,
.site-header .menu-item.header-cta > a:focus-visible,
.site-navigation-dropdown .menu-item.header-cta > a:hover {
  filter: brightness(0.92);
  color: var(--e-global-color-white, #FFFFFF) !important;
}
.site-header .site-navigation ul.menu { align-items: center; }
.site-navigation-dropdown .menu-item.header-cta > a { display: inline-block; margin: 8px 16px; }


/* ===== Marketiro — قسم المنصات ===== */

/* عناوين الصفوف الصغيرة: حطّ class اسمه row-title على Heading الصف */
.row-title .elementor-heading-title {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--e-global-color-5006f55, #F6F2EA) !important;
  opacity: .6;
}
@media (max-width: 767px) {
  .row-title .elementor-heading-title { font-size: 14px !important; }
}

/* شكل اللوجوهات: حطّ class واحد منهم على Container الصف (جنب mk-marquee) */
.mk-marquee.logos-square .elementor-element.elementor-widget-image,
.mk-marquee.logos-round .elementor-element.elementor-widget-image {
  width: 112px !important;
  height: 112px !important;
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--e-global-color-5006f55, #F6F2EA);
}
.mk-marquee.logos-square .elementor-widget-image img,
.mk-marquee.logos-round .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.mk-marquee.logos-square .elementor-element.elementor-widget-image { border-radius: 14px; }
.mk-marquee.logos-round  .elementor-element.elementor-widget-image { border-radius: 50%; padding: 22px; }

@media (max-width: 767px) {
  .mk-marquee.logos-square .elementor-element.elementor-widget-image,
  .mk-marquee.logos-round .elementor-element.elementor-widget-image { width: 88px !important; height: 88px !important; padding: 14px; }
  .mk-marquee.logos-round .elementor-element.elementor-widget-image { padding: 18px; }
}


/* ===== Marketiro — القائمة المنسدلة في الهيدر ===== */
/* ديسكتوب: تفتح بالـ hover أو بالتركيز من الكيبورد */
.site-header .site-navigation ul.menu li.menu-item-has-children:hover > ul,
.site-header .site-navigation ul.menu li.menu-item-has-children:focus-within > ul { display: block; }
.site-header .site-navigation ul.menu li ul {
  background: var(--e-global-color-secondary, #0A2C48);
  min-width: 220px;
  padding: 8px 0;
  border-radius: 8px;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 45%, transparent);
  z-index: 100;
}
.site-header .site-navigation ul.menu li ul li { border-block-end: 0; }
.site-header .site-navigation ul.menu li ul a,
.site-header .site-navigation ul.menu li ul a:hover,
.site-header .site-navigation ul.menu li ul a:focus {
  color: var(--e-global-color-5006f55, #F6F2EA);
  padding: 10px 18px;
  white-space: nowrap;
}
.site-header .site-navigation ul.menu li ul a:hover,
.site-header .site-navigation ul.menu li ul a:focus-visible {
  background: color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 10%, transparent);
}
.site-header .site-navigation ul.menu li.menu-item-has-children::after { color: var(--e-global-color-5006f55, #F6F2EA); }
.site-header .site-navigation ul.menu li.menu-item-has-children > a[href="#"] { cursor: default; }

/* موبايل وتابلت: القائمة بخلفية Secondary وروابط Off White، والخدمات تفتح بالضغط */
.site-navigation-dropdown ul.menu,
.site-navigation-dropdown ul.menu li a {
  background: var(--e-global-color-secondary, #0A2C48);
  color: var(--e-global-color-5006f55, #F6F2EA);
}
.site-navigation-dropdown ul.menu li.current-menu-item > a {
  background: var(--e-global-color-primary, #16598E);
  color: var(--e-global-color-5006f55, #F6F2EA);
}
.site-navigation-dropdown ul.menu li li a {
  padding-inline-start: 36px;
  background: color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 6%, var(--e-global-color-secondary, #0A2C48));
}
.site-navigation-dropdown ul.menu li a { border-block-end: 1px solid color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 10%, transparent); }
.site-navigation-dropdown ul.menu li.menu-item-has-children > a::after { content: " ▾"; }
.site-navigation-dropdown ul.menu li.menu-item-has-children.elementor-active > a::after { content: " ▴"; }

/* أيقونة ☰ في الموبايل */
.site-header .site-navigation-toggle-holder .site-navigation-toggle {
  color: var(--e-global-color-5006f55, #F6F2EA);
  background-color: color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 12%, transparent);
}


/* =====================================================================
   Marketiro — نظام الخطوط (أحجام + مسافات بين السطور) — للموقع كله
   قاعدة خط Cairo: العناوين H1–H3 وعنوان الهيرو 1.6 · النصوص والفقرات 1.8
   · الأسطر الصغيرة (عناوين الصفوف، الوسوم، الفوتر) 1.6 · أرقام/كلمات Inter وحدها 1.1
   الـ classes تُضاف من Elementor: Advanced ← CSS Classes
     mk-h2 عنوان قسم · mk-h3 عنوان كارت · mk-lead سطر تعريفي تحت عنوان كبير
     mk-body نص عادي · mk-small نص صغير · mk-label عنوان صغير فوق قائمة
     mk-tag وسم · mk-num رقم كبير (Inter) · mk-step-num رقم خطوة (Inter)
     mk-statement جملة بارزة · mk-en كلمة إنجليزي داخل نص عربي
     mk-balance توزيع السطور بالتساوي · mk-faq-acc أسئلة شائعة (Accordion)
     mk-service-list قائمة نقاط الخدمة · mk-service-link / mk-work-link / mk-result-btn روابط نصية
   ===================================================================== */

/* 1) قواعد عامة */
h1, h2, h3, .elementor-heading-title { line-height: 1.6 !important; }
.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li,
.elementor-icon-list-text, .elementor-tab-content, .elementor-tab-content p,
.entry-content p, .entry-content li { line-height: 1.8 !important; }
.mk-balance .elementor-heading-title, .mk-balance p,
.mk-h2 .elementor-heading-title, .mk-h3 .elementor-heading-title { text-wrap: balance; }
.mk-en { font-family: var(--e-global-typography-accent-font-family), sans-serif; }

/* 2) الأحجام */
.mk-h2 .elementor-heading-title { font-size: 36px !important; }
.mk-h3 .elementor-heading-title { font-size: 22px !important; }
.mk-lead p { font-size: 20px !important; }
.mk-body p, .mk-body .elementor-icon-list-text,
.mk-service-list .elementor-icon-list-text { font-size: 17px !important; }
.mk-small p { font-size: 14px !important; line-height: 1.6 !important; }
.mk-label .elementor-heading-title,
.mk-tag .elementor-heading-title { font-size: 14px !important; line-height: 1.6 !important; }
.mk-num .elementor-heading-title,
.mk-step-num .elementor-heading-title { font-size: 44px !important; line-height: 1.1 !important; }
.mk-statement p { font-size: 26px !important; line-height: 1.8 !important; }
.mk-faq-acc .elementor-accordion-title { font-size: 22px !important; line-height: 1.6 !important; }
.mk-faq-acc .elementor-tab-content, .mk-faq-acc .elementor-tab-content p { font-size: 17px !important; }
.mk-result-btn .elementor-button, .mk-service-link .elementor-button,
.mk-work-link .elementor-button { font-size: 16px !important; line-height: 1.6 !important; }
.mk-work-all .elementor-button { font-size: 17px !important; }

@media (max-width: 1024px) {
  .mk-work-card .mk-h3 .elementor-heading-title { font-size: 20px !important; }
}
@media (max-width: 767px) {
  .mk-h2 .elementor-heading-title { font-size: 28px !important; }
  .mk-h3 .elementor-heading-title { font-size: 20px !important; }
  .mk-lead p { font-size: 17px !important; }
  .mk-body p, .mk-body .elementor-icon-list-text, .mk-service-list .elementor-icon-list-text,
  .mk-faq-acc .elementor-tab-content, .mk-faq-acc .elementor-tab-content p { font-size: 16px !important; }
  .mk-statement p { font-size: 21px !important; }
  .mk-faq-acc .elementor-accordion-title { font-size: 20px !important; }
}

/* ===== Marketiro — نموذج التواصل (Jetpack Forms) — class: mk-form على حاوية النموذج ===== */
.elementor .mk-form .elementor-shortcode, .elementor .mk-form form { width: 100%; margin: 0; }
.elementor .mk-form .grunion-field-wrap { margin: 0 0 20px; }
.elementor .mk-form form > p { margin: 0; }
.elementor .mk-form label {
  display: block; margin: 0 0 8px;
  color: var(--e-global-color-secondary, #0A2C48);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 600; font-size: 14px; line-height: 1.6;
}
/* نص «مطلوب» الافتراضي من Jetpack يظهر مكرراً؛ نستبدله بنجمة واحدة (الحقل نفسه يحمل required) */
.elementor .mk-form .grunion-label-required { font-size: 0; margin-inline-start: 4px; }
.elementor .mk-form .grunion-label-required::after { content: "*"; font-size: 14px; color: var(--e-global-color-primary, #16598E); }
.elementor .mk-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.elementor .mk-form textarea, .elementor .mk-form select {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 12px;
  border: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 20%, transparent);
  border-radius: 8px; background: transparent;
  color: var(--e-global-color-text, #4A5568);
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: 16px; line-height: 1.6; box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.elementor .mk-form textarea { height: 140px; min-height: 120px; resize: vertical; }
.elementor .mk-form input:not([type=submit]):focus, .elementor .mk-form textarea:focus, .elementor .mk-form select:focus {
  outline: none; border-color: var(--e-global-color-primary, #16598E);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-global-color-primary, #16598E) 20%, transparent);
}
.elementor .mk-form button[type=submit], .elementor .mk-form input[type=submit] {
  display: inline-block; width: auto; margin: 4px 0 0; padding: 14px 32px; border: 0; border-radius: 8px;
  background: var(--e-global-color-accent, #FF6600); color: var(--e-global-color-white, #FFFFFF);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.4; cursor: pointer; transition: background-color .2s ease;
}
.elementor .mk-form button[type=submit]:hover, .elementor .mk-form input[type=submit]:hover {
  background: var(--e-global-color-secondary, #0A2C48); color: var(--e-global-color-white, #FFFFFF);
}
.elementor .mk-form button[type=submit]:focus-visible, .elementor .mk-form input[type=submit]:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #16598E); outline-offset: 3px;
}
@media (max-width: 767px) {
  .elementor .mk-form button[type=submit], .elementor .mk-form input[type=submit] { width: 100%; }
}

/* ===== Marketiro — أزرار البرتقالي (Accent): نص أبيض Bold =====
   تشمل: أزرار التشخيص (wa-diagnosis)، زرار الهيدر، زرار إرسال النموذج،
   وأي زرار برتقالي جديد عليه class: mk-btn-accent */
.wa-diagnosis .elementor-button,
.mk-btn-accent .elementor-button,
.site-header .menu-item.header-cta > a,
.site-navigation-dropdown .menu-item.header-cta > a,
.elementor .mk-form button[type=submit],
.elementor .mk-form input[type=submit] { font-weight: 700 !important; }


/* ===== Marketiro — الفوتر (Elementor Header & Footer Builder — قالب «فوتر ماركيتيرو») =====
   classes: mk-footer · mk-footer-cols · mk-footer-col · mk-footer-brand · mk-footer-title
            mk-footer-links · mk-footer-contact · mk-footer-bottom · mk-footer-copy */
.mk-footer-cols > .mk-footer-col { flex: 1 1 0; min-width: 0; }
.mk-footer-cols > .mk-footer-brand { flex: 1.4 1 0; }
.mk-footer-logo img { width: 180px; height: auto; }
.mk-footer-tagline p { font-size: 15px !important; line-height: 1.8 !important; margin: 0; max-width: 300px; }
/* عناوين الأعمدة: Off White بشفافية 60% وأصغر من الروابط */
.mk-footer-title .elementor-heading-title { font-size: 14px !important; line-height: 1.6 !important; opacity: .6; }
/* الروابط: Off White دائماً، وAccent عند الوقوف بالماوس فقط (اللون من إعدادات الـ Icon List) */
.mk-footer-links .elementor-icon-list-text { font-size: 16px !important; line-height: 1.6 !important; }
.mk-footer-links a, .mk-footer-links a:visited, .mk-footer-links a:focus, .mk-footer-links a:active { color: inherit; text-decoration: none; }
.mk-footer-links a:focus-visible { outline: 2px solid var(--e-global-color-accent, #FF6600); outline-offset: 3px; border-radius: 2px; }
/* الرقم والإيميل والحساب: اتجاه LTR */
.mk-footer-contact [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
/* الخط الفاصل وسطر الحقوق */
.mk-footer-bottom { border-top: 1px solid color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 15%, transparent); }
.mk-footer-copy p { font-size: 14px !important; line-height: 1.6 !important; margin: 0; }

@media (max-width: 1024px) {
  .mk-footer-cols > .mk-footer-brand { flex: 1 1 100%; }
  .mk-footer-cols > .mk-footer-col:not(.mk-footer-brand) { flex: 1 1 0; }
}
@media (max-width: 767px) {
  .mk-footer-cols > .mk-footer-col, .mk-footer-cols > .mk-footer-brand { flex: 0 0 auto; width: 100%; }
  .mk-footer-brand { text-align: center; }
  .mk-footer-brand .mk-footer-tagline p { margin-inline: auto; }
  .mk-footer-col:not(.mk-footer-brand) { align-items: flex-start; text-align: start; }
  .mk-footer-col:not(.mk-footer-brand) .elementor-icon-list-items { justify-content: flex-start; }
}


/* =====================================================================
   Marketiro — لمسات الفخامة (CSS فقط، بدون إضافات أو مكتبات)
   classes على الأقسام: mk-dark (قسم غامق) · mk-glow (توهج الهيرو) · mk-glow-soft (توهج أخف)
   · mk-grain (حبيبات noise) · mk-sep / mk-sep-dark (فاصل متدرج أعلى القسم)
   كل الحركات تتوقف مع prefers-reduced-motion (آخر الكتلة)
   ===================================================================== */

/* 1) الطبقات: التوهج (z 0) ← الحبيبات (z 1) ← المحتوى (z 2) */
.mk-glow, .mk-glow-soft, .mk-grain { position: relative; isolation: isolate; overflow: hidden; }
.mk-glow > :not(.elementor-absolute),
.mk-glow-soft > :not(.elementor-absolute),
.mk-grain > :not(.elementor-absolute) { position: relative; z-index: 2; }

/* توهج: دائرتان ضبابيتان — Primary كبيرة و Accent صغيرة بشفافية 15% */
.mk-glow::after, .mk-glow-soft::after {
  content: ""; position: absolute; inset: -15%; z-index: 0; pointer-events: none;
  filter: blur(60px);
}
.mk-glow::after {
  background:
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--e-global-color-primary, #16598E) 90%, transparent) 0, transparent 36%),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--e-global-color-accent, #FF6600) 15%, transparent) 0, transparent 16%);
}
.mk-glow-soft::after {
  opacity: .6;
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--e-global-color-primary, #16598E) 70%, transparent) 0, transparent 30%),
    radial-gradient(circle at 12% 90%, color-mix(in srgb, var(--e-global-color-accent, #FF6600) 10%, transparent) 0, transparent 14%);
}

/* 2) Grain: noise بشفافية 4% (SVG feTurbulence داخلي — بدون صور خارجية) */
.mk-grain::before {
  content: "" !important; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .04 !important; mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* 3) كروت زجاجية على الخلفيات الغامقة (+ class: mk-glass لأي كارت آخر) */
.mk-dark .mk-service-card, .mk-dark .mk-work-card, .mk-dark .mk-result-card, .mk-glass {
  background: rgba(255, 255, 255, .04) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 12%, transparent) !important;
  border-radius: 16px !important;
}

/* 4) Hover: الكروت ترتفع 4px وظلها يكبر بنعومة */
.mk-service-card, .mk-work-card, .mk-result-card, .mk-glass {
  transition: transform 250ms ease, box-shadow 250ms ease;
  box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 14%, transparent);
}
.mk-service-card:hover, .mk-work-card:hover, .mk-result-card:hover, .mk-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 38%, transparent);
}
/* الزرار البرتقالي: يفضل برتقالي عند الوقوف ويلمع بظل برتقالي خفيف */
.wa-diagnosis .elementor-button, .mk-btn-accent .elementor-button,
.site-header .menu-item.header-cta > a, .site-navigation-dropdown .menu-item.header-cta > a,
.elementor .mk-form button[type=submit], .elementor .mk-form input[type=submit] {
  transition: box-shadow 250ms ease, filter 250ms ease, background-color 250ms ease;
}
.wa-diagnosis .elementor-button:hover, .wa-diagnosis .elementor-button:focus-visible,
.mk-btn-accent .elementor-button:hover, .mk-btn-accent .elementor-button:focus-visible,
.site-header .menu-item.header-cta > a:hover, .site-header .menu-item.header-cta > a:focus-visible,
.elementor .mk-form button[type=submit]:hover, .elementor .mk-form input[type=submit]:hover {
  background-color: var(--e-global-color-accent, #FF6600) !important;
  color: var(--e-global-color-white, #FFFFFF) !important;
  filter: brightness(1.04);
  box-shadow: 0 8px 26px -6px color-mix(in srgb, var(--e-global-color-accent, #FF6600) 55%, transparent);
}

/* 5) الهيدر (التصميم الجديد، 2026-10-11): ثابت (fixed) فوق الصفحة، ومكانه محجوز بـ padding-top على الـ body، وارتفاعه ثابت (الخلفية والظل بس اللي بيتغيروا)، فمفيش CLS.
   - فوق القسم الغامق الأول (.mk-under-header) قبل 40px تمرير: شفاف + روابط بيضاء + لوجو أبيض.
   - بعد 40px تمرير (في الرئيسية على الكمبيوتر أقل، قبل ما الموبايل الفاتح يوصل تحت الروابط)، أو في الصفحات اللي ما فيهاش .mk-under-header (المقال، الخصوصية، التصنيفات): أبيض + ظل خفيف + روابط ولوجو كحلي. انتقال 0.25 ثانية.
   - الكلاس mk-scrolled على <html> بيتحط من سكريبت في فوتر 306 (ويدجت fb395e4). */
body { padding-top: var(--mk-header-h); }
#site-header.site-header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 999; padding-block: 16px; background-color: #FFFFFF !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 2px 12px rgba(10,44,72,.08); transition: background-color .25s ease, box-shadow .25s ease; }
/* بين 993 و1199px قالب Hello بيحدد عرض الهيدر بـ 800px فالقائمة بتنزل لسطر تاني؛ نخليه بعرض الشاشة علشان يفضل سطر واحد بارتفاع --mk-header-h */
@media (min-width: 993px) and (max-width: 1199px) { #site-header .header-inner { max-width: none; padding-inline: 24px; } }
body.admin-bar #site-header.site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #site-header.site-header { top: 46px; } }
/* تحت 600px (للمسجّلين بس): شريط إدارة WordPress بيتثبت هو كمان، والهيدر تحته على طول */
@media (max-width: 600px) { body.admin-bar #wpadminbar { position: fixed; } body.admin-bar #site-header.site-header { top: 46px; } }
/* القائمة المنسدلة (موبايل/تابلت): لو أطول من الشاشة تتمرر جوه نفسها، لأن الهيدر fixed والصفحة ما بتحركهاش */
#site-header .site-navigation-dropdown ul.menu { max-height: calc(100vh - var(--mk-header-h)); max-height: calc(100dvh - var(--mk-header-h)); overflow-y: auto; overscroll-behavior: contain; }

/* اللوجو PNG (لو السكريبت ما اشتغلش أو من غير JavaScript): الأبيض (الصورة الأصلية) فوق القسم الغامق، والكحلي (::after) في الحالة البيضاء */
#site-header .custom-logo-link { position: relative; display: block; line-height: 0; }
#site-header .custom-logo { opacity: 0; transition: opacity .25s ease; }
#site-header .custom-logo-link::after { content: ""; position: absolute; inset: 0; background: url("https://i0.wp.com/marketiro.com/wp-content/uploads/2026/10/logo-wordmark-navy-EN.png?w=360&ssl=1") center/contain no-repeat; opacity: 1; transition: opacity .25s ease; pointer-events: none; }

/* الروابط وأيقونة القائمة: كحلي في الحالة البيضاء (زرار «احجز تشخيصاً مجانياً» يفضل برتقالي، والقائمة المنسدلة تفضل كحلي غامق) */
#site-header .site-navigation ul.menu > li:not(.header-cta) > a { color: #0A2C48; transition: color .25s ease; }
#site-header .site-navigation ul.menu li.menu-item-has-children::after { color: #0A2C48; transition: color .25s ease; }
/* زرار القائمة (موبايل/تابلت): 3 خطوط من غير المربع الرمادي، وبيتحول لـ X لما القائمة تتفتح (transform بس).
   نفس ارتفاع الزرار القديم (30px) علشان الهيدر ما يتغيرش، ومنطقة اللمس 44px بـ ::before شفاف. */
#site-header .site-navigation-toggle-holder .site-navigation-toggle { position: relative; color: #0A2C48; background-color: transparent !important; border-radius: 0; padding: 6px 10px; transition: color .25s ease; }
#site-header .site-navigation-toggle-holder .site-navigation-toggle::before { content: ""; position: absolute; inset: -7px 0; }
#site-header .site-navigation-toggle-holder .site-navigation-toggle-icon { position: relative; width: 24px; height: 18px; }
#site-header .site-navigation-toggle-holder .site-navigation-toggle-icon::before,
#site-header .site-navigation-toggle-holder .site-navigation-toggle-icon::after { position: absolute; left: 0; right: 0; height: 2px; margin: 0; border-radius: 2px; transition: transform .25s ease, box-shadow .15s ease; }
#site-header .site-navigation-toggle-holder .site-navigation-toggle-icon::before { top: 0; box-shadow: 0 8px 0 currentcolor; }
#site-header .site-navigation-toggle-holder .site-navigation-toggle-icon::after { top: 16px; }
#site-header .site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon::before { box-shadow: 0 0 0 transparent; transform: translateY(8px) rotate(45deg); }
#site-header .site-navigation-toggle-holder .site-navigation-toggle[aria-expanded=true] .site-navigation-toggle-icon::after { transform: translateY(-8px) rotate(-45deg); }

/* شفاف فوق القسم الغامق الأول قبل 40px تمرير (من غير خلفية ولا خط فاصل) */
html:not(.mk-scrolled) body:has(.mk-under-header) #site-header.site-header { background-color: transparent !important; box-shadow: none; }
html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .custom-logo { opacity: 1; }
html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .custom-logo-link::after { opacity: 0; }
html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .site-navigation ul.menu > li:not(.header-cta) > a,
html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .site-navigation ul.menu li.menu-item-has-children::after { color: #FFFFFF; }
html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .site-navigation-toggle-holder .site-navigation-toggle { color: #FFFFFF; }
/* من غير JavaScript الكلاس mk-scrolled عمره ما هيتحط، فالهيدر يفضل أبيض وروابطه كحلي على طول (نفس الحالة البيضاء) */
@media (scripting: none) {
  html:not(.mk-scrolled) body:has(.mk-under-header) #site-header.site-header { background-color: #FFFFFF !important; box-shadow: 0 2px 12px rgba(10,44,72,.08); }
  html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .custom-logo { opacity: 0; }
  html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .custom-logo-link::after { opacity: 1; }
  html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .site-navigation ul.menu > li:not(.header-cta) > a,
  html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .site-navigation ul.menu li.menu-item-has-children::after { color: #0A2C48; }
  html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .site-navigation-toggle-holder .site-navigation-toggle { color: #0A2C48; }
}

@media (prefers-reduced-motion: reduce) {
  #site-header.site-header, #site-header *, #site-header .custom-logo-link::after,
  #site-header .site-navigation-toggle-icon::before, #site-header .site-navigation-toggle-icon::after { transition: none !important; }
}

/* 5ب) اللوجو المتحرك: SVG بحروف ملف الهوية (Inter ExtraBold) بيتحط فوق الـ PNG بنفس المقاس بالظبط (الـ PNG بيفضل مخفي جوه الرابط علشان يحدد المقاس في كل breakpoint)، فمفيش CLS والمنيو ما بيتحركش.
   السكريبت في فوتر 306 (ويدجت fb395e4). الدخلة (ثانية واحدة) مرة واحدة في الزيارة، والموجة عند الهوفر على الكمبيوتر بس. prefers-reduced-motion: اللوجو ثابت كامل.
   علشان الـ PNG ما يظهرش ويختفي (flash) قبل ما السكريبت يشتغل: مخفي لحد ما الـ SVG يجهز؛ ولو السكريبت ما اشتغلش لأي سبب، الـ PNG يظهر بعد 1.5 ثانية. من غير JavaScript (scripting: none) الـ PNG ظاهر على طول. */
#site-header .custom-logo-link:not(.mk-logo-svg) .custom-logo,
#site-header .custom-logo-link:not(.mk-logo-svg)::after { animation: mk-logo-wait .01s linear 1.5s both; }
@media (scripting: none) {
  #site-header .custom-logo-link:not(.mk-logo-svg) .custom-logo,
  #site-header .custom-logo-link:not(.mk-logo-svg)::after { animation: none; }
}
@keyframes mk-logo-wait { from { visibility: hidden; } to { visibility: visible; } }
/* علامة إن التنسيقات دي موجودة: سكريبت الفوتر ما يبدّلش اللوجو إلا لو لقاها (لو صفحة قديمة من الكاش جت مع CSS قديم، اللوجو PNG يفضل زي ما هو) */
:root { --mk-hdr: 2; }
#site-header .mk-logo-svg .custom-logo { visibility: hidden !important; }
#site-header .custom-logo-link.mk-logo-svg::after { display: none !important; }
#site-header .mk-logo-svg .mk-lg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; color: #0A2C48; transition: color .25s ease; }
html:not(.mk-scrolled) body:has(.mk-under-header) #site-header .mk-logo-svg .mk-lg { color: #FFFFFF; }
.mk-lg .lg-w, .mk-lg .lg-m, .mk-lg .lg-dot, .mk-lg .lg-dot path { transform-box: fill-box; transform-origin: 50% 100%; }
.mk-lg .lg-dot path { transform-origin: 50% 50%; }
/* الدخلة: M والنقطة جنبه (0–0.35 ث) ← من 0.4 ث حافة القص بتتفرد من ورا الـ M للعرض الكامل في 0.6 ث، وكل حرف بيظهر بـ fade لما الحافة توصله، والنقطة ماشية مع الحافة لحد مكانها */
.mk-lg.is-intro .lg-m { animation: mk-lg-m .35s cubic-bezier(.22,1,.36,1) both; }
.mk-lg.is-intro .lg-rv { animation: mk-lg-rv .6s cubic-bezier(.22,1,.36,1) .4s both; }
.mk-lg.is-intro .lg-u { animation: mk-lg-f .25s ease var(--t) both; }
.mk-lg.is-intro .lg-dot { animation: mk-lg-d .6s cubic-bezier(.22,1,.36,1) .4s both; }
.mk-lg.is-intro .lg-dot path { animation: mk-lg-pop .35s cubic-bezier(.22,1,.36,1) both; }
.mk-lg.is-wave .lg-w { animation: mk-lg-wave .42s cubic-bezier(.22,1,.36,1) calc(var(--i) * 40ms) both; }
.mk-lg.is-wave .lg-dw { animation: mk-lg-hop .45s cubic-bezier(.22,1,.36,1) 360ms both; }
@keyframes mk-lg-m { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes mk-lg-rv { from { transform: translateX(-10700px); } to { transform: none; } }
@keyframes mk-lg-d { from { transform: translateX(-10616px); } to { transform: none; } }
@keyframes mk-lg-f { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-lg-pop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes mk-lg-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-143px) rotate(6deg); } }
@keyframes mk-lg-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-360px); } 65% { transform: none; } 80% { transform: translateY(-90px); } }
@media (prefers-reduced-motion: reduce) { .mk-lg, .mk-lg * { animation: none !important; transition: none !important; } }

/* 5ج) حد صارم لمقاس اللوجو في الهيدر (mk-logo-cap، 2026-10-14): حتى لو ملف تنسيقات Elementor (kit) ما اتحملش، اللوجو (الصورة والـ SVG) ما يكبرش.
   نفس المقاسات الحالية بالظبط: 180px تابلت/ديسكتوب و140px موبايل. */
#site-header .custom-logo-link { max-width: 180px; }
#site-header .site-logo img.custom-logo { width: auto !important; height: auto !important; max-width: 180px !important; max-height: 22px !important; }
@media (max-width: 767px) {
  #site-header .custom-logo-link { max-width: 140px; }
  #site-header .site-logo img.custom-logo { max-width: 140px !important; max-height: 17px !important; }
}

/* 6) أول قسم غامق يمتد تحت الهيدر الشفاف (class: mk-under-header) — ارتفاع الهيدر 73px ديسكتوب و78px تابلت/موبايل */
:root { --mk-header-h: 73px; }
@media (max-width: 1024px) { :root { --mk-header-h: 78px; } }
.mk-under-header { margin-top: calc(-1 * var(--mk-header-h)) !important; padding-top: var(--mk-header-h) !important; }

/* 7) فاصل رفيع متدرج يتلاشى من الأطراف أعلى كل قسم */
.mk-sep, .mk-sep-dark { border-top: 1px solid transparent !important; }
.mk-sep { border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 22%, transparent), transparent) 1 !important; }
.mk-sep-dark { border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 22%, transparent), transparent) 1 !important; }

/* 8) تمرير ناعم للروابط الداخلية (مع مسافة للهيدر الثابت) */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* 9) احترام prefers-reduced-motion في كل الحركات */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .elementor-invisible { visibility: visible !important; }
  .elementor-element.animated, .animated { animation: none !important; }
  .mk-service-card, .mk-work-card, .mk-result-card, .mk-glass,
  .wa-diagnosis .elementor-button, .mk-btn-accent .elementor-button,
  .site-header .menu-item.header-cta > a, .elementor .mk-form button[type=submit] { transition: none !important; }
  .mk-service-card:hover, .mk-work-card:hover, .mk-result-card:hover, .mk-glass:hover { transform: none !important; }
}


/* ===== Marketiro — «أعمالنا»: شكل الموبايل بالـ class على Container القسم =====
   cases-stack    → الكروت تحت بعض
   cases-carousel → صف أفقي scroll-snap، كل كارت 85% من العرض، ونقاط تحته (الحركة التلقائية في HTML widget داخل القسم)
   الديسكتوب والتابلت لا يتأثران. الكروت = .mk-work-card داخل .mk-work-grid (أي Duplicate يدخل تلقائياً) */
.cases-dots { display: none; }
@media (max-width: 767px) {
  .cases-stack .mk-work-grid { display: grid !important; grid-template-columns: 1fr !important; }
  .cases-carousel .mk-work-grid {
    display: flex !important; flex-wrap: nowrap !important; gap: 16px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    width: calc(100% + 32px) !important; max-width: none !important; margin-inline: -16px !important; padding-inline: 16px; scroll-padding-inline: 16px; padding-block: 4px 8px;
  }
  .cases-carousel .mk-work-grid::-webkit-scrollbar { display: none; }
  .cases-carousel .mk-work-grid > .mk-work-card { flex: 0 0 85vw !important; max-width: 85vw; scroll-snap-align: center; scroll-snap-stop: always; }
  .cases-carousel .cases-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .cases-dots button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 35%, transparent);
    transition: width .25s, background-color .25s;
  }
  .cases-dots button[aria-current="true"] { width: 22px; background: var(--e-global-color-5006f55, #F6F2EA); }
}
@media (prefers-reduced-motion: reduce) { .cases-dots button { transition: none; } }


/* ===== Marketiro — الصفحات الداخلية (القسم 4) =====
   mk-page-hero    → رأس الصفحات الداخلية: نفس خلفية الهيرو، عنوان H1 وسطر تحته، بدون صورة ولا زر
   mk-page-lead    → السطر تحت عنوان الصفحة (عرض مريح للقراءة)
   mk-services-lg  → كروت الخدمات بحجم أكبر (صفحة /services/) — توضع على Container قسم الخدمات */
.mk-page-lead { max-width: 720px; margin-inline: auto; }
.mk-services-lg .mk-services-grid { gap: 32px !important; }
.mk-services-lg .mk-service-card { padding: 40px !important; }
.mk-services-lg .mk-service-icon .elementor-icon { font-size: 44px !important; }
.mk-services-lg .mk-service-icon .elementor-icon svg { width: 44px; height: 44px; }
.mk-services-lg .mk-service-card .mk-h3 .elementor-heading-title { font-size: 28px !important; }
.mk-services-lg .mk-service-desc p { font-size: 19px !important; }
.mk-services-lg .mk-service-list .elementor-icon-list-text { font-size: 18px !important; }
.mk-services-lg .mk-service-link .elementor-button { font-size: 17px !important; }
@media (max-width: 1024px) {
  .mk-services-lg .mk-service-card { padding: 32px !important; }
}
@media (max-width: 767px) {
  .mk-services-lg .mk-services-grid { gap: 20px !important; }
  .mk-services-lg .mk-service-card { padding: 28px !important; }
  .mk-services-lg .mk-service-icon .elementor-icon { font-size: 36px !important; }
  .mk-services-lg .mk-service-icon .elementor-icon svg { width: 36px; height: 36px; }
  .mk-services-lg .mk-service-card .mk-h3 .elementor-heading-title { font-size: 22px !important; }
  .mk-services-lg .mk-service-desc p { font-size: 17px !important; }
  .mk-services-lg .mk-service-list .elementor-icon-list-text { font-size: 16px !important; }
  .mk-services-lg .mk-service-link .elementor-button { font-size: 16px !important; }
}


/* ===== Marketiro — الكروت فوق بعض على الموبايل: كل كارت بطول محتواه =====
   (شبكة Elementor بتخلي كل الصفوف بطول أطول كارت، فبيبان فراغ جوه الكروت القصيرة) */
@media (max-width: 767px) {
  .mk-services-grid, .mk-results-grid, .cases-stack .mk-work-grid { grid-template-rows: none !important; grid-auto-rows: auto !important; }
}


/* ===== Marketiro — المدونة (القسم 6) =====
   mk-blog-grid → أحجام شبكة المقالات في صفحة /blog/ (عنصر Premium Blog)
   المقال الواحد: قالب Hello الافتراضي (بدون Theme Builder) — عرض النص 760px في المنتصف، Cairo 18px،
   عناوين H2/H3 بلون Secondary، جداول بحدود خفيفة وصفوف متبادلة Off White، وكود بخلفية فاتحة وخط Inter */
.mk-blog-grid .premium-blog-entry-title { font-size: 20px !important; line-height: 1.6 !important; }
.mk-blog-grid .premium-blog-entry-meta, .mk-blog-grid .premium-blog-entry-meta a, .mk-blog-grid .premium-blog-entry-meta span { font-size: 14px !important; line-height: 1.6 !important; }
.mk-blog-grid .premium-blog-post-content, .mk-blog-grid .premium-blog-post-content p { font-size: 16px !important; line-height: 1.8 !important; }
.mk-blog-grid .premium-blog-filters-container a, .mk-blog-grid .premium-error-notice { font-size: 15px !important; line-height: 1.6 !important; }
@media (max-width: 767px) { .mk-blog-grid .premium-blog-entry-title { font-size: 18px !important; } }

/* رأس المقال: شريط غامق مثل رؤوس الصفحات الداخلية، يبدأ تحت الهيدر */
body.single-post { overflow-x: clip; }
body.single-post .site-main { max-width: none !important; width: 100%; padding-inline: 0 !important; margin: 0 !important; }
body.single-post .page-header { max-width: none !important; margin: calc(-1 * var(--mk-header-h, 73px)) 0 0 !important; padding: calc(var(--mk-header-h, 73px) + 72px) 24px 64px !important; background: linear-gradient(160deg, var(--e-global-color-primary, #16598E), var(--e-global-color-secondary, #0A2C48)); }
body.single-post .page-header .entry-title { max-width: 760px; margin: 0 auto; color: var(--e-global-color-5006f55, #F6F2EA); font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); font-size: 40px; line-height: 1.6 !important; text-align: center; text-wrap: balance; }

/* نص المقال */
body.single-post .page-content { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; color: var(--e-global-color-text, #4A5568); font-family: var(--e-global-typography-text-font-family), sans-serif; }
body.single-post .page-content p, body.single-post .page-content li { font-size: 18px; line-height: 1.9; }
body.single-post .page-content p { margin: 0 0 1.2em; }
body.single-post .page-content a { color: var(--e-global-color-primary, #16598E); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.single-post .page-content a:hover, body.single-post .page-content a:focus-visible { color: var(--e-global-color-secondary, #0A2C48); }
body.single-post .page-content h2, body.single-post .page-content h3 { color: var(--e-global-color-secondary, #0A2C48); font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); line-height: 1.6 !important; margin: 1.6em 0 .6em; }
body.single-post .page-content h2 { font-size: 28px; }
body.single-post .page-content h3 { font-size: 22px; }
body.single-post .page-content ul, body.single-post .page-content ol { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
body.single-post .page-content li { margin: .35em 0; }

/* الجداول */
body.single-post .page-content .wp-block-table { margin: 1.5em 0; overflow-x: auto; }
body.single-post .page-content table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
body.single-post .page-content th, body.single-post .page-content td { border: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 14%, transparent); padding: 10px 14px; text-align: start; vertical-align: top; }
body.single-post .page-content thead th { background: color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 6%, transparent); color: var(--e-global-color-secondary, #0A2C48); font-weight: 600; }
body.single-post .page-content tbody tr:nth-child(even) { background: var(--e-global-color-5006f55, #F6F2EA); }

/* الكود */
body.single-post .page-content code { font-family: var(--e-global-typography-accent-font-family), monospace; font-size: .9em; background: var(--e-global-color-5006f55, #F6F2EA); padding: .15em .45em; border-radius: 6px; direction: ltr; unicode-bidi: isolate; }
body.single-post .page-content pre { margin: 1.5em 0; padding: 16px 20px; background: var(--e-global-color-5006f55, #F6F2EA); border: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 10%, transparent); border-radius: 12px; direction: ltr; text-align: left; overflow-x: auto; }
body.single-post .page-content pre code { background: none; padding: 0; font-size: 15px; line-height: 1.7; }

/* الاقتباس ومقالات ذات صلة */
body.single-post .page-content blockquote { margin: 1.5em 0; padding: 4px 20px; border: 0; border-inline-start: 4px solid var(--e-global-color-primary, #16598E); color: var(--e-global-color-secondary, #0A2C48); font-style: normal; }
body.single-post .page-content blockquote p { margin: 0; }
body.single-post #jp-relatedposts .jp-relatedposts-headline em { font-style: normal; font-family: var(--e-global-typography-primary-font-family), sans-serif; color: var(--e-global-color-secondary, #0A2C48); font-size: 20px; }

@media (max-width: 767px) {
  body.single-post .page-header { padding: calc(var(--mk-header-h, 78px) + 48px) 16px 48px !important; }
  body.single-post .page-header .entry-title { font-size: 30px; }
  body.single-post .page-content { padding: 48px 16px 64px; }
  body.single-post .page-content p, body.single-post .page-content li { font-size: 17px; }
  body.single-post .page-content h2 { font-size: 24px; }
  body.single-post .page-content h3 { font-size: 20px; }
}

/* ===== Marketiro — صفحات التصنيفات + إظهار عنوان المقال ===== */
/* إعدادات Elementor تخفي عناوين القالب (--page-title-display: none)؛ نظهرها في المقال والتصنيف لأنها داخل الشريط الغامق */
body.single-post .page-header .entry-title,
body.archive .page-header .entry-title { display: block !important; }

/* رأس التصنيف: شريط غامق فيه «المدونة» واسم التصنيف فقط (بدون كلمة «التصنيف:») */
body.archive { overflow-x: clip; }
body.archive .site-main { max-width: none !important; width: 100%; padding-inline: 0 !important; margin: 0 !important; }
body.archive .page-header { max-width: none !important; margin: calc(-1 * var(--mk-header-h, 73px)) 0 0 !important; padding: calc(var(--mk-header-h, 73px) + 72px) 24px 64px !important; background: linear-gradient(160deg, var(--e-global-color-primary, #16598E), var(--e-global-color-secondary, #0A2C48)); text-align: center; }
body.archive .page-header .entry-title { max-width: 760px; margin: 0 auto; font-size: 0 !important; line-height: 0 !important; color: var(--e-global-color-5006f55, #F6F2EA); }
body.archive .page-header .entry-title::before { content: "المدونة"; display: block; margin: 0 0 12px; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); font-size: 14px; line-height: 1.6; color: var(--e-global-color-5006f55, #F6F2EA); }
body.archive .page-header .entry-title span { display: block; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); font-size: 40px; line-height: 1.6; color: inherit; text-wrap: balance; }

/* شبكة البطاقات بنفس بطاقة /blog/: ٣ أعمدة ديسكتوب، عمودان تابلت، عمود موبايل */
body.archive .page-content { max-width: 1140px; margin: 0 auto !important; padding: 64px 24px 96px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
body.archive .page-content > article.post { position: relative; display: flex; flex-direction: column; margin: 0; padding: 20px 24px 24px; background: var(--e-global-color-white, #FFFFFF); border: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 12%, transparent); border-radius: 16px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
body.archive .page-content > article.post:hover { transform: translateY(-4px); box-shadow: 0 12px 32px color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 12%, transparent); }
body.archive article.post > a:has(img) { order: -1; display: block; margin: -20px -24px 20px; }
body.archive article.post img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
body.archive article.post .entry-title { margin: 0 0 8px; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); font-size: 20px; line-height: 1.6; color: var(--e-global-color-secondary, #0A2C48); }
body.archive article.post .entry-title a { color: inherit; text-decoration: none; }
body.archive article.post .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* البطاقة كلها رابط للمقال */
body.archive article.post .entry-title a:hover, body.archive article.post .entry-title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
body.archive article.post p { margin: 0; font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 16px; line-height: 1.8; color: var(--e-global-color-text, #4A5568); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.archive .page-content:not(:has(article))::before { content: "لم ننشر مقالات في هذا التصنيف بعد."; grid-column: 1 / -1; padding: 48px 24px; text-align: center; border: 1px dashed color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 20%, transparent); border-radius: 16px; font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 16px; color: var(--e-global-color-text, #4A5568); }

/* التنقل بين صفحات التصنيف */
body.archive .pagination { max-width: 1140px; margin: -48px auto 96px; padding: 0 24px; display: flex; justify-content: space-between; gap: 16px; }
body.archive .pagination a { display: inline-block; padding: 8px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--e-global-color-primary, #16598E) 20%, transparent); background: color-mix(in srgb, var(--e-global-color-primary, #16598E) 6%, transparent); color: var(--e-global-color-secondary, #0A2C48); font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
body.archive .pagination a:hover, body.archive .pagination a:focus-visible { background: var(--e-global-color-primary, #16598E); border-color: var(--e-global-color-primary, #16598E); color: var(--e-global-color-white, #FFFFFF); }

@media (max-width: 1024px) {
  body.archive .page-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
  body.archive .page-header { padding: calc(var(--mk-header-h, 78px) + 48px) 16px 48px !important; }
  body.archive .page-header .entry-title span { font-size: 30px; }
  body.archive .page-content { grid-template-columns: 1fr; gap: 20px; padding: 40px 16px 64px; }
  body.archive article.post .entry-title { font-size: 18px; }
  body.archive .pagination { margin: -24px auto 64px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.archive .page-content > article.post, body.archive .pagination a { transition: none; }
  body.archive .page-content > article.post:hover { transform: none; }
}

/* ===== Marketiro — المقال: تصحيحات بعد أول مقال حقيقي ===== */
/* الجدول: القالب يلوّن الصفوف الفردية بالرمادي؛ نلغيه ونبقي الصفوف الزوجية Off White */
body.single-post .page-content tbody > tr > td { background-color: transparent; }
/* «شارك هذا الموضوع» و«معجب بهذه» (Jetpack): عنوان صغير بدل حجم عناوين المقال، وخط فاصل بلون الهوية */
body.single-post .page-content > .sharedaddy.sd-sharing-enabled { margin-top: 48px; }
body.single-post .page-content .sharedaddy .sd-title { margin: 0 0 12px; font-size: 15px; line-height: 1.6 !important; color: var(--e-global-color-secondary, #0A2C48); }
body.single-post .page-content .sharedaddy .sd-title::before { border-top-color: color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 12%, transparent); }

/* ===== Marketiro — وصف الوسم/التصنيف تحت اسمه في الشريط الغامق (صفحات /tag/ و /category/) ===== */
body.archive .page-header > p { max-width: 640px; margin: 16px auto 0 !important; font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 18px; line-height: 1.8; color: color-mix(in srgb, var(--e-global-color-5006f55, #F6F2EA) 85%, transparent); text-align: center; text-wrap: pretty; }
body.archive .page-header > p:empty { display: none; }
@media (max-width: 767px) { body.archive .page-header > p { font-size: 16px; } }

/* ===== Marketiro — قسم المنصات (#platforms): كل الخانات بنفس مقاس لوجوهات المنصات =====
   كل صفوف mk-marquee (منصات الإعلانات، منصات المتاجر، التتبع والبيانات، عملاؤنا): كل لوجو جوه صندوق ثابت 120×40 (ديسكتوب وتابلت) و 90×32 (موبايل) بـ object-fit: contain.
   المقاس يتحدد هنا من الصف؛ ما فيش داعي تغيّر Width/Height في الـ Image widget. */
.mk-marquee .elementor-widget-image { width: auto !important; height: auto !important; padding: 0 !important; background: none !important; border-radius: 0 !important; overflow: visible !important; }
.mk-marquee .elementor-widget-image img { width: 120px !important; height: 40px !important; max-width: none !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; }
@media (max-width: 767px) { .mk-marquee .elementor-widget-image img { width: 90px !important; height: 32px !important; } }
/* شفافية اللوجوهات 70%، وتبقى 100% لما الماوس يقف على اللوجو (ديسكتوب/تابلت فيها ماوس). الـ HTML widget بيضرب الـ 70% في تدرّج أطراف الشريط المتحرك (كل الأجهزة). */
#platforms .mk-marquee .elementor-widget-image { opacity: .7; transition: opacity .2s ease; }
@media (hover: hover) and (min-width: 768px) { #platforms .mk-marquee .elementor-widget-image:hover { opacity: 1 !important; } }
/* المسافة بين كل صف والتاني (بعنوانه) 56px = gap القسم 48px + 8px */
#platforms .elementor-element-2694e54, #platforms .elementor-element-174f2a6, #platforms .elementor-element-ce4f009 { margin-top: 8px !important; }


/* صف «عملاؤنا» فقط (class على الـ Container: mk-clients): لا سحب، لا تحديد، لا نقر على الصورة.
   قائمة الكليك يمين ممنوعة على الخانات دي بس (HTML widget في القسم). التكبير (zoom) في الموقع شغال عادي. */
.mk-clients .elementor-widget-image { -webkit-user-select: none; user-select: none; }
.mk-clients .elementor-widget-image img { pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ===== Marketiro — أيقونات كروت «أعمالنا» =====
   SVG متحرك داخل HTML widget أول كل كارت (class: mk-work-media mk-work-ico)، والـ alt في aria-label على الـ SVG.
   الحركة بتقف وهي برّه الشاشة (HTML widget «إيقاف حركة أيقونات الكروت» بيحط class mk-ico-off)، وprefers-reduced-motion جوه كل SVG. */
.mk-work-ico svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; }
.mk-ico.mk-ico-off * { animation-play-state: paused !important; }

/* ===== Marketiro — أغلفة المدونة المتحركة =====
   صورة الغلاف المرفوعة (Featured image، ثابتة) تظل في الصفحة للمشاركة والـ alt؛
   وفوقها في كروت /blog/ وصفحات التصنيفات والوسوم نرسم نفس الأيقونة متحركة (SVG).
   مع prefers-reduced-motion تظهر الصورة الثابتة فقط. */
@media (prefers-reduced-motion: no-preference) {
  :is(.premium-blog-thumbnail-container, body.archive article.post > a):has(img[src*="mk-cover-tracking"]) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' class='mk-ico mk-track'%3E%3Cdefs%3E%3ClinearGradient id='mk-track-bg' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%2316598E'/%3E%3Cstop offset='1' stop-color='%230A2C48'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cstyle%3E.mk-track .ln{fill:none;stroke:%23F6F2EA;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.mk-track .mk-track-d{stroke-width:18}.mk-track .mk-track-p{stroke-width:24;animation:mk-track-go 3s ease-in-out -.6s infinite}.mk-track .mk-track-l{animation:mk-track-led 3s ease-in-out -.6s infinite}.mk-track .mk-track-l2{animation-delay:-.75s}@keyframes mk-track-go{0%25{transform:translateX(52px);opacity:0}14%25,52%25{opacity:1}66%25,100%25{transform:translateX(-44px);opacity:0}}@keyframes mk-track-led{0%25,62%25{opacity:.35}72%25{opacity:1}94%25,100%25{opacity:.35}}@media (prefers-reduced-motion:reduce){.mk-track *{animation:none!important}}%3C/style%3E%3Crect width='1600' height='900' fill='url(%23mk-track-bg)'/%3E%3Cg class='ln' opacity='.4'%3E%3Crect x='454' y='267' width='190' height='106' rx='18'/%3E%3Crect x='454' y='407' width='190' height='106' rx='18'/%3E%3Crect x='454' y='547' width='190' height='106' rx='18'/%3E%3Cpath d='M489 320h54M489 460h54M489 600h54'/%3E%3Cpath class='mk-track-d' d='M581 320h0M581 460h0M581 600h0M1058 336h0M1086 336h0M1114 336h0'/%3E%3Cpath class='mk-track-d mk-track-l' d='M609 320h0'/%3E%3Cpath class='mk-track-d mk-track-l mk-track-l2' d='M609 460h0'/%3E%3Cpath class='mk-track-d mk-track-l' d='M609 600h0'/%3E%3Cpath d='M818 460H674M702 432l-28 28 28 28'/%3E%3Cpath class='mk-track-p' d='M760 460h0'/%3E%3Crect x='848' y='311' width='298' height='248' rx='20'/%3E%3Cpath d='M848 361h298'/%3E%3Ccircle cx='997' cy='460' r='46'/%3E%3Cpath d='M997 414v-22M997 506v22M951 460h-22M1043 460h22'/%3E%3Cpath fill='%23F6F2EA' d='M987 450h20v20h-20z'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
  :is(.premium-blog-thumbnail-container, body.archive article.post > a):has(img[src*="mk-cover-media-buying"]) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' class='mk-ico mk-media'%3E%3Cdefs%3E%3ClinearGradient id='mk-media-bg' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%2316598E'/%3E%3Cstop offset='1' stop-color='%230A2C48'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cstyle%3E.mk-media .ln{fill:none;stroke:%23F6F2EA;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.mk-media .w{transform-box:fill-box;transform-origin:100%25 50%25;animation:mk-media-w 3s ease-in-out infinite}.mk-media .w2{opacity:.85;animation-delay:-2s}.mk-media .w3{opacity:.65;animation-delay:-1s}@keyframes mk-media-w{0%25{opacity:0;transform:translateX(14px) scale(.94)}30%25{opacity:1}100%25{opacity:0;transform:translateX(-22px) scale(1.06)}}@media (prefers-reduced-motion:reduce){.mk-media *{animation:none!important}}%3C/style%3E%3Crect width='1600' height='900' fill='url(%23mk-media-bg)'/%3E%3Cg class='ln' opacity='.4'%3E%3Cellipse cx='705' cy='430' rx='44' ry='172'/%3E%3Cpath d='M709 259 995 370h95q30 0 30 30v60q0 30-30 30h-95L709 601M995 370v120'/%3E%3Cpath d='M1048 490l14 132q2 16 18 16h14q16 0 14-16l-14-132M1016 490v24q0 48 39 48'/%3E%3Cpath class='w' d='M624 342a150 150 0 0 0 0 176'/%3E%3Cpath class='w w2' d='M567 301a220 220 0 0 0 0 258'/%3E%3Cpath class='w w3' d='M510 260a290 290 0 0 0 0 340'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
  :is(.premium-blog-thumbnail-container, body.archive article.post > a):has(img[src*="mk-cover-ecommerce-stores"]) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' class='mk-ico mk-store'%3E%3Cdefs%3E%3ClinearGradient id='mk-store-bg' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%2316598E'/%3E%3Cstop offset='1' stop-color='%230A2C48'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cstyle%3E.mk-store .ln{fill:none;stroke:%23F6F2EA;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.mk-store .it,.mk-store .rp{animation:mk-store-drop 3s ease-in-out -1.2s infinite}.mk-store .rp{transform-box:fill-box;transform-origin:50%25 0;animation-name:mk-store-rope}@keyframes mk-store-drop{0%25{transform:translateY(-30px);opacity:0}30%25,55%25{transform:translateY(0);opacity:1}85%25,100%25{transform:translateY(66px);opacity:0}}@keyframes mk-store-rope{0%25,66%25,100%25{transform:scaleY(1)}80%25{transform:scaleY(.9)}92%25{transform:scaleY(1.02)}}@media (prefers-reduced-motion:reduce){.mk-store *{animation:none!important}}%3C/style%3E%3Crect width='1600' height='900' fill='url(%23mk-store-bg)'/%3E%3Cg class='ln' opacity='.4'%3E%3Cpath d='M672 355 658.2 631Q657 655 681 655H919Q943 655 941.8 631L928 355Z'/%3E%3Cpath d='M669.9 397H930.1'/%3E%3Cpath class='rp' d='M724 376C724 509.3 876 509.3 876 376'/%3E%3Ccircle cx='724' cy='376' r='4'/%3E%3Ccircle cx='876' cy='376' r='4'/%3E%3Cg class='it'%3E%3Crect x='760' y='245' width='80' height='66' rx='8'/%3E%3Cpath d='M760 265h80M800 245v20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
  :is(.premium-blog-thumbnail-container, body.archive article.post > a):has(img[src*="mk-cover-campaign-analysis"]) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' class='mk-ico mk-chart'%3E%3Cdefs%3E%3ClinearGradient id='mk-chart-bg' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%2316598E'/%3E%3Cstop offset='1' stop-color='%230A2C48'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cstyle%3E.mk-chart .ln{fill:none;stroke:%23F6F2EA;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.mk-chart .nd{fill:%23F6F2EA;transform-box:fill-box;transform-origin:center}.mk-chart .dt{stroke-dasharray:0 22}.mk-chart .fx{animation:mk-chart-f 4s ease-in-out infinite}.mk-chart .dr{stroke-dasharray:600;animation:mk-chart-d 4s ease-in-out infinite}.mk-chart .n1{animation:mk-chart-1 4s ease-in-out infinite}.mk-chart .n2{animation:mk-chart-2 4s ease-in-out infinite}.mk-chart .n3{animation:mk-chart-3 4s ease-in-out infinite}.mk-chart .ar{animation:mk-chart-4 4s ease-in-out infinite}@keyframes mk-chart-f{30%25,45%25{opacity:1}40%25,43%25{opacity:0}}@keyframes mk-chart-d{41%25,92%25{stroke-dashoffset:0}42%25,45%25{stroke-dashoffset:602}57%25{stroke-dashoffset:451}67%25{stroke-dashoffset:332}82%25{stroke-dashoffset:148}}@keyframes mk-chart-1{41%25,58%25{opacity:1;transform:none}42%25,56%25{opacity:0;transform:scale(.3)}}@keyframes mk-chart-2{41%25,68%25{opacity:1;transform:none}42%25,66%25{opacity:0;transform:scale(.3)}}@keyframes mk-chart-3{41%25,83%25{opacity:1;transform:none}42%25,81%25{opacity:0;transform:scale(.3)}}@keyframes mk-chart-4{41%25,94%25{opacity:1;transform:none}42%25,91%25{opacity:0;transform:translate(-12px,12px)}}@media (prefers-reduced-motion:reduce){.mk-chart *{animation:none!important}}%3C/style%3E%3Crect width='1600' height='900' fill='url(%23mk-chart-bg)'/%3E%3Cg class='ln' opacity='.4'%3E%3Cpath d='M540 250V614a36 36 0 0 0 36 36H1060'/%3E%3Cpath class='dt' d='M635 560V627'/%3E%3Cpath class='dt' d='M735 450V627'/%3E%3Cpath class='dt' d='M835 516V627'/%3E%3Cpath class='dt' d='M935 362V627'/%3E%3Cg class='fx'%3E%3Cpath class='dr' d='M635 530 735 420 835 486 935 332 1017 250'/%3E%3Ccircle class='nd' cx='635' cy='530' r='8'/%3E%3Ccircle class='nd n1' cx='735' cy='420' r='8'/%3E%3Ccircle class='nd n2' cx='835' cy='486' r='8'/%3E%3Ccircle class='nd n3' cx='935' cy='332' r='8'/%3E%3Cpath class='ar' d='M955 250H1017V312'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
  :is(.premium-blog-thumbnail-container, body.archive article.post > a):has(img[src*="mk-cover-"]) img { opacity: 0; }
}


/* ===== Marketiro — صفحات WordPress العادية (مثل سياسة الخصوصية) =====
   نفس شكل المقال: شريط عنوان غامق وعمود نص 760px. الصفحات المبنية بـ Elementor غير متأثرة. */
body.page:not(.elementor-page) { overflow-x: clip; }
body.page:not(.elementor-page) .site-main { width: 100%; max-width: none !important; padding-inline: 0px !important; margin: 0px !important; }
body.page:not(.elementor-page) .page-header { background: linear-gradient(160deg, var(--e-global-color-primary, #16598E), var(--e-global-color-secondary, #0A2C48)); max-width: none !important; margin: calc(-1 * var(--mk-header-h, 73px)) 0 0 !important; padding: calc(var(--mk-header-h, 73px) + 72px) 24px 64px !important; }
body.page:not(.elementor-page) .page-header .entry-title { max-width: 760px; margin: 0px auto; color: var(--e-global-color-5006f55, #F6F2EA); font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); font-size: 40px; text-align: center; text-wrap: balance; line-height: 1.6 !important; }
body.page:not(.elementor-page) .page-content { max-width: 760px; margin: 0px auto; padding: 64px 24px 96px; color: var(--e-global-color-text, #4A5568); font-family: var(--e-global-typography-text-font-family), sans-serif; }
body.page:not(.elementor-page) .page-content p, body.page:not(.elementor-page) .page-content li { font-size: 18px; line-height: 1.9; }
body.page:not(.elementor-page) .page-content p { margin: 0px 0px 1.2em; }
body.page:not(.elementor-page) .page-content a { color: var(--e-global-color-primary, #16598E); text-decoration: underline 1px; text-underline-offset: 4px; }
body.page:not(.elementor-page) .page-content a:hover, body.page:not(.elementor-page) .page-content a:focus-visible { color: var(--e-global-color-secondary, #0A2C48); }
body.page:not(.elementor-page) .page-content h2, body.page:not(.elementor-page) .page-content h3 { color: var(--e-global-color-secondary, #0A2C48); font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 600); margin: 1.6em 0px 0.6em; line-height: 1.6 !important; }
body.page:not(.elementor-page) .page-content h2 { font-size: 28px; }
body.page:not(.elementor-page) .page-content h3 { font-size: 22px; }
body.page:not(.elementor-page) .page-content ul, body.page:not(.elementor-page) .page-content ol { margin: 0px 0px 1.2em; padding-inline-start: 1.4em; }
body.page:not(.elementor-page) .page-content li { margin: 0.35em 0px; }
body.page:not(.elementor-page) .page-content .wp-block-table { margin: 1.5em 0px; overflow-x: auto; }
body.page:not(.elementor-page) .page-content table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
body.page:not(.elementor-page) .page-content th, body.page:not(.elementor-page) .page-content td { border: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 14%, transparent); padding: 10px 14px; text-align: start; vertical-align: top; }
body.page:not(.elementor-page) .page-content thead th { background: color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 6%, transparent); color: var(--e-global-color-secondary, #0A2C48); font-weight: 600; }
body.page:not(.elementor-page) .page-content tbody tr:nth-child(2n) { background: var(--e-global-color-5006f55, #F6F2EA); }
body.page:not(.elementor-page) .page-content code { font-family: var(--e-global-typography-accent-font-family), monospace; font-size: 0.9em; background: var(--e-global-color-5006f55, #F6F2EA); padding: 0.15em 0.45em; border-radius: 6px; direction: ltr; unicode-bidi: isolate; }
body.page:not(.elementor-page) .page-content pre { margin: 1.5em 0px; padding: 16px 20px; background: var(--e-global-color-5006f55, #F6F2EA); border: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 10%, transparent); border-radius: 12px; direction: ltr; text-align: left; overflow-x: auto; }
body.page:not(.elementor-page) .page-content pre code { background: none; padding: 0px; font-size: 15px; line-height: 1.7; }
body.page:not(.elementor-page) .page-content blockquote { margin: 1.5em 0px; padding: 4px 20px; border: 0px; border-inline-start: 4px solid var(--e-global-color-primary, #16598E); color: var(--e-global-color-secondary, #0A2C48); font-style: normal; }
body.page:not(.elementor-page) .page-content blockquote p { margin: 0px; }
body.page:not(.elementor-page) #jp-relatedposts .jp-relatedposts-headline em { font-style: normal; font-family: var(--e-global-typography-primary-font-family), sans-serif; color: var(--e-global-color-secondary, #0A2C48); font-size: 20px; }
@media (max-width: 767px) { body.page:not(.elementor-page) .page-header { padding: calc(var(--mk-header-h, 78px) + 48px) 16px 48px !important; } }
@media (max-width: 767px) { body.page:not(.elementor-page) .page-header .entry-title { font-size: 30px; } }
@media (max-width: 767px) { body.page:not(.elementor-page) .page-content { padding: 48px 16px 64px; } }
@media (max-width: 767px) { body.page:not(.elementor-page) .page-content p, body.page:not(.elementor-page) .page-content li { font-size: 17px; } }
@media (max-width: 767px) { body.page:not(.elementor-page) .page-content h2 { font-size: 24px; } }
@media (max-width: 767px) { body.page:not(.elementor-page) .page-content h3 { font-size: 20px; } }
body.page:not(.elementor-page) .page-header .entry-title { display: block !important; }
body.page:not(.elementor-page) .page-content tbody > tr > td { background-color: transparent; }
body.page:not(.elementor-page) .page-content > .sharedaddy.sd-sharing-enabled { margin-top: 48px; }
body.page:not(.elementor-page) .page-content .sharedaddy .sd-title { margin: 0px 0px 12px; font-size: 15px; color: var(--e-global-color-secondary, #0A2C48); line-height: 1.6 !important; }
body.page:not(.elementor-page) .page-content .sharedaddy .sd-title::before { border-top-color: color-mix(in srgb, var(--e-global-color-secondary, #0A2C48) 12%, transparent); }