How do i loop to display post category title? - categories

Question

Please, pardon me for unending questions. I am just a newbie as far as wordpress theme development is concerned. I am just cracking my brain to get something done. I have successfully worked on my code and it gives one category title. The category title of the post is not appropriate. I beg someone out there to help look into my code below and help me correct where necessary. I am just tired over this issue.
I want it to display appropriate category title above the post as you can see about. The category title is outside the loop and not within. It is equally not in category page rather at the front page.
`<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 6,
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => 'building',
)
)
);
$q = new WP_Query( $args );
$leadingcount = 3;
$cats = get_terms( array( 'taxonomy' => 'product_cat' ) );
// loop through the categries
foreach ($cats as $cat) {
// setup the cateogory ID
$cat_id= $cat->term_id;
// Make a header for the cateogry
echo "<h6 class='mt-5 text-center'>".$cat->name."</h6>"; ?>
<?php if (have_posts()) : while ( $q->have_posts() ) : $q->the_post(); ?>
<article class="item col-lg-<?php echo $leadingcount; ?>">
<div class="card rounded-0">
<div class="card-body">
<a href="<?php the_permalink(); ?>">
<h5><?php the_title(); ?></h5>
</a>
<?php the_excerpt(); ?>
<?php the_category(); ?>
</div>
</div>
</article>
<?php endwhile; endif; // done our wordpress loop. Will start again for each category ?>
<?php } // done the foreach statement ?>
`