/* Basic variables */
:root {
  --menu-slider-gap: 16px;
  --menu-slider-title-size: 1rem;
  --menu-slider-title-weight: 600;
  --menu-slider-title-color: #f3ab01;
  --menu-slider-arrow-size: 32px;
  --menu-slider-arrow-color: #111;
  --menu-slider-bullet-color: #bbb;
  --menu-slider-bullet-active: #111;
  --e-global-typography-primary-font-family: "Brandon Grotesque", sans-serif;
  --e-global-typography-primary-font-weight: 600;
  --e-global-color-primary: #153a42;
  --e-global-color-secondary: #f3ab01;
  --e-global-color-text: #383838;
}

/* Wrapper */
.flb-menu-slider {
  padding-block: var(--menu-slider-gap);
  position: relative;
}

/* Swiper slides */
.flb-menu-slide {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Image */
.flb-menu-slide__img {
  margin: 0;
  aspect-ratio: 1 / 1; /* Square card; adjust if needed */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #f3ab02;
  background: white;
  border-radius: 100%;
  padding: 3px;

  max-width: 200px;
}

.flb-menu-slide__img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* SVG will scale nicely */
  display: block;
}

/* Title */
.flb-menu-slide__title {
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: var(--e-global-typography-primary-font-weight);
  font-size: var(--menu-slider-title-size);
  font-weight: var(--menu-slider-title-weight);
  color: var(--menu-slider-title-color);
  line-height: 1.2;
}

.flb-menu-slider .swiper-wrapper {
  margin-bottom: 50px;
}

/* Arrows */
.flb-menu-slider .swiper-button-prev,
.flb-menu-slider .swiper-button-next {
  width: var(--menu-slider-arrow-size);
  height: var(--menu-slider-arrow-size);
  color: var(--menu-slider-arrow-color);
}

.flb-menu-slider .swiper-button-prev::after,
.flb-menu-slider .swiper-button-next::after {
  font-size: var(--menu-slider-arrow-size);
}

/* Bullets */
.flb-menu-slider .swiper-pagination-bullet {
  background: var(--menu-slider-bullet-color);
  opacity: 1;
}

.flb-menu-slider .swiper-pagination-bullet-active {
  background: var(--menu-slider-bullet-active);
}

/* Reduce specificity and play nice with Elementor by using :where() */
:where(.flb-menu-slider) .swiper-slide {
  /* Example: adjust minimum width if needed */
  /* min-width: 220px; */
}

/* Responsive tweaks */
@media (min-width: 768px) {
  :root {
    --menu-slider-title-size: 1.125rem;
  }
}

/* Remove bullets (we didn't render them, but just in case) */
/* Remove bullets (we didn't render them, but just in case) */
.flb-menu-slider .swiper-pagination {
  display: none !important;
}

/* Allow arrows to sit outside */
.flb-menu-slider-wrap {
  position: relative;
  overflow: visible; /* make sure arrows aren't clipped */
  padding: 0 60px; /* space for arrows */
  margin-top: 2rem;
}
.flb-menu-slider-wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 215px;
  background: var(--e-global-color-primary);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1; /* Ensure it sits behind the slides */
}

.flb-menu-slider {
  overflow: hidden; /* keep slides clipped if needed */
  max-width: 1200px;
}

/* Arrows */
.flb-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  padding: 7px;
}

/* Use pseudo-elements for icons (Swiper provides chevrons via fonts), or add your own SVG background */
.flb-prev::after,
.flb-next::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  mask-size: cover;
  background: currentColor;
  color: #111;
}

/* Example using Swiper arrows glyphs (if font loaded). Otherwise drop in your own SVG. */
.flb-prev::after {
  display: none;
  content: "";
  font-size: 42px;
  line-height: 42px;
  text-align: center;
}
.flb-next::after {
  display: none;
  content: "";
  font-size: 42px;
  line-height: 42px;
  text-align: center;
}

.flb-prev {
  left: 10px;
}
.flb-next {
  right: 10px;
}

.flb-arrow2 {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent !important;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  margin: 5px;
}
.flb-arrow2 img {
  min-width: 35px;
}

.flb-arrows-testimonial {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* TESTIMONIALS */
:root {
  --cream: #f4eee6;
  --green: #08363a;
  --rating-on: #f5b400;
  --rating-off: #d9d9d9;
  --gap: 16px;
}

/* Arrows */
.flb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  cursor: pointer;
  z-index: 10;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}
.flb-prev {
  left: 10px;
}
.flb-next {
  right: 10px;
}
.flb-prev::after,
.flb-next::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}
.flb-prev::after {
  border-width: 8px 10px 8px 0;
  border-color: transparent #fff transparent transparent;
}
.flb-next::after {
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #fff;
}

/* MENU SLIDER */
.flb-menu-slider-wrap {
  position: relative;
  overflow: visible;
  padding: 0 60px;
}
.flb-menu-slider {
  overflow: hidden;
}
.flb-menu-slide {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* .flb-menu-slide__img{margin:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.flb-menu-slide__img img{width:100%;height:100%;object-fit:contain;display:block;}
.flb-menu-slide__title{margin:0;font-size:1rem;font-weight:600;color:#111;line-height:1.2;} */

/*  */
/* TESTIMONIALS */
.flb-testimonial-wrap {
  position: relative;
  overflow: visible;
  padding: 0 60px;
}
.flb-testimonial-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border-radius: 48px;
  padding: 48px 64px;
  position: relative;
  text-align: center;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 50px;
}
.flb-testimonial-content {
  margin-top: -90px;
}
.flb-testimonial-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  display: block;
}
.flb-testimonial-name {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--green);
  font-size: 20px;
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: bold;
  font-size: 24px;
  line-height: 21px;
}
.flb-testimonial-text {
  margin: 0 0 16px;
  font-style: italic;
  font-family: Trenda;
  font-size: 16px;
  color: #383838;
}
.flb-testimonial-rating .flb-star {
  font-size: 20px;
  color: var(--rating-off);
  margin: 0 2px;
}
.flb-testimonial-rating .flb-star.is-on {
  color: var(--rating-on);
}
.flb-quote {
  width: 50px;
  font-size: 42px;
  color: var(--green);
  margin-top: 70px;
  transform: translateY(-50%);
}
.flb-quote img {
  width: 100%;
  min-width: 50px;
}
.flb-quote-left {
  left: 32px;
}
.flb-quote-right {
  right: 32px;
}

@media (max-width: 767px) {
  .flb-testimonial-box {
    padding: 45px 32px 40px;
    border-radius: 32px;
  }
  .flb-quote {
    display: none;
  }
  .flb-quote-left {
    left: 16px;
  }
  .flb-quote-right {
    right: 16px;
  }
  .flb-testimonial-wrap {
    padding: 0;
  }
  .flb-menu-slider-wrap {
    padding: 0 48px;
  }
}