{{-- Achievements Section --}}
  <section class="achievement-section py-5" data-aos="fade-up">

      <div class="container">

          <!-- Section Heading -->
          <div class="text-center mb-5">

              <span class="achievement-badge">
                  Achievements
              </span>

              <h2 class="achievement-title">
                  Scientific Achievements & Discoveries
              </h2>

              <p class="achievement-subtitle">
                  Milestones in biodiversity exploration, wildlife conservation and species discoveries.
              </p>

          </div>

          @if ($achievements->count())
              <div id="achievementCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel"
                  data-bs-interval="6000" data-bs-pause="hover">

                  <!-- Indicators -->
                  <div class="carousel-indicators">

                      @foreach ($achievements as $achievement)
                          <button type="button" data-bs-target="#achievementCarousel"
                              data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"
                              aria-current="{{ $loop->first ? 'true' : 'false' }}">
                          </button>
                      @endforeach

                  </div>

                  <div class="carousel-inner">

                      @foreach ($achievements as $achievement)
                          <div class="carousel-item {{ $loop->first ? 'active' : '' }}">

                              <div class="achievement-card">

                                  <div class="row align-items-center g-0">

                                      <!-- Left Image -->
                                      <div class="col-lg-5">

                                          <div class="achievement-image">

                                              @if (!empty($achievement->szImage))
                                                  <img src="{{ asset('uploads/images/achievements/' . $achievement->szImage) }}"
                                                      class="img-fluid w-100" alt="{{ $achievement->szTitle }}">
                                              @else
                                                  <img src="{{ asset('images/no-image.png') }}" class="img-fluid w-100"
                                                      alt="No Image">
                                              @endif

                                              <div class="achievement-overlay">

                                                  <span>
                                                      Achievement
                                                  </span>

                                              </div>

                                          </div>

                                      </div>

                                      <!-- Right Content -->
                                      <div class="col-lg-7">

                                          <div class="achievement-content">

                                              <span class="achievement-tag">

                                                  Zoological Survey of India

                                              </span>

                                              <h2>

                                                  {{ $achievement->szTitle }}

                                              </h2>

                                              <p>

                                                  {!! Str::limit(strip_tags($achievement->szContent), 450) !!}

                                              </p>

                                              <div class="d-flex align-items-center gap-3 mt-4">

                                                  @if (!empty($achievement->szDocument))
                                                      <a href="{{ asset('uploads/documents/achievements/english/' . $achievement->szDocument) }}"
                                                          target="_blank" class="btn btn-success achievement-btn">

                                                          Read More

                                                      </a>
                                                  @endif

                                              </div>

                                          </div>

                                      </div>

                                  </div>

                              </div>

                          </div>
                      @endforeach

                  </div>

                  @if ($achievements->count() > 1)
                      <!-- Previous -->

                      <button class="carousel-control-prev" type="button" data-bs-target="#achievementCarousel"
                          data-bs-slide="prev">

                          <span class="carousel-control-prev-icon"></span>

                      </button>

                      <!-- Next -->

                      <button class="carousel-control-next" type="button" data-bs-target="#achievementCarousel"
                          data-bs-slide="next">

                          <span class="carousel-control-next-icon"></span>

                      </button>
                  @endif

              </div>
          @else
              <div class="text-center py-5">

                  <img src="{{ asset('images/no-data.svg') }}" width="180">

                  <h4 class="mt-4">

                      No Achievements Available

                  </h4>

              </div>
          @endif

      </div>

  </section>