/* Add custom CSS styles below */ 
.banner--fixed img {
    background-color: unset;

}
.store-footer__inner {
    background-color: #431961;
    color:white;
    
}
.store-footer__inner .about-us-block {
    background-color: #431961;
    color: white;
}

.f_enhanced-square-photos .f_image-one-sixth {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.f_special-offer-container {
    background-color: #431961;
  

}

.f_special-offer-container .f_offer-content h2  {
  color:white;
}
.f_special-offer-container .f_offer-content a {;
color:white;
}

.f_special-offer-container {
    border: 0.125rem solid white;
}

.store-footer .s-menu-footer-list a {
    color: white;
}

.store-footer h3 {
    color: white;
}

.f_image-entry {
    aspect-ratio: 4 / 3;
}
.f_enhanced-square-photos .f_image-entry img {
    background-color: unset;

}
body {
  background-image: url('https://i.ibb.co/27tNrPGT/ABNORM.png');
  background-size: cover;        /* تغطي الشاشة بالكامل */
  background-repeat: no-repeat;  /* تمنع التكرار */
  background-position: center;   /* تتمركز */
  background-attachment: fixed;  /* تخلي الخلفية ثابتة أثناء التمرير */
}

/* تحويل الحاوية إلى Grid */
.flex.-md\:flex-col.gap-2.md\:gap-4.banners.py-4.md\:py-6 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr); /* عمودين */
  gap: 15px; /* المسافة بين الصور */
}

/* الصورة الثالثة تأخذ الصف الثاني بالكامل وتكون في المنتصف */
.flex.-md\:flex-col.gap-2.md\:gap-4.banners.py-4.md\:py-6 > a:nth-child(3) {
  grid-column: 1 / span 2;
  justify-self: center; /* توسيط الصورة */
  width: 50%;
}

/* الموبايل: كل صورة تأخذ صف منفصل */
@media (max-width: 768px) {
  .flex.-md\:flex-col.gap-2.md\:gap-4.banners.py-4.md\:py-6 {
    grid-template-columns: 1fr; /* عمود واحد */
  }
  .flex.-md\:flex-col.gap-2.md\:gap-4.banners.py-4.md\:py-6 > a {
    grid-column: auto !important; /* إلغاء أي تحكم سابق */
    justify-self: stretch !important;
    width: 100% !important;
  }
}