:root
{
    --primary-color: #806cff !important;
    --secondary-color: #0e0c1d !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/Goqpw/jbKTMj90OlLbTaIWYP3CnNmkONFdk40nq9WhEoWg.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(360deg);
  }
}
/*------------ End of Splash Screen -----------*/

/*
body
{
    background-image: url(https://cdn.salla.sa/form-builder/h8svGfIsbEYYeVkVyAp1wbyCTpYeTPr9R24D2WGL.png);
    background-size: 100% auto;
    background-position: top;
    background: var(--font-color) !important;
}
*/

.dark body
{
    background-color: var(--secondary-color) !important;
    background-image: url(https://cdn.salla.sa/form-builder/umaTg3RCL69i41Ib35NuLQTPYzAD7csPPgiQVoTV.png) important;
    background-size: 36%;
  background-repeat: repeat;
}

/*------------------ Header -------------------*/
.navbar-brand img
{
    background: var(--secondary-color) !important;
    border-radius: 8px;
    padding: 0 5px;
    
    animation: scale 1.3s linear infinite;
}

.s-menu-topnav-list
{
    display: none;
}

.main-nav-container
{
    background-color: transparent !important;
}

/*
.store-header a[href*="loyalty"]::before
{
    display: inline-block;
    font-family: sallaicons;
    --tw-text-opacity: 1;
    color: rgb(255 198 42 / var(--tw-text-opacity));
    --tw-content: "";
    content: "";
    content: var(--tw-content);
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
*/

.main-nav-container .header-search
{
    position: absolute;
    right: 16px;
    bottom: -5px;
    left: 16px;
    top: 500px;
    z-index: 1;
    max-width: 1250px;
    margin-inline: auto;
}

.main-menu
{
    justify-content: center;
    text-align: center;
}
/*--------------- End of Header ---------------*/


/*------------------- Banner ------------------*/
.banner--fixed img
{
    background: transparent;
    width: 100%;
}

.s-block--photos-slider img
{
    background: var(--secondary-color);
}
/*---------------- End of Banner --------------*/


/*----------------- Categories ----------------*/
.s-block--cards-slider
{
    margin-top: 4rem;
}

.s-block--categories .slide--cat-entry,
.dark .s-block--categories .slide--cat-entry
{
    background: transparent;
    border: 1px solid var(--primary-color) !important;
}

/*
.s-block--banners .md\:grid-cols-2
{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.banner-entry
{
    height: 450px;
    background: transparent;
}
*/

.s-block--banners .md\:grid-cols-2
{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.banner-entry
{
    height: 340px;
    background: transparent;
}

section:nth-child(15) .md\:grid-cols-2
{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

section:nth-child(15) .md\:grid-cols-2
.banner-entry
{
    height: 200px;
    background: transparent;
}

/*
section:nth-child(17) .md\:grid-cols-2
.banner-entry
{
    height: 380px;
    background: transparent;
}
*/

section:nth-child(17) .md\:grid-cols-2
.banner-entry
{
    height: 300px;
    background: transparent;
}
/*------------- End of Categories -------------*/


/*------------------ Products -----------------*/
.dark .product-entry,
.dark .product-entry--vertical .product-entry__content,
.dark .product-entry--coupon::before
{
    background: transparent;
}

.product-entry--coupon .coupon-area::after
{
    background: radial-gradient(circle at bottom center, transparent, transparent 40px, var(--primary-color) 40px, #fff);
}

.product-entry--coupon .coupon-area::before
{
    background: radial-gradient(circle at top center, transparent, transparent 40px, var(--primary-color) 40px, #fff);
}

.dark .product-entry--coupon .coupon-area::after
{
    background: radial-gradient(circle at bottom center, transparent, transparent 40px, #1F1F2C 40px, #1F1F2C);
}

.dark .product-entry--coupon .coupon-area::before
{
    background: radial-gradient(circle at top center, transparent, transparent 40px, #1F1F2C 40px, #1F1F2C);
}
/*--------------- End of Products -------------*/


/*--------------- Products Details ------------*/
body .hide-scroll
{
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: auto !important;
  overflow-y: scroll;
}

.dark .product-form,
.dark .dark\:bg-darker
{
    background: #1F1F2C;
}
/*------------ End of Products Details --------*/


/*--------------------- Cart ------------------*/
.dark .dark\:bg-darker
{
    background: #1F1F2C;
}
/*------------------ End of Cart --------------*/


/*----------------- Testemonials --------------*/
.testimonials-slider .testimonial__text,
.dark .testimonials-slider .testimonial__text
{
    background-color: var(--primary-color);
}
/*-------------- End of Testemonials ----------*/


/*------------------- Features ----------------*/

/*---------------- End of Features ------------*/


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

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


/*-------------------- Footer -----------------*/
.dark .store-footer__inner,
.store-footer .md\:flex
{
  background-color: var(--secondary-color) !important;
}

.md\:mb-0,
.s-social-link a svg
{
    fill: #fff !important;
    color: #fff !important;
}
/*----------------- End of Footer -------------*/


/*--------------------- Brands ------------------*/
.brand-item
{
    background-color: transparent !important;
    padding: 0;
}

.dark .index .brand-item img,
.container .s-block--brands-slider
{
    background: transparent;
    filter: none !important; 
}

salla-slider .slide--one-fivth
{
    width: 15%;
}
/*------------------ End of Brands --------------*/


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

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


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

    /*----------------- Header ----------------*/
    .s-contacts-header
    {
        display: contents !important;
    }
    
      #mobile-menu .main-menu
      {
          justify-content: initial !important;
      }
    
    .main-nav-container .header-search
    {
        right: 5px;
        bottom: -5px;
        left: 15px;
        top: 100px;
        max-width: 1250px;
        margin-inline: auto;
    }
    /*----------------- Banner ----------------*/

    /*--------------- Categories --------------*/
    .s-block--banners .md\:grid-cols-2
    {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .banner-entry
    {
        height: 135px;
        background: transparent;
    }
    
    section:nth-child(15) .md\:grid-cols-2 .banner-entry
    {
        height: 55px !important;
        background: transparent;
    }
    
    section:nth-child(17) .md\:grid-cols-2
.banner-entry
    {
        height: 125px;
        background: transparent;
    }
    /*---------------- Products ---------------*/

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

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

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

    /*------------------- Brands ----------------*/
    salla-slider .slide--one-fivth
    {
        width: 34%;
    }
}
/*------------- End of Mobile Screens ---------*/


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

@keyframes ping
{
    75%,
    100%
    {
        transform: scale(2);
        opacity: 0;
    }
}
/*-------------- End of Animations ------------*/