/* Add custom CSS styles below */ 
:root {

  --main-color: #744b3c;

  --second-color:#7a6b65;

  --three-color:#f8f8f8 ;

  --body-color:#3f2f29;

  --logo:url('https://cdn.salla.sa/form-builder/WeHMKZTqh9dZ6YEel0JGpYI1HpUZ1raIkqrG9ZuD.png');
  
  --logo1: url('https://cdn.salla.sa/form-builder/R5FdUe3vx8LL3SLJCW3s1FlIEhFwc8maDiDwU9Uv.png');

}

@media (min-width:1024px){
  #mainnav li[id="1338922776"]{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-30%);
    white-space:nowrap;
  }

  #mainnav li[id="1338922776"] a {
    background:#734b3c;      /* brown tone (like logo theme) */
    color:#fff !important;   /* white text */
    padding:6px 16px;
    border-radius:9999px;    /* pill shape */
    font-weight:600;
    font-size:15px;
    transition:0.2s;
  }

 
}





.s-button-element:not(:disabled):not([loading]), .s-add-product-button-main .s-add-product-button-mini-checkout{
        background-color: #1c2a46;
    border-radius:15px;
    color: rgb(244 240 234);
}

.s-button-element:not(:disabled):not([loading]):hover {

color: rgb(255, 255, 255) !important; 

}

.s-block--tabs-produtcs .tab-trigger.is-active button {

color: var(--second-color);

}




.s-block--features__item {

background: var(--main-color);

}

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

background: white;

}


s-menu-footer-list {

  gap: 0px;

  display: flex;

  flex-direction: column;

}

.s-advertisement-content  {

  background: var(--second-color);

}



.s-block--features__item {

  transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out;

  padding: 10px;

  border-radius: 8px; 

  animation: pulse 1.5s infinite; 

}

.s-block--features__item:hover {

  transform: scale(0.92);

  box-shadow: 0 0 20px rgba(0, 150, 255, 0.7), 0 0 40px rgba(0, 150, 255, 0.5);

  background-color: #8fbccf; 

  animation: pulse 1.5s infinite, sway 1.5s infinite; 

}

@keyframes pulse {

  0% {

      transform: scale(0.95); 

      box-shadow: 0 0 20px #7a6b65, 0 0 40px #7a6b65;

  }

  50% {

      transform: scale(0.92);

      box-shadow: 0 0 25px #7a6b65, 0 0 50px #7a6b65;

  }

  100% {

      transform: scale(0.95); 

      box-shadow: 0 0 20px #7a6b65, 0 0 40px #7a6b65;

  }

}

/* ----------------------------------------------------*/

@keyframes sway {

  0% {

      transform: rotate(0deg);

  }

  25% {

      transform: rotate(-2deg);

  }

  50% {

      transform: rotate(2deg);

  }

  75% {

      transform: rotate(-2deg);

  }

  100% {

      transform: rotate(0deg);

  }

}





.main-nav-container.fixed-header .inner {

  transform: translate3d(0, 0, 0);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);



}

.bg-inherit {

  background-color: inherit;

  transform: translate3d(0, 0, 0);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

}

.bg-inherit:hover {

  background-color: inherit;

  transform: translate3d(0, 0, 0);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);



}

@media only screen and (min-width: 1024px) {

  .main-menu li>a {

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: .75rem;

      font-size: .875rem;

      line-height: 1.25rem;

      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;

      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;

      transition-timing-function: cubic-bezier(.4,0,.2,1);

      transition-duration: 300ms;

      color: var(--main-color);

  }

}

@media only screen and (max-width: 1024px) {

  .mm-spn.mm-spn--navbar.mm-spn--main:where([dir=rtl],[dir=rtl] *):after {

      padding-right: .75rem;

      background: var(--second-color);

  }

}

@media only screen and (min-width: 1024px) {

  .main-menu li>a:hover {

      display: flex;

      align-items: center;

      justify-content: space-between;

  

      font-size: .875rem;

      line-height: 1.25rem;

      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;

      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;

      transition-timing-function: cubic-bezier(.4,0,.2,1);

      transition-duration: 300ms;

      color: var(--second-color);

  }

}

