:root
{
    --primary-color: #ffb5af !important;
    --secondary-color: #000 !important;
    --linear-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
    --font-color: #fff !important;
}

/*---------------- Font Family ----------------*/

/*------------- End of Font Family ------------*/


/*---------------- Splash Screen --------------*/
.index::before
{
    content: "";
    width: 100%;
    height: 100%;
    background: #ffffff url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcWhpeXBtazBwaW92eXNjOXZyMnByN3N5OXZ6NWlxNTN0czB4dHU0ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/WtWvFoR4fOlQYsih17/giphy.gif);
    position: fixed;
    z-index: 99999999999999999 !important;
    transform: scale(0);
    background-size: 150px !important;
    background-repeat: no-repeat;
    background-position: center !important;
    animation-name: logobg;
    animation-duration: 5s;
}

@keyframes logobg
{
  0%
  {
    transform: scale(1);
  }

  20%
  {
      transform: scale(1);
  }
  78%
  {
      transform: scale(1);
  }
  100%
  {
      transform: scale(0);
  }
}
/*------------ End of Splash Screen -----------*/


/*------------------ Header -------------------*/

/*--------------- End of Header ---------------*/


/*------------------- Banner ------------------*/

/*---------------- End of Banner --------------*/


/*----------------- Categories ----------------*/
.box-img:hover
{    
    animation-duration: calc(var(--animate-duration)*.75);
    animation-name: bounceIn;
    animation-delay: 0.2s;
}
/*------------- End of Categories -------------*/


/*------------------ Products -----------------*/
.s-slider-block__display-all
{
    padding: 5px;
    color: var(--secondary-color) !important;
    margin: 10px auto;
    border-radius: 15px;
    animation: 1.2s linear infinite signal;
}

.s-product-card-entry
{
    --c: var(--primary-color);
    --b: 3px;
    --g: 5px;
    padding: calc(var(--g) + var(--b));
    --_g: #0000 25%,var(--c) 0;
    background: conic-gradient(from 180deg at top var(--b) right var(--b),var(--_g)) var(--_i,200%) 0/200% var(--_i,var(--b)) no-repeat,conic-gradient(at bottom var(--b) left var(--b),var(--_g)) 0 var(--_i,200%)/var(--_i,var(--b)) 200% no-repeat;
    /*transition: .3s,background-position .3s .3s;*/
    cursor: pointer;
}

.s-product-card-entry, .s-products-slider-card.swiper-slide
{
    transition: transform .5s ease-in-out;
}

.s-product-card-entry:hover, .s-products-slider-card.swiper-slide:hover
{
    transform: scale(1.03);
    --_i: 100%;
    transition: .3s,background-size .3s .3s;
}

.s-product-card-content-footer .s-button-btn
{
    color: var(--secondary-color) !important;
    background: var(--font-color) !important;
    border: 1px solid var(--primary-color);
    border-radius: 0rem !important;
}
/*--------------- End of Products -------------*/


/*--------------- Products Details ------------*/

/*------------ End of Products Details --------*/


/*--------------------- Cart ------------------*/

/*------------------ End of Cart --------------*/


/*----------------- Testemonials --------------*/

/*-------------- End of Testemonials ----------*/


/*------------------- Features ----------------*/
.mask-block, .mask-slider .swiper
{
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
/*---------------- End of Features ------------*/


/*--------------------- FAQ -------------------*/

/*------------------ End of FAQ ---------------*/


/*-------------------- Footer -----------------*/
footer.store-footer,
.footer-is-light .store-footer .store-footer__inner, .store-footer__inner
{
    color: var(--secondary-color);
    background: var(--primary-color) !important;
    border-top-left-radius: 5rem;
    border-top-right-radius: 5rem;
    box-shadow: 0 2px 5px 1px rgba(64,60,67,.16);
}

.store-footer .footer-container .logo-footer::after
{
    
    content: "111";
    color: transparent;
    font-size: 20px;
    
    background-image: url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExenV5ZW9ibmFvOXNneHZtYWZxczJ5ZDFxNXd4eDVuc2l5MDY4cmk0aiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/0cMAwWr4XF2f8pajh0/giphy.gif);
    /*   
    background-image: url(https://imgur.com/E0XFHTE.jpg);
    */
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;    
    display: block;
    margin-bottom: 1rem;
}

