/* Add custom CSS styles below */ 
:root {
    --main-color: #fddfeb;
    --alt-main-color: #fddfeb;
    --white-color: white
}
body {
   
    background-image: url('https://i.postimg.cc/1t58LjHB/volcano-BG.jpg') !important; 
    background-size: cover !important; 
    background-position: center !important; 
    min-height: 100vh !important;
 
  
}
body.index .s-user-menu-trigger {
  background: #f991bc !important
}

.top-navbar ,
#mainnav {
    background: #f991bc !important ; 
}


.s-user-menu-trigger {
    background: #f991bc !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: #000 !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) {
.s-block--features__item h2 {
    margin-bottom: 0.25rem;
    font-size: 9px;
   line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, 1);
    color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
}
.s-block--features__item p {
    font-size: 6px;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(107, 114, 128, 1);
    color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}

    div#mainnav {
        padding-top:0.8rem!important
    }
}
section.s-block.s-block--fixed-banner img{
    border-radius:0;
        background-color: transparent !important;
}


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

section.s-block.s-block--photos-slider salla-slider.photos-slider .swiper-slide {
    padding: 0!important;
    margin: 0!important;
    width: 100%!important;
    border-radius: 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
}

#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(5) > div {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap !important;
    
}
#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(5) > div a {
    width:30% !important;
    height: 300px !important;
    background-color: transparent !important;
}

#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(5) > div > a > div{
     background-size:contain;
    background-repeat:no-repeat !important;  background-color: transparent !important;
  
}
div.s-slider-block__title > div.s-slider-block__title-right > h2 {
display:none;
}


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

.s-button-btn:hover {
    
    color: #731445
}

.store-footer {
    background: transparent!important
}

.store-footer__inner {
    background: #f991bc !important;
    color: #3e3e3e
}



div.app-inner>footer>div.store-footer__inner>div>div.lg\:col-span-2>p {
    margin-top: 90px;
}

a.flex.items-center.m-0 {
    position: relative;
}


a.flex.items-center.m-0 h3 {
    display: none;
}

a.flex.items-center.m-0::before {
   background:white;
    border-radius:50%;
    content: '';
    position: absolute;
    background-image: url('https://i.postimg.cc/Ss8v1CZy/image.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 150px;
    width: 150px;
    top: -60px;
    right: 50%;
    transform: translate(50%);
 
}
.s-block--features__item {
    background-color: transparent!important
}

section.s-block.s-block--features.container>div>div>div {
    background-color: #f38fbc;
    padding: 17px;
    border-radius: 50px;
    width: 10rem;
    height: 10rem
}

section.s-block.s-block--features.container i {
    font-size: 5rem;
    color: var(--white-color)
}
section.s-block.s-block--features.container p{
    color: #000;
    font-weight:bold;
}

@media(max-width: 767px) {
body.index .s-user-menu-trigger {
  padding:0 !important;
}

  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 {
       
        padding: 17px;
        border-radius: 50px;
        width: 6rem;
        height: 6rem
    }

    section.s-block.s-block--features.container i {
        font-size: 3rem;
        color: var(--white-color)
    }
 #app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(5) > div a {
    width: 30% !important;
    height: 169px !important;
    background: transparent;
}

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

    

  
}

#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--features.container > div > div:nth-child(2) > p{
    display:none;
}