/* Add custom CSS styles below */ 


/*-------Banners --------------------------------*/
.s-block {
    margin-top: 1.5rem;
}
.flex.flex-col.items-center.px-1.font-primary.text-xs.card-discount.bg-red-500.text-white.w-max.absolute.py-1.top-0.end-2.z-2 {
    background-color: #30313e;
}
/*الماركات التجارية*/
section.s-block.s-block--logos-slider {
    background-color: white;
}
a.relative.h-28.w-full.flex-center.overflow-hidden.max-w-xs.bg-white.p-4.mx-2.rounded-md {
    width: 100%;
    padding: 0px;
    margin: auto;
    margin-bottom: 1rem;
}
.product-entry{
   /* border: .5px solid #dadada; */
   border: none;
}
div#featured-products-style2-2-OqloNp_1 {
    background-color: #f9fafb;
}
.promo-title.absolute.top-0.start-0.z-2.ps-2\.5.pe-4.py-1\.5.md\:py-2.opacity-90.text-xs.bg-red-400.text-white.rounded-be-full.w-auto {
    background-color: #30313E;
    opacity: 100%;
    font-size: 10px;
    padding: .2rem .5rem;
    border-radius: 5px ;
    text-align: center;
}
.flex.flex-col.relative.donating-wrap.h-full.p-2.md\:p-3.pt-1 {
    background-color: white;
}
.s-button-primary {
    background-color: #30313E;
    border: none;
    color: #FFFFFF;
    border-radius: 0px;
    margin-right: -12px;
  
}
.s-button-primary:hover {
    background-image: linear-gradient(45deg, #4f4557, #30313E);
}
.swiper-slide min--3 mt-6 pb-6 swiper-slide-active{
    position: absolute;
  top: 50px;
  left: 100px;
  width: 200px;
  height: 100px;
  margin: 0px;
  padding: 20px;
  
}
.btn--outline-primary, .btn--primary {
    background-color: white !important;
    border: 1px solid #30313E ;
}
.btn--outline-primary, .btn--primary:hover {
    background-color: #30313E !important;
    border: none;
    color: white;
}

/***************brandes banners*****************/

.nav-header.py-6.px-4.flex.flex-col.bg-gray-100.da-bgg.relative.full-banner-entry.text-white {
    width: 100%;
    height: 10rem;
}
.opacity-80 {
    opacity: 0.5;
}
.full-banner-entry {
    background-attachment: scroll;
    background-position: center;
}
/*************** New Code *****************/
#squares-1   {
  position: relative;
 /*  top: -100px;*/
}

#squares-1 img:hover {
  transform: scale(1.05); /* Zoom in on hover */
  transition: transform 0.3s ease-in-out; /* Smooth zoom transition */
}

/* Optional: Add hover effects for specific elements inside the container */
#squares-1 .s-slider-button-icon img :hover {
  fill: #FFD700; /* Highlight arrow icons on hover */
  transition: fill 0.3s ease-in-out;
}