如何在主页上显示具有自己的自定义帖子类型的自定义类别，每个类型位于不同的<section>中

I've been trying to accomplish that (above question) without success. Researched for a while different ways to accomplish it, but i got stuck at some point. I created a CPT ("service") with its own taxonomy ("service_category"), 3 categories; and I'd like to display each custom category with its correspondent custom posts types each in a different . The html code is as follow:

                 <!-- .grid_4 .service-box start 1 -->
                <section class="grid_4 service-box">
                    <div class="service-info">

                        <div class="service-info-icon">
                            <i class="service-icon icon-write"></i>
                        </div>

                        <div class="service-info-title">
                            <a href="">
                                <h6>Copywriting</h6>
                            </a>

                            <span>Great copy is very important</span>  
                        </div>
                    </div>

                    <ul><li>
                        There are many variations of passages of Lorem 
                        Ipsum available, but the majority have suffered 
                        alteration in some form.

                </section><!-- .grid_4 .service-box end -->

                <!-- .grid_4 .omega .service-box start -->
                <section class="grid_4 service-box">
                    <div class="service-info">

                        <div class="service-info-icon">
                            <i class="service-icon icon-mac"></i>
                        </div>
                        <div class="service-info-title">
                            <a href="">
                                <h6>Responsive design</h6>
                            </a>

                            <span>It looks good on mobile too</span> 
                        </div>

                    </div>

                    <ul>
                        <li>display CPT title here</li>
                    </ul>
                </section><!-- .grid_4 .omega .service-box end -->

I tried the following code, but it's not giving me the expected result.

<?php $cat_args = array(
                                            'taxonomy' => 'service_category', 
                                            'orderby' => 'slug', 
                                            'order' => 'ASC'
                                        );
                                        $cats = get_categories($cat_args); // passing in above parameters
                                        foreach ($cats as $cat) : // loop through each cat
                                             $cpt_query_args = new WP_Query( array(
                                            'post_type' => 'service',
                                            'service_sections' => $cat->name
                                            )
                                        );


                                  if ($cpt_query_args->have_posts()) : 
                                     while ($cpt_query_args->have_posts()) : $cpt_query_args->the_post(); ?>

                                    <!-- .grid_4 .service-box start -->
                                    <section class="grid_4 service-box">

                                        <?php echo '<h3>' . $cat->name . '</h3>'; ?>



                                    <div class="service-info">

                                        <div class="service-info-icon">
                                            <i class="service-icon icon-mac"></i>
                                        </div>

                                        <div class="service-info-mac">
                                            <!--<div id="<?php //echo $cat->slug; ?>">-->


                                             <!--<div class="<?php //echo $cat->slug; ?>" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>--> 
                                                    <h6> <?php the_title(); ?></h6>
                                                    <?php the_content(); ?>
                                                    <!--</div>-->
                                            <!--</div>-->
                                            </div>
                                        </div>

                            </section>

                            </section> 
                        <?php endwhile; 
                              endif; 
                            wp_reset_query();
                              endforeach; ?>

Any help will be greatly appreciated. Thank YOU!!