b, strong {
  font-weight: bolder;
  color: var(--btn) !important;
}

img[src='https://cdn.salla.sa/form-builder/7zYxO3k3uIJWARaBZ0mTGfJbYaodU507HsbFZXyY.png']{

margin-top:20px !important;
}
.banner--fixed img{
background:var(--body)
z-index: -2 !important;
}

.s-button-solid  {
  pointer-events: auto;
  width: 100% !important;
}

.s-slider-block__display-all {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: #414042;
  color: var(--btn) !important;
}
b{
color

}

.mm-spn li a span{
color:var(--links);
}

.store-footer h3{
 color:var(--links);
 }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
  color: var(--btn);
}

.font-bold {
  font-weight: 700;root
  color: var(--btn);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 600;
  margin-bottom: 0px;
  color: var(--btn);
}

.bg-white{
background:var(--card);
color:(--links);
}

.mm-spn.mm-spn--light {
    color: #fff;
    background: #fff;
    background: var(--header);
    color: var(--links);
  }


@keyframes fade-in {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    75% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.1);
    }
}











.s-login-modal-input {
color:#000 !important;
}
.s-login-modal-link {
  margin-top: 1.5rem;
  display: block;
  text-align: center;
  font-size: .875rem;
  line-height: 1.25rem;
  color: #414042;
  color: var(--color-primary);
  color: var(--links) !important;
}

.text-primary {
  color: var(--barcolor);
  color: #000;
  color: var(--links)!important;
}
.s-login-modal-label {
  margin-bottom: .5rem;
  display: block;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: #374151;
  color: rgba(55,65,81,var(--tw-text-opacity));
  color: var(--links) !important;
}
.s-login-modal .s-modal-padding {
    padding-top: 1.5rem;
    background: var(--header);
    color:#fff;
  }
  
  .s-modal-close:where([dir="rtl"], [dir="rtl"] *) {
  left: 0px;
  background: var(--header);
}
 .s-modal-title{
 color:var(--links);
 }
 
s-login-modal-label{
color:var(--links) !important ;
}
.iti input, .iti input[type="text"], .iti input[type="tel"] {
  position: relative;
  z-index: 0;
  direction: ltr !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 95px !important;
  padding-right: 15px !important;
  margin-left: 0 !important;
  color: #000;
}
.iti--separate-dial-code .iti__selected-dial-code {
  unicode-bidi: -webkit-plaintext;
  unicode-bidi: plaintext;
  direction: ltr;
  letter-spacing: 1px;
  font-family: "Arial", serif;
  font-size: 13px;
  color: #000;
}

.banner-entry {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: 0.375rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0.75rem;
  text-align: center;
  
  background-color: transparent; /* Use CSS variable for background color */
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1)); /* Default text opacity */
}

 @media (min-width: 1024px) {
            .banner-entry {
                height: 400px;
            }
}
 @media (min-width: 640px) {
            
}
@media (max-width: 640px) {
  .gap-3 {
    display: grid;
    gap: 0.75rem; /* 0.75rem is 12px */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Three equal-width columns */
  }
  .banner-entry {
                height: 145px;
            }
}
@media (max-width: 350px) {
  .gap-3 {
    display: grid;
    gap: 0.75rem; /* 0.75rem is 12px */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Three equal-width columns */
  }
  .banner-entry {
                height: 100px;
            }
}



element {
  background-image: url("");
  background: ;
  background-position: center;
  background-size: cover;
  margin: 19px;
}

/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
.s-login-modal-link {
  margin-top: 1.5rem;
  display: block;
  text-align: center;
  font-size: .875rem;
  line-height: 1.25rem;
  color: #414042;
  color: var(--color-primary);
  color: var(--links) !important;
}
.s-login-modal-label {
  margin-bottom: .5rem;
  display: block;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: #374151;
  color: rgba(55,65,81,var(--tw-text-opacity));
  color: var(--links) !important;
}
.s-login-modal .s-modal-padding {
    padding-top: 1.5rem;
    background: var(--header);
    color:#fff;
  }
  
  .s-modal-close:where([dir="rtl"], [dir="rtl"] *) {
  left: 0px;
  background: var(--header);
}
 .s-modal-title{
 color:var(--links);
 }
 
