/* Add custom CSS styles below */ 
/* Special Heading */

/* Floating Navbar */
@media(min-width:1024px){
  .index div#mainnav {
    position: absolute;
    width: 95%;
    z-index: 2;
    left: 50%;
    top: 1.5%;
    transform: translate(-50%, 0);
    border-radius: 2rem;
    height: 90px !important;!i;!;
  }
  .inner{
    border-radius:2rem
  }
}
div#mainnav >div >div {
max-width:80% !important;
}




/* ========================== */
/*        MAIN NAVBAR        */
/* ========================== */



/* Navbar Background and Text Color */
#mainnav,
.inner,
.sub-menu {
  background: #bf935c !important;
}

#mainnav,
#mainnav i:before,
#mainnav b {
  color: #ffffff !important;
}

.inner {
  background-color: #fff;
}

.main-menu li.root-level > a {
  color: #ffffff;
}

.main-nav .icon {
  color: black;
}

/* Cart Summary */
.s-cart-summary-total {
  color: #2C1A06;
}

/* Navbar Logo */
.navbar-brand img {
  max-height: 6rem !important;
  max-width: 180px !important;
}


/* ========================== */
/*        SWIPER SLIDER      */
/* ========================== */

.s-block--photos-slider .swiper-slide {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.s-block--photos-slider {
  margin-top: 0 !important;
}

.swiper {
  padding: 0 !important;
}


/* ========================== */
/*            GRID           */
/* ========================== */

/* Override grid-cols-3 to display 5 columns */
.md\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Responsive for banners on small screens */
@media (max-width: 768px) {
  .banner-entry {
    height: 92px;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .banner-entry {
    background-color: transparent !important;
    height: 150px  !important;
    padding:0 !important;
  }
}

/* Grid for md:grid-cols-2 */
.md\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Banner Styling */
@media(min-width:768px){
.banner-entry {
  height: 400px !important;
  background-color: transparent;
}
}

.banner-entry .lazy__bg {
  background-size: contain;
  background-repeat: no-repeat;
}


/* ========================== */
/*    PRODUCTS SLIDER CARD   */
/* ========================== */

.s-products-slider-card.swiper-slide {
  width: 50%;
  margin-bottom: 30px;
}

/* Hide slider navigation */
.s-block--photos-slider .s-slider-block__title-nav {
  display: none;
}

/* Button inside product cards */
.s-product-card-entry .s-button-element,
.s-button-primary {
  background-color: #bf935c !important;
}

button.undefined {
  color: white;
}

/* Product title ellipsis */
.s-product-card-content-title a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ========================== */
/*        FIXED BANNER       */
/* ========================== */

.banner--fixed img {
  background-color: transparent;
}

@media(min-width:768px){
section:nth-child(3 of .s-block--fixed-banner) {
  background-color: transparent;
  margin-bottom: -8%;
  z-index: 9999;

}
}
@media(max-width:768px){
section:nth-child(3 of .s-block--fixed-banner) {
  background-color: transparent;
  margin-bottom: -18%;
  z-index: 9999;

}
}


/* ========================== */
/*           FOOTER          */
/* ========================== */

.store-footer__inner {
  background-color: #bf935c !important;
  color: white;
}

footer * {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* ========================== */
/*        HOVER EFFECT       */
/* ========================== */

/* Hover animation for banners */
.banner-entry > div {
  background-repeat: no-repeat;
  display: inline-block;
  transition: 0.3s;
  position: relative; /* Needed for ::after positioning */
}

.banner-entry > div:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0) 100%
  );
}

.banner-entry > div:hover:after {
  opacity: 1;
  left: 130%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

.banner-entry > div:active:after {
  opacity: 0;
}

.banner-entry > div:not(:hover) {
  transform: scale(0.95);
}


/* ========================== */
/*      CUSTOM FOOTER LOGO   */
/* ========================== */

/*
.store-footer__inner a[href="https://fakhm-store.com/"]::before {
  content: "";
  display: block;
  background-image: url('https://cdn.salla.sa/form-builder/QMzkK1YpBFxu7UFAc7l9WNIHq2xXGVQTbohh5AJB.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 100px;
  margin: 0 auto;
}

a[href="https://fakhm-store.com/"] h3 {
  display: none;
}
*/
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-danger-outline.s-button-loader-after {
    color: var(--color-primary);
}