@if(isset($data) && is_array($data) && !empty($data))
<section class="py-0 overflow-hidden">
    <div class="container-fluid p-0">
      <div class="row g-0">
        <div class="col-md-8 cover-background" style="background-image:url('{{ asset($data['bg_img']) }}')"
          data-anime='{ "translateX": [-50, 0], "opacity": [0,1], "duration": 600, "delay":150, "staggervalue": 150, "easing": "easeOutQuad" }'>
          <div class="pt-13 pb-13 pe-5 w-40 xl-w-45 lg-w-55 md-w-65 sm-w-50 xs-w-100 xs-ps-5 float-end">
            <span class="fs-15 fw-700 text-dark-gray text-uppercase mb-20px xs-mb-15px d-inline-block text-decoration-line-bottom-medium">{{ $data['subtitle'] }}</span>
            <h1 class="alt-font fw-400 text-dark-gray mb-40px lg-mb-35px xs-mb-25px ls-minus-1px"> {{ $data['title'] }}</h1>
            <a href="#" class="btn btn-dark-gray btn-extra-large btn-switch-text btn-round-edge btn-box-shadow">
              <span>
                <span class="btn-double-text" data-text="{{ $data['button_text'] }}">{{ $data['button_text'] }}</span>
              </span>
            </a>
          </div>
        </div>
        <div class="col-md-4"
          data-anime='{ "translateX": [50, 0], "opacity": [0,1], "duration": 600, "delay":150, "staggervalue": 150, "easing": "easeOutQuad" }'>
          <div class="swiper position-relative h-100"
            data-slider-options='{ "slidesPerView": 1, "loop": true, "allowTouchMove": true, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "effect": "fade" }'>
            <div class="swiper-wrapper">
              <!-- start text slider item -->
              @foreach($data['slider_items'] as $item)
              <div class="swiper-slide cover-background h-100 text-center"
              style="background-image: url('{{ asset(env('THEME_FOLDER') . '/assets/images/alt-bg.jpg') }}')">
                <a href="{{ $data['button_url'] }}">
                  <img src="{{ asset($item['item_img']) }}" alt="" />
                </a>
                <div class="position-absolute bottom-70px xs-bottom-25px w-100 left-0 text-center ls-minus-05px">
                  <a href="{{ $data['button_url'] }}" class="text-dark-gray alt-font d-inline-block fs-20 fw-600">{{ $item['title'] }}</a>
                </div>
              </div>
              @endforeach
              <!-- end text slider item -->
            </div>
            <!-- start slider navigation -->
            <div class="slider-one-slide-prev-1 swiper-button-prev slider-navigation-style-06">
              <i class="bi bi-arrow-left icon-extra-medium text-dark-gray"></i>
            </div>
            <div class="slider-one-slide-next-1 swiper-button-next slider-navigation-style-06">
              <i class="bi bi-arrow-right icon-extra-medium text-dark-gray"></i>
            </div>
            <!-- end slider navigation -->
          </div>
        </div>
      </div>
    </div>
  </section>
@endif