:root
{
    --primary-color: #ae8c70 !important;
    --secondary-color: #ae8c70 /*#eee7e1*/ !important;
    --linear-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
    --font-color: #fff !important;
}

/*------------------- 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/BqVAV/wHzp00b2e2GVb6ddHYZA0bpn20Bg6k4hgs4IbGIs.png);
    position: fixed;
    z-index: 999999;
    transform: scale(0);
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: center center;
  
    animation: heartbeat 1.5s;
    animation-duration: 2.5s;
}

@keyframes heartbeat
{
    0%
    {
      transform: scale(1);
      opacity: 1;
    }
    50%
    {
      transform: scale(1.2);
      opacity: 1;
    }
    90%
    {
      opacity: 1;
    }
    100%
    {
      transform: scale(1);
      opacity: 0;
    }
}
/*--------------- End of Splash Screen ---------------*/


/*---------------------- Header ----------------------*/
.main-nav-container
{
    border-bottom-right-radius: 4rem !important;
    border-bottom-left-radius: 4rem !important;
    padding-top: 8px !important;
    padding-bottom: 0.5rem !important;
    box-shadow: 0 0 10px -2px var(--primary-color) !important;
    background-color: var(--font-color);
    width: 98%;
    margin: 0 auto 10px auto;
}

.fi-menu::before,
.main-nav-container .f_user-icon-button > i,
.main-nav-container .btn--circle-gray,
.main-nav-container .btn--rounded-gray,
.main-nav-container .s-search-input,
.s-cart-summary-wrapper
{
    color: var(--primary-color) !important;
    background-color: var(--font-color) !important;
}

.fi-search::before
{
    color: var(--primary-color) !important;
}

.main-nav-container .sicon-shopping-bag::before
{
    color: var(--primary-color) !important;
    background-color: var(--font-color) !important;
}

.header-btn__icon
{
    padding-left: 10px;
    color: var(--primary-color) !important;
    background-color: var(--font-color) !important;
}

.main-menu,
.bg-inherit
{
    background-color: #fff !important;
    border-bottom-right-radius: 5rem !important;
    border-bottom-left-radius: 5rem !important;
}

nav.nav-bar ul
{
    background-color: #fff !important;
}

.navbar-brand img
{
    max-height: 4rem !important;
    max-width: 170px;
    
    animation: scale 1.3s linear infinite;
}

.mm-spn li a,
.mm-spn li span,
.mm-spn ul.main-menu li
{
    color: var(--primary-color) !important;
    background: var(--font-color) !important;
    text-align: center;
}

.mm-spn li span
{
    padding: 4px 10px !important;
}

.main-menu li > a,
.main-menu li:hover > a,
nav.nav-bar > .main-menu li:hover > a
{
    color: var(--font-color);
    text-align: center;
    background: var(--linear-gradient);
    padding-top: 0rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.main-menu li
{
    margin: 5px 10px !important;
}
/*------------------ End of Header -------------------*/


/*---------------------- Banner ----------------------*/
.f_ad-banners .f_ad-banner-content h2,
.f_ad-banners .f_ad-banner-content > a
{
    color: var(--primary-color) !important;
}

.f_ad-banners .f_ad-banner-content h2
{
    font-size: 1.5rem;
}

.f_ad-banners .f_ad-banner-img
{
    border-radius: 12px;
    max-width: 45%;
}

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


/*-------------------- Categories --------------------*/
 .f_enhanced-square-photos .f_image-slide-one-sixth .f_image-entry
{
    color: var(--font-color) !important;
    background: var(--linear-gradient);
    height: 300px;
}

.f_enhanced-square-photos .f_image-entry.f_with-bg img
{
    box-shadow: 0 0 10px 2px #fff !important;
    border: 2px solid var(--primary-color);
}

.f_enhanced-square-photos .f_image-entry.f_with-bg .f_image-entry__title
{
    color: var(--font-color) !important;    
    padding: 0px 6px;
}
/*---------------- End of Categories -----------------*/


/*--------------------- Products ---------------------*/
salla-slider.f_arrows-centered-top .s-slider-block__title-right h2,
.fi-heart::before,
.f_block__title > div h2
{
    color: var(--primary-color);
    font-size: 1.45rem !important;
}

.f_block__title > div p
{
    margin-top: .5rem;
    font-size: 16px;
    font-weight: 600;
}

.f_block__display-all
{
    font-size: 16px !important;
}

.s-slider-v-centered .s-slider-block__title-nav button
{
    background: var(--primary-color) !important;
}

salla-slider .s-slider-block__title-nav > button svg
{
    fill: var(--font-color) !important;
}

salla-slider.f_arrows-centered-top .s-slider-block__title-right p
{
    color: var(--secondary-color) !important;
    font-size: 14px;
    font-weight: 600;
}
  
.product-entry
{
    padding: 0.25rem !important;
}

.product-entry__title a
{
    color: var(--primary-color) !important;
    text-align: center !important;
}

button.s-button-primary
{
    color: var(--font-color);
}
/*----------------- End of Products ------------------*/


/*----------------- Products Details -----------------*/
.f_quick-links>ul>li a, .f_brands-nav>ul>li a,
.f_quick-links>ul>li.f_tags>a, .f_brands-nav>ul>li.f_tags>a
{
    color: var(--font-color) !important;
}

.f_product-section .s-button-light-outline
{
    fill: var(--font-color) !important;
    color: var(--font-color) !important;
    background: var(--linear-gradient);
}

.f_product-section .fi-heart::before
{
    color: var(--font-color);
}

salla-slider .s-slider-block__title-nav > button,
salla-slider .s-slider-block__title-nav > button:hover
{
    fill: var(--font-color) !important;
    color: var(--font-color) !important;
    background: var(--linear-gradient);
}

.sm\:mb-5,
salla-slider .s-slider-block__title h2,
.RVP-slider .s-slider-block__title-right::before
{
    color: var(--primary-color) !important;
    font-size: 1.45rem;
}

.RVP-slider .product-card h3
{
    color: var(--primary-color) !important;
    font-size: .875rem;
    line-height: 2rem;
    height: 80px;
    text-align: center;
}

.s-quantity-input-button svg
{
    fill: var(--font-color) !important;
}
/*------------- End of Products Details --------------*/


/*----------------------- Cart -----------------------*/
.f_cart-section .text-2xl
{
    color: var(--primary-color) !important;
    font-size: 1.25rem !important;
    line-height: 2rem;
}

.text-gray-400
{
    color: #000 !important;
}

.lg\:rounded-\[2\.5rem\]
{
    box-shadow: 2px 4px 10px -4px var(--primary-color) !important;
}
/*------------------- End of Cart --------------------*/


/*------------------- Testemonials -------------------*/
.testimonials-slider .swiper-slide-active .testimonial
{
    box-shadow: 2px 4px 10px -4px var(--primary-color) !important;
    padding: 2rem !important;
}
/*--------------- End of Testemonials ----------------*/


/*--------------------- Features ---------------------*/
.f_enhanced-store-features .f_features-item
{
    border-radius: 4rem;
    padding: 1rem !important;
    box-shadow: 2px 4px 10px -4px var(--primary-color) !important;
}

.f_brand--medium
{
    height: 6rem;
    padding: 0.5rem;
    box-shadow: 2px 4px 10px -4px var(--primary-color) !important;
}

.f_enhanced-store-features .f_features-item h3
{
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color);
}

