html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

div.my-img picture > img.zpimage-style-none {
    width: 200px !important;
    height:auto !important;
    max-width: none !important;
    display: inline-block !important;
    object-fit: contain !important;
    
div.my-click picture > img.zpimage-style-none {
    width: 200px !important;
    height:auto !important;
    max-width: none !important;
    display: inline-block !important;
    object-fit: contain !important;
    

   
div.my-icon picture > img.zpimage-style-none {
  width: 30px !important;
  height: auto !important;
  max-width: none !important;
  display: inline-block !important;
  object-fit: contain !important;
}

    
/* جوال فقط */
@media (max-width: 767px) {
  .my-video {
    max-width: 100% !important;   
    margin: 16px auto !important;
    overflow: hidden;    /* مفترض يمنع الشاشة تتمدد */
  }
  .my-video iframe,
  .my-video video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block !important;
  }
}


*[id]{ scroll-margin-top:62px; } /* يعوّض الهيدر في الجوال */
html{ scroll-behavior:smooth; }

body.rtl-page {
  direction: rtl;
  unicode-bidi: embed;
  text-align: right;
}

body.rtl-page nav {
  direction: rtl;
  text-align: right;
  justify-content: flex-end;
}

/* RTL داخل قائمة الموبايل */
.m-nav { direction: rtl; text-align: right; }

    .m-nav, .m-nav a, body.rtl-page {
  font-family: 'Tajawal', sans-serif !important;
}


/* الصق محتوى هذا البلوك بالطرف الأيسر للشاشة - لهذه الحالة فقط */
@media (min-width: 992px){ /* ديسكتوب وأكبر */
  .edge-left-row{
    /* اجعل عرض البلوك = عرض الشاشة ثم حرّكه ليلتصق باليسار */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc((100% - 100vw) / 2) !important; /* يزيح البلوك لليسار */
    margin-right: 0 !important;
    padding-left: 0 !important;
    position: relative;
    overflow: visible !important;
  }

  /* داخل بعض قوالب Zoho يكون العمود display:flex وفيه gap؛ نلغي الفجوة */
  .edge-left-row, .edge-left-row > *{
    gap: 0 !important;
  }

  /* إمساك الصورة نفسها */
  .edge-left-row img,
  .edge-left-row picture > img,
  .edge-left-row .zpimage-style-none{
    display: block !important;
    width: 100% !important;    /* تملى البلوك الذي صار 100vw */
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* لو كان أي سلف (Row/Section) يقصّ الزيادة */
  .edge-left-row, 
  .edge-left-row *{
    overflow: visible !important;
  }
}

/* إن كانت صفحتك RTL وتريد الإلتصاق باليمين بدلاً من اليسار: */
html[dir="rtl"] .edge-left-row{
  margin-right: calc((100% - 100vw) / 2) !important;
  margin-left: 0 !important;
}

    
/* الكاروسيل نفسه */
.peek-carousel {
  padding: 0 40px;               /* مقدار الـ peek يمين ويسار */
  overflow: visible !important;  /* خلي المحتوى يبان خارج الحاوية */
}

/* الغلاف الداخلي للكاروسيل */
.peek-carousel .zp-carousel,
.peek-carousel .zpcontent-carousel,
.peek-carousel .zpslider {
  overflow: visible !important;
}

/* كل سلايد */
.peek-carousel .zp-carousel-slide,
.peek-carousel .zpcontent-carousel-slide,
.peek-carousel .zpslide {
  width: calc(100% - 80px) !important; /* أصغر من الكونتينر */
  margin: 0 10px !important;           /* مسافة بين السلايدز */
  border-radius: 12px;
  overflow: hidden;
}