/* Add custom CSS styles below */ 
#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--photos-slider {
    width: 80%;
    margin: 4rem auto;
}

/* Responsive styles for mobile devices */
@media only screen and (max-width: 767px) {
    #app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--photos-slider {
        width: 100%!important ;
        margin: 1rem auto!important ;/* Adjust margin for better spacing on mobile */
    }
}
.s-block--fixed-banner {
width:80%!important;
margin:6rem auto 0px auto!important
}
@media only screen and (max-width: 767px) {
    .s-block--fixed-banner {
        width: 100%!important ;
        margin: 1rem auto!important ;/* Adjust margin for better spacing on mobile */
    }
}
salla-slider.photos-slider .swiper-slide{position:relative;margin-left:auto;margin-right:auto;height:auto;width:100%;overflow:hidden;border-radius:.375rem;padding:0;border-radius:0}section:nth-of-type(1).s-block.s-block--photos-slider{background:var(--main-color)}salla-slider.photos-slider .swiper,salla-slider.photos-slider .swiper{padding-left:0!important;padding-right:0!important;padding:0!important}img.w-full.object-contain.rounded-md{border-radius:0}@media(max-width:991px){salla-slider.photos-slider .swiper-slide{border-radius:0!important;width:100%;margin:0;padding:0}}
section.s-block.s-block--fixed-banner.wide-placeholder .container{padding:0;margin:0;max-width:100%}
.s-block--fixed-banner img{border-radius:0px!important;}

