/* Add custom CSS styles below */ 
    @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200;300;400;500&display=swap');
    @import url("https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css");
    body *:not(i) {
        font-family: 'Almarai' !important;
    }
:root {
    --main-color: #51b0bb;
    --second-color: #f5f5f5;
    --white-color: #fff;
    --normal-box-shadow:  -8px 10px 15px -3px rgba(0,0,0,0.1);
}
.main-menu li.root-level>a {
    box-shadow: inset 0 0 0 0 #white;
    color: black;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    border-radius: 5px;
}
.main-menu li.root-level>a:hover {
    color: #fff;
    box-shadow: inset 200px 0 0 0 #dd2c1a;
}

i.header-btn__icon.sicon-user-circle,
i.header-btn__icon.icon.sicon-shopping-bag {
    color: white;
    background: #dd2c1a;
    transition: all .5s;
      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}
  i.header-btn__icon.sicon-user-circle:hover,
i.header-btn__icon.icon.sicon-shopping-bag:hover {

	animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
  .top-navbar .s-search-input {
    background-color: rgb(239 242 253);
    border: 1px solid #3a57a826;
}
.s-cart-summary-count {
    background-color: #dd2c1a;
}
  .s-cart-summary-total {
    color: #dd2c1a; !important;
  }
header.store-header {
    margin-bottom: 0px;
    background: #f1a84700;
    background-size: cover;
}
.main-nav-container.fixed-header .inner {
  background: white !important;
    border-radius: 0px 0px 30px 30px;
        padding-top: 10px;
        padding-bottom: 5px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px #dd2c1a;;
}
.top-navbar {
    padding-top: 15px;
    background-color: #4aa7b7; !important;
    color: white !important;
}
div#mainnav,
.inner.bg-inherit {
        background: white !important;
}
section.s-block.s-block--fixed-banner.wide-placeholder {
    margin: 0;
}
section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    padding: 0px !important;
    width: 100% !important;
    max-width: unset;
}
.banner--fixed img {
    border-radius: 0px !important;
}
.banner-entry {
  background: transparent;
}
@media (min-width: 1024px) {
   .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div {
            grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div > a:nth-child(1) {
            grid-area: 1/3/3/3;
            height: 100% !important;
            padding: 16rem;
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div > a {
            height: 230px;
    }
    
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div > a:nth-child(1) {
        grid-area: 1/1/3/1;
        height: 100% !important;
        padding: 15rem;
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div > a:nth-child(5) {
    grid-area: 2/1/2/1;
}
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div > a:nth-child(2) {
            grid-area: 2/2/2/4;
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div > a:nth-child(2) > div {
            background-size: contain;
        background-repeat: no-repeat;
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div > a {
        padding: 7rem;
    }
}

@media (max-width: 767px) {
      .banner-entry {
       height: 110px;
   }

   .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div {
            grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div > a:nth-child(1) {
            grid-area: 1/1/1/3;
            padding: 10rem;
    }
   .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div > a:nth-child(1) > div {
          background-size: contain;
       background-repeat: no-repeat;
   }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(6) > div > a:nth-child(4) {
            grid-area: 3/2/3/2;
    }

    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div > a:nth-child(1) {
        grid-area: 1/1/1/3;
         padding: 11rem;
    }
   .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div > a:nth-child(2) {
      padding: 4rem;
    grid-area: 3/1/3/3;
   }
   .index > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div > a:nth-child(2) > div {
      background-size: contain;
    background-repeat: no-repeat;
   }
}

/* products-section */
.s-product-card-entry {
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: var(--normal-box-shadow);
}

.s-product-card-content-sub {
    justify-content: center;
}
.s-product-card-price {
    color: red !important;
    font-size: 16px !important;
    font-weight: bold;
}
.s-button-btn {
    font-weight: bold !important;
    border-radius:  25px 5px 25px 5px !important;
    margin: 0 5px;
    color: white!important;
    background: #51b0bb !important;
}
.s-button-text {
    display: flex;
    justify-content: center;
    align-items: center;
}
.s-button-btn .s-button-text:before {
    content: '';
    display: inline-block;
    background-image: url(https://i.ibb.co/qyJj5KZ/wired-lineal-20-love-heart.gif) !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    margin-left: 9px;
}
.s-product-card-content-title a {
    text-align: center;
    padding-bottom: 20px;
    font-size: 16px;
  font-weight: bold !important;
  color: black !important;
}
.swiper .swiper-wrapper>div {
    padding-bottom: 20px !important;
}
.s-product-card-content-subtitle {
    text-align: center;
}
  /* title-hover */
.s-slider-block__title h2 {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg,
            #9c9090 0%,
            #51b0bb 9%,
            #911719 67%,
            #eeeeee  100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    font-weight: bold;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: 19px;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}
[dir=rtl] .s-slider-block__title h2:before, h2.mb-4.mr-2.text-lg.font-bold.leading-\[1\.2\]:before {
    background: url("https://i.ibb.co/Pz23chf/wired-lineal-1277-antibacterial-spray-disinfection.gif");
    width: 40px;
    height: 40px;
    display: inline-block;
    content: "";
    background-size: contain;
    margin-left: 5px;
    transform: translateY(20%);
}

#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--features.container {
    background: #51b0bb;
    padding: 0;
    width: 100%;
    max-width: unset;
}
.s-block--features__item {
        background: #51b0bb;
}



.s-block--features__item .feature-icon {
    background: white;
    height: 5rem;
    width: 5rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px #51b0bb;
}
.s-block--features__item h4 {
    margin-bottom: .25rem;
    font-size: 1.2rem;
    line-height: 2.25rem;
}
.s-block--features__item p {
    color: black !important;
    font-weight: bold;
} 
.s-block--features__item .feature-icon i {
    color: #51b0bb;
}
.footer-is-light .store-footer {
    margin-top: 0;
    border-color: black;
}
.footer-is-light .store-footer .store-footer__inner {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='561' preserveAspectRatio='none' viewBox='0 0 1440 561'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1042%26quot%3b)' fill='none'%3e%3crect width='1440' height='561' x='0' y='0' fill='rgba(81%2c 176%2c 187%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c448.283C82.16%2c426.989%2c106.56%2c321.66%2c171.923%2c267.517C226.262%2c222.506%2c308.016%2c216.858%2c348.853%2c159.316C392.932%2c97.205%2c415.576%2c17.172%2c402.885%2c-57.926C390.3%2c-132.392%2c324.066%2c-181.417%2c280.808%2c-243.322C231.595%2c-313.749%2c214.175%2c-424.538%2c131.179%2c-446.753C47.803%2c-469.069%2c-22.036%2c-379.359%2c-101.491%2c-345.647C-169.756%2c-316.683%2c-251.465%2c-315.874%2c-302.988%2c-262.54C-355.515%2c-208.167%2c-378.197%2c-130.456%2c-382.302%2c-54.967C-386.206%2c16.838%2c-347.871%2c80.288%2c-325.342%2c148.579C-299.63%2c226.518%2c-301.004%2c318.84%2c-240.642%2c374.446C-177.655%2c432.469%2c-82.9%2c469.769%2c0%2c448.283' fill='%23337981'%3e%3c/path%3e%3cpath d='M1440 1179.413C1556.2 1164.065 1661.666 1121.603 1766.174 1068.536 1881.824 1009.8109999999999 2024.625 970.544 2081.199 853.826 2137.909 736.828 2080.181 600.134 2055.044 472.57 2031.1860000000001 351.498 2017.383 223.945 1938.395 129.13799999999998 1858.71 33.49400000000003 1741.66-26.395999999999958 1619.474-50.23299999999995 1503.307-72.89599999999996 1386.39-40.81600000000003 1275.204-0.24500000000000455 1169.7269999999999 38.24199999999996 1076.968 98.35300000000001 996.808 176.97199999999998 910.973 261.158 803.561 348.519 797.196 468.579 790.857 588.144 923.498 665.62 964.946 777.95 1011.4390000000001 903.954 950.731 1076.004 1053.314 1162.696 1153.892 1247.693 1309.451 1196.6570000000002 1440 1179.413' fill='%2391cdd4'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1042'%3e%3crect width='1440' height='561' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");  
    background-size: cover;
    color: black;
    
}
.store-footer .social-link{
     border-color: black !important;
    
}


@media (max-width: 768px) {

        .s-product-card-content {
            padding: 0.5rem;
        }
        .s-button-btn {
            padding: 2px 0px;
            font-size: 15px;
            margin: 0px;
        }

        i.sicon-menu.text-primary.text-2xl {
            color: white;
    background: #dd2c1a;
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        padding: 6px;
        border-radius: 22px;
        }
        .footer-is-light .store-footer .store-footer__inner {
        text-align: center;
    }
    .store-footer .contact-social ul {
        justify-content: center;
    }
    .store-footer a {
        justify-content: center;
    }
    #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > div.flex.rtl\:space-x-reverse.space-x-2.items-end {
    justify-content: center;
    align-items: center;
    }
          .mm-ocd__content:has(nav#mobile-menu)::before {
          content: "";
          display: block;
        background: #51b0bb;;
          background-size: 400% 400%;
          animation: gradient 15s ease infinite;
          left: 0;
          width: 60%;
          height: 220px;
          margin-left: auto;
          margin-right: auto;
          border-radius: 30px 30px 150px 150px;
          margin-bottom: 40px;
          margin-top: 40px;
          box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
      }
    
      .mm-ocd__content:has(nav#mobile-menu)::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(50%, 50%);
        width: 50%;
        height: 160px;
        background: url(https://i.ibb.co/pymVY8Q/LOGO-Litro.png);
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat;
        overflow: visible;
        z-index: 9999;
    }
    .mm-spn.mm-spn--navbar.mm-spn--main {
        width: 90%;
        margin-right: 0;
        margin-left: auto;
        background: transparent;
        color: #f5f5f5;
        border-radius: 15px;
    }
        .mm-ocd__content {
            animation: changeBackgroundColor 7s infinite !important;
            background: #d7d7d7 ;
    }
    .mm-spn.mm-spn--navbar:after {
        text-align: center !important;
    background: #51b0bb;;
        margin-top: -10px;
    border-radius: 0px 0px 0px 15px;
    }
    .mm-spn.mm-spn--navbar ul:before {
        border: 0px !important;
    }
    .mm-spn ul {
        margin-top: 20px;
        background: #51b0bb;;
        border-radius: 30px 0px;
    }
    .carousel-slider .swiper {
    padding-left: 0px !important;
    }
    .s-products-slider-card.swiper-slide {
        width: 180px !important;
    }
}