/* ####### Add a start screen ####### */
body.index:before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0 !important;
    position: fixed;
    z-index: 99999999999999 !important;
    left: 0;
    background-image: url(https://cdn.salla.sa/PVxQm/ROSh692THjcCKBFuhEWnpq4r4v6WuaO6ftYEd2y3.jpg) !important ; 
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 75px;
    transform: scale(0);
    visibility: visible !important;
    opacity: 1 !important;
    animation-name: popup_Emad;
    animation-duration: 2s;
}

@keyframes popup_Emad {

    0%{transform:scale(0)}

    25%{transform:scale(2)}

    75%{transform:scale(2)}

    95%{transform:scale(0)}

    100%{transform:scale(0)}
}


body.index:after {
content: "";
    width: 100%;
    height: 100%;
    background: #ffffff!important;
    
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed;
    z-index: 999999999;
    transform: scale(0);
    animation-name: pupup;
    animation-duration: 2s;
}

@keyframes pupup {

     0%{transform:scale(2)}
     25%{transform:scale(2)}
     80%{transform:scale(2)}
     100%{transform:scale(0)}
}

/*for mobile*/
@media (max-width:768px) {
   body.index:before {
       animation-name:pupup_logo-mobile;
   }
}
@keyframes  pupup_logo-mobile {

0%{transform:scale(0)}

25%{transform:scale(2)}

75%{transform:scale(2)}

95%{transform:scale(0)}

100%{transform:scale(0)}
}
/*Add a start screen */


/* ###################### Store Background ######################## */

.home-block, body {
    background: #F3FCE0;
    margin: 0px;
    padding: 0px;
}

/* color Icon of (Adds) in my website */
.sicon-wrenches:before{
    color:#83b42e;
}

/*###  Send massage button & Complete the order ###*/
[dir=rtl] .s-button-loader-end.s-button-element {
    padding-right: 2rem;
    padding-left: 2rem;
    color: #ffffff;
    text-align: center;
}

/*******************************/
.badge--ribbon.reverse {
    
    /**** (1 KG) inside Product Description make it in center without Background ****/
    top: 15px;
    left: 0;
    text-align: center;
    border-radius: 0 50px 50px 0;
    padding: 5px 15px 5px 0px;
    background:none;
}

/*****************************/

/**********************************************************************/
/* ###################### small Banner ###################### */
.banner--fixed{
    padding-bottom: 7px;
}
/**********************************************************************/



.home-block--slide-products.show-all .title.title--x-large{
    margin-top: 5px;
    padding-top:5px;
}

/* Page of Products you may like*/
.bg-grey{
     background: #F3FCE0;
}


/* ########################### Categories ########################## */

.header-block--nav-wrapper{
    padding: 0;
    background: #83b42e;
    margin: 0;
}

.nav-desktop ul .menu-item .offers-link {
    color: #f23809;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

/* Categories Center */

.hero__content .nav-desktop.nav-desktop--horizontal{
    text-align: center;
    margin-right:380px;
}

/* Text in Categories */
.nav-desktop--horizontal > ul .menu-item > a {
    color: #fff;
}

.nav-desktop--horizontal>ul .menu-item>a{
    border-radius: 10px;
}


/*############### Color of Discount in vavigation bar #####################*/
.nav-desktop ul .menu-item:first-child{
    color: #ffffff;
    background-color: #fff;
    border-radius: 10px;
    
}
/*************************/


/* ############################## Product ############################## */

/* Product border color */
/*.product-block{
    border-color:#83b42e;
    
}*/


/* Show All Text */
.home-block--fixed-products.show-all .title.title--x-large .btn, .home-block--slide-products.show-all .title.title--x-large .btn{
    border-radius: 10px 0;
    background: linear-gradient(-45deg, #83b42e , #567c15 
    165px);
    color: #fff;
  /*background-color: #83b42e;
    color: #fff;
    border: none; 
    border-radius: 5px 20px 5px;*/
    /*font-size: 1em;*/  
}


.product-block__info {
    padding: 13px;
}


/*
.splide--images .splide__slide img{
    border: 2px solid #87c224;
    box-shadow: 3px 12px 5px 3px #92c43c;
    border-bottom-left-radius: 55px;
}
*/

/*.product-block__info{
    border: 2px solid #87c224;
    box-shadow: 3px 12px 5px 3px #92c43c;
    border-bottom-left-radius: 55px;
}*/


/* title of product*/
.product-block__info .product-title .title--primary {
    color: #83B42E;
}

.product-block__info .product-title .title--primary {
    text-align: center;
}

.product-block h2, .product-block__info .product-title p, .price-wrapper {
    text-align: center;
}

/*.product-block h2 {
    font-size: 14px;
    padding: 0 10px 2px 15px;
    padding-right: 10px;
}*/
.title--primary {
    color: #83B42E;
    font-weight: bold;
}

/* so7ra haray*/
.font-sm{
    text-align: center;
}

/* Under titel of product Gray text*/
.price-wrapper>small {
    white-space: pre-line;
    height: 16px;
}

           /************************************/
                /* To resize product box*/
 

.splide--products-slider .splide__slide .product-block{
    /* here to resize the height*/
    /*height:95%;*/
    height:100%;
}
.splide--draggable>.splide__track>.splide__list>.splide__slide {
   /* -webkit-user-select: none;
    -moz-user-select: none;*/
    user-select: none;
}
.splide--products-slider .splide__slide {
    height: auto;
    padding: 15px 0;
    padding-bottom: 15px;
    /*padding-bottom: 15px;*/
    max-width: 40vw ;
}
.splide--products-slider .splide__slide {
    height: auto;
    padding: 15px 0;
}
.splide__slide {
    /*box-sizing: border-box;*/
    list-style-type: none;
    margin: 0;
    flex-shrink: 0;
}
.splide, .splide__slide {
    position: relative;
    outline: none;
}

/**************************/
/* .product-block__info{
     height:148px;
 }*/
 
 /*.splide--products-slider .splide__slide .product-block{
     height:358.18px;
 }*/
 /**************************/


                         /**************************/


/* like 1 kg in producte deatalies */
.badge--primary {
    font-weight: 700;
    direction: rtl;
    background-color: #F3FCE0;
    text-align: center;
    color: #83b42e;
}

/* Box of product salary in product deatelies */

.product-sections-wrapper {
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #83B42E;
}


/* product cost */ 

.price-wrapper>span{
    font-weight: 800;
    font-size: 20px;
    color: #FF8200;
    line-height: 3rem;
    letter-spacing: -1.5px;
}



/* Product Description */
.article strong {
    color: #83B42E;
    /*background: #fff;*/
    padding: 2px;
    margin-top: 25px;
}

/***********************/



/* ########################### Special Product########################## */

/* right list product in spical product */
.product-block--mini .product-block__thumb .thumb-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain, cover;
    background-position: center;
}