s-login-modal-label{
color:var(--links) !important ;
}
.iti input, .iti input[type="text"], .iti input[type="tel"] {
  position: relative;
  z-index: 0;
  direction: ltr !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 95px !important;
  padding-right: 15px !important;
  margin-left: 0 !important;
  color: #000;
}
.iti--separate-dial-code .iti__selected-dial-code {
  unicode-bidi: -webkit-plaintext;
  unicode-bidi: plaintext;
  direction: ltr;
  letter-spacing: 1px;
  font-family: "Arial", serif;
  font-size: 13px;
  color: #000;
}
:root{

}
:root {
    --body: #ffffff; /* الخلفية بيضاء */
    --header: #faead6;
    --footerlinks: #faead6;
    --card: #ffffff;
    --links: #9a6043;
    --barcolor: #9a6043;
    --cardtitle: #9a6043;
    --btn: #9a6043;
    --secondcolor: #c17a4d;
    --btnhover: #7a4931;
    --url: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/zvxvNb/cWBtNEycigEUabkbm6kOBvdGqRK4QrJpbqDbr05j.png');
    --hue: 223;
    --bg: #fff;
    --fg: hsl(var(--hue),10%,10%);
    --primary: #9a6043;
    --trans-dur: 0.3s;
}



#mainnav{
background:var(--body);
}
.navbar-brand img {
  max-height: 4rem; /* Set maximum height */
  width: auto; /* Maintain aspect ratio */
  max-width: 100px; /* Set maximum width */
  /* Apply animation */
  animation: moveUpDown 4s ease-in-out infinite;
}

/* Define the keyframes for scaling and shadow effect */
@keyframes scaleAndShadow {
    0%, 100% {
        transform: scale(0.8); /* Scale down to 50% */
         /* Shadow for scale 0.5 */
    }
    50% {
        transform: scale(1.5); /* Scale up to 100% (original size) */
         /* Shadow for scale 1 */
    }
}
.s-cart-summary-content b{
color:var(--links);

}
.header-btn__icon{
color:var(--links);

}


.text-primary {
  

color:var(--barcolor);
}
body{
background:var(--body);
}

header{
background:var(--header);

}
@keyframes increaseShadow {
  0% {
    box-shadow: 0px 10px 10px var(--btn);
  }
  50% {
    box-shadow: 0px 15px 15px var(--btn);
  }
  100% {
    box-shadow: 0px 20px 20px var(--btn);
  }
}

.inner {
  border-bottom-left-radius: 50px !important; /* Round the bottom-left corner */
  border-bottom-right-radius: 50px !important; /* Round the bottom-right corner */
  padding: 0px 20px !important; /* Add padding with 0px for top/bottom and 20px for left/right */
  background-color: rgba(255, 255, 255, 0.5) !important; /* Transparent background */
  backdrop-filter: blur(10px) !important; /* Apply blur effect */
  -webkit-backdrop-filter: blur(10px) !important; /* Safari support */
  border-bottom: none !important;
box-shadow: 0px 3px 5px rgba(128, 128, 128, 0.5) !important;



  /* Apply the shadow increase animation */
  animation: increaseShadow 2s ease-in-out infinite alternate !important;
}



.main-menu li.root-level > a {
  color: var(--links);
}

.main-menu li.root-level > a:hover{
 color:#fff;
 background:var(--btn);
 border-radius: 10px; 
}

.top-navbar .s-search-input {
  border-style: none;
  background-color: #ffffff;
  width: 75%;

}
.container {
    max-width: 1280px;
    width: 100%;
    
  }
.s-products-slider-card{
background:var(--card);
margin-left:5px;
padding:10px 0px;
border-radius:10px;

}

.s-button-btn, .s-price-range-number-input {
  border-radius: .75rem;
  background: #fff; /* أو أي لون تريده */
  color: var(--btn) !important;
  
  border-top-left-radius: 50px;   /* Top-left corner */
  border-bottom-right-radius: 50px;/* تصحيح من bordr إلى border و slid إلى solid */
  box-shadow: 0px 10px 10px  var(--btn);
}

.s-button-btn:hover, .s-price-range-number-input:hover {
  
  
}
.s-product-card-content-title a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: var(--cardtitle) !important;
  white-space: nowrap;
  overflow:hidden;
  margin:auto;
}
element {
}
.s-product-card-price {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--btn) !important;
  margin:auto;
}

.s-product-card-wishlist-btn {
  background: red !important;
}

.s-product-card-vertical .s-product-card-wishlist-btn button {
  --tw-bg-opacity: 1 !important;
  background: red !important;
  background-color: red !important;
  overflow: hidden !important;
  
}
.s-product-card-vertical {
  border: none;
  box-shadow: none;
  background-color: #fff;
  
  overflow: hidden !important;
}
/* Define the keyframes for moving up and down */
@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0); /* Start and end at original position */
  }
  50% {
    transform: translateY(-10px); /* Move up by 10px */
  }
}
.s-product-card-content-title a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: var(--cardtitle);
  white-space: nowrap;
  overflow: hidden;
  margin: auto;
  color: var(--btn);
}
.s-product-card-price {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 700 !important;
  
  margin: auto;
  color: var(--btn) !important;
}
/* Style for the product card */
.s-product-card-vertical {
  border: none !important;
  box-shadow: none !important;
  background-color: rgba(255, 255, 255, 0.5) !important; /* White with 50% transparency */
  backdrop-filter: blur(10px) !important; /* Apply a blur effect */
  -webkit-backdrop-filter: blur(10px) !important; /* For Safari support */
  border-radius: 10px !important; /* Optional: rounded corners */
  transition: all 0.3s ease-in-out !important; /* Apply smooth animation */
}

