  <!-- About Section -->
  <section class="aboutus section-container container-white " data-aos="fade-up" data-aos-delay="100">
      <div class="container">
          <h2 class="title-span-hd">About Us</h2>
          <p class=" title-span-head">Who we are</p>
          <?php if (have_posts()): while (have_posts()): the_post(); ?>

                  <?php the_content(); ?>

          <?php endwhile;
            else: endif; ?>

      </div>


  </section>

  <!-- Legal Services Section -->
  <section class="legal-services section-container" data-aos="fade-up" data-aos-delay="100">
  <div class="container" data-aos="fade-up" data-aos-delay="550">
    <h2 class="title-span-hd">Legal Services</h2>
    <p class="title-span-head">We Provide</p>

    <?php if (have_rows('legal_tabs')): ?>
        <div class="tab-nav-bar">
            <div class="tab-navigation">
                <ion-icon class="left-btn" name="chevron-back-outline"></ion-icon>
                <ion-icon class="right-btn" name="chevron-forward-outline"></ion-icon>
                <ul class="tab-menu">
                    <?php 
                    // Loop to display tab titles in the navigation
                    while (have_rows('legal_tabs')): the_row(); ?>
                        <li class="tab-btn"><?php the_sub_field('tab_title'); ?></li>
                    <?php endwhile; ?>
                </ul>
            </div>
        </div>

        <div class="tab-content">
            <?php 
            $is_first_tab = true; // Initialize a variable to check for the first tab
            while (have_rows('legal_tabs')): the_row(); ?>
                <div class="tab <?php if ($is_first_tab) echo 'active'; ?>"> <!-- Add active class to the first tab -->
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="img-card">
                                <?php
                                $image = get_sub_field('tab_image');
                                if (!empty($image)): ?>
                                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="info">
                                <h2 class="city"><?php the_sub_field('tab_title'); ?></h2>
                                <div class="description">
                                    <?php the_sub_field('tab_content'); ?>
                                    <div class="row">
                                        <?php if (have_rows('custom_bullets')): ?>
                                            <?php
                                            $bullet_count = 0;
                                            while (have_rows('custom_bullets')): the_row();
                                                if ($bullet_count % 4 == 0): // Start a new column every 4 items
                                            ?>
                                                <div class="col-md-5">
                                                    <ul class="custom-bullets">
                                            <?php endif; ?>
                                            <li><?php the_sub_field('bullet_item'); ?></li>
                                            <?php
                                            $bullet_count++;
                                            if ($bullet_count % 4 == 0): // Close the column after 4 items
                                            ?>
                                                    </ul>
                                                </div>
                                            <?php endif; ?>
                                            <?php endwhile; ?>
                                            <?php
                                            // Close the last column if it didn't reach 4 items
                                            if ($bullet_count % 4 != 0):
                                            ?>
                                                </ul>
                                            </div>
                                            <?php endif; ?>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php $is_first_tab = false; // Set to false after the first tab is rendered ?>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>
