<div class="hero d-md-block d-none" id="heroDesktop">
    <div class="hero-home">
        <div class="image-slider">
          @foreach ($sliders as $key => $slider)
            <img src="{{ $slider->image_path }}" alt="{{ $slider->title }}" class="slide-image {{ $key === 0 ? 'active' : '' }}">
          @endforeach
        </div>
        <div class="text-slider">
          @foreach ($sliders as $key => $slider)
            <div class="text-box">
              <h2>{{ $slider->title }}</h2>
              @if($slider->sub_title)
                <p>{{ $slider->sub_title }}</p>
              @endif
            </div>
          @endforeach
        </div>
      </div>
</div>
<!-- Mobile Slider -->
<div class="hero-mobile d-md-none d-block" id="heroMobile">
    <div class="hero-home-mobile">
        <div class="image-slider">
          @foreach ($sliders as $key => $slider)
            <img src="{{ $slider->image_path }}" alt="{{ $slider->title }}" class="slide-image {{ $key === 0 ? 'active' : '' }}">
          @endforeach
        </div>
        <div class="text-slider">
          @foreach ($sliders as $key => $slider)
            <div class="text-box">
              <h2>{{ $slider->title }}</h2>
              @if($slider->sub_title)
                <h4>{{ $slider->sub_title }}</h4>
              @endif
            </div>
          @endforeach
        </div>
      </div>
</div>