/* ===================================================
       IMAGE GALLERY CAROUSEL — unique prefix: imgslider-
       No conflicts with .experts-carousel-wrapper etc.
    =================================================== */

  .imgslider-section {
      padding: 70px 0;
      background: var(--gray-50);
  }

  .imgslider-wrapper {
      position: relative;
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
      /* single image always fills the width */
      aspect-ratio: 16 / 7;
      background: var(--gray-200);
      box-shadow: var(--shadow-lg);
  }

  /* Track — full width × (n images) wide, slides horizontally */
  .imgslider-track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
  }

  /* Each slide exactly fills the wrapper */
  .imgslider-slide {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
  }

  .imgslider-slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      transition: transform 0.6s ease;
  }

  /* subtle Ken-Burns on active slide */
  .imgslider-slide.imgslider-active img {
      transform: scale(1.04);
  }

  /* Gradient overlay at bottom for readability */
  .imgslider-slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
              rgba(15, 52, 71, 0.65) 0%,
              rgba(15, 52, 71, 0.15) 40%,
              transparent 70%);
      pointer-events: none;
  }

  /* Caption inside each slide */
  .imgslider-caption {
      position: absolute;
      bottom: 70px;
      /* leave room above the button */
      left: 32px;
      right: 32px;
      color: white;
      z-index: 2;
      pointer-events: none;
  }

  .imgslider-caption-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.1rem, 2.5vw, 1.8rem);
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 6px;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }

  .imgslider-caption-sub {
      font-size: clamp(0.75rem, 1.5vw, 0.9rem);
      color: rgba(255, 255, 255, 0.78);
      font-weight: 500;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  }

  /* ── Single CTA button — bottom-left ── */
  .imgslider-cta {
      position: absolute;
      bottom: 20px;
      left: 32px;
      z-index: 10;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--brand);
      color: white;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      padding: 11px 26px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 6px 24px rgba(37, 150, 190, 0.45);
      transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
      white-space: nowrap;
  }

  .imgslider-cta:hover {
      background: var(--brand-dark);
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(37, 150, 190, 0.55);
  }

  .imgslider-cta img {
      width: 20px;
      height: 20px;
      stroke: white;
      fill: none;
      stroke-width: 2.2;
      flex-shrink: 0;
  }

  /* ── Dot indicators — bottom-right ── */
  .imgslider-dots {
      position: absolute;
      bottom: 24px;
      right: 28px;
      z-index: 10;
      display: flex;
      gap: 8px;
      align-items: center;
  }

  .imgslider-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s, width 0.25s;
  }

  .imgslider-dot.imgslider-dot-active {
      background: white;
      width: 24px;
      border-radius: 4px;
      transform: none;
  }

  /* ── Arrow buttons (prev / next) — absolute on sides ── */
  .imgslider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
  }

  .imgslider-arrow:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-50%) scale(1.08);
  }

  .imgslider-arrow svg {
      width: 18px;
      height: 18px;
      stroke: white;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  .imgslider-prev {
      left: 16px;
  }

  .imgslider-next {
      right: 16px;
  }

  /* Autoplay progress bar */
  .imgslider-progress {
      position: absolute;
      top: 0;
      left: 0;
      height: 3px;
      background: var(--brand);
      width: 0%;
      z-index: 10;
      transition: width linear;
  }

  @media (max-width: 768px) {
      .imgslider-wrapper {
          aspect-ratio: 4 / 3;
      }

      .imgslider-caption {
          bottom: 72px;
          left: 16px;
          right: 16px;
      }

      .imgslider-cta {
          left: 16px;
          bottom: 18px;
          font-size: 0.78rem;
          padding: 9px 18px;
      }

      .imgslider-dots {
          right: 16px;
          bottom: 22px;
      }
  }

  @media (max-width: 480px) {
      .imgslider-wrapper {
          aspect-ratio: 3 / 2;
          border-radius: var(--radius-md);
      }
  }