.top-navbar{padding-bottom:.375rem;padding-top:.375rem;background:#49974B;color:#fff}.top-navbar .s-search-input{background-color:#fff;border-style:none}.banner--fixed img{border-radius:.375rem;border-style:none;display:block;-o-object-fit:cover;object-fit:cover;background:transparent!important}.s-button-element:not(:disabled):not([loading]){pointer-events:auto;background:#49974B;color:#fff}.s-product-card-entry{border-radius:.75rem;display:flex;height:100%;justify-content:space-between;position:relative;--tw-bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--tw-bg-opacity,1));transition-duration:.3s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);border:1px solid #00000026}.footer-is-light .store-footer .store-footer__inner{--tw-border-opacity:1;border-bottom-color:#e5e7eb;border-bottom-color:rgb(229 231 235/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:#f3f4f6;background-color:#316532}.footer-is-light .store-footer{--tw-bg-opacity:1;background-color:#f9fafb;background-color:rgb(249 250 251/var(--tw-bg-opacity));--tw-text-opacity:1;color:#374151;color:#fff;BACKGROUND:#316532}.store-footer a{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);color:#fff}.copyright-text p{--tw-text-opacity:1;color:#374151;color:white!important}@media (min-width:1024px){.s-reviews-testimonial{padding:2.5rem;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;box-shadow:0 0 transparent,0 0 transparent,0 0 #fff0;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);box-shadow:0 1px 3px 0 #0003;width:773.4705810546875;height:270;angle:0 deg;opacity:1;border-radius:47.65px}}Almost out of storage … If you run out of space,you can't save to Drive, back up Google Photos, or use Gmail.
/* الحاوية الأساسية للنص المتحرك */
#ATB_sec_3 {
  position: relative;
  overflow: hidden;
  width: 80%; /* جعل العرض 80% من الشاشة */
  margin: 0 auto; /* مركز الحاوية */
  background-color: var(--color-primary);
      position: relative;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    background-color: var(--color-primary);
    PADDING: 26PX;
    border-radius: 1.5rem;

}

.anim-txt-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  animation: scroll 60s linear infinite; /* إضافة الحركة إلى الحاوية */
}
.anim-txt-bar>p {
    display: inline-block;
    width: -moz-max-content;
    width: max-content;
}
.anim-txt-bar:hover {
  animation-play-state: paused; /* إيقاف الحركة عند مرور الفأرة */
}

.anim-txt-bar > p {
  animation: slide 10s linear infinite; /* تغيير اسم الحركة إلى slide */
  padding-left: 2rem; /* إضافة مسافة على اليسار */
  padding-right: 2rem; /* إضافة مسافة على اليمين */
  font-size: 1.2em;
  color: var(--foreground-color);
  display: inline-block;
}

#ATB_sec_3 a {
  border-radius: 1.5rem; /* إضافة حواف دائرية */
}

/* إعداد الحركة */
@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide {
  /* يمكنك تخصيص الحركة هنا */
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
#ATB_sec_3 {
    position: relative;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    background-color: var(--color-primary);
    PADDING: 26PX;
    border-radius: 1.5rem;
}

/* الحركة المستمرة للنص */
@keyframes scrollText {
  0% {
    transform: translateX(0%); /* البداية من خارج الشاشة من اليمين */
  }
  5% {
    transform: translateX(50%); /* الوصول إلى بداية الشاشة */
  }
  95% {
    transform: translateX(75); /* تبقى في بداية الشاشة */
  }
  100% {
    transform: translateX(-100%); /* تخرج من الشاشة من اليسار */
  }
}



.anim-txt-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    animation: scroll 18s linear infinite;
}


@media (max-width: 740px) {
    #ATB_sec_3 {
        position: relative;
        overflow: hidden;
        width: 95% !important;
        background-color: var(--color-primary);
        position: relative;
        overflow: hidden;
        width: 96%;
        margin: 0 auto;
        background-color: var(--color-primary);
        padding: 16px !important;
        border-radius: 1.5rem;
        color: #fff;
        font-size: 14px !important;
        margin-right: 6px !important;
    }
}








.footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  position: relative;
}

.active-visitors {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #5064a9 !IMPORTANT;
  color:#fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  position: relative;
  margin-top: 10px;
      background: transparent;
    border: 1px solid;
    padding: 15px;
    width: 15%;
    right: 40%;

}

