/* Develope By Package 🧡 : ☎   */

/* Pre Loader */
body::before {
    content: " ";
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 9998;
    opacity: 0;
    animation: intro 1s;
}

body:after {
    z-index: 9999;
    position: fixed;
    content: "";
  /* https://github.com/omar-bakhsh/zid/blob/master/558.gif?raw=true */
  /* https://cdn.salla.sa/OYloN/ikVl7ckYJIPk7xo8vMGKvw1sD9DP2GRc4skf5lHF.png */
    background-image: url(https://cdn.salla.sa/eRVxx/Pltw6oxOSceBRyVUC6mdmLlcx66fmwnBlVl2UKkS.png) !important;
    background-position: center;
    background-size: 100% ;
    background-repeat: no-repeat;
    width: 0px;
    transform: translate(100px, -100px);
    height: 300px;
    right: 50%;
    top: 50%;
    opacity: 0;
    visibility: visible !important;
    background-color: transparent !important;
    animation: intro_logo 1s;
}

@keyframes intro {
    0% {
         width:100%;
        opacity: 1;
    }

    40% {
       opacity: 1;
    }

    80% {
       opacity: 1;
    }
    99%{
        width:100%;
    }
    
    100% {
        width:0;
       opacity: 0;
        display:none;
    }
}

@keyframes intro_logo {
    0% {
         width:200px;
        opacity: 0;
    }

    70% {
       opacity: 1;
    }

    80% {
       opacity: 1;
    }
    99%{
        width:200px;
    }
    
    100% {
        width:0;
       opacity: 0;
        display:none;
    }
}

/* Slider */ 

button.splide__arrow.splide__arrow--prev , button.splide__arrow.splide__arrow--next {
    background-color: #f68024;
}

.splide__arrow {
    background-color: var(--color-grey-darker);
    fill: #ffffff;
}
.header-side-panel-trigger{
        color: #323a70;
}
/* Product */

.product-block {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid #323a70;
    overflow: hidden;
    transition: border .2s linear,box-shadow .2s linear;
}
.sicon-whatsapp2::after {
display:none
}
.sicon-shopping-bag:before {
    color: white;
}

a.btn.btn--oval.btn--padded.narrow.btn--primary.outlined.font-base {
    border: 0px;
    text-decoration: underline;
}

button.btn.btn--wide.btn--large.btn--oval.btn--primary {
    color: white;
}
header .site-header__wrapper .theme-logo span{
    color: #313a70;
}

/* Nav */

.nav-mobile .main-nav {
    background-color: #323a70;
}

.nav-mobile .main-nav li a , .nav-mobile .main-nav li a:active{
    color: #ffffff;
}

.nav-mobile .main-nav li a.active, .nav-mobile .main-nav li a:hover {
    color: #ffffff;
}

.nav-mobile .main-nav li a.active i, .nav-mobile .main-nav li a:hover i {
    color: #ffffff;
}

.avatar-wrapper--primary {
    background: #323a70;
}

.avatar-wrapper--primary * {
    color: #ffffff;
}

.popup-modal-inner .title--primary {
    color: #323a70!important;
}

i.sicon-cancel {
    color: #323a70;
}

.close-mobile-menu{
    background-color: #ffffff;
}

.mm-spn a {
    color: #323a70;
}

.mm-spn.mm-spn--light {
    color: #323a70;
}
/*product add */
body.font-dinnextltarabic-regular .btn--add-to-cart{
        background-color: #333a71;
}
.sicon-shopping-bag:before{
        color: white;
}
.btn--secondary {
    color: #ffffff;
    background-color: #323a70;
}

.nav-mobile .main-nav .sub-menu ul li:not(:last-child) a {
    color: #323a70;
}

.nav-mobile .main-nav .sub-menu .menu-header {
    color: #323a70;
}

/* Footer */ 

.footer__mid{
    padding-bottom: 50px;
}

.footer__bottom {
    /*display: none;*/
    background-color: #2b9d91;
}
.footer__bottom .container>:last-child {
    width: 1px;
    white-space: nowrap;
    overflow: hidden;
        margin-left: 33vw;
}
body > footer > div.footer__bottom > div > span:nth-child(1){
    color:#fff !important;
}
.footer__bottom a:after{
    /*content:" | kayan ❤️";*/
   /*white-space: nowrap;*/
}
.sicon-snapchat:before {
 /*content: url(https://i.postimg.cc/Y0SPWRVx/snapchat.png);*/
    background-size: 100% 100%;
    display: flex;
    transform: scale(0.50);
    /* z-index: 10; */
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.sicon-twitter:before{
  /*  content: url(https://i.postimg.cc/4dYtHhP9/twitter.png);*/
    background-size: 100% 100%;
    display: flex;
    transform: scale(0.50);
    /* z-index: 10; */
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.sicon-instagram:before{
  /*  content: url(https://i.postimg.cc/T1Qk2b3W/instagram.png);*/

    background-size: 100% 100%;
    display: flex;

    transform: scale(0.82);
    /* z-index: 10; */

    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.form--login-reg .login-methods .login-method a{
        background: #323a70;
    color: #ffffff;
    border:3px dashed #4ddda9;
}
.side-panel ul.footer-list--social-links{
        margin-top: auto;
    text-align: center;
    padding-top: 0;
    /* top: 0; */
    justify-content: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
.footer{
    background: #2b9d91;
    color: white;
}

.footer .footer-list li a {
    color: #ffffff !important;
}
.side-panel .top-header__info a{
        color: #148a86;
}
a span{
  transition: .5s linear
}
a:hover span:nth-child(1){
  margin-right: 5px
}
a:hover span:nth-child(1):after{
  content: "'";
}
a:hover span:nth-child(2){
  margin-left: 30px
}
a:hover span{
  color: #000;
  text-shadow:0 0 10px #1ea19c, 0 0 20px #333a71, 0 0 40px #1ea19c;
}
.store-feature__icon{
    color: #323a70;
    border: #1fa29d solid 1px;
}
.footer .footer-list{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.sicon-whatsapp2::after {
    content: "\e917";
    text-align: center;
    cursor: pointer;
    background: #1da488;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    border-radius: 32.5px;
    font-size: 32px;
    box-shadow: #0000006b 2px 2px 8px;
    color: #fff;
    box-shadow: #00000022 1.5px 1.5px 5px;
    position: fixed;
    bottom: 88px;
    right: 17px;
    animation-name: popup_whatsapp;
    animation-duration: 15s;
}

.sicon-whatsapp2:hover::after {
    content: "حاب نساعدك 😃؟ ";
    width: 260px !important;
    font-size: 32px !important;
    color: #ffffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes popup_whatsapp {
    0% {
        bottom: -55px;
    }

    40% {
        bottom: -55px;
    }

    50% {
        bottom: 70px;
    }

    51% {
        bottom: 19px;
    }

    52% {
        bottom: 28px;
    }

    53% {
        bottom: 19px;
    }

    54% {
        bottom: 22px;
    }

    55% {
        bottom: 19px;
    }

    56% {
        content: "\e917";
        width: 56px;
        font-size: 32px;
        color: #ffffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    59% {
        content: "حاب نساعدك 🤚؟ ";
        width: 260px;
        font-size: 32px;
        color: #ffffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    98% {
        content: "حاب نساعدك 😃؟ ";
        width: 260px;
        font-size: 32px;
        color: #ffffffff;
        display: flex;
        justify-content: center;
        align-items: center;
          z-index: 999;
    }

    99% {
        content: "حاب نساعدك 👋؟ ";
        width: 260px;
        font-size: 32px;
        color: #ffffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    100% {
        bottom: 85px;
          z-index: 999;
    }

}
.sicon-whatsapp2::after{
   display: none;
}








#product_1481808543 .s-button-disabled span.s-button-text {
    display: inline-flex !important;
}



#product_521013417 .s-button-disabled span.s-button-text {
    display: inline-flex !important;
}



#product_451828578 .s-button-disabled span.s-button-text {
    display: inline-flex !important;
}


#product_1071223730 .s-button-disabled span.s-button-text {
    display: inline-flex !important;
}



#product_1822294997 .s-button-disabled span.s-button-text {
    display: inline-flex !important;
}



#product_1432240326 .s-button-disabled span.s-button-text {
    display: inline-flex !important;
}



