/* Add custom CSS styles below */ 
body,
.site,
.app-inner,
.store-home,
main {
    background-color: #f5fbfe !important;
}

/* menu */
.main-menu > li > a {
    display: inline-flex;
    transition: transform 0.25s ease;
}

.main-menu > li:hover > a {
    transform: translateY(-4px);
}
.top-navbar {
    background-color: rgb(66 184 189) !important;
    color: white !important;
}

/* banners */
section.s-block.s-block--fixed-banner.wide-placeholder>.container {
    padding: 0!important;
    margin: 0px!important;
    max-width: 100%
}
/* First banner only */
section.s-block.s-block--fixed-banner.wide-placeholder.fixed-banner--0 {
    margin: 0px !important;
}


/* categories */
.banner-entry {
    grid-row: span 2 / span 2;
  background-color: transparent !important;
}
  section:nth-of-type(2) .grid{
    grid-template-columns: repeat(4,minmax(0,1fr));
}

  section:nth-of-type(3) .grid{
    width: 75%;
    margin-inline: auto;
  
}
  .banner-entry{
  height: 280px !important;
}



@media (max-width: 767px){
  section:nth-of-type(2) .grid{
    grid-template-columns: repeat(4,minmax(0,1fr));
}
   section:nth-of-type(3){
    margin-top: 0px !important;
  }
  section:nth-of-type(3) .grid{
    width: 75%;
    margin-inline: auto;
    grid-template-columns: repeat(3,minmax(0,1fr));
}
  .banner-entry{
  height: 100px !important;
}
}



/* client review */
.flex.flex-col.justify-between.h-full.w-full.p-\[1\.4rem\].bg-store-bg-secondary.rounded-md.shadow-\[rgba\(50\,_50\,_105\,_0\.15\)_0px_2px_5px_0px\,_rgba\(0\,_0\,_0\,_0\.05\)_0px_1px_1px_0px\] {
    background-color: rgb(66 184 189) !important;
    color: white !important;
}

h4.text-base.text-store-text-primary.mb-2,
p.leading-6.text-sm.mb-2.mt-2\.5.md\:mt-4.text-store-text-primary {
    color: white !important;
}

i.sicon-quote.-scale-y-100.-scale-x-100.absolute.top-4.end-4.text-3xl.opacity-10.text-store-text-secondary {
     color: white !important;
}





/* product */
button.s-button-element.s-button-btn.s-button-outline.s-button-sm.s-button-wide.s-button-primary-outline.s-button-loader-center {
    border-radius: 999px !important;
}







/* footer */
/* ==================================
   Compact Footer — Keep Salla Layout
================================== */

footer.store-footer {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden !important;

    background-image: url("https://res.cloudinary.com/dieoptjji/image/upload/v1785671143/%D9%81%D9%88%D8%AA%D8%B1_result_result_bz09by.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-color: transparent !important;
}

/* Hide only Salla's original curve */
footer.store-footer > svg.store-footer__curve {
    display: none !important;
}

/* Keep original Salla footer layout */
footer.store-footer .store-footer__inner {
    display: flex !important;
    min-height: auto !important;
    height: auto !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    background: transparent !important;
}


/* Make all footer sections transparent */
footer.store-footer > div,
footer.store-footer .store-footer__inner,
footer.store-footer .store-footer__contacts-row,
footer.store-footer .footer-bottom {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}





/* White footer content */

/* Keep uploaded images visible */
footer.store-footer img {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Tablet and mobile */
@media (max-width: 767px) {
    footer.store-footer {
        background-size: cover !important;
        background-position: center top !important;
    }

    footer.store-footer .store-footer__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

}






/* Center all section H2 titles on Salla homepage only */

/* Salla places the heading inside .right-side */
body:has(salla-hook[name="index:start"]) .s-block__title .right-side {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Homepage section headings */
body:has(salla-hook[name="index:start"]) .s-block__title h2 {
    font-size: 40px;
}

/* Mobile */
@media (max-width: 767px) {
    body:has(salla-hook[name="index:start"]) .s-block__title h2 {
        font-size: 18px !important;
      
    }
}