<?php
if (get_theme_mod('expert_ngo_volunteer_service_enable', true) != '') : ?>
<section id="service" class="my-5 px-md-0 px-3">
    <div class="container">
        <?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 : ?>
                                            <div class="post-color"></div>
                                        <?php endif; ?>
                                        
                                        <?php if ($expert_ngo_volunteer_youtube_url) : ?>
                                            <a href="<?php echo esc_url($expert_ngo_volunteer_youtube_url); ?>" class="youtube-icon-overlay" target="_blank">
                                                <i class="fas fa-play"></i>
                                            </a>
                                        <?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">
                            <?php if (get_theme_mod('expert_ngo_volunteer_service_sub_heading') != '') : ?>
                                <p class="mb-2 abt-title"><?php echo esc_html(get_theme_mod('expert_ngo_volunteer_service_sub_heading')); ?></p>
                            <?php endif; ?>
                            <h2 class="mb-2"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                            <p class="mb-3 abt-content"><?php echo esc_html(wp_trim_words(get_the_content(), 25)); ?></p>
                            <div class="read-btn mt-lg-3 mt-2 text-start">
                                <a class="text-uppercase" href="<?php the_permalink(); ?>"><?php esc_html_e('Donate Now', 'expert-ngo-volunteer'); ?></a>
                            </div>
                        </div>
                    </div>
                <?php endwhile;
                wp_reset_postdata();
            endif;
        endif; ?>
    </div>
</section>
<?php endif; ?>