function serviceWithTabs()
{
    $arg = array('post_type' => 'service', 'posts_per_page' => -1, );
    $servicesPost = new WP_Query($arg);
    ?>

    <div class="icons-tabs">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <?php $counter = 0;
            while ($servicesPost->have_posts()):
                $counter++;
               ?>
                <?php $servicesPost->the_post();
                $url = wp_get_attachment_url(get_post_thumbnail_id($servicesPost->ID)); ?>
                <li class="nav-item" role="presentation">
                 <button class="nav-link <?php echo $counter === 1 ? 'active' : ''; ?>" id="pills-home-tab<?php echo $counter ?>"
                        data-bs-toggle="pill" data-bs-target="#pills-home<?php echo $counter ?>" type="button" role="tab"
                        aria-controls="pills-home" aria-selected="<?php echo $counter === 1 ? 'true' : 'false'; ?>">
                        <div class="icon-boxes">
                            <div class="icon-img">
                                <img src="<?php echo get_field('service_icon') ?>" alt="">
                            </div>
                            <h4>
                                <?php the_title(); ?>
                            </h4>
                        </div>
                    </button>
                </li>

            <?php endwhile; ?>
        </ul>
    </div>
    <div class="tab-content" id="pills-tabContent">
        <?php
        $counter = 0;
        while ($servicesPost->have_posts()):
            $counter++;
            ?>
            <?php $servicesPost->the_post();
            $url = wp_get_attachment_url(get_post_thumbnail_id($servicesPost->ID)); ?>
          <div class="tab-pane <?php echo $counter === 1 ? 'active' : ''; ?>" id="pills-home<?php echo $counter ?>"
                role="tabpanel" aria-labelledby="pills-home-tab<?php echo $counter ?>">
                <div class="man-power">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="power-cont">
                                <h2>
                                <?php echo get_field('service_tab_tittle') ?>
                                </h2>
                                <div>
                                <?php echo get_field('service_tab_content') ?>
                            </div>
                                <div class="engine-list">
                                    <ul>
                                        <li><?php echo get_field('points_1') ?></li>
                                        <li><?php echo get_field('points_1') ?></li>
                                    </ul>
                                    <ul>
                                      <li><?php echo get_field('points_1') ?></li>
                                      <li><?php echo get_field('points_1') ?></li>
                                    </ul>
                                    <ul>
                                      <li><?php echo get_field('points_1') ?></li>
                                      <li><?php echo get_field('points_1') ?></li>
                                    </ul>
                                </div>
                                <a href="<?php the_permalink(); ?>" class="btn ban-btn"><?php echo get_field('btntxt') ?><img
                                        src="<?php echo get_template_directory_uri(); ?>/img/right-arrows.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="manpowerimg">
                                <img src="<?php echo get_field('service_tab_image') ?>" alt="tabsimage">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>
    </div>



    <?php
    wp_reset_postdata();
}
add_shortcode('services-WithTabs', 'serviceWithTabs');