.circlecontainer3276 {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.circle3276 {
  width: 100%;
  height: 100%;
  background-color: #5EDE6B;
  position: absolute;
  border-radius: 50%;
  animation: ripple-animation 1.8s infinite ease-out;
  RIGHT: 12PX;
}

@keyframes ripple-animation {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
 


@media (MAX-width: 640px) {
.active-visitors {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    border-radius: 50px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    position: relative;
    margin-top: 10px;
    background-image: initial;
    background-position: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    border: 1px solid;
    padding: 7PX;
    width: 36%;
    right: 32%;
    background-color: rgb(80, 100, 169) !important;
}}
.active-visitors {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #5064a9 ! IMPORTANT;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    position: FIXED;
    margin-top: 10px;
    background: transparent;
    border: 1px solid;
    padding: 15px;
    width: 15%;
    right: 82%;
    Z-INDEX: 999999;
    BOTTOM: 65PX;
}
@media (max-width: 640px) {
    .active-visitors {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgb(255, 255, 255);
        border-radius: 50px;
        font-family: Arial, sans-serif;
        font-size: 16px;
        position: FIXED;
        margin-top: 10px;
        background-image: initial;
        background-position: initial;
        background-size: initial;
        background-repeat: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        border: 1px solid;
        width: 36%;
        right: 32%;
        width: 40%;
        right: 59%;
        Z-INDEX: 1;
        BOTTOM: 95PX;
        background-color: rgb(80, 100, 169) !important;
    }
}
.active-visitors {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #255926 ! IMPORTANT;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    position: FIXED;
    margin-top: 10px;
    background: transparent;
    border: 1px solid;
    padding: 15px;
    width: 15%;
    right: 82%;
    Z-INDEX: 999999;
    BOTTOM: 65PX;
}

#ATB_sec_3 {
    position: relative;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    background-color: var(--color-primary);
    PADDING: 26PX;
    border-radius: 1.5rem;
    color: white;
    font-weight: bolder;
}.active-visitors {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #255926 ! IMPORTANT;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-family: 'Arial',sans-serif;font-size:16px;position:FIXED;margin-top:10px;background:#fff0;border:1px solid;padding:15px;width:auto;right:auto;Z-INDEX:999999;BOTTOM:65PX}


.footer-logo {
  margin-bottom: 8px;
}

.footer-logo img {
  width: 120px;
  height: auto;
}

/* تابلت */
@media (max-width: 992px) {
  .footer-logo img {
    width: 100px;
  }
}

/* موبايل */
@media (max-width: 576px) {
  .footer-logo {
    text-align: center;
  }

  .footer-logo img {
    width: 80px;
  }
}

.footer-logo {
    margin-top: -32px;
    margin-bottom: 5px;
}
#ATB_sec_3 {
    position: relative;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    background-color: var(--color-primary);
    PADDING: 26PX;
    border-radius: 1.5rem;
    color: white;
    font-weight: bolder;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c7744);
}

.store-footer__inner {
    width: 90%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top-style: dashed;
    border-right-style: dashed;
    border-left-style: dashed;
    --tw-bg-opacity: 1;
    background-color: rgba(29, 31, 31, var(--tw-bg-opacity, 1));
    padding-bottom: 2rem;
    padding-top: 2rem;
    margin: auto;
}