/* Ensures that images inside the product card have proper styling and transition */
.s-product-card-image img {
  height: 100%;
  width: 100%;
  opacity: 0;
  border-radius: 50px;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  background: none !important;
  transition:  1s;
}

/* Styles for vertical product card */
.s-product-card-vertical .s-product-card-image {
  flex: 1 1 0%;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  background: none;
  transition:  1s;
}

/* Ensures product card image container has correct styles */
.s-product-card-image {
  position: relative;
  height: 100%;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background-color: transparent; /* Fixed background-color property */
  transition:  1s;
}

/* Transition effect for box-shadow and hover effect for vertical product card */
.s-product-card-vertical {
  transition:  1s;
}

.s-product-card-vertical:hover {
  box-shadow: 0px 20px 20px var(--btn);
  animation: moveUpDown 2s ease-in-out infinite; /* Ensure --btn is defined */
}

/* Removes border-radius from image when hovering over vertical product card */
.s-product-card-vertical:hover .s-product-card-image img {
  border-radius: 0; /* More consistent for removing border radius */
}



.footer-is-light .store-footer {
  border-top-left-radius: 200px;
  border-top-right-radius:200px;
  background: var(--btn); /* بني غامق */
  color: #fff !important; /* نص أبيض */
}

.footer-is-light .store-footer .store-footer__inner {
  background-color: var(--header) !important; /* بيج فاتح */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #fff !important; /* نص أبيض */
  /* border: 1px solid var(--btn) !important; */  /* هذا السطر معلق */
  border-top-right-radius: 100px !important;
  border-top-left-radius: 100px !important;
}


.store-footer a {
  color: var(--footerlinks) !important; /* نص روابط البيج الفاتح */
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.text-gray-400,
.text-gray-400 a {
  color: var(--footerlinks) !important; /* لون نص التذييل بيج فاتح */
}


.store-footer__logo {
  max-height: 10px;   /* يتحكم في ارتفاع الشعار */
  margin-left: 1rem;  /* مسافة بسيطة على اليسار */
  flex-shrink: 0;     /* يمنع تصغير الشعار */
}



.store-footer a {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--links) !important;
}
.m-0 {
  margin-bottom: 1.25rem;
  font-size: 0;
  background: var(--url) no-repeat center center;
  background-size: cover;
  width: 250px;
  height: 250px;
}
.m-0 h3{
font-size: 0;
}

.xs\:p-7 {
    padding: 0.75rem;
    background: var(--header);
    color: #fff;
  }
  .text-base {
  color:#fff;
}
.s-contacts-topnav-link{
color:#fff;
}
.s-menu-topnav-item{
color:var(--links);
}
.s-quantity-input-input {
  width: 3rem;
  border-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
  border-top-width: 0px;
  border-bottom-width: 0px;
  --tw-border-opacity: 1;
border-color: rgba(255, 255, 255, 1); /* أبيض صلب */
border-color: rgba(255, 255, 255, var(--tw-border-opacity)); /* أبيض مع شفافية */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-weight: 700;
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
  color: #000;
}


 



.


.form-input {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  color: #000 !important;
}

.text-gray-400{
color:var(--footerlinks)!important;

}
.text-gray-400 a{
color:var(--footerlinks)!important;

}


.s-block--features__item .feature-icon{

background:var(--btn);
color:#fff;
}
.s-block--features__item .feature-icon i{


color:#fff;
}

