<section id="ourservice-section" class="ourservice-area home-ourservice">
    <?php 
        $toppawingicon = get_template_directory_uri().'/assets/images/toppawimage.png';
    ?>
    <div class="container">  
        <div class="headingbx">
            <h6><?php echo esc_html(get_theme_mod('ourservice_subtitle', 'Our Services')); ?></h6>
            <h4><?php echo esc_html(get_theme_mod('ourservice_title', 'Comprehensive Pet Care Services')); ?></h4>
            <P><?php echo esc_html(get_theme_mod('ourservice_description', 'From preventive care to emergency treatment, we offer a full range of veterinary services for your beloved pets.')); ?></P>
        </div>
       <!--  <div class="heading">
            <div class="headinginn">
                <h4>
                </h4>
                <h2></h2>
                <p></p>
            </div>
        </div>  -->              
        <div class="ourtbx"> 
            <div class="row sbx">
                <?php for($p=1; $p<7; $p++) { ?>
                <?php if( get_theme_mod('ourservice'.$p,false)) { ?>
                <?php $querycolumns = new WP_query('page_id='.get_theme_mod('ourservice'.$p,true)); ?>
                <?php while( $querycolumns->have_posts() ) : $querycolumns->the_post(); 
                $image = wp_get_attachment_image_src(get_post_thumbnail_id() , true); ?>
                <?php 
                if(has_post_thumbnail()){
                    $img = esc_url($image[0]);
                }
                if(empty($image)){
                    $img = get_template_directory_uri().'/assets/images/default.png';
                }
                ?>

                <div class=" col-lg-4 col-md-4 col-sm-6 box-space ">
                    <div class="threebox box<?php echo esc_attr( $p ) ?> <?php if($p % 3 == 0) { echo "last_column"; } ?>">  
                        <div class="single-ourservice">
                            <div class="imgbx">
                                <a href="<?php echo esc_url( get_permalink() ); ?>">
                                    <img src="<?php echo esc_url($img); ?>" alt="<?php the_title_attribute(); ?>"> 
                                    <div class="icnbx"> 
                                        <i class="fa-solid fa-stethoscope"></i>
                                    </div>
                                </a> 
                            </div> 
                            <div class="sercontbx">
                                <a href="<?php echo esc_url( get_permalink() ); ?>">
                                    <h3 class="title"><?php the_title_attribute(); ?></h3>
                                </a>
                                <?php
                                    if (has_excerpt()) {
                                        echo get_the_excerpt();
                                    } else {
                                        echo get_the_content();
                                    }
                                ?>
                                <div class="bttn">
                                    <a href="<?php echo esc_url( get_permalink() ); ?>">
                                        <?php esc_html_e( 'Learn More', 'pet-care-veterinary-center' ); ?> 
                                        <i class="fa-solid fa-arrow-right"></i>
                                    </a>
                                </div>
                                <!-- </?php the_excerpt(); ?> -->
                                <div class="clearfix"></div>
                            </div>    		
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <?php endwhile;
            wp_reset_postdata(); ?>
            <?php } } ?>
            <div class="clear"></div> 
            </div>
        </div> 
           
        
	</div>
</section>