section.s-block.s-block--fixed-banner.wide-placeholder .container{max-width:100%;}
.banner img{background:transparent;}
.navbar-brand img {
  max-height:75px;
}
section:nth-of-type(1).s-block{padding:0;margin:1;max-width:100%}
.s-search-input,.basis-0 , .mx-1\.5{background:#fff!important}
.swiper-pagination-bullet-active,.swiper-pagination-bullet{display:none}
body,.min-h-full .s-block--tabs-produtcs{background:linear-gradient(to left,#fff,#fff,#fff)}
#mainnav{background:transparent;}
i.sicon-menu.text-primary.text-2xl{color:#717171!important}
.main-nav-container .inner{border-bottom-right-radius:0px;border-bottom-left-radius:0px}.main-nav-container .sides-wrap{background:#F5F5F5;border-bottom-right-radius:0px;border-bottom-left-radius:0px;padding-top:15px;padding-bottom:10px}.s-search-inline .s-search-input,.s-search-input,.basis-0{border-radius:12px!important;}.main-nav-container.fixed-header .inner{background:#EEEEEE!important;padding:20px 10px;margin-top:0;border:none}.main-nav-container.fixed-header .inner{background:#EEEEEE!important;box-shadow:none) inset}.main-nav-container.fixed-header .inner img{animation:slide-in2 1000ms}
@keyframes slide-in2{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}
#mainnav div.container,.store-header{background:#EEEEEE}.header-btn__icon.icon.sicon-shopping-bag,.sicon-user-circle{background:linear-gradient( to bottom,#fff,#fff,#fff)!important;color:#717171;border:none;border-radius:8px;box-shadow:none}.sicon-user-circle:before{content:"\f078"}
   .sicon-shopping-bag:before{content:"\e901"!important}
   .store-header .top-navbar {background:#EEEEEE!important;
    }
    .container.flex{bavkground:transparent!important}
  /*---------- -----*/
  
  footer{
    background:linear-gradient(to left,#E7E7E7,#fff,#E7E7E7)!important;
    
}

.store-footer .store-footer__inner {
    background:linear-gradient(to left,#E7E7E7,#fff,#E7E7E7)!important;
    color:#717171;
}
  
.store-footer h3 {
    color: #000;
}
   .mb-2\.5.md\:mb-0 {
    color: #717171 !important;
}
.max-w-sm.leading-6.mb-6,
.flex.mb-6,
.store-footer h3,
.s-product-card-content-sub,
.store-footer a,
.s-product-card-content-title a,
.store-footer .contact-social ul,
.footer-is-light .store-footer .store-footer__inner ,salla-social.s-social-list{
    text-align: center !important;
    justify-content: center !important;
}
/*-------*/

.main-menu li.root-level>a{color:#171717!important;}
  
.mm-spn.mm-spn--navbar.mm-spn--main,
.mm-spn.mm-spn--light {
  background:linear-gradient(to left,#fff,#fff,#E7E7E7)!important;
  color:#717171;border:none;
  border-radius:1rem;
  max-width:100%;
}
.mm-ocd--open .mm-ocd__content {
    background: transparent;
}
.mm-spn.mm-spn--navbar.mm-spn--main:after {
    font-size: 1.25rem;
}
.close-mobile-menu {
   top: 50%;
    z-index: 9999;
    height: 8rem;
    width: 10%;
    transform:translateY(-50%) !important;
    border-radius: 0.2rem;
    background:linear-gradient( to bottom,#fff,#fff,#fff)!important;
    color:#717171;
    
}
/*
.mm-spn ul:not(.mm-spn--open li) li:hover {
  background-color:#FFF;
  color:#000;
}*/

.mm-spn ul:not(.mm-spn--parent):not(.f_user-menu-items)>li:hover, .mm-spn ul.f_user-menu-items>li a:hover {
    background-color: #FFF;
    color: #717171;
}

.mm-ocd__content {
    padding: 0.5rem 0px;
}
.main-menu #offers a
{
    color: #000 !important;
    font-weight: 600 !important;}
    
    .\!py-3 img{border:none;background:transparent!important;}
    
    
.main-menu > li:nth-of-type(odd) > a {
    font-size: 1.1rem;
}
.mobile-menu .main-menu > li:nth-of-type(odd) > a {
    transform: translateX(150px);
    transition: 0.3s;
    opacity:0.3;
    animation: nav_anim ease 0.5s forwards;
    animation-delay: calc(0.4s * var(--sec));
    animation-duration: calc(1.3s * var(--sec));
    animation-play-state: paused;
}
[lang="en"] .mobile-menu .main-menu > li:nth-of-type(odd) > a { 
    transform: translateX(-150px);
}
@keyframes nav_anim {
    to {
        transform: translateX(0px);
        opacity:1;
    }
}
.mm-ocd-opened .main-menu > li:nth-of-type(odd) > a{
    animation-play-state: running;
}
.mm-ocd-opened .main-menu > li:nth-of-type(1) > a{
    --sec:0.2;
}
.mm-ocd-opened .main-menu > li:nth-of-type(3) > a{
    --sec:0.3;
}
.mm-ocd-opened .main-menu > li:nth-of-type(5) > a{
    --sec:0.4;
}
.mm-ocd-opened .main-menu > li:nth-of-type(7) > a {
    --sec:0.5;
}
.mm-ocd-opened .main-menu > li:nth-of-type(9) > a{
   --sec:0.6;
}
.mm-ocd-opened .main-menu > li:nth-of-type(11) > a{
   --sec:0.7;
}
.mm-ocd-opened .main-menu > li:nth-of-type(13) > a{
   --sec:0.8;
}
.mm-ocd-opened .main-menu > li:nth-of-type(15) > a{
   --sec:0.9;
}

body:not(.product-single) #wa-widget-send-button {
    transition: 0.3s;
    bottom: 40px;
}
.mm-ocd-opened #wa-widget-send-button {
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
}
.modal-is-open #wa-widget-send-button {
    opacity: 0;
    visibility: hidden;
}
/*---------*/
.s-product-card-content-sub {
    
    justify-content: center;
    color: #000;
}
.s-product-card-content-title a {
    color: #000;
    text-align: center;
}

    
  .s-product-card-vertical {background:#eeeeee;
  box-shadow:0 2px 5px -3px #212121;
    flex-direction: column;
   /* border:2px solid #fff;*/
    
}
.s-product-card-content-subtitle
{text-align: center !important;
      justify-content: center !important;
    font-size: 14px!important;
    line-height: 1.5rem;
    margin-bottom: 15px !important;
    
}

s-product-card-entry {  
    position: relative;
    border: 2px solid #fff;overflow: hidden;
    box-shadow:none;
    }
.s-button-wide {
    box-shadow:0 2px 5px -3px #212121;color:#717171;border-radius:10px!important;
    background: linear-gradient(to bottom, #fff, #fff,#ffff)!important;border:none}
  
@media (max-width: 750px) {
    .s-products-slider-card {
        max-width: 185px;
    }
}

@media (min-width: 750px) {
    .s-products-slider-card {
        max-width: 13rem;
    }}
.s-products-slider-card {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}
img.s-product-card-image-cover {
  transition: transform 0.3s ease;border-radius:12px 12px 0 0
}

.total-price,.inline-block{color:#717171!important}
  

img.s-product-card-image-cover:hover {
  transform: scale(1.1)
}
.md\:text-2xl{color:#717171!important}
  
.s-product-card-promotion-title ,.promotion-title{
    background: linear-gradient(to left, #474747, #474747,#474747)!important;
    color: #fff !important;box-shadow:0 2px 5px -3px #212121;border:2px solid #E7E7E7}
   .s-product-card-image {
    background-color: transparent!important;border:2px solid #F5F5F5} 
    .s-product-card-vertical .s-product-card-wishlist-btn button {display:none !important}
.s-product-card-price {color:#717171}

#page-main-title{color:#717171!important}
.s-button-element.s-button-wrap:hover{color:red}


/*-------*/



.s-button-loader-center:hover{color:#000}

.s-cart-summary-count{background:#E7E7E7;color:#717171;animation: anim-fade-in-and-out 3s infinite;
}
@keyframes anim-fade-in-and-out {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}
.s-cart-summary-total{display:none}
.s-comment-form-action .undefined{background:#717171;color:#fff;border:none;border-radius:0px}
.s-breadcrumb-wrapper,.breadcrumbs{display:none}
.s-comments{background:#fff}
 
 .header-search,.container.flex{background:transparent!important}

.\!text-red-800,.sicon-fire{color:#000!important;font-weight:bolder}
.md\:text-2xl{color:#000!important}
.content{text-align: center;
}


.app-inner{background:transparent!important}
.s-modal-header .s-login-modal-header-icon { display:none }
@media (min-width: 1024px) {
    .store-footer__inner .container > div {
        grid-column: span 2/span 2;
    }
}
  .store-footer__inner {
    text-align:center;
  }
  .store-footer a {
    justify-content:center;
  }
  .store-footer .contact-social ul {
  justify-content:center;
  }
  .store-footer__inner .container:before {
    margin:auto !important;
  }

.s-modal-header::before {
    content: "";
    text-align: center!important;
    display: block;
    height: 70px!important;
    background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/RzbvV/61Hsf9pw0CxWd5lGwTGohgrZmbUcDpodQNuYJbgr.png);
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: top center!important;}
    
    /* ====== CATEG0RIES ====== */
.s-block.s-block--banners .grid {grid-template-columns: repeat(2, 1fr);justify-content:center;align-items:center;gap:2;margin:0;}
.s-block.s-block--banners:nth-of-type(4) .grid, .s-block.s-block--banners:nth-of-type(10) .grid {grid-template-columns: repeat(2, 1fr) !important;gap:5px}
.s-block.s-block--banners:nth-of-type(4) .grid .banner-entry, .s-block.s-block--banners:nth-of-type(8) .grid .banner-entry {padding:3rem;}
.s-block.s-block--banners .grid .banner-entry {padding:3rem;height:fit-content;background:#fff !important;box-shadow:0 2px 5px -3px #212121;border:2px solid #E7E7E7;border-radius:12px}

.s-block.s-block--banners .grid .banner-entry .lazy__bg {background-size: 100%;background-repeat: no-repeat;}
}

/* ====== CATEGORY PAGE ====== */


.s-product-card-image img {height:auto}



/* ====== CATEGORIES RESPONSIVE ====== */
@media (min-width: 576px) {
.s-block.s-block--banners:nth-of-type(4) .grid, .s-block.s-block--banners:nth-of-type(10) .grid {grid-template-columns: 1fr 1fr;}
.s-block.s-block--banners:nth-of-type(4) .grid .banner-entry, .s-block.s-block--banners:nth-of-type(10) .grid .banner-entry {padding:7rem;height:fit-content;border-radius:0}

.s-block.s-block--banners .grid {grid-template-columns: repeat(5, 1fr);justify-content: center;align-items:center;margin:0 1rem}
.s-block.s-block--banners .grid .banner-entry {padding:6rem;height:fit-content;display: flex;flex-direction: column;align-items: center;justify-content: center;}
}

@media (min-width: 768px) {.s-block.s-block--banners:nth-of-type(4) .grid, .s-block.s-block--banners:nth-of-type(10) .grid {grid-template-columns: 1fr 1fr;}
.s-block.s-block--banners:nth-of-type(4) .grid .banner-entry, .s-block.s-block--banners:nth-of-type(10) .grid .banner-entry {padding:7rem;height:fit-content;border-radius:0}

.s-block.s-block--banners .grid {grid-template-columns: repeat(5, 1fr);justify-content: center;align-items:center;margin:0 1rem}
.s-block.s-block--banners .grid .banner-entry {padding:5.5rem 4.5rem;height:fit-content;display: flex;flex-direction: column;align-items: center;justify-content: center;}
}

@media (min-width: 992px) {.s-block.s-block--banners:nth-of-type(4) .grid, .s-block.s-block--banners:nth-of-type(10) .grid {grid-template-columns: 1fr 1fr;}
.s-block.s-block--banners:nth-of-type(4) .grid .banner-entry, .s-block.s-block--banners:nth-of-type(10) .grid .banner-entry {padding:8rem;height:fit-content;border-radius:0}}

@media (min-width: 1200px) {
.s-block.s-block--banners:nth-of-type(4) .grid, .s-block.s-block--banners:nth-of-type(10) .grid {grid-template-columns: 1fr 1fr;}
.s-block.s-block--banners:nth-of-type(4) .grid .banner-entry, .s-block.s-block--banners:nth-of-type(10) .grid .banner-entry {padding:10rem;height:fit-content;border-radius:0}
} 

/* ====== CATEG0RIES ====== */
.s-block.s-block--banners.container .s-block__title .right-side {margin-top:1rem}
.s-block.s-block--banners {padding:auto 1rem !important}
.s-block.s-block--banners .grid .banner-entry {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.s-block.s-block--banners .grid .banner-entry a {position: absolute;width:100%;height:100%}
@media (min-width: 640px){
.two-row .banner-entry:first-child {grid-column: unset;grid-row: unset;}
}
.s-block.s-block--banners.container .s-block__title {justify-content:center}
.s-block.s-block--banners.container .s-block__title  .right-side {padding-left:0}


.store-footer__inner::before {
    content: "";
    background-image:  url(https://marssa.shop/site/images/new_theme/footer-top.svg);
    background-size: 418%;
    display: block;
    background-repeat: round;
    transform: rotate(180deg);
    height: 107px;
    margin: -45px -32px 1px 0px;
}
 @media (min-width: 1024px) {
.store-footer__inner::before {
    content: "";
    background-image:  url(https://marssa.shop/site/images/new_theme/footer-top.svg);
    background-size: 418%;
    display: block;
    background-repeat: round;
    transform: rotate(180deg);
    height: 107px;
    margin: -65px -32px 1px 0px;
}}

.s-block__title h2,
.s-slider-block__title h2 {
  
    -webkit-animation: 1.5s highlight 0.5s 2 normal forwards; animation: 1.5s highlight 1.5s 1 normal forwards; background-color: none; 

     background-size: 200% 100%; background-position: 100% 0; } @-webkit-keyframes highlight { to { background-position: 0 0; } } @keyframes highlight { to { background-position: 0 0; } }
  
  section.s-block.s-block--fixed-banner.wide-placeholder .container:hover {
    transform: translateY(-6px);
}
section.s-block.s-block--fixed-banner.wide-placeholder .container {
    transition: transform 0.3s, box-shadow 0.3s;
}
  
 .banner-entry:hover{
    transform: translateY(-6px);
}
.banner-entry{
    transition: transform 0.3s, box-shadow 0.3s;
}

    
section:first-of-type.s-block.s-block--banners{
    margin:-4px !important;
}


li.s-social-link{background:#fff;background:#fff;border-radius:12px;margin:5px 5.5px;position:relative;padding:1px}.s-social-link a{color:#000;color:#000;border-color:#F5F5F5}li.s-social-link a span:after{content:"";width:110%;height:100%;background:0 0;position:absolute;left:-3px;border-radius:25%;border:1px solid #BDBDBD;border:1px solid #BDBDBD;top:0;animation:myAnim 14s ease-out 0s infinite normal forwards}li.s-social-link a span:before{content:"";width:110%;height:105%;background:0 0;position:absolute;left:-1px;border-radius:25%;border:1px solid #BDBDBD;border:1px solid #BDBDBD;top:-1px;animation:myAnim1 7s linear 0s infinite normal forwards}@keyframes myAnim1{0%{transform:rotate(360deg)}100%{transform:rotate(0)}}@keyframes myAnim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.s-payments-list .s-payments-list-item {box-shadow:0 2px 5px -3px #212121;}
.s-contacts-icon,.contact-social a span,.header-btn__icon,#s-cart-icon .icon{border-radius:10px!important;background:#fff!important;box-shadow:0 2px 5px -3px #212121;}

.m-0 h3:before {
    text-align: center;
    content: "";
    display: block;
    height: 110px;
    width: 140px;
    margin: auto auto 20px;
    background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/RzbvV/0jp75ozd4p9tDLKfHGPUyXajzNhTltwsQlrwQnwi.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: sil  2000ms linear infinite;
}
@keyframes sil {
    0% {
         filter: brightness(4.5);
    }

    50% {
        filter: none;
    }
    0%{
    filter: brightness(4.5);
}}
.navbar-brand img  {animation: sil  2000ms linear infinite;}
.tabs .s-button-wrap .s-button-primary-outline
{box-shadow:0 2px 5px -3px #212121;border:3px solid #E7E7E7!important}


@media only screen and (max-width: 991px) {
    .justify-between.py-4.container.text-center:before {
    text-align: center;
    content: "موثّق في منصة الأعمال";
    display: block;
    height:  120px;
    width: 120px;
    margin: auto auto 10px;
    background-image: url(https://cdn.saudibusiness.gov.sa/v2/dist//images/headerIcons/Logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
}}

@keyframes pupup {
0%{
    transform:scale(1.2)
    }
18%{
    transform:scale(1.2)
    }
80%{
    transform:scale(1.2)
    }
100%{
    transform:scale(0)
    }
}

@keyframes pupup_logo{
0%{
    transform:scale(0)
    }
18%{
    transform:scale(1.2)
    }
75%{
    transform:scale(1.2)
    }
95%{
    transform:scale(0)
    }
100%{
    transform:scale(0)
    }
}

body:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #fff, #fff);
    position: fixed;
    z-index: 999999;
    transform: scale(0);
    animation-name: pupup;
    animation-duration:  1.5s;
}

body:after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
    background: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/RzbvV/0jp75ozd4p9tDLKfHGPUyXajzNhTltwsQlrwQnwi.png);
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 165px;
    transform: scale(0);
    animation-name: pupup_logo;
    animation-duration: 1.3s;
  	
}

.s-modal-body{background:linear-gradient(to left,#E7E7E7,#fff,#E7E7E7)!important}
  a.s-login-modal-link,div.s-modal-title,label.s-login-modal-label{color:#000}
  button.s-login-modal-enter-button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center{background:#ffff;color:#000}



  .s-user-menu-dropdown{background:linear-gradient(to left,#E7E7E7,#fff,#E7E7E7)!important}
  .s-user-menu-dropdown-item-title {color:#000!important}
  .s-user-menu-dropdown-header p{color:#000}
.s-user-menu-dropdown-item a svg {fill: #000;}

.s-verify-resend , .s-verify-message ,.s-verify-resend-message{color:#000}


 .s-modal-header .s-login-modal-header-icon { display:none }
.s-modal-header::before {
    content: "";
    text-align: center!important;
    display: block;
    height: 70px!important;
    background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/RzbvV/0jp75ozd4p9tDLKfHGPUyXajzNhTltwsQlrwQnwi.png);
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: top center!important}
    
     .s-product-card-starting-price h4{color:#717171!important}
     .min-h-full .wide-placeholder:nth-child(9) img{pointer-events: none;}
     
     .s-add-product-button-main .s-button-wrap .s-button-loader-center{background:linear-gradient(to left,#E7E7E7,#fff,#E7E7E7)!important}  .loader-init{display:none!important}