/* Add custom CSS styles below */ 
/* :root{
  --text-btn:black !important;
  --color-primary:white !important;
} */
body{
  background: none !important;
  background-color: #F2F3F4 !important;
  
}
.s-block--banners .on-text{
  top: 90%;
}
.s-block--banners .banner-square h3{
      margin-top: auto;
    color: white;
    height: 100%;
}
.s-block--banners .box-img {
  position: relative;
}
.s-block--banners .box-img::after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background: linear-gradient(45deg, black, transparent);
  width: 100%;
  height: 100%;
}
 .s-block__title h2 , 
 .s-block__title p 
{
  text-align: center !important;
}
.s-block--fixed-banner{
  padding: 0 !important;
}
/* .s-block--fixed-banner .container{
  padding: 0 !important;
  margin: 0 !important;
} */
.banner--fixed img{
  border-radius: 0 !important;
}
.s-slider-block__title .s-slider-block__title-right{
  border-bottom: 1px solid black;
}
.s-slider-block__title .s-slider-block__title-right h2{
  font-size: 24px;
  padding-block: 12px;
}
.s-slider-block__title-left{
  border: 1px solid black;
  border-radius: 15px;
}
.s-slider-block__display-all::after{
  display: none !important;
}
.s-slider-block__title-nav{
  display: none !important;
  
}
.s-slider-block__display-all{
  padding-inline: 12px;
}
.s-slider-block__title {
  margin-block: 10px !important;
}
.s-product-card-props ,.s-product-card-content-subtitle  {
  display: none !important;
}
.s-product-card-content-footer button {
  background-color:white !important;
  color: black !important;
  border: 1px solid black !important;
}
custom-salla-product-card{
      padding: 9px;
    /* box-shadow: 1px 1px 3px #0000003d; */
}
.s-block--testimonials .s-slider-block__title-right{
  margin: auto !important;
  padding-block: 15px;
}
.s-block--testimonials .s-slider-block__title-right{
  border: none !important;
}
.s-block--testimonials .s-slider-block__title-right h2{
  text-align: center !important;
  padding-left: 0 !important;
  color: #1B5C63;
  font-size: 36px;
  font-weight: 700;
}
.s-block--testimonials .s-slider-block__title-right p{
    text-align: center !important;
  padding-left: 0 !important;
  color: #6B7A7E;
  font-size: 16px;
  font-weight: 400;
}
/* PRODUCT CARD */
/* ============================================================
   Testimonials card restyle — CSS ONLY, no markup changes.
   Scoped to .s-block--testimonials so nothing else on the
   theme is affected.
   ============================================================ */

/* 1) Flatten the avatar/name/city/stars wrapper so its
      children become direct grid items of the card body.
      This is what lets us reorder them without touching HTML. */
.s-block--testimonials .s-testimonials--slider--img {
  display: contents;
}

/* 2) Card shell */
.s-block--testimonials .swiper-slide > .flex.h-full {
  border-radius: 16px;
  border: 1px solid #eef0f2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  background: #fff;
}

/* 3) Card body becomes a grid:
      row 1 -> stars (pinned top, spans full width)
      row 2 -> quote text (spans full width, divider under it)
      row 3/4 -> name+city on the wide column, avatar on the
                 narrow column, spanning both rows to stay centered */
.s-block--testimonials .swiper-slide .flex.flex-col.w-full {
  display: grid;
  grid-template-columns: 1fr 56px;
  grid-template-areas:
    "stars   stars"
    "text    text"
    "name    avatar"
    "city    avatar";
  row-gap: 4px;
  column-gap: 14px;
  margin-top: 0 !important;   /* cancel -mt-8 */
  padding: 20px 22px !important;
}

/* 4) Stars — top right, gold fill instead of theme color */
.s-block--testimonials .testimonial__rating {
  grid-area: stars;
  justify-self: end;
  margin: 0 0 10px !important;
}
.s-block--testimonials .testimonial__rating svg path {
  fill: #C0A062;
}

/* 5) Quote text — becomes the card "body"; bottom border acts
      as the divider line seen in the target design */
.s-block--testimonials p.text-base.leading-6 {
  grid-area: text;
  text-align: right !important;   /* overrides the .text-center utility class */
  color: #6b7280;
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 16px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef0f2;
}

