/***********************
  ضبط حجم شعار الهيدر (سلة)
  Desktop: 88px  |  Mobile: 60px
***********************/
:root{
  --logo-height-desktop: 88px;  /* حجم الشعار على اللابتوب/الديسكتوب */
  --logo-height-mobile:  60px;  /* حجم الشعار على الجوال */
  --logo-width-desktop:  auto;  /* ضع قيماً مثل 220px إن أردت عرضًا ثابتًا */
  --logo-width-mobile:   auto;
}

/* 1) إزالة القيود عن حاوية الشعار وروابطها */
.header-logo,
.w-header__logo,
.site-header__logo,
.navbar-brand,
.store-logo,
.logo,
.c-header__logo,
.header-logo a,
.w-header__logo a,
.site-header__logo a,
.navbar-brand a,
.store-logo a,
.logo a,
.c-header__logo a{
  display: flex !important;
  align-items: center !important;
  height: var(--logo-height-desktop) !important;
  max-height: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* 2) صورة الشعار نفسها */
.header-logo img,
.w-header__logo img,
.site-header__logo img,
.navbar-brand img,
.store-logo img,
.logo img,
.c-header__logo img,
.Header-logoImage,
.Header-logoImage img,
header img[alt*="logo" i],
header img[src*="logo" i],
header img[src*="Logo" i]{
  height: var(--logo-height-desktop) !important;
  width: var(--logo-width-desktop) !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
}

/* 3) ضمان ارتفاع شريط الهيدر */
.header, .site-header, .w-header, .c-header{
  min-height: calc(var(--logo-height-desktop) + 12px) !important;
}

/* ————— موبايل ————— */
@media (max-width: 767px){
  .header-logo,
  .w-header__logo,
  .site-header__logo,
  .navbar-brand,
  .store-logo,
  .logo,
  .c-header__logo,
  .header-logo a,
  .w-header__logo a,
  .site-header__logo a,
  .navbar-brand a,
  .store-logo a,
  .logo a,
  .c-header__logo a{
    height: var(--logo-height-mobile) !important;
  }

  .header-logo img,
  .w-header__logo img,
  .site-header__logo img,
  .navbar-brand img,
  .store-logo img,
  .logo img,
  .c-header__logo img,
  .Header-logoImage,
  .Header-logoImage img,
  header img[alt*="logo" i],
  header img[src*="logo" i],
  header img[src*="Logo" i]{
    height: var(--logo-height-mobile) !important;
    width: var(--logo-width-mobile) !important;
  }

  .header, .site-header, .w-header, .c-header{
    min-height: calc(var(--logo-height-mobile) + 12px) !important;
  }
}

/* (اختياري) تأكيد عدم التمدد الزائد */
.header-logo img,
.w-header__logo img,
.site-header__logo img{
  max-width: 100% !important;
}

