/* Add custom CSS styles below */ 
.btn-shop-container-rtl {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.btn-shop-now-rtl {
  background-color: #d5cdff;
  color: #3B3C43;
  border: 1px solid #3B3C43;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.btn-shop-now-rtl:hover {
  background-color: #5749A4;
  color: white;
}
@media (min-width: 768px) {
  .btn-shop-now-rtl {
    border: 1px solid #3B3C43;
    padding: 30px 80px;
    font-size: 40px;
    border-radius: 200px;
  }
}
/* حجم البانر */
.home-hero-banner-image {
  width: 100%;
  height: auto;
  display: block;
}

/* على اللابتوب والشاشات الكبيرة: نحدد أقصى عرض ونوسّطه */
@media (min-width: 768px) {
  .home-hero-banner-container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
/* إزالة الفراغ حول البانر */
.home-hero-banner {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* تقليل المسافة بين البانر وزر تسوّق الآن */
.btn-shop-container-rtl {
  margin-top: 10px;
}
/* البانر يملأ الشاشة عرضاً بدون فراغات جانبية */
@media (min-width: 768px) {
  .home-hero-banner-container {
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.home-hero-banner {
  width: 100vw;
  max-width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
/* شريط المدفوعات */
.sl_images_slider_container {
  display: flex;
  align-items: center;
  width: 100vw;
  overflow: hidden;
  background: #5a9164;
}
.sl_images_slider_container .sl_images_wrapper {
  width: 100%;
  animation: sliding_left 10s linear infinite;
  position: relative;
}
.sl_images_slider_container .sl_images_wrapper img {
  width: 100%;
  height: 80px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .sl_images_slider_container .sl_images_wrapper img { height: 45px; }
}
.sl_images_slider_container .sl_images_wrapper .image-container {
  width: 100%;
  height: fit-content;
}
.sl_images_slider_container .sl_images_wrapper .image-container:nth-child(2) {
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
}
@keyframes sliding_left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}