salla-slider .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #414042;
  background-color: var(--color-primary);
  background: var(--btn);
}
#loader{ 

 position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: #fff !important; /* Optional background */
    animation: fade-in 2.5s forwards;


}
.everything {
      background-color: none;
      color: var(--fg);
      font: 1em/1.5 "DM Sans", sans-serif;
      height: 100vh;
      display: grid;
      place-items: center;
      transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
    }

    .loading-container {
      text-align: center;
      max-width: 20em;
      width: 100%;
    }

    .loading-text {
      position: relative;
      height: 1.5em;
    }

    .loading-message {
      animation: msg 0.3s 13.7s linear forwards;
      position: absolute;
      width: 100%;
    }

    .loading-message--last {
      animation-direction: reverse;
      animation-delay: 14s;
      visibility: hidden;
    }

    .cart-icon {
      display: block;
      margin: 0 auto 1.5em auto;
      width: 8em;
      height: 8em;
    }

    .cart-lines,
    .cart-top,
    .cart-wheel1,
    .cart-wheel2,
    .cart-wheel-stroke {
      animation: cartLines 2s ease-in-out infinite;
    }

    .cart-lines {
      stroke: var(--primary);
    }

    .cart-top {
      animation-name: cartTop;
    }

    .cart-wheel1 {
      animation-name: cartWheel1;
      transform: rotate(-0.25turn);
      transform-origin: 43px 111px;
    }

    .cart-wheel2 {
      animation-name: cartWheel2;
      transform: rotate(0.25turn);
      transform-origin: 102px 111px;
    }

    .cart-wheel-stroke {
      animation-name: cartWheelStroke;
    }

    .cart-track {
      stroke: hsla(var(--hue),10%,10%,0.1);
      transition: stroke var(--trans-dur);
    }

    /* Dark theme */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: hsl(var(--hue),10%,10%);
        --fg: hsl(var(--hue),10%,90%);
      }

      .cart-track {
        stroke: hsla(var(--hue),10%,90%,0.1);
      }
    }

    /* Animations */
    @keyframes msg {
      from {
        opacity: 1;
        visibility: visible;
      }
      99.9% {
        opacity: 0;
        visibility: visible;
      }
      to {
        opacity: 0;
        visibility: hidden;
      }
    }

    @keyframes cartLines {
      from,
      to {
        opacity: 0;
      }
      8%,
      92% {
        opacity: 1;
      }
    }

    @keyframes cartTop {
      from {
        stroke-dashoffset: -338;
      }
      50% {
        stroke-dashoffset: 0;
      }
      to {
        stroke-dashoffset: 338;
      }
    }

    @keyframes cartWheel1 {
      from {
        transform: rotate(-0.25turn);
      }
      to {
        transform: rotate(2.75turn);
      }
    }

    @keyframes cartWheel2 {
      from {
        transform: rotate(0.25turn);
      }
      to {
        transform: rotate(3.25turn);
      }
    }

    @keyframes cartWheelStroke {
      from,
      to {
        stroke-dashoffset: 81.68;
      }
      50% {
        stroke-dashoffset: 40.84;
      }
    }
    .s-product-card-content-title {
  margin-bottom: 0.625rem;
  max-width: 100%;
  line-height: 1.5rem;
  display: flex !important;
  align-items: center !important;
}
.s-button-wide {
  width: 100%;
  background: var(--btn); /* أو أي لون تريده */
  color: #fff !important;
}
.s-button-wide:hover {
  background: var(--btn);
  width: 100%;
  transition:  0.5s;
  color:#fff;
}
.s-product-card-content {
  /* White with 50% transparency */
 /* Apply a blur effect */
  -webkit-backdrop-filter: blur(10px) !important; /* For Safari support */
  padding: 20px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Center content horizontally */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Optional: subtle shadow */
  width: 100% !important; /* Ensure it takes the full width of its container */
}


@keyframes rainbow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.s-block__title h2,
.s-slider-block__title h2 {
   /* Adjust size as needed */
  font-weight: bold;
  background: linear-gradient(90deg, rgb(212, 81, 81), #3ca718dc, #a810b9, #5af65a, #3434ea, #4b0082, #bd81ee);
  background-size: 400% 400%; /* Adjust size for smoother animation */
  -webkit-background-clip: text; /* For Chrome/Safari */
  background-clip: text; /* For other browsers */
  color: transparent; /* Hides the text color, showing the gradient */
  animation: rainbow 5s linear infinite; /* Animates the gradient */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Optional: adds a bit of shadow for better readability */
}
/**/
.bubbles span:nth-child(even) {
          background: var(--btn);
          box-shadow: 0 0 0 10px var(--btn), 0 0 50px var(--btn), 0 0 100px var(--btn);
        }
        
        
        .ticker-wrapper {
    width: 100%;
    background-color: var(--btn);
    color: #fff;
    overflow: hidden;
    padding: 10px 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.ticker {
    display: flex;
    width: 100%;
    animation: tickerScroll 15s linear infinite;
}

.ticker-item {
    white-space: nowrap;
    padding: 0 50px;
    font-size: 1.2em;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
    
    .bubbles span {
          position: absolute; /* Absolute positioning for each bubble */
          width: 30px;
          height: 30px;
          background: var(--secondcolor);
          border-radius: 50%;
          box-shadow: 0 0 0 10px var(--secondcolor), 0 0 50px var(--secondcolor), 0 0 100px var(--secondcolor);
          animation: animate 15s linear infinite;
          animation-duration: calc(125s / var(--z));