/* Add custom CSS styles below */ 
:root {
    --main-color: #3c0448;
    --alt-main-color: #e8b93a;
    --white-color: white
}

.sc-1au8ryl-0 {
display:none;}
.bg-inherit {
    background-color: var(--main-color);
    color: #fff;
}
section.s-block.s-block--fixed-banner.wide-placeholder>.container .banner--fixed img {
    border-radius:0
}
div#mainnav {
    background-color: #3c0448;
}
.sub-menu ul li  {
       color: var(--main-color);
}
.s-cart-summary-total{
       color: #fff;
}

.top-navbar {
    background: var(--main-color)!important
}

.top-navbar .s-search-input {
    background-color: var(--white-color)!important
}

body.index .s-user-menu-trigger {
  background:var(--main-color)!important
}

@media (min-width: 1024px) {
    ul.main-menu,.main-menu li.root-level>a {
        padding-top:1rem!important;
        padding-bottom: 1rem!important
    }
}


.main-menu li.root-level>a {
    position: relative
}

.main-menu li.root-level>a::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    bottom: 0;
    background: var(--main-color);
    transition: 0.3s
}

.main-menu li.root-level>a:hover {
    transform: translateY(-3px);
    background-color: #eee
}

.main-menu li.root-level>a:hover::before {
    width: 100%
}

i.header-btn__icon.sicon-user-circle,i.header-btn__icon.icon.sicon-shopping-bag,i.sicon-menu {
    background: var(--main-color)!important;
    color: var(--alt-main-color)!important;
    border: 0px!important;
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0;
    transition: 0.3s
}

i.sicon-menu {
    padding: 8px;
    border-radius: 50%
}

i.header-btn__icon.sicon-user-circle:hover,i.header-btn__icon.icon.sicon-shopping-bag:hover {
    background: var(--white-color)!important;
    color: var(--alt-main-color)!important;
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0;
    transform: translateY(-3px);
    transition: 0.3s
}

@media (max-width: 480px) {
    div#mainnav {
        padding-top:0.8rem!important
    }
}

section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
    margin-top: 0!important
}


 section.s-block.s-block--photos-slider salla-slider.photos-slider .swiper {
    padding: 0!important
}

section.s-block.s-block--fixed-banner.wide-placeholder>.container {
    padding: 0!important;
    margin: 0!important;
    max-width: 100%!important;
    border-radius: 0!important
}
body.index .s-block--banners .grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.s-block--banners .lazy__bg {
    background-size: contain !important;
    background-repeat:no-repeat;
}
body.index .s-block--banners a{
    background-color:transparent !important;
    height: 200px !important;
}

body.index > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div > a:nth-child(1) {
    grid-area:1/1/1/1 ; 
}
body.index > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div {
    gap:8px;
}


@media(max-width:767px){
   body.index .s-block--banners .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.index .s-block--banners a{
    background-color:transparent !important;
    height: 100px !important;
}



}


section.s-block.s-block--features {
    background-color: var(--main-color)!important;
    max-width: 100% !important;
}
.s-block--features__item {
    background-color: transparent!important
}


section.s-block.s-block--features.container>div>div>div {
    background-color: var(--alt-main-color);
    padding: 17px;
    border-radius: 50px;
    width: 10rem;
    height: 10rem
}
section.s-block.s-block--features.container p{
  color:  var(--alt-main-color)
}
section.s-block.s-block--features.container h2{
  color:  var(--white-color)
}
section.s-block.s-block--features.container i {
    font-size: 5rem;
    color: var(--white-color)
}




body.index .s-button-btn {
    background-color: var(--alt-main-color);
     border-radius: 0px 30px 0px 30px;
    color: #000;
    transition: all 0.3s ease-in-out
}

body.index .s-button-btn:hover {
    background-color: var(--main-color);
    color: #fff
}

.s-product-card-image img {
   background: #fff !important;
}

.store-footer {
    background:  var(--main-color)!important;
     
}
.store-footer span.copyright-text p {
    color:  var(--alt-main-color)!important;
}

.store-footer__inner {
    background: #fff !important;
    color: #000
}

.s-contacts-icon {
    background-color: #fff;
    color: var(--main-color)
}
footer a[href*=instagram] {
    background: linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
border:none
}
footer a[href*=tiktok] {
   background: black;
    color:white;
border:none
}
footer a[href*=snapchat] {
    background:yellow;
border:none
}

footer a[href*=twitter] {
    background:lightskyblue;
border:none;
    color:white;
}
@media(max-width: 767px) {
.sc-q8c6tt-3  {
    bottom: 150px !important;
}
.navbar-brand img {
    max-height: 5rem;
  
}
    section.s-block.s-block--features.container>div {
        grid-template-columns:repeat(3,minmax(0,1fr))!important
    }

    .s-block--features__item:first-child {
        grid-column: 1 / 1
    }

    section.s-block.s-block--features.container>div>div>div {
        background-color: var(--alt-main-color);
        padding: 17px;
        border-radius: 50px;
        width: 6rem;
        height: 6rem
    }

    section.s-block.s-block--features.container i {
        font-size: 3rem;
        color: var(--white-color)
    }

    .store-footer__inner * {
        text-align: center;
        justify-content: center
    }

    .navbar-brand img {
        max-height: 2rem;
    }
}
body.index .s-product-card-content {
    background-color: var(--main-color);
}

body.index .s-product-card-content-main a ,
body.index div.s-product-card-content-sub * ,
.s-product-card-content-subtitle {

color:#fff !important;
}
.s-user-menu-trigger {
   
    background-color: var(--main-color) !important;
  
}
.s-products-slider-card.swiper-slide {
    border: 2px solid var(--main-color);
    border-radius: 20px;
    padding: 20px;
    margin-right: 5px;
}
img[src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/BpYDy/166e0c81-9025-4996-85b8-1b18b73659ca-500x500-w3VAcfylGHYl6d4khTAKMUjSqOainefqWq2MqPR0.jpg"] {
        content: url("https://i.postimg.cc/nhrsTYPb/2.png") !important;
}