:root
{
    --primary-color: #79AB8D !important;
    --secondary-color: #fff !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%;
    border: 2px solid var(--primary-color) !important;
    background: var(--secondary-color) url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/gZgBRZ/FOOfVQ05BBa3Rb1iHUevvUUpgbDc2z4sDg8Zg0Q8.png);
    position: fixed;
    z-index: 9999999999999 !important;    
    transform: scale(0);
    background-size: 20% !important;
    background-repeat: no-repeat;
    background-position: center !important;
    
    animation-name: splash;
    animation-duration: 2.5s;
}

@keyframes splash
{
  0%
  {
    transform: scale(1);
  }
  20%
  {
    transform: scale(1);
  }
  80%
  {
    transform: scale(1);
  }
  100%
  {
    transform: scale(0) rotate(0deg);
  }
}
/*--------------- End of Splash Screen ---------------*/


/*---------------------- Header ----------------------*/
.main-nav-container .inner
{
    align-content: center;
    height: 104px;
    border-top-width: 0;
    border-bottom-width: 0;
    background: linear-gradient(to right, #fdfbf9,#f8f7f5, #fdf8f9) !important;
}

.navbar-brand img
{
    max-height: 5rem;
    max-width: 170px;
    
    animation: scale 3s linear infinite;
}
/*------------------ End of Header -------------------*/


/*---------------------- Banner ----------------------*/
.s-block--fixed-banner
{
    margin-top: -0.25px !important;
}

.s-block--fixed-banner .container
{
    max-width: 1350px;
    padding-right: 0px;
    padding-left: 0px;
}

section:nth-child(8)
{
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}
/*------------------ End of Banner -------------------*/


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

/*---------------- End of Categories -----------------*/


/*--------------------- Products ---------------------*/
.product-entry
{
    border: 0px solid var(--primary-color);
}

.product-entry__image
{
    width: 96%;
    margin: 4px;
    border-radius: 12px;
}

.product-entry__image img
{
    border-radius: 12px;
}

img.lazy-load.loaded
{
    height: 160px;
    object-fit: fill !important;
}

.triangle-overlay:where([dir="rtl"], [dir="rtl"] *)::after
{
    --tw-rotate: 0deg !important;
}

.triangle-overlay::after
{
    bottom: -100% !important;
}

salla-button .s-button-btn,
salla-button .s-button-btn:hover
{
    border-radius: 15px;
    color: var(--font-color) !important;
    background: var(--primary-color);
}

.sicon-shopping::before,
.s-button-text
{
    color: #fff !important;
}

salla-button .s-button-btn::after
{
    animation: ShineAnimation 5s infinite;
    animation-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
    content: "";
    display: block;
    position: absolute;
    left: -6px;
    right: -1px;
    top: 0;
    bottom: -6px;
    border-radius: 12px !important;
    width: 270px;
    height: 42px;
}

.s-login-modal-enter-button::after
{
    animation: none !important;
}

.sicon-heart::before
{
    color: var(--primary-color) !important;
}

.object-contain
{
    object-fit: fill;
}

@property --a 
{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.product-entry::after
{
    content: "";
    position: absolute;
    inset: 2px;
    background: #fff;
    z-index: -1;
    border-radius: 12px;
}

.product-entry
{
    position: relative;
    z-index: 9999;
    background: repeating-conic-gradient(from var(--a), var(--primary-color) 0%, var(--primary-color) 5%, transparent 5%, transparent 40%, var(--primary-color) 50%);
    animation: animate 8s linear infinite;
    border-radius: 12px;
}

@keyframes animate
{
  0%
  {
      --a: 0deg;
  }
  
  100%
  {
      --a: 360deg;
  }
}

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


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

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


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

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


/*------------------- Testemonials -------------------*/
.sicon-quote-open::before
{
    color: var(--primary-color);
    font-size: 2.75rem;
}
/*--------------- End of Testemonials ----------------*/


/*--------------------- Features ---------------------*/
.sicon-store2::before,
.sicon-award-ribbon::before,
.sicon-chat-person-alt::before,
.sicon-crdit-card-alt::before,
.sicon-shipping-fast::before,
.sicon-iphone::before
{
    color: transparent;
}

.sicon-store2::before
{
    background: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExa3p3anRuZjZxYjF3YmcyZHBwNnlwdG5kdW1pb3ZoZ3prcWE3ZHE2ZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/NccCcEbDdP9RRsxHmb/giphy.gif);
    background-size: 50px;
    background-repeat: no-repeat;
    width: 70px;
    height: 65px;
}

.sicon-award-ribbon::before
{
    background: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZW9hZm14bnN4Nzkzc3c0ZmR3MmhhMnYzaTBmdjhjNnRoZ2tlNHh4ZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/HTeaiua2UWzq0iJq2c/giphy.gif);
    background-size: 50px;
    background-repeat: no-repeat;
    width: 70px;
    height: 65px;
}