#product_1259811565 .s-button-disabled span.s-button-text {
    display: inline-flex !important;
}
salla-button[product-type="service"] button[type="submit"] span{
font-size:0;
}
salla-button[product-type="service"] button[type="submit"] span:after {
    content: "اطلب الآن" !important;
    font-size:20px;
}



#product_451828578 button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-end:after {
    content: "اطلب الآن" !important;
}


#product_491636730 button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-end:after {
    content: "اطلب الآن" !important;
}

#product_1481808543 button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-end:after {
    content: "اطلب الآن" !important;
}

.checkbox--thumbs input[type=checkbox]+label, .checkbox--thumbs input[type=radio]+label {
    width: 100px !important;
    height: 115px !important;
}

.nav-desktop ul .menu-item:first-child {
    color: red !important;
    background-color: rgba(255,68,58,.1)!important;
    border-radius:5px !important;
}

button.splide__arrow.splide__arrow--prev, button.splide__arrow.splide__arrow--next {
    background-color: #039896 !important;
}

.footer .title--primary {
    color: #f7f7f7!important;
}

.footer .title--primary:before {
    background-color: #fff !important;
}




@media (max-width: 767px) {
  .product-block__info {
    margin-top: -13px;
  }
  .product-block__info {
    background-color: #fff!important;
    margin: -25px 2px 2px 2px!important;
    border-radius: 0px 0px 10px 10px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 25px!important;
    position: relative; 
    z-index: 1; 
}
}