.mm-spn.mm-spn--navbar.mm-spn--main a {

  cursor: default;

  background: var(--main-color);

  color: white;

}

.mm-spn.mm-spn--navbar.mm-spn--main a:hover {

  cursor: default;

  background: var(--main-color);

  color: var(--second-color);

}

.mm-spn.mm-spn--navbar.mm-spn--main {

  cursor: default;

  background: var(--main-color);

}

[class*=" sicon-"], [class^=sicon-] {

  font-family: sallaicons !important;

  speak: never;

  font-style: normal;

  font-weight: 400;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  -webkit-font-smoothing: antialiased;

  color: var(--second-color);

  -moz-osx-font-smoothing: grayscale;

}

.sicon-shopping-bag:before , .sicon-user-circle:before{

color:var(--main-color) !important;

} 

.s-block--features__item p ,.s-block--features__item h2 {
    color: white;
    font-weight: bold;
}

 



.s-slider-block__title-right h2{
    background: #734b3c;
    color: #ffffff;
    padding: 5px 10px;
    border: 1px solid #744b3c;
    border-radius: 4px;
}

.s-slider-block__title-left{
display:none;
}
.s-slider-block__title-right{
margin:auto;
}


  

.s-button-element:not(:disabled):not([loading]) {

  background: #fff;

  border: var(--main-color) solid 2px;

  color: var(--main-color);

} 

      

      

.s-button-element:not(:disabled):not([loading]):hover {

  background: var(--main-color);

  border: var(--main-color) solid 2px;

  color: white;

} 

.s-product-card-price {
  color: var(--main-color);
}

.s-product-card-content-main {
  text-align: center;
  margin: auto;
}



  .cart-item {

  border: var(--main-color) solid 2px

}

.s-quantity-input-button {

  width: 2.75rem;

  fill: #9ca3af;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

  transition-timing-function: cubic-bezier(.4,0,.2,1);

  transition-duration: 300ms;

  background: var(--main-color);

}  

.s-product-options-wrapper {

  margin-bottom: 1.25rem;

  display: block;

  border-radius: .375rem;

  --tw-bg-opacity: 1;

  background-color: #fff;

  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));

  padding: 1.25rem;

  background: var(--second-color);

}

      

      

      

*/  ---------------------------------------------------- */ 

.s-products-slider-card {

  transition: transform 0.1s ease-in-out, box-shadow 0.3s ease;

}





@keyframes shake-animation {

  0% { transform: translateX(0); }

  25% { transform: translateX(-3px); }

  50% { transform: translateX(3px); }

  75% { transform: translateX(-3px); }

  100% { transform: translateX(0); }

}        

*/  التحول لدائرة */ 

img.lazy.loaded {

  transition: border-radius 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important; 

  border-radius: 20px !important;

}



/* ---------------------------------------------------- */

.s-product-card-image img.loaded {

  display: block; /* Ensure the image is displayed */

  width: 100%; /* Adjust as needed */

  height: auto; /* Adjust as needed */

  animation: smooth-animation 6s ease-in-out infinite;

}

@keyframes smooth-animation {

  0% {

      transform: scale(1);

      opacity: 1;

  }

  50% {

      transform: scale(1.05);

      opacity: 0.95;

  }

  100% {

      transform: scale(1);

      opacity: 1;

  }

}


.banner--fixed img {

  display: block;

}

@keyframes gentle-bounce {

  0% {

      transform: translateY(0); /* Initial position */

  }

  50% {

      transform: translateY(-5px); /* Slight upward movement */

  }

  100% {

      transform: translateY(0); /* Return to initial position */

  }

}

.banner--fixed img {

  display: block; /* Ensure the image is treated as a block element */

  transition: all 0.8s ease-in-out;

  border: 5px solid transparent; /* Adjust border width and color */

  border-radius: 8px; /* Optional: Rounded corners */

}

.banner--fixed img:hover {

  transform: scale(1.02); /* Slightly scales up on hover */

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow on hover */

  /* Changes border color on hover */

}

/* ---------------------------------------------------- */

.banner--fixed img{

border-radius:30px;

}

