:root
{
    --primary-color: #706046 !important;
    --secondary-color: #ebc071 !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(--font-color) url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/aOdKW/6QMTwbx7B239YVAReha3k6ZF2EJenvusH9FRUWwM.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 -------------------*/
.header--boxed #main-nav:not(.fixed-pinned)
{
    color: var(--color-mainnav-color) !important;
    background-color: transparent !important;
}

.pt-\[22px\]
{
    padding-top: 10px;
}

.navbar-brand img,
.main-nav.fixed-pinned .navbar-brand img
{
    max-height: 90px;
    height: 90px !important;
    
    animation: scale 1.4s linear infinite;
}

.mainmenu--sidepanel .storemenu-panel .main-menu li.root-level > a
{
    font-size: 1rem !important;
}
/*--------------- End of Header ---------------*/


/*------------------- Banner ------------------*/
.banner--fixed img
{
    position: relative;
    animation: up-down 8s ease infinite;
}
/*---------------- End of Banner --------------*/


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

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


/*------------------ Products -----------------*/
.swiper-free-mode > .swiper-wrapper,
.s-block--products-slider salla-slider .swiper-slide {
    border-width: 0;
}

.product-entry
{
    padding: 8px;
    border-radius: 0px;
    border: 2px solid var(--primary-color);
    
    
    border-top-color: transparent;
    background: transparent !important;    
    animation: addborder 2.5s 0s linear infinite;
    
}

.product-entry__content
{
    text-align: center !important;
}
/*--------------- End of Products -------------*/


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

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


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

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


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

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


/*------------------- Features ----------------*/
.feature-icon
{
    transform: scale(1);
    animation: 4s ease 0s infinite normal none running shake;
}
/*---------------- End of Features ------------*/


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

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


/*-------------------- Footer -----------------*/
.s-block--full-bg + #end_of_the_components, .s-block--full-bg + footer, .s-block--full-bg + .s-block--full-bg, .s-block--full-bg:first-of-type
{
    margin-top: 25px;
}

.store-footer
{
    color: var(--font-color) !important;
    background-color: var(--primary-color) !important;
    border-radius: 75px 75px 0 0;
    box-shadow: 0px 0px 0px 8px #ebc071;
}

.store-footer .social-link
{
    border-width: 1.5px;
    border-color: var(--secondary-color) !important;
}

.mb-2\.5
{
    color: var(--secondary-color) !important;
    font-weight: 600;
}
/*----------------- 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: 40% !important;
    }

    /*----------------- Header ----------------*/
    .header--boxed #main-nav:not(.fixed-pinned)
    {
        margin-top: 0px;
    }
    
    .main-nav.fixed-pinned .navbar-brand img,
    .navbar-brand img
    {
        max-height: 80px !important;
        height: 90px !important;
    }
    
    .header--mini .main-nav__content .right-side .mainmenu__default,
    .header--mini .main-nav__content .right-side ul
    {
        margin-left: auto;
        margin-right: 38px !important;
    }
    
    /*----------------- Banner ----------------*/
    .s-block--main-slider-1.in-normal-size salla-slider .swiper-lazy, .s-block--main-slider-1.in-normal-size div[slot="items"] .swiper-lazy, .s-block--main-slider-1.in-normal-size .swiper-slide .swiper-lazy
    {
        margin-top: 65px;
    }
    /*--------------- Categories --------------*/
    
    /*---------------- Products ---------------*/
    salla-slider[type]:not(.hydrated) > div,
    salla-slider[type]:not(.hydrated) .swiper > div > div,
    salla-slider.carousel-slider .swiper
    {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
        padding-bottom: 1rem !important;
    }
    /*------------ Products Details -----------*/

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

    /*--------------- Testemonials ------------*/
    
    /*----------------- Features --------------*/
    
    /*------------------ 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 shake
{
  0% {
      transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
      transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
      transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
      transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
      transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
      transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
      transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
      transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
      transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
      transform: translate(1px, 2px) rotate(0deg);
  }
  
  100% {
      transform: translate(1px, -2px) rotate(-1deg);
  }
}

@keyframes addborder
{
  25%
    {
        border-color: transparent;
        border-right: 2px solid var(--primary-color);
    }
  50%
    {
        border-color: transparent;
        border-bottom: 2px solid var(--primary-color);
    }
  75%
    {
        border-color: transparent;
        border-left: 2px solid var(--primary-color);
    }
  100%
    {
        border-color: transparent;
        border-top: 2px solid var(--primary-color);
    }
}
/*-------------- End of Animations ------------*/