.ramadan-counter {
    margin: 16px auto;
    max-width: 1100px;
    padding: 16px;
    border-radius: 18px;
    background: #255926;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Kufi Arabic", "Cairo", sans-serif;
    direction: rtl;
    /* background: linear-gradient(135deg, #0f2027, #203a43, #2c7744); */
    /* background: linear-gradient(120deg, #255926, #3e8e41, #6fbf73); */
    /* background: linear-gradient(135deg, #1b5e20, #2e7d32, #c8a951); */
    background: linear-gradient(135deg, #1b5e20, #2e7d32, #c8a951);
    background: linear-gradient(135deg, #0f2027, #203a43, #2c7744);
}

.ramadan-counter {
    margin: 16px auto;
    max-width: 1100px;
    padding: 16px;
    border-radius: 18px;
    background: #255926;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Kufi Arabic", "Cairo", sans-serif;
    direction: rtl;
    /* background: linear-gradient(135deg, #0f2027, #203a43, #2c7744); */
    /* background: linear-gradient(120deg, #255926, #3e8e41, #6fbf73); */
    /* background: linear-gradient(135deg, #1b5e20, #2e7d32, #c8a951); */
    background: linear-gradient(135deg, #1b5e20, #2e7d32, #c8a951);
    background: linear-gradient(135deg, #0f2027, #203a43, #2c7744);
    DISPLAY: NONE;
}



.anim-txt-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    animation: scroll 40s linear infinite;
}


.header-btn__icon.sicon-user-circle {
    display: block; /* بدل inline لو محتاج */
    width: 24px;
    height: 24px;
    background-image: url('https://i.ibb.co/dwgYR1y8/profile.png');
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* لو عايزها دائرية */
    color: transparent; /* يخفي الأيقونة الأصلية */
    font-size: 0; /* يخفي أي نص محتمل */
}
#s-cart-icon i.header-btn__icon {
    display: block; /* بدل inline */
    width: 30px;
    height: 32px;
    background-image: url('https://i.ibb.co/8gMbT7vN/Frame-1984077654.png');
    background-size: cover;
    background-position: center;
    color: transparent; /* يخفي الأيقونة الافتراضية */
    font-size: 0;
}
.header-btn__icon.sicon-user-circle {
    display: block;
    width: 30px;
    height: 32px;
    background-image: url(https://i.ibb.co/dwgYR1y8/profile.png);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    border: 0;
}
#s-cart-icon i.header-btn__icon {
    display: block;
    width: 30px;
    height: 32px;
    background-image: url(https://i.ibb.co/8gMbT7vN/Frame-1984077654.png);
    background-size: cover;
    background-position: revert-layer;
    color: transparent;
    font-size: 0;
    border: 0;
    padding: 13px;
}



Almost out of storage … If you run out of space, you can't save to Drive, back up Google Photos, or use Gmail.
/* تنسيق العنوان الرئيسي داخل القسم */
.section-heading {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px; /* المسافة بين العنوان والأقسام */
  color: #333;
}

/* تنسيق الحاوية التي تحتوي على الفئات */
.categories-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* محاذاة العناصر في المنتصف */
}

/* باقي التنسيقات كما هي */
.category-item {
  flex: 1 1 calc(20% - 40px);
  max-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.category-item a {
  display: block;
  text-align: center;
  padding: 10px;
}

.category-item img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 0;
}

.category-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .category-item {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .category-item {
    flex: 1 1 100%;
  }
}
.section-heading {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 48px;
    color: #333;
    PADDING-TOP: 64PX;
}
.categories-container {
    display: flex;
    flex-wrap: inherit;
    gap: 3px;
    justify-content: space-evenly;
}

.boxItem {
    position: relative;
    width: calc(50% - 10px);
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background-color: #f7d8e9;
    transition: transform 0.3s ease;
}

.categories-container {
    display: flex;
    flex-wrap: inherit;
    gap: 10px;
    justify-content: center;
}
.category-item {
    flex: 1 1 calc(20% - 40px);
    max-width: 200px;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}.category-item {
    flex: 1 1 calc(20% - 40px);
    max-width: 239px;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}.active-menu-item {
  padding: 20px !important;
  border-radius: 20px !important;
  background-color: red !important;
  color: #fff !important; /* لو عايز تغير لون النص */
}

.s-slider-block__title h2 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    line-height: 1.2;
    position: relative;
    font-size: 28px;
}.s-product-card-content-title a {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: #1f2937;
    color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
    font-size: 16px;
}
#best-offers-1-slider {    padding-top: 70px;}





salla-slider[type]:not(.hydrated)>div>div, salla-slider[type]:not(.hydrated) .swiper>div>div>div, .carousel-slider .swiper-wrapper>div {
    margin-top: 50px;
    margin-bottom: 50px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.s-product-card-vertical{
  flex-direction:column;
box-shadow: 0px 1px 3px 0px #00000026;
}
.s-product-card-vertical:hover{
  flex-direction:column;
box-shadow: 0px 2px 4px 0px #00000033;
}
.s-product-card-content {
background-color:var(--main-color);
color :white;
}

.categories-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.category-item {
  text-align: center;
  width: 150px;
}

.category-item img {
  width: 100%;
  border-radius: 12px;
}

.category-text {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
} .category-link {
  text-decoration: none; /* إزالة أي خط تحت النص */
  color: #333; /* اللون الافتراضي للنص */
  display: block; /* يجعل الهفر يشمل الصورة والنص */
  transition: color 0.3s ease;
}

.category-link:hover .category-text {
  color: #28a745; /* اللون الأخضر عند الهفر */
}

.category-link:hover img {
  transform: scale(1.05); /* اختياري: تكبير خفيف للصورة عند الهفر */
  transition: transform 0.3s ease;
}

.category-item:hover {
    /* الغينا التكبير */
    transform: none !important; /* أو تحذف السطر بالكامل */
    box-shadow: none; /* لو تحب تبقي بدون ظل */
}.category-item:hover {
    box-shadow: none; /* تحافظ على تأثيرات الظل لو موجودة */
    transform: none; /* لا يوجد تكبير على العنصر */
}

.category-link:hover img {
    transform: none; /* إزالة أي تكبير على الصورة */
    transition: none; /* إلغاء التحول الخاص بالهفر للصورة */
}
.category-item {
    flex: 1 1 calc(20% - 40px);
    max-width: 263px;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.category-text {
    margin-top: 8px;
    font-size: 14px;
    color: #0F1E0F;
    /* font-weight: bold; */
    font-family: Cairo;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 17px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    line-height: 1.5;
}

.s-product-card-price{color: black !important;}


@media only screen and (min-width: 1024px) {
    .main-menu li.root-level>a {
        font-weight: 700;
        padding-bottom: 1rem;
        padding-top: 0;
        padding-top: 1rem;
    }
  header .bg-inherit {
    background-color: inherit;
    padding-bottom: 14px;
}
  .top-navbar {
    padding-bottom: .375rem;
    padding-top: .375rem;
    background: #49974B;
    color: #fff;
    display: none;
}
.main-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 16px; /* زوايا مدورة للرابط بالكامل */
    transition: background 0.3s ease, color 0.3s ease;
    text-decoration: none;
    color: #333;
    overflow: hidden; /* يحمي الصورة من أي قطع */
}

.main-menu li a img {
    border-radius: 50%; /* يجعل الصورة دائرية كما هي */
    flex-shrink: 0; /* تمنع الصورة من الانكماش */
    width: 48px;
    height: 48px;
}

.main-menu li a:hover {
    background-color: #28a745; /* أخضر عند الهفر */
    color: #fff; /* النص أبيض */
}.main-menu li {
    border-radius: 16px; /* زوايا مدورة للعنصر */
    overflow: hidden; /* يمنع ظهور الخلفية خارج الزوايا */
}

.main-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    width: 100%; /* الرابط يغطي العنصر بالكامل */
    text-decoration: none;
    color: #333;
    transition: background 0.3s ease, color 0.3s ease;
}

.main-menu li a img {
    border-radius: 50%; /* الصورة تبقى دائرية */
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}        .main-menu {
            display: flex;
            gap: 22px;
        }

.main-menu li a:hover {
    background-color: #28a745; /* أخضر عند الهفر */
    color: #fff;
}
}







.custom-hero {
    background-color: #DBEADB !important;
    display: flex;
    align-items: center;
    background: url(https://i.ibb.co/fGLzXFwR/Image-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 648px;
  padding-bottom: 50px;
    padding-top: 50px;
}

.custom-hero-content {
    width: 50%;
    padding: 60px;
}
.custom-hero-image {
    width: 100%;
    height: 100%;
}


.custom-hero-image img {
    width: 106%;
    height: 100%;
    object-fit: contain;
}


@media (max-width: 768px) {
       .custom-hero {
        flex-direction: column-reverse;
        text-align: center;
        background: url(https://i.ibb.co/96TRBBH/Group-10.jpg);
        background-repeat: round;
        /* background-color: red !important; */
        background-size: contain;
        background-position: initial;
    }

     .custom-hero-content, .custom-hero-image {
        width: 100%;
        padding: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
       padding: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: -5px;
    }

  .custom-hero-image img {
    width: 100%;
    height: auto;
    object-fit: contain;

  }

  .custom-btn {
    margin: auto;
    width: 60%;
  }

     .custom-content-box h1 {
        font-size: 28px;
        line-height: 1.7;
    }
}

.section-rashed {
  display: none; /* أو أي ستايل تاني */
}

@media (max-width: 768px) {
.category-item {
    flex: 1 1 calc(20% - 40px);
    max-width: 94%;
    box-shadow: none;
    border-radius: 10px;
    /* overflow: hidden; */
    transition: transform 0.3s ease;
    width: 100%;
}

.categories-container {
    display: grid;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}}




.sicon-heart:before {
    content: "\eca1";
    color: #49974B;
}


.s-product-card-wishlist-btn  {
   
    border: 1px solid #49974B!important;
}
.s-slider-block__title-left {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    display: none;
}
.s-slider-block__title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    place-content: center !important;
}



.top-ayah {
    width: 100%;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: #fff;
    text-align: center;
    padding: 18px 10px;
    font-size: 15px;
    font-weight: 600;
    position: sticky;
    top: 0;
    letter-spacing: 1px;
    font-size: 20px;
    font-family: 'Cairo';
    font-weight: 800;
}



/*----------start slider -----------*/
.s-block--photos-slider {
    margin-top: 0 !important;
}

.swiper {
    padding-left: 0 !important;
}

salla-slider.photos-slider .swiper-slide {
    position: relative;
    margin-left: 1.1rem;
    margin-right: 0.5rem;
    height: auto;
    width: 100%;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}


/*----------end slider -----------*/