<?php
if (get_theme_mod('expert_ngo_volunteer_service_enable', true) != '') : ?>
<section id="service" class="my-0">
    <div class="container-fluid">
        <?php
        $expert_ngo_volunteer_about_page_id = absint(get_theme_mod('expert_ngo_volunteer_about_page', get_page_id_by_slug('donate-page')));
        $expert_ngo_volunteer_youtube_url = get_theme_mod('expert_ngo_volunteer_youtube_url', '#');
        $expert_ngo_volunteer_servicesec_button = get_theme_mod('expert_ngo_volunteer_servicesec_button', '');
        
        if ($expert_ngo_volunteer_about_page_id != 0) :
            $expert_ngo_volunteer_args = array(
                'post_type' => 'page',
                'p' => $expert_ngo_volunteer_about_page_id
            );
            $expert_ngo_volunteer_query = new WP_Query($expert_ngo_volunteer_args);
            if ($expert_ngo_volunteer_query->have_posts()) :
                while ($expert_ngo_volunteer_query->have_posts()) : $expert_ngo_volunteer_query->the_post(); ?>
                    <div class="row">
                        <div class="col-lg-6 col-md-6 image-abt px-0 align-self-center wow fadeInRight" data-wow-delay="0.5s">
                            <div class="about-block position-relative">
                                <div class="about-image1">
                                    <div class="thumbnail position-relative">
                                        <?php if (has_post_thumbnail()) : ?>
                                            <?php the_post_thumbnail('full'); ?>
                                        <?php else : ?>
                                            <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/about.png" alt="Default Image">
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 abt-content-box align-self-center px-md-5 wow fadeInLeft" data-wow-delay="0.5s">
                            <div class="right-abt-col">
                                <?php if (get_theme_mod('expert_ngo_volunteer_service_sub_heading') != '') : ?>
                                    <p class="abt-title"><?php echo esc_html(get_theme_mod('expert_ngo_volunteer_service_sub_heading')); ?></p>
                                <?php endif; ?>
                                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                <p class="abt-content"><?php echo esc_html(wp_trim_words(get_the_content(), 50)); ?></p>
                                <div class="read-btn mt-lg-3 mt-2 text-start">
                                    <a class="text-capitalize" href="<?php the_permalink(); ?>"><?php esc_html_e('Donate Now', 'nonprofit-give'); ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endwhile;
                wp_reset_postdata();
            endif;
        endif; ?>
    </div>
</section>
<?php endif; ?>