/* 6) Name */
.s-block--testimonials p.text-lg.font-primary {
  grid-area: name;
  justify-self: end;
  align-self: end;
  text-align: right !important;
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

/* 7) City */
.s-block--testimonials p.text-gray-400.da-ts {
  grid-area: city;
  justify-self: end;
  align-self: start;
  text-align: right !important;
  margin: 0 !important;
  font-size: 12px;
  color: #9ca3af;
}

/* 8) Avatar — shrink from the default 96px (h-24 w-24) down to
      a small 44px circle, moved to the left column */
.s-block--testimonials .testimonial__avatar {
  grid-area: avatar;
  align-self: center;
  justify-self: center;
  height: 44px !important;
  width: 44px !important;
  background: #1B5C63; /* fallback color if the photo fails/is empty */
}
.s-block--testimonials .testimonial__avatar .lazy__bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* 9) Quote mark icon — not present in the target design */
.s-block--testimonials .testimonial__icon {
  display: none;
}
.s-block--testimonials p.text-lg.font-primary,
.s-block--testimonials p.text-gray-400.da-ts,
.s-block--testimonials .testimonial__rating{
  margin-left: auto !important;
}
.s-block--faqs .s-block__title h2{
    text-align: center !important;
  padding-left: 0 !important;
  color: #1B5C63;
  font-size: 36px;
  font-weight: 700;
}


.s-block--faqs .s-block__title p{
      text-align: center !important;
  padding-left: 0 !important;
  color: #6B7A7E;
  font-size: 16px;
  font-weight: 400;
}
.faqs-list{
  grid-template-columns:repeat(1,minmax(0,1fr));
}

/* faqs start  */

/* ============================================================
   FAQ accordion restyle — CSS ONLY, no markup changes.
   Scoped to .faqs-list so nothing else on the theme is affected.
   ============================================================ */

/* 1) Single column, stacked list (screenshot has no 2-column grid) */
.faqs-list {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* 2) Card shell */
.faqs-list .faqs-list__item {
  border-radius: 14px !important;
  border: 1px solid #eef0f2 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: box-shadow .25s, border-color .25s;
}

/* Subtle highlight ring on the open card */
.faqs-list .faq-container input:checked ~ .faqs-list__item {
  border-color: #cfe3e4 !important;
  box-shadow: 0 2px 6px rgba(27, 92, 99, .08);
}

/* 3) Question label — force everything to the right, regardless
      of the ltr:/rtl: utility classes already on the element */
.faqs-list .faqs-list__item > label {
  margin-inline-start: 0 !important;
  margin-inline-end: 3.25rem !important;   /* clears the icon circle */
  text-align: right !important;
  font-weight: 600;
  color: #1f2937;
}

/* 4) Icon circle — move to the right side and recolor teal */
.faqs-list .faq-item.open-badge {
  inset-inline-start: auto !important;
  inset-inline-end: 1rem !important;
  background: #1B5C63 !important;
  width: 2rem !important;
  height: 2rem !important;
}

/* Replace the icon-font glyph with a hand-drawn chevron so it
   matches the screenshot exactly, independent of which glyph
   "sicon-add" actually points to */
.faqs-list .faq-item.open-badge::before {
  content: '' !important;
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform .3s ease;
  margin-top: -3px; /* optical centering */
}

/* Flip the chevron to point up when the FAQ is open */
.faqs-list .faq-container input:checked ~ .faqs-list__item .faq-item.open-badge::before {
  transform: rotate(225deg);
  margin-top: 3px;
}

/* 5) Answer text */
.faqs-list .faq-answer p {
  text-align: right !important;
  color: #6b7280;
}

/* 6) "Learn more" link, if present */
.faqs-list .faq-link {
  background: #1B5C63 !important;
  border-color: #1B5C63 !important;
}
.angel-feature >div:first-child {
  background-color: #1B5C63;
  border-radius: 50% !important;
}
.angel-feature i{
  color: white !important;
  fnot-size: 20px; 
}
.s-block--features{
 background-color: white !important; 
}
.s-block--faqs{
      background: #F2F3F4;
    margin-bottom: 30px;
}
@media(min-width:768px){
  .faq-container{
      width: 60%;
    margin-inline: auto;
}
}

.s-block--testimonials{
 background-color: white !important;
  padding: 20px;
}
.store-footer  {
  margin: 0 !important;
}
.s-product-card-content-footer salla-add-product-button .s-button-primary{
  background-color: white !important;
  color: black !important;
}
.s-block--fixed-banner:nth-child(6) .container{  max-width: 100% !important;
  width: 100% !important;
}