.store-footer::after{

content:"";

top:0;

color:var(--maincolor)!important;

font-size:16px;

opacity:0.5;

}


.footer-is-light .store-footer .store-footer__inner {

  background-color: var(--main-color);

  padding: 30px;

  border: none;

  font-size: 20px;

  text-align: center;

  border-radius: 19%; 

}

.s-comments-product {

  margin-bottom: 1rem;

  --tw-bg-opacity: 1;

  background-color: #f3f4f6;

  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));

  padding-top: 1rem;

  padding-bottom: 1rem;

  background: var(--main-color);

}

.footer-is-light .store-footer {

  --tw-bg-opacity: 1;

  background-color: #f9fafb;

  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));

  --tw-text-opacity: 1;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        color: var(--main-color));
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
                                                              color: rgba(55, 65, 81, var(--tw-text-opacity));
                              
      background: blac                       ;

}



.footer-is-light .store-footer .store-footer__inner {

  --tw-border-opacity: 1;

  border-bottom-color: #e5e7eb;

  border-bottom-color: rgba(229, 231, 235, var(--tw-border-opacity));

  --tw-bg-opacity: 1;

  background-color: var(--main-color));
  transform: translate3d(0, 0, 0);

  background: var(--main-color));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

}

.footer-is-light .store-footer .store-footer__inner {

  --tw-border-opacity: 1;

  border-bottom-color: #e5e7eb;

  border-bottom-color: rgba(229, 231, 235, var(--tw-border-opacity));

  --tw-bg-opacity: 1;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

  transform: translate3d(0, 0, 0);

  background: var(--main-color))!important;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  border-radius: 20px;

  color: white;

}

.store-footer h3 {

  margin-bottom: .75rem;

  font-size: 1.125rem;

  line-height: 1.75rem;

  font-weight: 700;

  background: var(--main-color);

  padding: 5px;

  border-radius: 8%;

  text-align: center;

}
.top-navbar{
  background: #734b3c;
  color: white;
}



.s-contacts-icon:where([dir=rtl],[dir=rtl] *) {

  margin-left: .625rem;

  color: white ;

}

.s-social-list{
  justify-content: center;
}

.s-contacts-list{
  align-items: flex-start;
}

.store-footer h3 {

  margin-bottom: .75rem;

  font-size: 1.125rem;

  line-height: 1.75rem;

  font-weight: 700;

  background: var(--main-color);

  padding: 5px;

  border-radius: 8%;

  text-align: center;

  width: 100%;

}

.footer-is-light .store-footer {

  background : var(--main-color));

  color: #fff; 

  padding: 30px;

  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

}





.footer-is-light .store-footer .store-footer__inner:before {
  content: "";
  display: block;
  height: 110px;
  width: auto;
  background-image: var(--logo1);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: auto;
  margin-bottom: 20px;
}

.top-navbar a[href^="mailto:"] {
  display: none !important;
}
@media (min-width: 768px) {
  .s-products-slider-slider .s-slider-container .s-slider-swiper-wrapper {
    justify-content: center;
  }
}
.s-social-link a{
	    height: 2.5rem;
    	width: 2.5rem;
}

.s-social-link a svg{
	  height: 1.875rem;
    width: 1.5rem;
}
@media (min-width: 1024px) {
    .store-footer__inner div.container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.copyright-text p {
	color:white;
}


.top-navbar salla-contacts{
	display: none;
}
div.header-search{
	display: none;
}
.top-navbar salla-menu {
	display: none;
}

.ahmed{
	margin: auto;
}
.free-ribbon {
	display: none;
}
.product-single .s-comments-item-content { color: white; }
.s-comments-count-label,.s-comments-item-timestamp{
    background-color: #ffffff;
    padding: 2px 14px;
    border-radius: 5px;
    color: #744b3c !important;
}
.s-comments-item-time{
  opacity: 1;
}
.s-advertisement{
    background-color: rgb(122 107 101)!important;
}
.banner--fixed img{
position: relative;
z-index: -1;
    }
    
    
    .product__description a {
    color: rgb(118 71 50);
    }
    .customer-orders-single .text-primary{
    color: #000000;
    }
     .customer-orders-single .\!text-primary{
     color: #734b3c !important;
     }