.store-footer .footer-container .logo-footer .foo
{
    display: none;
}

.w-12
{
    width: 5rem;
    background: transparent !important;
}

.sbc-certificate p,
.md\:mb-0
{
    color: var(--secondary-color) !important;
}
/*----------------- End of Footer -------------*/


/*--------------------- Blog ------------------*/

/*------------------ End of Blog --------------*/


/*---------------- WhatsApp Icon --------------*/
.sicon-whatsapp2::after
{
    content: "\E917";
    text-align: center;
    cursor: pointer;
    background: #46a51e;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0px;
    color: #fff;
    box-shadow: #00000022 1.5px 1.5px 5px;
    width: 0px;
    height: 0px;
    border-radius: 27.5px;
    position: fixed;
    bottom: 25px;
    right: 15px;
    transform: rotate(360);
    transition: all .2s ease-in-out;
    margin-bottom: 0px !important;
}

body[style] .sicon-whatsapp2::after,
body[cz-shortcut-listen="true"] .sicon-whatsapp2::after,
i.sicon-whatsapp2::after
{
    width: 56px;
    height: 56px;
    border-radius: 32.5px;
    font-size: 30px;
    box-shadow: #0000006b 2px 2px 8px;
}

.sicon-whatsapp2:after:hover
{
    border-radius: 0;
    border: 0;
    width: 180px;
    height: 60px;
}

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

@keyframes trns
{
    0%
    {
        color: #ffffff00;
    }

    100%
    {
        color: #ffffff99;
    }
}

@media only screen and (max-width: 767px)
{
    .sicon-whatsapp2::after
    {
        margin-bottom: 45px !important;
    }
}
/*-------------- End of WhatsApp Icon ---------*/


/*---------------- Mobile Screens -------------*/
@media only screen and (max-width: 767px)
{ 
    .index::before
    {
       background-size: 25% !important;
    }

    /*----------------- Header ----------------*/
    
    /*----------------- Banner ----------------*/

    /*--------------- Categories --------------*/
    
    /*---------------- Products ---------------*/

    /*------------ Products Details -----------*/

    /*------------------ Cart -----------------*/

    /*--------------- Testemonials ------------*/
    
    /*----------------- Features --------------*/
    
    /*------------------ Footer ---------------*/
    .sbc-certificate
    {
        display: contents;
    }
    
    .w-12
    {
        width: 5rem;
    }
    
    .sbc-certificate p
    {
        display: block;
        color: #000 !important;
        margin-top: -15px !important;
    }
    /*------------------- Blog ----------------*/
}
/*------------- End of Mobile Screens ---------*/


/*----------------- Animations ----------------*/
keyframes bounceIn
{
    0%, 20%, 40%, 60%, 80%, 100%
    {
      animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0%
    {
      /*opacity: 0;*/
      transform: scale3d(.3,.3,.3);
    }
    20%
    {
      transform: scale3d(1.1,1.1,1.1);
    }
    40%
    {
      transform: scale3d(.9,.9,.9);
    }
    60%
    {
      /*opacity: 1;*/
      transform: scale3d(1.03,1.03,1.03);
    }
    80%
    {
      transform: scale3d(.97,.97,.97);
    }
    100%
    {
      /*opacity: 1;*/
      transform: scaleX(1);
    }
}

keyframes signal
{
    0%
    {
      box-shadow: 0 0 0 0 var(--primary-color);
    }
    100%
    {
      box-shadow: 0 0 0 5px #fff;
    }
}
/*-------------- End of Animations ------------*/
:root {
  --bg-color: #f5f5f5 !important;
.product-box {
  background-color: #ffffff !important;
}
.s-product-card-content {
  background-color: #ffffff !important;
  border-radius: 0 0 12px 12px;
  padding: 10px;
}
------------------------------------------------------