@if(isset($data) && is_array($data) && !empty($data))
<section class="bg-cultured position-relative overflow-hidden p-0">
    <div class="border-bottom border-top border-1 border-color-extra-medium-gray bg-white">
      <div class="container tab-style-08">
        <ul class="nav nav-tabs fs-24 fw-500 alt-font border-0 text-center">
          @foreach($data['tab_items'] as $item)
          <li class="nav-item">
            <a class="nav-link {{ $loop->index + 1 === 1 ? 'active' : '' }}" data-bs-toggle="tab" href="#tab_eight{{ $loop->index + 1 }}">{{ $item['tab_title'] }} <span
                class="tab-border bg-dark-gray"></span>
            </a>
          </li>
          @endforeach
        </ul>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-12 tab-style-08">
          <div class="tab-content">
            @foreach($data['tab_items'] as $item)
            <!-- start tab content -->
            <div class="tab-pane fade in {{ $loop->index + 1 === 1 ? 'active show' : '' }}" id="tab_eight{{ $loop->index + 1 }}">
              <div class="row">
                <div class="col-xl-4 col-lg-5 col-md-6 pt-8 pb-8 xs-pt-12 xs-pb-12">
                  <span
                    class="fs-19 lh-20 ls-0px fw-600 text-dark-gray d-inline-block text-decoration-line-bottom-medium border-color-base-color mb-25px">{{ $item['tab_content_subtitle'] }}
                    Çözümleri</span>
                  <h2 class="alt-font fw-700 ls-minus-1px text-dark-gray mb-10px">{{ $item['tab_content_title'] }}</h2>
                  <p class="w-90 md-w-100">{{ $item['tab_content_text'] }}</p>
                  <a href="{{ $item['tab_content_button_url'] }}" class="btn btn-large btn-round-edge btn-dark-gray btn-slide-right">{{ $item['tab_content_button_text'] }} <span
                      class="bg-cultured"></span>
                  </a>
                </div>
                <div class="col-lg-7 col-md-6 offset-xl-1 sm-pb-8">
                  <div class="h-100 outside-box-right-20 cover-background sm-h-350px sm-me-0"
                    style="background-image: url({{ asset($item['tab_content_image']) }})"></div>
                </div>
              </div>
            </div>
            @endforeach
            <!-- end tab content -->
          </div>
        </div>
      </div>
    </div>
  </section>
@endif