/* Vila Tribalija — show only the existing Webflow testimonial dots on
   the original phone slider. No layout changes at 480px and up. */

@media screen and (max-width: 479px) {
  /* Place the built-in nav just below the slider, not over the card. */
  .testimonial-slider-small .slide-nav.w-slider-nav {
    display: block !important;
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    height: auto;
    margin: 14px 0 0;
    padding: 0;
    text-align: center;
    z-index: 2;
  }

  /* w-num would otherwise render numbered pills — keep small plain dots. */
  .testimonial-slider-small .slide-nav.w-slider-nav > div,
  .testimonial-slider-small .w-slider-dot {
    display: inline-block;
    width: 7px !important;
    height: 7px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    border-radius: 50%;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background-color: #ffffff99;
    vertical-align: middle;
    cursor: pointer;
  }

  .testimonial-slider-small .slide-nav.w-slider-nav > div.w-active,
  .testimonial-slider-small .w-slider-dot.w-active {
    background-color: #19161be6;
  }

  /* Webflow duplicates the 4 testimonials for looping, which creates 8 dots.
     Hide the clone dots and keep the first four in sync when a clone is active. */
  .testimonial-slider-small .slide-nav.w-slider-nav > div:nth-child(n + 5) {
    display: none !important;
  }

  .testimonial-slider-small .slide-nav.w-slider-nav:has(> :nth-child(5).w-active) > :nth-child(1),
  .testimonial-slider-small .slide-nav.w-slider-nav:has(> :nth-child(6).w-active) > :nth-child(2),
  .testimonial-slider-small .slide-nav.w-slider-nav:has(> :nth-child(7).w-active) > :nth-child(3),
  .testimonial-slider-small .slide-nav.w-slider-nav:has(> :nth-child(8).w-active) > :nth-child(4) {
    background-color: #19161be6;
  }
}