.f_enhanced-store-features .f_features-item p
{
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-color);
}

.f_statistics-item p
{
    font-size: 1.10rem;
}
/*----------------- End of Features ------------------*/

.faqs__item
{
    color: var(--font-color);
    background-color: var(--primary-color);
}

/*---------------------- Footer ----------------------*/
.store-footer__inner
{
    padding-top: 0rem !important;
    padding-bottom: 2rem !important;
}

.p-8
{
    padding: 0rem !important;
    justify-content: center;
    display: flex;
}

.py-8
{
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.md\:px-16
{
    color: var(--primary-color);
}

.store-footer__bottom
{
    border-radius: 20px !important;
}

.store-footer__bottom span p
{
    color: #fff !important;
    opacity: 1 !important;
    font-size: 15px !important;
}

.store-footer .footer-list,
.newsletter-block .text-sm
{
    color: var(--primary-color);
    font-weight: 600;
}

.store-footer .f_menu-title,
.store-footer .footer-list a
{
    text-align: center !important;
}

.store-footer .f_logo
{
    width: 6rem;
}

.store-footer .footer-list
{
    display: flex;
    flex-direction: inherit !important;
    text-align: center !important;
}

.store-footer .social-link,
.store-footer .f_payment-methods > li
{
    height: 3rem;
    width: 4rem;
    padding: 5px;
    box-shadow: 2px 4px 10px -4px var(--primary-color) !important;
}
/*------------------ 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 -------------------*/
    .main-nav-container .btn--circle-gray,
    .main-nav-container .btn--rounded-gray,
    .main-nav-container .s-search-input,
    .s-cart-summary-wrapper
    {
        color: var(--font-color) !important;
        background-color: transparent !important;
    }
    
    .fi-search::before
    {
        color: var(--font-color) !important;
    }

    .navbar-brand img
    {
        max-height: 3rem !important;
        max-width: 170px;
    }

    .main-nav-container
    {
        width: 98%;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom-right-radius: 2.5rem !important;
        border-bottom-left-radius: 2.5rem !important;
    }
    
    .mm-spn li a,
    .mm-spn li span,
    .main-menu li > a,
    .main-menu li:hover > a,
    .mm-spn ul.main-menu li
    {
        color: var(--font-color) !important;
        background: var(--primary-color) !important;
    }
    /*------------------- Banner -------------------*/
    .f_ad-banners .f_ad-banner-content h2
    {
        font-size: 1rem;
    }
    
    .banner--fixed img
    {
        border-radius: 0.75rem !important;
    }

    /*----------------- Categories -----------------*/
    .f_enhanced-square-photos .f_image-slide-one-sixth
    {
        width: 35% !important;
    }
    
    .f_enhanced-square-photos .f_image-slide-one-sixth .f_image-entry
    {
        height: 170px;
    }
    
    /*------------------ Products ------------------*/

    /*-------------- Products Details --------------*/
    .main-content .text-xl
    {
        font-size: 1rem;
        line-height: 1.75rem;
    }
    
    .ql-align-right span
    {
      font-size: 1.5rem;
      line-height: 2.25rem;
    }

    /*---------------- Testemonials ----------------*/
    .testimonials-slider .swiper
    {
        padding-left: 1.25rem !important;
    }
    
    /*------------------ Features ------------------*/
    .f_enhanced-store-features .f_features-item
    {
        border-radius: 2rem;
    }
    
    .f_brand--medium
    {
        height: 4.25rem;
        padding: 0.75rem;
    }
    /*-------------------- Cart --------------------*/
    
    /*------------------- Footer -------------------*/
    .f_bottom-menu
    {
        max-height: 5rem;
        border-top-left-radius: 3.5rem !important;
        border-top-right-radius: 3.5rem !important;
        box-shadow: 0 0 10px -2px var(--primary-color) !important;
    }
    
    .sicon-cart2:before
    {
        color: var(--font-color);
    }

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


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

@keyframes up-down
{
    0%, 100%
    {
        top: 0;
    }
    50%
    {
        top: -25px;
    }
}
/*----------------- End of Animations ----------------*/