/* left image (larg image) in spical product */
.product-block--large .product-block__thumb .thumb-wrapper {
   
    background-size: contain;
     background-repeat: no-repeat;
    background-position: center;
}

/* the gray color in (larg image) in spical product */
.product-block--large:after {
    content: "";
    position: absolute;
    top: 40%;
    right: 0;
    bottom: 0;
    left: 0;
    /*background: linear-gradient(to top,rgba(0,0,0,0.7),transparent); 
    opacity: .5;*/
    background: linear-gradient(to 
    top,rgba(0,0,0,0.19),transparent); 
    opacity: .5;
}

/* color of price in (larg image) in spical product ( large price */
.product-block--large .product-block__info .price-wrapper span {
    color: #ff443a;
    /* color: #998877;*/
}

/* color of price in (larg image) in spical product ( small price */
.product-block--large .product-block__info .price-wrapper small{
    color: #998877;
}

/* color of Text in (larg image) in spical product ( small price */
/*.product-block--large .product-block__info .title--small{
color: 000000;
background-color:#000000;
width: contain;
}*/

/*  ########################## Search Rectangle ########################## */

header .form--search .form-group .form-control {
    background: #fff;
    border: #83B42E solid 1px;
    color: #545454;
}



/* ############################### Header ############################### */


header .site-header {
    background: #fff;
}

.top-header {
    background: #202020;
    border-bottom: #83B42E dotted 1px;
    color: #fff;
}

.top-header .btn--padded.less, .top-header .top-header__info{
    color: #fff;
}

.top-header .top-header__info li i, .top-header .top-header__info li span {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: all .5s cubic-bezier(.2,1,.3,1);
}

.btn--padded.less {
    /*background: #252d00;
    color: #fff;*/
    /*background-color: #83b42e;
    color: #fff;*/
    border-radius: 10px 0;
    background: linear-gradient(-45deg, #83b42e , #567c15 
    165px);
    color: #fff;
    border: none;
    /*border-radius: 10px 2px;*/
    /*font-size: 1em;*/
}

/*
.btn--padded{
    background:#fcded7;
    transition: transform 3s;
}
*/


/* ############################### Footer ############################### */

/*
.footer{
    background:#fcded7;
}

.footer__bottom{
     background:#3f6c2f;
     color:#ffffff;
}
*/

/* the sign --> ( | ) make it off no apper make it  (0px ) */
.title--has-dash:before{
   width:4px;
   border-radius:4px;
}
/****************/

.footer .footer__top {
    max-width: 90%;
    /*background: #4b6d0a;*/
    /*background: #1A4D2E;*/
    /*background: #464E2E;*/
    background: #202020;
    margin-top: -30px;
    margin: auto;
    position: relative;
    border-radius: 2rem;
    /* Box Shadow */
    /*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
    /*box-shadow: 0px 5px 10px 0px rgba(131, 180, 46, 1);*/
    box-shadow: 
    /* inside colore*/ inset -5px -5px 9px rgba(255,255,255,0.45),
    inset 5px 5px 9px rgba(94,104,121,0.3), 
    /* outside cplor*/ 0px 5px 10px 0px rgba(131, 180, 46, 1);
}

