/* Add custom CSS styles below */ 
html[color-theme="light"]
body{
  background-color: transparent !important;
}


html.thememode-is-active.dark.hydrated
body{
  background-color: transparent !important;
  background-image: url(https://i.ibb.co/k2wfZ66q/Sami-Dark.png);
}

html.dark
i.sicon-arrow-up {
    color: #0a1020;
}


/*  ====================================
                header
========================================*/
.saji-header-transparent-enabled:has(.slider-transparent) #header.header-components-all, .saji-header-transparent-enabled:has(.slider-transparent) #header.header-components-all.header-bg{
      /* top: 44px; */
}




/*  ====================================
                شريط الإعلان 
========================================*/

.marquee.animated-advertising-bar {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.marquee.animated-advertising-bar,
.marquee.animated-advertising-bar > div,
.marquee.animated-advertising-bar .marquee__item {
    background: transparent !important;
    background-color: transparent !important;
}
.marquee.animated-advertising-bar:nth-of-type(2) {
    margin-top: -3rem !important;
    position: relative;
      z-index: 5555;
}




/*  ====================================
                categories
========================================*/

html.dark
.s-block--categories-2 {
    border-radius: 50% / 60px;
    overflow: hidden;
    margin-top: 6rem;
}

@media(max-width: 768px){
  html.dark
  .s-block--categories-2 {
      background-color: #02020e;
  }
}

/* ======================================
                  statistics cards
========================================*/
section.s-block.s-block--statisticsAll.s-block-saji-animate
.lg\:grid-cols-3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
@media(max-width: 768px){
  section.s-block.s-block--statisticsAll.s-block-saji-animate
.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


section.s-block.s-block--statisticsAll.s-block-saji-animate
.\[background\:var\(--store-background-secondary\)\]{
  background-color: #0a1020;
}

section.s-block.s-block--statisticsAll.s-block-saji-animate
.\[background\:var\(--store-background-secondary\)\] *{
  color: #fff;
}


html.dark
section.s-block.s-block--statistics
salla-slider .swiper-slide{
  background-image: url(https://i.ibb.co/8LsHbH2T/Group-1618874219.webp);
}


/* ==================================
          منتجات مميزه
====================================*/
section#enhanced-products-slide-7
.absolute.top-0.left-0.w-full.h-full.flex.flex-col.items-center.justify-center.px-2\.5.py-8.lg\:p-4.z-\[1\].gap-4.lg\:gap-8{
  justify-content: space-between;
}



.lazy.lazy__bg.group-hover\:scale-105.group-hover\:rotate-2.\!transition-all.\!ease-in-out.\!duration-500.w-full.h-full.entered.loaded{   
  /* background-color: #fff !important; */
}




.saji-enhanced-products__content{
      justify-content: space-between;
}


.s-block--default-home-slider
.swiper-slide{
  background-color: transparent !important;
}



/* ==================================
                  عداد
====================================*/

.countdown-timer {
    border-radius: 1rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
}
html[color-theme="light"]
.countdown-timer {
    background-color: #0A1020;
}



.countdown-timer
 h2.saji-main-title
{
 color : #fff !important;
}

.countdown-timer
  span.saji-title-ornament{
--saji-ornament:  #fff !important;
       background-color: transparent !important;
}






/*  dark */
html.dark
.countdown-timer.flex.flex-col.0items-center.justify-center {
    background-color: transparent !important;
}

html.dark
.countdown-timer.flex.flex-col.items-center.justify-center
.dark\:text-\[var\(--data-btns-color-dark\)\] {
    color: #0a1020 !important;
}


html.dark
.saji-cd-timer .s-count-down-item{
  border: solid 1px #fff;
    box-shadow: 0px 0px 8px 0px #8AEBF980;
      background-color: transparent;
  
}

html.dark
.countdown-timer a{
 color: #fffbff !important;
    background-color: transparent;
    border: solid 1px;
}


/*========
   Countdown - Dark Mode Mobile Glow
=========*/


@media (max-width: 767px) {

  html.dark #block--countdown-timer-8 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  /* Right Glow */
  html.dark #block--countdown-timer-8::before {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    top: 50%;
    right: -150px;
    transform: translateY(-50%);

    background: radial-gradient(
      circle,
      #8AEBF9 0%,
      rgba(138, 235, 249, 0.55) 25%,
      rgba(138, 235, 249, 0.15) 50%,
      transparent 72%
    );

    filter: blur(45px);
    filter: blur(55px);
    -webkit-filter: blur(45px);
    -webkit-filter: blur(55px);

    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
  }

  /* Left Glow */
  html.dark #block--countdown-timer-8::after {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    top: 50%;
    left: -150px;
    transform: translateY(-50%);

    background: radial-gradient(
      circle,
      #8AEBF9 0%,
      rgba(138, 235, 249, 0.55) 25%,
      rgba(138, 235, 249, 0.15) 50%,
      transparent 72%
    );

    filter: blur(45px);
    filter: blur(55px);
    -webkit-filter: blur(45px);
    -webkit-filter: blur(55px);

    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
  }

}


/* ==================================
                  feature
====================================*/
section.s-block.s-block--statistics.s-block-saji-animate.overflow-hidden.my-8.lg\:my-16.\!relative
    svg path{
      fill: #0a1020;
    }



/*  footer */
html.thememode-is-active.dark.hydrated
  body
      .\[background\:var\(--footer-bg\)\] {
      background-color: #111725;
}



/* dark */
html.dark
section.s-block.s-block--statistics
 svg path{
   display: none;
 }


html.dark
section.s-block.s-block--statistics
.statistics-list__item{
  background-image: url(https://i.ibb.co/TD9sJFTY/Background-Border.webp);
    background-size: cover;
    border: solid 1px #284353;

}

/* ==================================
                  الاسئله 
====================================*/





html.dark
button.saji-common-questions__question{
     background-color: transparent;
}

html.dark
button.saji-common-questions__question
i.arrow.sicon-caret-down{
      background-color: transparent;
}
html.dark
button.saji-common-questions__question
.sicon-caret-down:before{
  color: #fff;
}

button.saji-common-questions__question{
     background-color: transparent;
}


/* ==================================
                  tabs
====================================*/
html.dark
section#s-block--products-tabs-13
 .s-tabs-active {
    background-color: #fff !important;
    color: #0a1020 !important;
}




/* ==================================
                  testimonial
====================================*/



/* ==================================
                  footer
====================================*/
footer.store-footer> div> div{
      mask-image: none !important;
}




/* ==================================
                  prod page dark
====================================*/
html.dark
  body.product-single
    div#more-content p>strong{
  color: #fff;
}
html.dark
  body.product-single
    div#more-content p{
  color: #fff;
}
html.dark
  body.product-single
    div#more-content ul li{
  color: #fff;
}

html.dark
  body.product-single
    p.s-offer-card-description {
    color: #0a1020 !important;
}









html.dark
  body.cart 
    .s-cart-summary-card
      .s-button-primary{
           border-color: #0a1020;
    color: #0a1020;
}


html.dark
label.s-cart-coupons-coupon-label{
    color: #fff;
}
html.dark
.s-button-primary{
      color: #0a1020;
}


html.dark
h3.s-comments-item-user-info-name-with-margin{
  color: #fff;
}



/* ==================================
                  blog dark
====================================*/

html.dark body.blog-single  span,
 html.dark body.blog-single  strong,
html.dark body.blog-single h2,
html.dark body.blog-single p,
html.dark body.blog-single li
{
    color: #fff !important;
}







html.dark body.page-single p, 
html.dark body.page-single h2,
html.dark body.page-single h3,
html.dark body.page-single li,
html.dark body.page-single strong, 
html.dark body.page-single span{
   color: #fff !important;
}

html.dark body.page-single span{
   background-color: transparent !important;
}