/* زر إنستقرام عائم مثل الشكل البرتقالي في الصورة */
.cw-ig-fab{
  position: fixed;
  right: 18px;               /* أبعده عن الطرف إن رغبت */
  bottom: 88px;              /* ارفعه فوق فقاعة الشات إن وُجدت؛ غيّرها حسب حاجتك */
  width: 58px; height: 58px;
  border-radius: 999px;
  background: #ff6a3a;       /* برتقالي قريب من GetButton */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  z-index: 9999;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.cw-ig-fab:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* أيقونة إنستقرام بيضاء داخل الزر */
.cw-ig-fab::before{
  content:"";
  width: 28px; height: 28px;
  background: center / 28px 28px no-repeat;
  /* SVG إنستقرام أبيض */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23fff" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" stroke-linecap="round"/></svg>');
}

/* إخفِ العنوان النصي المساعد للشاشات القارئة فقط */
.cw-ig-fab .sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* موبايل: اصغر قليلاً وارفعه */
@media (max-width: 767px){
  .cw-ig-fab{ width:54px; height:54px; bottom: 92px; right: 16px; }
  .cw-ig-fab::before{ width:26px; height:26px; background-size:26px 26px; }
}





/* خلفية الفوتر وأي أقسام محيطة به باللون الأبيض */
footer,
footer .container,
footer .content,
footer .footer-main,
footer .footer__content,
footer .footer-top,
footer .footer__top,
.pre-footer,
.footer-hero,
.footer-topbar,
.section--before-footer,
.download-app{
  background: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* على الجوال تأكيد اللون الأبيض لأي طبقات */
@media (max-width: 767px){
  footer,
  footer *{
    background: transparent !important;   /* يمنع الطبقات الرمادية داخل العناصر */
  }
  footer{
    background: #fff !important;          /* طبقة الأساس بيضاء */
  }
}






/* زيادة المسافة العلوية داخل لوحة الفوتر البيضاء */
footer .container,
footer .content,
footer .footer-main,
footer .footer__content,
footer .footer-top,
footer .footer__top{
  padding-top: 28px !important;   /* عدّلها إلى 32/36px إذا تبغى أعلى */
  padding-bottom: 24px !important;/* توازن بسيط أسفلًا (اختياري) */
}

/* على الجوال مسافة أقل قليلًا */
@media (max-width: 767px){
  footer .container,
  footer .content,
  footer .footer-main,
  footer .footer__content,
  footer .footer-top,
  footer .footer__top{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}



/* نسخة الديسكتوب تبقى كما هي */
.cw-footer-brand img{
  height:120px !important; /* قياس الديسكتوب */
}

/* نسخة للجوال */
.cw-footer-brand-m{
  display:none;
}

/* على الجوال: أظهر النسخة الخاصة للجوال وأخفِ نسخة الديسكتوب إن كان عمودها مخفيًا */
@media (max-width: 767px){
  /* غالبًا عمود الشعار الأصلي مخفي بالجوال، لذلك نخفيه ونستخدم البديل */
  .cw-footer-brand{ display:none !important; }

  .cw-footer-brand-m{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding: 10px 0 !important;
    margin: 6px auto !important;
    text-align:center !important;
    background:#fff !important;
  }
  .cw-footer-brand-m img{
    height:72px !important;     /* صغّر الشعار للجوال */
    width:auto !important;
    max-width:80vw !important;  /* لا يتجاوز عرض الشاشة */
    object-fit:contain !important;
  }
}




/* تكبير شعار الفوتر على الجوال */
@media (max-width: 767px){
  .cw-footer-brand-m img{
    height: 90px !important;   /* جرّب 90px — غيّرها إلى 84/96 حسب رغبتك */
    max-width: 85vw !important; /* احتياط: لا يتجاوز عرض الشاشة */
  }
  /* مسافة بسيطة فوق وتحت الشعار */
  .cw-footer-brand-m{
    padding: 14px 0 !important;
  }
}


























/* ===== MZ Ticker Rescue CSS ===== */
:root{
  --ticker-bg:#000;
  --ticker-fg:#fff;
  --ticker-accent:#d6a88f;
  --ticker-h:44px;
  --ticker-speed:18s;
}

/* نخليه ثابت أعلى ويمتد عرض الصفحة وزي اندكس عالي */
.mz-ticker{
  position:fixed; top:0; left:0; right:0;
  z-index:999999;
  background:var(--ticker-bg); color:var(--ticker-fg);
  height:var(--ticker-h);
  overflow:hidden; user-select:none; direction:rtl;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* نلغي أي mask أو فلاتر قد تخفيه */
.mz-ticker__viewport{
  position:relative; height:100%;
  -webkit-mask:none !important; mask:none !important;
  overflow:hidden;
}

/* مساران، الثاني يبدأ من 100%، والحركة بمقدار -100% لمنع التداخل */
.mz-ticker__track{
  position:absolute; top:0; left:0; height:100%;
  display:flex; align-items:center; gap:56px; padding:0 24px;
  white-space:nowrap; min-width:max-content;
  will-change:transform;
  animation:mzTicker var(--ticker-speed) linear infinite;
}
@keyframes mzTicker{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}

.mz-ticker__msg{ font:800 15px/var(--ticker-h) "Cairo",system-ui; }
.mz-ticker__dot{ color:var(--ticker-accent); opacity:.9; font-weight:900; }

/* إيقاف عند المرور */
.mz-ticker:hover .mz-ticker__track{ animation-play-state: paused; }

/* زر إغلاق */
.mz-ticker__close{
  position:absolute; inset:0 6px 0 auto; height:var(--ticker-h);
  display:grid; place-items:center; padding:0 10px;
  color:#bbb; background:transparent; border:0; cursor:pointer; font-size:20px;
}
.mz-ticker__close:hover{ color:#fff; }

/* موبايل */
@media (max-width:600px){
  :root{ --ticker-h:40px; --ticker-speed:22s; }
  .mz-ticker__track{ gap:36px; padding:0 16px; }
  .mz-ticker__msg{ font-size:14px; }
}





<section style="direction:rtl;text-align:center;margin:42px 0;font-family:'Cairo',sans-serif">
  <h3 style="font-size:22px;margin-bottom:24px;color:#111">شبكات التواصل الإجتماعي</h3>

  <!-- شبكة 3 أعمدة × صفّين -->
  <div style="display:flex;flex-wrap:wrap;justify-content:center;gap:34px 70px;max-width:980px;margin:0 auto">

    <!-- Instagram -->
    <a href="https://instagram.com/yourusername" target="_blank" rel="noopener"
       style="display:inline-flex;flex-direction:column;align-items:center;text-decoration:none">
      <span style="width:56px;height:56px;display:block">  <!-- ← غيّر 56 لتصغير/تكبير -->
        <svg viewBox="0 0 64 64" style="width:100%;height:100%;display:block" aria-hidden="true">
          <defs>
            <radialGradient id="ig" cx="30%" cy="110%">
              <stop offset="0%" stop-color="#fdf497"/>
              <stop offset="5%" stop-color="#fdf497"/>
              <stop offset="45%" stop-color="#fd5949"/>
              <stop offset="60%" stop-color="#d6249f"/>
              <stop offset="90%" stop-color="#285AEB"/>
            </radialGradient>
          </defs>
          <rect x="4" y="4" width="56" height="56" rx="14" fill="url(#ig)"/>
          <rect x="18" y="18" width="28" height="28" rx="8" fill="none" stroke="#fff" stroke-width="4"/>
          <circle cx="32" cy="32" r="9.5" fill="none" stroke="#fff" stroke-width="4"/>
          <circle cx="46" cy="18" r="4" fill="#fff"/>
        </svg>
      </span>
      <span style="margin-top:10px;font-size:15px;font-weight:600;
                   background:linear-gradient(45deg,#fd5949,#d6249f,#285AEB);
                   -webkit-background-clip:text;background-clip:text;color:transparent">انستقرام</span>
    </a>

    <!-- TikTok -->
    <a href="https://www.tiktok.com/@yourusername" target="_blank" rel="noopener"
       style="display:inline-flex;flex-direction:column;align-items:center;text-decoration:none">
      <span style="width:56px;height:56px;display:block">
        <svg viewBox="0 0 64 64" style="width:100%;height:100%;display:block" aria-hidden="true">
          <path fill="#000" d="M44,10c2.7,3.7,6.1,6,10,6v8c-3.9-0.1-7.3-1.1-10-3v17c0,9.8-8,16-16.3,16C18,54,12,47.6,12,40.2
          C12,33,18,27,25.7,27c1.6,0,3.1,0.3,4.6,0.8v8.7c-1.2-0.7-2.5-1-3.8-1c-3.5,0-6.3,2.8-6.3,6.4c0,3.5,2.8,6.4,6.3,6.4
          c3.7,0,6.3-2.6,6.3-6.5V10H44z"/>
          <path fill="#69C9D0" d="M30.3,19v5.5c-1.5-0.5-3-0.8-4.6-0.8C18,23.7,12,29.7,12,37.1c0,1.1,0.1,2.1,0.3,3.1
          C14.1,33.7,21.6,28,30.3,28V19z"/>
          <path fill="#EE1D52" d="M54,24.9v-8c-4.3-0.3-7.6-2.6-10-5.9v9.2C46.9,23.8,50.3,24.8,54,24.9z"/>
        </svg>
      </span>
      <span style="margin-top:10px;font-size:15px;font-weight:600;color:#010101">تيك توك</span>
    </a>

    <!-- Snapchat -->
    <a href="https://www.snapchat.com/add/yourusername" target="_blank" rel="noopener"
       style="display:inline-flex;flex-direction:column;align-items:center;text-decoration:none">
      <span style="width:56px;height:56px;display:block">
        <svg viewBox="0 0 64 64" style="width:100%;height:100%;display:block" aria-hidden="true">
          <circle cx="32" cy="32" r="28" fill="#FFFC00"/>
          <path fill="#000" d="M32 16c6 0 9 4 9 9 0 3-1 5 2 7 1 1 3 1 4 1 1 1 1 2 0 3-2 2-5 1-6 3 0 1 1 2 2 2s2 1 1 2-4 2-6 2-3 2-6 2-4-2-6-2-5 0-6-2c-1-1 0-2 1-2s2-1 2-2c-1-2-4-1-6-3-1-1-1-2 0-3 1 0 3 0 4-1 3-2 2-4 2-7 0-5 3-9 9-9z"/>
        </svg>
      </span>
      <span style="margin-top:10px;font-size:15px;font-weight:600;color:#FFFC00;text-shadow:0 1px 1px rgba(0,0,0,.35)">سناب شات</span>
    </a>

    <!-- WhatsApp -->
    <a href="https://wa.me/9665XXXXXXXX" target="_blank" rel="noopener"
       style="display:inline-flex;flex-direction:column;align-items:center;text-decoration:none">
      <span style="width:56px;height:56px;display:block">
        <svg viewBox="0 0 64 64" style="width:100%;height:100%;display:block" aria-hidden="true">
          <circle cx="32" cy="32" r="28" fill="#25D366"/>
          <path fill="#fff" d="M22 46l2-7a14 14 0 1125-9 14 14 0 01-14 14c-2 0-3 0-5-1l-8 3z"/>
          <path fill="#25D366" d="M32 18a11 11 0 100 22 11 11 0 000-22z"/>
          <path fill="#fff" d="M27 27c1-2 2-1 3 0l2 3c1 1 0 2-1 3l2 2c1-1 2-2 3-1l3 2c1 1 1 2 0 3-3 2-6 2-9 0-3-2-6-6-6-9 0-1 1-2 3-3z"/>
        </svg>
      </span>
      <span style="margin-top:10px;font-size:15px;font-weight:600;color:#25D366">الواتس اب</span>
    </a>

    <!-- X -->
    <a href="https://x.com/yourusername" target="_blank" rel="noopener"
       style="display:inline-flex;flex-direction:column;align-items:center;text-decoration:none">
      <span style="width:56px;height:56px;display:block">
        <svg viewBox="0 0 64 64" style="width:100%;height:100%;display:block" aria-hidden="true">
          <path fill="#000" d="M14 16h10l12 14L48 16h10L42 34l16 18H48L32 38 22 52H12l16-18L14 16z"/>
        </svg>
      </span>
      <span style="margin-top:10px;font-size:15px;font-weight:600;color:#000">X (تويتر)</span>
    </a>

    <!-- YouTube -->
    <a href="https://www.youtube.com/@yourchannel" target="_blank" rel="noopener"
       style="display:inline-flex;flex-direction:column;align-items:center;text-decoration:none">
      <span style="width:56px;height:56px;display:block">
        <svg viewBox="0 0 64 64" style="width:100%;height:100%;display:block" aria-hidden="true">
          <rect x="6" y="14" width="52" height="36" rx="10" fill="#FF0000"/>
          <polygon points="28,24 44,32 28,40" fill="#fff"/>
        </svg>
      </span>
      <span style="margin-top:10px;font-size:15px;font-weight:600;color:#FF0000">اليوتيوب</span>
    </a>

  </div>
</section>








/* ===== Promo Ticker (under header) ===== */
:root{
  --ticker-bg:#111;         /* لون خلفية الشريط */
  --ticker-text:#fff;       /* لون النص */
  --ticker-height:44px;     /* ارتفاع الشريط */
  --ticker-speed:22s;       /* سرعة الحركة: رقم أكبر = أبطأ */
}

#sr-promo-ticker{
  width:100%;
  height:var(--ticker-height);
  background:var(--ticker-bg);
  color:var(--ticker-text);
  overflow:hidden;
  position:relative;
  z-index:50;               /* فوق المحتوى، تحت شريط القمة */
  display:none;             /* يُفعّل بالـJS بعد حقنه */
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

#sr-promo-ticker .inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  gap:24px;
  padding-inline:16px 48px;  /* مساحة لزر الإغلاق */
  direction:rtl;
  position:relative;
}

#sr-promo-ticker .track{
  display:inline-block;
  white-space:nowrap;
  animation:sr-marquee var(--ticker-speed) linear infinite;
  will-change:transform;
}

#sr-promo-ticker:hover .track{
  animation-play-state:paused;   /* إيقاف عند المرور */
}

@keyframes sr-marquee{
  from{ transform:translateX(100%); }
  to  { transform:translateX(-100%); }
}

/* فاصل لطيف بين التكرارات */
#sr-promo-ticker .sep{
  opacity:.45; margin:0 22px; font-weight:300;
}

/* زر إغلاق */
#sr-promo-ticker .close{
  position:absolute; left:12px; inset-inline-start:auto; /* يدعم RTL */
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  color:var(--ticker-text); opacity:.8; cursor:pointer;
  transition:.2s;
}
#sr-promo-ticker .close:hover{ opacity:1; transform:scale(1.05); }
#sr-promo-ticker .close svg{ width:16px; height:16px; }






/* يخفف الجهد الرسومي ويجعل الأنيميشن سلس */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* الأفضل استخدام transform/opacity للأنيميشن */
.sr-willchange { will-change: transform, opacity; }
/* تجنّب الظلال الثقيلة على عناصر كثيرة */
.shadow-soft { box-shadow: 0 8px 20px rgba(0,0,0,.08); }




/* إزالة أي دائرة/حلقة/خطوط متقطعة حول الشعار */
.site-header .site-logo,
header .logo, .header .logo, a.logo {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
}

/* عطّل العناصر الزائفة التي ترسم الحلقة */
.site-header .site-logo::before,
.site-header .site-logo::after,
header .logo::before,
header .logo::after,
a.logo::before,
a.logo::after {
  content: none !important;
  display: none !important;
}

/* أخفِ أي عناصر تحمل أسماء تدل على الحلقة/التقطيع */
.site-header .site-logo [class*="ring"],
.site-header .site-logo [class*="dash"],
.site-header .site-logo [class*="circle"],
header .logo [class*="ring"],
header .logo [class*="dash"],
header .logo [class*="circle"] {
  display: none !important;
}

/* أخفِ عناصر SVG التي ترسم دائرة متقطعة */
.site-header .site-logo svg circle[stroke-dasharray],
.site-header .site-logo svg path[stroke-dasharray],
header .logo svg circle[stroke-dasharray],
header .logo svg path[stroke-dasharray] {
  display: none !important;
}