.footer{
    text-align: center;
}

.footer__top {
    padding-top:20px;
}

.footer__top {
    padding: 40px 0 20px;
}

.footer__top {
    padding: 50px 0;
}

.footer {
    border-top: none;
    /*background: #83b42e;*/
    /*background: #ACB992;*/
    background: #F3FCE0;
    color: #fff;
}

.footer .footer-list li a {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 0;
    color: #fff;
    transition: color .5s cubic-bezier(.2,1,.3,1);
}

.footer__mid {
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 0px;
}

.footer__block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.footer .footer-list--row{
    align-items: center;
    justify-content: center;
}

.footer__block p {
    margin: 0;
    padding: 5px 15px;
}

.footer__block a {
    margin: 0;
    padding: 5px 15px;
}

.footer__bottom{
    background: #202020;
}

.footer .title {
    color: #fff;
    font-weight: bold;
}

footer.footer {
    border-radius: 2rem;
    /*background:#2C3333;*/
}




/* Name of Tax Number */
.store-certificate__text{
    color:#83b42e;
}

/* Tax Number */
/*.store-certificate__text .number{
    color:#000;
}*/

/* ########### Payment ############# */

ul.footer-list.footer-list--row.footer-list--payment-methods {
    background-color: #fafafa;
    /*padding: 15px 15px;*/
    border-radius: 10px;
    box-shadow: 0 5px 25px -15px black;
}



/* ############################### Square image ############################### */

.home-block.home-block--square-images .col-md-4 {
    min-width: 20%;
    width: 20%; 
    /*padding: 2px;*/
}

.home-block.home-block--square-images .col-md-4 {
    min-width: 20%;
    width: 20%;
}


.home-block--square-images .col-md-4 {
    max-width: 20%;
    padding: 4px;
    float: right;
}


.home-block--square-images .col-md-4 {
    max-width: 1.333%;
    padding: 4px;
    float: right;
}


.home-block:not(.home-block--bg):not(.home-block--main-slider){
    padding: 0px 
}

/* ############################## store-feature ############################ */
.store-feature {
    margin-bottom: 50px;
    border: #85B335 solid 1px;
    max-width: 90%;
    margin: auto;
    border-radius: 1rem;
    margin-top: 10px;
    padding-bottom: 20px;
}
.store-feature {
    text-align: center;
}

.home-block--store-features .col-md-4:nth-of-type(1){
    padding-bottom:5px;
    margin-bottom:5px;
}

.home-block--store-features .col-md-4:nth-of-type(2){
    padding-bottom:5px;
    margin-bottom:5px;
}

.home-block--store-features .col-md-4:nth-of-type(3){
    padding-bottom:5px;
    margin-bottom:5px;
}



/* ############################### For Mobile ############################### */

/*  Bottom bar  */
.nav-mobile .main-nav li a{
    background:#F3FCE0;
    
}

/*  Product Categories*/
.mm-spn.mm-spn--navbar.mm-spn--main:after{
     background:#F3FCE0;
     text-align: center;
}

/* text of all Categories */

.mm-spn.mm-spn--navbar ul{
    color:#000;
   /* text-align:center; */
}

/*.side-panel__content{
    background:#F3FCE0;
}*/



/* Sin in */
.s-modal-xs{
  background-color:#F3FCE0;
}
.s-login-modal .s-modal-header .s-modal-header-inner .s-login-modal-header-icon{
    background-color:#f5f7f9;
}

.s-login-modal .s-modal-header .s-modal-header-inner .s-login-modal-header-icon svg{
    background-color:ffffff;
}


/*  3 Points  */
/*
.side-panel.mobile-side-panel .side-panel__content{
     background:#83b42e;
}
*/

/* 3 point (Mony) dropdownl list */
/*
.side-panel .currency-switcher .btn.dropdown-trigger{
     background:#4b6d0a;
}
*/

/* dropdonw-menu */
/*
.side-panel .dropdonw-menu-wrap:last-child .dropdown-menu{
    background:#e3f2df;
}
*/





/*+++++++++++++++++ To Add my logo in footer +++++++++++++++++++++++*/
/*.footer .store-about::before {
    display: block;
    content: "";
    width: 33%;
    margin: 0 auto 5px auto;
    background: url(https://www.up-00.com/i/00229/j9g4c7ii46mt.png);
    background-repeat: repeat;
    background-size: auto;
    height: 148px;
}*/



/* ############## background of social media ############## */
/*.footer-list--social-links li a{
    background:#1A4D2E;
}*/
.sicon-facebook:before{
    color:#4267B2;
}

.sicon-tiktok:before{
    color:#25F4EE;
}
.sicon-snapchat:before{
    color:#FFFC00;
}
.sicon-twitter:before{
    color:#1DA1F2;
}
.sicon-instagram:before{
    color:#ff5341;
}

/*
.banner--fixed img {
  display: block;
  width: 100%;
  height: 100%;
}
*/

/*******************************/