.sicon-chat-person-alt::before
{
    background: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcWxuanhmbHp3dnlrbzg0ZDhzeHkzemR3d2Nyb3ZhN2FwYjk1cmVnNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/ftjhPquL7ONFmaVq9A/giphy.gif);
    background-size: 50px;
    background-repeat: no-repeat;
    width: 70px;
    height: 65px;
}

.sicon-crdit-card-alt
{
    background: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaWpteHA1b2tpemVzY2JjZ3VubGI0a2Ezd3Z0ZzkxMjJ4Nzc5eHV0YiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/ZpCszEf0i3mlzRRc2s/giphy.gif);
    background-size: 70px;
    background-repeat: no-repeat;
    width: 70px;
    height: 65px;
}

.sicon-shipping-fast
{
    background: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDl4N2E2OTBmeTlrbzdpcXBubGl3cDAwNWY3ZXB2czVwdjJ3ZnVobiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/89IrjIlJDvxeOUiQBG/giphy.gif);
    background-size: 70px;
    background-repeat: no-repeat;
    width: 70px;
    height: 65px;
}

.sicon-iphone
{
    background: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdHo0Ynd0dGJzbjRhcDVmZGJwaXlyenJsbXFmbXlobmtibmI4dzlibiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/Cedb15sjeBDUGYya9t/giphy.gif);
    background-size: 70px;
    background-repeat: no-repeat;
    width: 70px;
    height: 65px;
}
/*----------------- End of Features ------------------*/


/*---------------------- Footer ----------------------*/
.max-h-\[70px\]
{
    max-height: 110px;
    
    animation: scale 2s linear infinite;
}

.footer-is-light .store-footer__top
{
    text-align: center;
}

.s-contacts-item
{
    justify-content: center;
}
/*------------------ End of Footer -------------------*/


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

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


/*------------------ WhatsApp Icon -------------------*/

/*-------------- End of WhatsApp Icon ----------------*/


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

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

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

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

    /*---------------- Testemonials ----------------*/
    
    /*------------------ Features ------------------*/
    
    /*-------------------- Cart --------------------*/
    
    /*------------------- Footer -------------------*/

    /*-------------------- Blog --------------------*/
}
/*-------------- End of Mobile Screens ---------------*/


/*------------------- Animations ---------------------*/
@keyframes scale
{
    0%,100%
    {
        transform: scale(1);
        opacity: 1;
    }
    50%
    {
        transform: scale(.9);
        opacity: .7;
    }
}

@keyframes up-down
{
    0%, 100%
    {
        top: 0;
    }
    50%
    {
        top: -25px;
    }
}

@keyframes ShineAnimation
{
    0%
    {
      background-repeat: no-repeat;
      background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100% );
      background-position: -250px -250px;
      background-size: 600px 600px;
    }
    100%
    {
      background-repeat: no-repeat;
      background-position: 250px 250px;
    }
}
/*----------------- End of Animations ----------------*/