/* Add custom CSS styles below */ 
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root {
    --main-color: #cda269;
    --second-color: #000;
    --third-color: #fff;
    --hover-color: #cda269;
    --logo: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/lGXbyy/rhhSJUwLik8bGFPG7RGMGfc2AZVnTPI3YHfBPUd3.jpg)
}

body {
  font-family: 'Cairo', sans-serif;
  background: var(--second-color);
}
.navbar-brand img, .main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 5rem;
}
.s-menu-topnav-item, a.s-contacts-topnav-link {color: var(--third-color)}
i.header-btn__icon.sicon-user-circle, i.header-btn__icon.icon.sicon-shopping-bag 
{
    background: var(--main-color);
    color: var(--second-color);
}
.main-nav-container {background-color: var(--second-color)}
.main-nav-container {color: var(--third-color)}
.
.s-block:not(:first-of-type),
.s-block--features__item,
.s-block--features__item:hover {
  margin-top: 30px;
}
.s-block {
  margin-top: unset;
margin-bottom: 20px;
}
.s-product-card-image-contain {
    -o-object-fit: fill;
    object-fit: fill;
}

.s-slider-block__title-right:where([dir="rtl"], [dir="rtl"] *) {
    padding-left: 0rem;
}
/* Navbar & Footer */
.store-footer h3,
.topnav-is-dark .top-navbar {
    background-color: var(--main-color) !important;
}

.s-search-input-wrapper {
    box-shadow: var(--main-color) -1px 2px 16px;
}

.s-product-card-content-title a,
.s-search-icon svg,
.s-slider-block__title h2,
{
    color: var(--main-color);
}
.store-footer a,
.store-footer p {
    color: var(--second-color);
}

.copyright-text p,
.copyright-text p a {
    color: #FFF !important;
}

/* Buttons */
.s-button-btn {
    position: relative;
    transition: .3s ease-in-out;
    box-shadow: 0 10px 20px var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    outline: 0;
    overflow: hidden;
}
.s-button-btn:hover {
    color: #fff;
}
.s-button-element:not(:disabled):not([loading]) {
    pointer-events: auto;
    border-color: var(--main-color);
    color: var(--second-color);
    background: var(--main-color);
}
.s-button-element:not(:disabled):not([loading]):hover {
    border-color: var(--main-color);
    color: var(--third-color);
}
.s-button-btn::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(120deg,#fff0 30%,#fffc,#fff0 70%);
    top: 0;
    left: -100px;
    opacity: .6;
}
.s-button-btn:hover::before {
    animation: 1.5s ease-out infinite shine;
}
@keyframes shine {
    0% { left: -100px; }
    60%,to { left: 100%; }
}

/* Slider */
.s-slider-block__title h2::after {
    bottom: -10px;
    height: 2px;
    width: 100%;
    position: relative;
    content: "";
    display: block;
    background-color: var(--main-color);
}
.s-slider-block__title h2:where([dir=rtl],[dir=rtl] *) {
    padding-left: 0 !important;
}
.s-slider-block__title-left { display: none; }

/* Cards */
.s-product-card-content-sub:hover,
.s-product-card-content-title a:hover,
.s-products-slider-card:hover {
    color: var(--hover-color);
}
.s-block__title h2 {color: var(--third-color)}
.s-product-card-vertical {
    transition: .3s ease-out;
    border: 1px solid var(--main-color);
}
.s-product-card-vertical:hover {
    box-shadow: var(--hover-color) -1px 2px 16px;
}
.s-product-card-content, .s-product-card-vertical {background-color: var(--second-color)}
.s-product-card-image img { max-width: 100%; }
.s-product-card-content a, .s-product-card-content-subtitle {
    color: var(--third-color);
    text-align: center;
}
.s-product-card-content-sub {
    justify-content: center;
    color: var(--hover-color);
}
.s-product-card-vertical .s-product-card-wishlist-btn button {
    background-color: var(--hover-color) !important;
}
.s-product-card-price {color: #F00}

/* Banners */
.banner-entry {
  display: block;
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .banner-entry { height: 350px; }
}
@media (max-width: 720px) {
  .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
  .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 .banner-entry {
      height: 100px !important;
  }
}

/* Footer */
.footer-is-light .store-footer,
.store-footer .contact-social ul,
.store-footer__inner {
    background: var(--main-color) !important;
}
.store-footer h3 {
  background-color: var(--second-color) !important;
  color: var(--main-color) !important;
  border-radius: 15px;
  font-weight: bold;
  padding: 0.3rem 0;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  width: 100%;
  text-align: center;
}
.s-menu-footer-list,
p.max-w-sm.leading-6.mb-6 {
  text-align: center;
}
 color: var(--third-color);
}
p.text-gray-400 { color: var(--main-color) !important; }
.store-footer .store-footer__inner:before {
    content: "";
    display: block;
    height: 110px;
    width: 110px;
    margin: auto auto 20px;
    background: var(--logo) no-repeat center / contain;
    animation: sigal 1.2s linear infinite;
    border-radius: 100%;
}
@keyframes sigal {
  0% { filter: drop-shadow(2px 4px 6px #504d46); }
  100% { filter: none; }
}
.s-slider-nav-arrow,
.header-btn__icon,
.footer-is-light .store-footer .social-link,
.store-footer a .rtl\:ml-2\.5 {
  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
}
.store-footer__inner { border-radius: 20px !important; }
.copyright-text { color: #FFF; }
.copyright-text > a { color: var(--second-color); }

/* Features */
.s-block--features__item,
.s-block--features__item:hover {
    margin-top: 20px;
    box-shadow: 0 10px 17px rgba(0,0,0,.6), 10px 10px 20px rgba(0,0,0,.2);
}
.s-block--features__item .feature-icon {
    background-color: var(--main-color);
    height: 5rem;
    width: 5rem;
}
.s-block--features__item {
    background-color: var(--main-color);
}
.s-block--features__item .feature-icon i {
    color: var(--third-color);
    font-size: 60px;
}
.s-block--features__item p {color: var(--second-color)}

section.s-block.s-block--features.container:before {
    content: "مميزات المتجر";
    color: var(--main-color);
    font-size: 20px;
    font-weight: 700;
    line-height: 2px;
}
.s-reviews-header {
    color: var(--third-color);
}

/* Animations & performance */
@keyframes fade-in {
    0%,75% { opacity:1; transform:scale(1); }
    100% { opacity:0; transform:scale(.1); }
}
@media (prefers-reduced-motion: reduce) {
    * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Layout Tweaks */
@media only screen and (min-width:1024px){
    .main-menu li>a {
        padding-left:.55rem!important;
        padding-right:.55rem;
    }
    salla-slider.photos-slider .swiper-slide { width:100%!important; }
}
@media (min-width:768px) {
    salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *) { padding-left:0!important; }
}
@media (max-width:1024px) {
    salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *) {
        width:100%!important;
        padding-left:0;
        padding-right:0;
    }
}
@media(min-width: 520px){
    .container.grid.grid-col-1.lg\:grid-cols-6.gap-8.lg\:gap-6 {
         grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Lazy load */
.lazy-container {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}
body.loading *:not(.loader) { display: none !important; }

.s-contacts-list { align-items: center; }
.product__description, .main-content h1, h2.font-bold.text-xl.inline-block, tamara-widget, .s-breadcrumb-item
{
    color: var(--third-color) !important;
}
a.text-base, p.text-primary.flex-none.font-bold.text-sm.rtl\:md\:pl-12.ltr\:md\:pr-12 {
    color: var(--second-color)
}
.s-user-menu-trigger {
  background-color: var(--second-color)
}