.product-block {
border: 0.5px solid #c3c3c3!important;
}
.product-block:hover{
  --border-size: 2px;
  --border-angle: 0turn;
  background-image: conic-gradient(from var(--border-angle), #ffff, #ffff 150%, #fff), conic-gradient(from var(--border-angle), transparent 20%, #21aca7, #21aca7);
  background-size: calc(150% - (var(--border-size) * 2)) 0px, cover;
  background-repeat: no-repeat;
  -webkit-animation: bg-spin 3s linear infinite;
  animation: bg-spin 3s linear infinite;
}
.product-block::after {
    background-color: #fff!important;
       margin: 3px 3px 3px 3px;
    
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.product-block {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
/*.product-block__info { 
    background-color: #fff!important;
    margin: -10px 3px 3px 3px;
  border-radius: 0px 0px 10px 10px;
    background-repeat: no-repeat;
    background-size: cover;
        padding-top: 54px;

}
.product-block.contain .product-block__thumb .thumb-wrapper img {
   
    padding: 3px 2px 2px 0px;
    max-height: 97%;
    -o-object-fit: contain;
    object-fit: contain;
    margin: 2px -1px 2px 3px;
    object-fit: contain;
}*/
.badge--primary {
    position: absolute;
    z-index: 3!important;
    color: var(--color-text-reverse);
    background-color: var(--color-primary);
}

.product-block__info {
    background-color: #fff!important;
    margin: -90px 2px 2px 2px!important;
    border-radius: 0px 0px 10px 10px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 95px!important;
    position: relative; 
    z-index: 2; 
}


.product-block.contain .product-block__thumb .thumb-wrapper img {
    padding: 1px 2px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    max-height: 97%;
    -o-object-fit: contain;
    object-fit: contain;
    margin: 1px -1px 3px 3px;
    position: relative; 
    z-index: 3; 
}
body.font-dinnextltarabic-regular .btn--add-to-cart {

    z-index: 4; 
}

@media (max-width: 767px){
#item-706536476 > form > salla-conditional-fields > div > div.product-block__thumb.center {
    z-index: 5;
    }
    }
    
    @media only screen and (max-width: 767px){
.product-block--inline .product-block__info .delete-entry {
    z-index: 7;
    position: absolute;
    top: calc(-100% + 75px);
    left: 0;
}
}

body > section.page-wrapper.page--category::before {
    content: "";
    display: block;
    background-color: #f2f2f2;
    padding: 20px;
    border: 0px solid #ccc;
    border-radius: 5px;
    margin: -40px 0px 10px 1px;
    animation: banner_change_DESKTOP_BOTS 10s infinite;
}

@keyframes banner_change_DESKTOP_BOTS {
    0%, 25% {
        background: url(https://i.ibb.co/92TJTM4/image.png);
        background-size: contain;
        background-repeat: no-repeat;
        height: 500px;
        background-position: center;
        background-color: #e3e1e1 !important;
    }
    50% {
        background: url(https://i.ibb.co/9p8kWZb/1.png); 
        background-size: contain;
        background-repeat: no-repeat;
        height: 500px;
        background-position: center;
        background-color: #f7f7f7 !important;
    }
    75%, 100% {
        background: url(https://i.ibb.co/fXmYq6M/2.png); 
        background-size: contain;
        background-repeat: no-repeat;
        height: 500px;
        background-position: center;
        background-color: #f7f7f7 !important;
    }
}

@media (max-width: 767px){
body > section.page-wrapper.page--category::before {
        content: "";
        display: block;
        background-color: #f2f2f2;
        padding: 20px;
        border: 0px solid #ccc;
        border-radius: 5px;
        margin: -50px 0 0px 1px;
        animation: banner_change_MOBILE 10s infinite;
    }
}

@keyframes banner_change_MOBILE {
    0%, 25% {
       background:url(https://i.ibb.co/92TJTM4/image.png);
        background-size: contain;
        background-repeat: no-repeat;
        height: 150px;
        background-position: center;
        background-color: #e3e1e1 !important;
    }
    50% {
        background: url(https://i.ibb.co/9p8kWZb/1.png); 
        background-size: contain;
        background-repeat: no-repeat;
        height: 150px;
        background-position: center;
        background-color: #f7f7f7 !important;
    }
    75%, 100% {
        background: url(https://i.ibb.co/fXmYq6M/2.png); 
        background-size: contain;
        background-repeat: no-repeat;
        height: 150px;
        background-position: center;
        background-color: #f7f7f7 !important;
    }
}
 
/*---*/
.nav-desktop--horizontal>ul .menu-item>a {
    font-size: 20px;
    }
    .nav-desktop .top-bar div.cat-title {
    font-size: 20px!important;
    }
    .nav-desktop ul .menu-item>a, .nav-desktop ul .menu-item:not(.mega-menu) .sub-menu ul li a {
    font-size: 20px!important;
    }
    .title--small {
    font-size: 20px!important;
    }

html body section:nth-of-type(3) div > div > div > div:nth-of-type(2) ul li:nth-of-type(n) form salla-conditional-fields > div {
    --border-size: initial;
    --border-angle: initial;
    background-image: none;
    background-size: auto;
    background-repeat: initial;
    -webkit-animation: none;
    animation: none;
}
html body section:nth-of-type(3) div > div > div > div:nth-of-type(2) ul li:nth-of-type(n) form salla-conditional-fields > div {
    --border-size: initial;
    --border-angle: initial;
    background-image: none;
    background-size: auto;
    background-repeat: initial;
    -webkit-animation: none;
    animation: none;
}

html body section:nth-of-type(3) div > div > div > div:nth-of-type(2) ul li:nth-of-type(2) form salla-conditional-fields > div > div:nth-of-type(2) {
    background-color: #fff!important;
    margin:1px;
    border-radius: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0px;
    position: relative;
    z-index: 6;
    --border-size: initial;
    --border-angle: initial;
    background-image: none;
    -webkit-animation: none;
    animation: none;
}

html body section:nth-of-type(3) div > div > div > div:nth-of-type(2) ul li:nth-of-type(n) form salla-conditional-fields > div > div:nth-of-type(n) {
  background-color: #fff!important;
    margin:54px;
    padding-bottom: 0px;
    border-radius: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 2px;
    position: relative;
    z-index: 6;
    --border-size: initial;
    --border-angle: initial;
    background-image: none;
    -webkit-animation: none;
    animation: none;
}
@media (max-width: 767px){
.s-button-icon.s-button-small {
   margin-top: 131px;
    height: 1.5rem;
    width: 1.5rem;
    z-index: 6;
  
}
@media only screen and (max-width: 767px){
.product-block--inline .product-block__thumb a {
    padding-left: 55px;
    padding-top: 0px;
    padding-bottom: 92px;
}
#item-706536476 > form > salla-conditional-fields > div > div.product-block__thumb.center {
margin-bottom: 20px;

}
  }

/* Target the <button> element and replace its text content */
button[product-id="1902000464"] .s-button-text::after {
  content: " - اطلب الآن";
}