/* Add custom CSS styles below */ 
@media (max-width: 767px) {
  /* Force the slider container to stack items vertically */
  section.s-block.s-block--banners.najd-cats.p-left .swiper-wrapper {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important; /* Disable Swiper's horizontal translation */
    gap: 15px; /* Add spacing between slides */
  }

  /* Make each slide take the full width of the container */
  section.s-block.s-block--banners.najd-cats.p-left .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-right: 0 !important;
  }

  /* Ensure the image within the slide fills the width */
  section.s-block.s-block--banners.najd-cats.p-left .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Hide navigation dots/arrows as they are no longer relevant in a list view */
  section.s-block.s-block--banners.najd-cats.p-left .swiper-pagination,
  section.s-block.s-block--banners.najd-cats.p-left .s-slider-navigation {
    display: none !important;
  }
}
/* Change category card background and text color */
section.s-block.s-block--categories.najd-categories .slide--cat-entry {
  background-color: #151d25 !important;
  color: #ffffff !important;
}

/* Ensure headings and icons inside the card also turn white */
section.s-block.s-block--categories.najd-categories .slide--cat-entry h4,
section.s-block.s-block--categories.najd-categories .slide--cat-entry i {
  color: #ffffff !important;
}
/* Remove the dark overlay from the background image */
.slider-bg.transition-opacity.bg-center.bg-cover.relative::before {
    display: none !important;
}
/* Update product card background and text on the home page */
body.index .s-product-card-entry {
  background-color: #141d24 !important;
  color: #ffffff !important;
}

/* Ensure all text (titles, prices, etc.) inside the card is white */
body.index .s-product-card-content,
body.index .s-product-card-content * {
  color: #ffffff !important;
}

/* Style the 'Add to Cart' button */
body.index salla-add-product-button {
  background-color: #ff7747 !important;
  --s-add-product-button-bg: #ff7747 !important;
  --s-add-product-button-text-color: #ffffff !important;
  border-radius: 8px; /* Optional: maintains rounded look */
}

/* Targeting the specific button element for the background and text color */
body.index salla-add-product-button .s-add-product-button-btn,
body.index salla-add-product-button button {
  background-color: #ff7747 !important;
  color: #ffffff !important;
  border-color: #ff7747 !important;
}
/* Improve visibility of the product category label */
body.index .s-product-card-category {
  background-color: #ff7747 !important; /* Brand orange background */
  color: #141d24 !important;            /* Dark text for contrast */
  padding: 2px 10px !important;         /* Added padding for better spacing */
  border-radius: 4px !important;        /* Rounded corners */
  font-weight: bold !important;
  display: inline-block !important;
}

/* 1. Section Title and Subtitle */
section.s-block--faqs.najad-faq .s-block__title h2,
section.s-block--faqs.najad-faq .s-block__title p,
section.s-block--faqs.najad-faq .s-block__title * {
  color: #ffffff !important;
}

/* 2. Accordion Background */
section.s-block--faqs.najad-faq .faqs-list__item {
  background-color: #080f17 !important;
  border-color: #080f17 !important;
}

/* 3. Question Text Color */
section.s-block--faqs.najad-faq .faqs-list__item label {
  color: #ffffff !important;
}

/* 4. Answer Text Color */
section.s-block--faqs.najad-faq .faqs-list__item .answer-container,
section.s-block--faqs.najad-faq .faqs-list__item .answer-container * {
  color: #ffffff !important;
}

/* 5. Arrow/Icon Color */
section.s-block--faqs.najad-faq .faqs-list__item::after,
section.s-block--faqs.najad-faq .faqs-list__item i {
  color: #ffffff !important;
}
/* Make the +/- circle icon dark */
section.s-block--faqs.najad-faq .faqs-list__item label i.open-badge {
  background-color: #080f17 !important; /* Dark circle background */
  color: #ffffff !important;            /* White + or - sign */
  border: 1px solid #ffffff22 !important; /* Optional: adds a slight border to help it stand out */
}
@media (max-width: 767px) {
  /* Targets only the 6th section in the list, which is your first fixed banner */
  .app-inner > section:nth-of-type(6) img {
    content: url("https://i.ibb.co/4ZVCcSTQ/endo.webp") !important;
  }
}
/* 1. Center the entire title block and stack vertically */
section.s-block--testimonials.angel-testimonials.dark .s-slider-block__title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

/* 2. Style the title/subtitle wrapper */
section.s-block--testimonials.angel-testimonials.dark .s-slider-block__title-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
}

/* 3. Make the Title (h2) bigger and bold */
section.s-block--testimonials.angel-testimonials.dark .s-slider-block__title-right h2 {
  font-size: 2.8rem !important; /* Larger size */
  font-weight: 900 !important;   /* Extra Bold */
  color: #ffffff !important;     /* White color */
  margin: 0 !important;
}

/* 4. Make the Subtitle (p) bigger and white */
section.s-block--testimonials.angel-testimonials.dark .s-slider-block__title-right p {
  font-size: 1.4rem !important;  /* Larger size */
  color: #ffffff !important;     /* White color */
  margin-top: 0.5rem !important;
  opacity: 0.9;
}

/* Remove the navigation arrows from the testimonials section */
section.s-block--testimonials.angel-testimonials.dark .s-slider-block__title-left {
  display: none !important;
}
/* Change all icons in the features section to white */
section.s-block--features.angel-features .angel-feature i,
section.s-block--features.angel-features .angel-feature svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* Make the title and subtitle white in the features section */
section.s-block--features.angel-features .s-block__title h2,
section.s-block--features.angel-features .s-block__title p {
  color: #ffffff !important;
}
/* 1. Footer Background Color */
footer.store-footer .store-footer__inner {
  background-color: #0e151d !important;
}

/* 2. Footer Titles (Menu Headings) */
footer.store-footer h3,
footer.store-footer .title-mail,
footer.store-footer .s-contacts-title {
  color: #54c8e9 !important;
  font-weight: bold !important;
}

/* 3. Footer List Items, Links, and Descriptions (Gray) */
footer.store-footer .footer-description,
footer.store-footer p,
footer.store-footer a,
footer.store-footer .da-tm,
footer.store-footer .s-contact-item span {
  color: #999999 !important; /* Gray color */
}

/* Optional: Change link color on hover to match titles */
footer.store-footer a:hover {
  color: #54c8e9 !important;
}
/* Target header items only when body has the .index class */
body.index .header-inner.inner.bg-white.da-bgm,
body.index .header-inner.inner.bg-white.da-bgm *,
body.index .header-inner.inner.bg-white.da-bgm .text-black,
body.index .header-inner.inner.bg-white.da-bgm .text-primary {
    color: #ffffff !important;
    fill: #ffffff !important; /* For SVG icons */
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Optional: If the header background itself should be transparent on index */
body.index .header-inner.inner.bg-white.da-bgm {
    background-color: transparent !important;
}
body.index {
    background-color: #000000 !important;
}
body:not(.index) img.logo-light {
  filter: brightness(0) !important;
}