</div>




  <div><img src="https://demo.kitllp.com/assets/img/law-image.png" class="img__back" alt=""></div>

  <div class="container custom-box   py-4 ">

      <div class="row justify-content-around gy-4">

          <div
              class="col-lg-7 custom-margin-top d-flex flex-column justify-content-center order-2 order-lg-1 aos-init aos-animate"
              data-aos="fade-up" data-aos-delay="100">
              <h2 class="title-span-hd text-center pb-2 aos-init aos-animate" data-aos="fade-up" data-aos-easing="linear"
                  data-aos-duration="1900">We Are Here to Help</h2>
              <p class="text-center"> you've come to the right place Let’s get started!


              </p>


              <a href="/request-a-quote" class="btn btn-custom">CONSULTATION</a>



          </div>

          <!-- <div class="features-image col-lg-4 order-1 order-lg-2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
            <img src="assets/img/Nzamba-kinga.jpg" alt="">
        </div> -->

      </div>

  </div>


  </section>



  <!-- Why Us  Section -->
  <section class="why-us section-container container-white bg-image-why" data-aos="fade-up" data-aos-delay="100">
      <div class="container why-us-wrapper">
          <div class="col-12 mb-5">

              <h2 class="title-span-hd ">Why Choose Our </h2>
              <p class="title-span-head d-block text-white">Legal Expertise?</p>

          </div>
          <div class="row g-4 mt-5">
              <div class="col-md-4 text-center">
                  <img
                      src="https://assets-global.website-files.com/6465bebdc105799595c7d0ba/646c5cd6f32cc531d705734d_Group%2090.svg"
                      loading="lazy" alt="Experienced" class="mb-3">
                  <p class="h5 card__title_white">Experienced</p>
                  <p class="why__text">
                      A seasoned group of lawyers boasting extensive experience and a well-established history of achievements</p>
              </div>
              <div class="col-md-4 text-center">
                  <img
                      src="https://assets-global.website-files.com/6465bebdc105799595c7d0ba/646c5cd607b99fb154430af6_Vector%20(7).svg"
                      loading="lazy" alt="Approachable" class="mb-3">
                  <p class="h5 card__title_white">Result-Oriented

                  </p>
                  <p class="why__text">
                      Dedicated to achieving outcomes, employing a straightforward method to secure the optimal result for client
                  </p>
              </div>
              <div class="col-md-4 text-center">
                  <img
                      src="https://assets-global.website-files.com/6465bebdc105799595c7d0ba/646c5cd65465c5fb80c80961_Group%2091.svg"
                      loading="lazy" alt="Affordable" class="mb-3">
                  <p class="h5 card__title_white">Affordable</p>
                  <p class="why__text">Offering budget-friendly fee structures, including contingency and flat-fee option
                  </p>
              </div>
          </div>
      </div>
  </section>



  <!-- Our Team Section  -->

  <section class="OurTeam section-container" data-aos="fade-up">
    <div class="container mt-5">
        <div class="row mb-3">
            <img src="https://demo.kitllp.com/assets/img/Team.png" class="attorneys__back" alt="">
            <div class="col-12 col-md-6">
                <div class="row">
                    <?php if (have_rows('our_team')): ?>
                        <?php while (have_rows('our_team')): the_row(); ?>
                            <div class="col-6 mb-4" data-aos="zoom-in-up" data-aos-duration="200">
                                <div class="card border-0 rounded-card">
                                    <?php
                                    $image = get_sub_field('team_member_image');
                                    $name = get_sub_field('team_member_name');
                                    $position = get_sub_field('team_member_position');
                                    $link = get_sub_field('team_member_link');
                                    ?>
                                    <?php if ($image): ?>
                                        <img src="<?php echo esc_url($image['url']); ?>" class="card-img-top rounded-card" alt="<?php echo esc_attr($name); ?>">
                                    <?php endif; ?>
                                    <div class="card-body">
                                        <h5 class="card-title card-text-title"><?php echo esc_html($name); ?></h5>
                                        <p class="card-text card-text-p"><?php echo esc_html($position); ?></p>
                                    </div>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
             <!-- Expertise Section -->
             <div class="col-12 col-md-6 d-flex flex-column justify-content-between">
                <?php if (have_rows('experitise_team')): ?>
                    <?php while (have_rows('experitise_team')): the_row(); ?>
                        <div class="expertise-section">
                            <h2 class="title-span-head"><?php the_sub_field('expertise_section_title'); ?></h2>
                            <h4 class="title-span-hd team__title"><?php the_sub_field('expertise_section_subtitle'); ?></h4>
                            <div class="expertise-content">
                                <?php the_sub_field('expertise_section_content'); ?>
                            </div>
                            <?php if ($expertise_image = get_sub_field('expertise_section_image')): ?>
                                <img src="<?php echo esc_url($expertise_image['url']); ?>" alt="<?php echo esc_attr($expertise_image['alt']); ?>" class="mt-auto">
                            <?php endif; ?>
                        </div>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>



  <!-- Client Testimonials  Section -->

  <section class="Testimony section-container container-white" data-aos="fade-up" data-aos-delay="100">
    <div class="container">
        <div><img src="https://demo.kitllp.com/assets/img/law-image.png" class="img__back" alt=""></div>
        <h2 class="title-span-hd">Hear it from</h2>
        <p class="title-span-head">Our Clients</p>

        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="testimonial-bg">
                    <div id="testimonial-slider" class="owl-carousel">
                        <?php if (have_rows('testimonies')): ?>
                            <?php while (have_rows('testimonies')): the_row(); ?>
                                <div class="testimonial">
                                <p>
                                        <?php the_sub_field('testimonial_text'); ?>
                                    </p>

                                    <p class="description"></p>
                                    <div class="pic">
                                        <?php if ($image = get_sub_field('client_image')): ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                        <?php endif; ?>
                                    </div>
                                    <h3 class="title"><?php the_sub_field('client_name'); ?></h3> 
                                    <span class="post"><?php the_sub_field('job_title'); ?></span>
                                  
                                 
                                    <div class="stars">
                                        <?php 
                                        $rating = get_sub_field('rating');
                                        for ($i = 0; $i < 5; $i++): 
                                            if ($i < $rating):
                                        ?>
                                            <i class="bi bi-star-fill"></i>
                                        <?php else: ?>
                                            <i class="bi bi-star"></i>
                                        <?php endif; ?>
                                        <?php endfor; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
