<div class="testimonial-style2">
        <style>
            .testimonial-style2 .nav-pills img {
                width: 50px;
                height: 50px;
                object-fit: cover;
                border-radius: 50%;
            }
        </style>
        <div class="tab-content" id="pills-tabContent">
            @foreach ($reviews as $index => $review)
            <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="pills-{{ $index + 1 }}" role="tabpanel" aria-labelledby="pills-{{ $index + 1 }}-tab">
                <div class="testi-content text-md-center">
                    <span class="icon fas fa-quote-left"></span>
                    <h4 class="testi-text">{{ $review->message }}</h4>
                    <h6 class="name">{{ $review->name }}</h6>
                    <p class="design">{{ $review->company_role }}, {{ $review->company_name }}</p>
                </div>
            </div>
            @endforeach
        </div>
        <div class="tab-list position-relative">
            <ul class="nav nav-pills justify-content-md-center" id="pills-tab" role="tablist">
                @foreach ($reviews as $index => $review)
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ $index === 0 ? 'active' : '' }} {{ $index === 0 ? 'ps-0' : ($index === count($reviews) - 1 ? 'pe-0' : '') }}" id="pills-{{ $index + 1 }}-tab" data-bs-toggle="pill" data-bs-target="#pills-{{ $index + 1 }}" type="button" role="tab" aria-controls="pills-{{ $index + 1 }}" aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                        <img src="{{ $review->photo_url }}" alt="{{ env('APP_NAME') }}" class="rounded-circle img-fluid">
                    </button>
                </li>
                @endforeach
            </ul>
        </div>
    </div>