/* =========================
 HERO IMAGE SCROLLER
========================= */
 
   .hero-scroller {
      background: #000;
      padding-top: 10px;
      padding-bottom: 40px;
    }

    .hero-title {
      text-align: left;
      color: #fff;
      margin-bottom: 10px;
      Margin-left:25px;
	margin-top:20px;
    }

    .hero-title h1 {
      font-size: clamp(2.2rem, 6vw, 4rem);
      font-weight: 700;
      line-height: 1.1;
    }

    .hero-title span {
      /*display: block;*/
      font-weight: 300;
    }

    .scroller-wrapper {
      position: relative;
    }

    .scroller {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: min(85vw, 520px);
      gap: 16px;

      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding: 16px;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;

      padding: 16px;
    }

    .scroller::-webkit-scrollbar {
      height: 10px;
    }

    .scroller::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.25);
      border-radius: 999px;
    }

    .scroller-item {
      position: relative;
      scroll-snap-align: start;
      border-radius: 18px;
      overflow: hidden;
      background: #111;
    }

    .scroller-item img {
      width: 100%;
      height: min(70vh, 520px);
      object-fit: cover;
      display: block;
    }

    .scroller-item figcaption {
      position: absolute;
      left: 12px;
      bottom: 12px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 0.9rem;
      color: #fff;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(8px);
    }

    /* Desktop buttons */
    .scroller-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(0,0,0,0.55);
      color: #fff;
      font-size: 28px;
      line-height: 40px;
      cursor: pointer;
      backdrop-filter: blur(8px);
    }

    .scroller-btn--left { left: 12px; }
    .scroller-btn--right { right: 12px; }

    @media (hover: none) {
      .scroller-btn { display: none; }
    }

    @media (max-width: 576px) {
      .scroller {
        grid-auto-columns: 88vw;
      }
      .scroller-item img {
        height: min(60vh, 420px);
      }
    }