<?php
/**
 * Template Name:Our Services Template
 *
 *
 */
$img_bg = get_theme_mod('vw_book_store_pro_our_records_bg_image');
  if( get_theme_mod('vw_book_store_pro_our_records_bg_color') ) { 
    $about_backg = 'background-color:'.esc_attr( get_theme_mod('vw_book_store_pro_our_records_bg_color') ).';';
  }elseif( get_theme_mod('vw_book_store_pro_our_records_bg_image') ){
    $about_backg = 'background-image:url(\''.esc_url( get_theme_mod('vw_book_store_pro_our_records_bg_image') ).'\')';
  }else{
    $about_backg = ''; 
  }
  $number = get_theme_mod('vw_book_store_pro_our_records_number');
 get_header();
get_template_part('template-parts/banner');
?>
<div class="container services-main mt-0 mt-sm-5 pt-0 pt-sm-2 pb-0 pb-sm-5 wow slideInUp delay-3000 animated" data-wow-duration="2s">
   <div class="row">
    <h3 class="services-heading1 text-center"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_main_head')); ?></h3>
         <p class="services-para1 mt-0 mt-sm-3 mb-0 mb-sm-4 text-center"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_para')); ?></p>
      <div class="col-md-6 mt-0 mt-sm-5">
          <img class="servicesimg" src="<?php echo esc_html(get_theme_mod('vw_book_store_pro_services_page_img')); ?>">
      </div>
      <div class="col-md-6 mt-0 mt-sm-5 pt-0 pt-sm-3">
        <p class="services_heads"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_headings1')); ?></p>
         <span class="services-arrows"><p class="services-text"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_paragra1')); ?></p></span>
          <p class="services_heads"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_headings2')); ?></p>
          <span class="services-arrows"><p class="services-text"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_paragra2')); ?></p></span>
           <p class="services_heads"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_headings3')); ?></p>
           <span class="services-arrows"><p class="services-text"><?php echo esc_html(get_theme_mod('vw_book_store_pro_services_paragra3')); ?></p></span>
           
      </div>
      
   </div>
   
</div>
<section id="our_records" style="<?php echo esc_attr($about_backg); ?>" class="mt-0 mt-sm-4 <?php echo esc_attr($img_bg); ?>">
    <div class="container-fluid">
      <div class="row">
        <?php
          for ($i=1; $i<=$number; $i++) {
            if( get_theme_mod('vw_book_store_pro_counter_bgcolor'.$i) ) { 
              $counter_backg = 'background-color:'.esc_attr( get_theme_mod('vw_book_store_pro_counter_bgcolor'.$i) ).';';
            }elseif( get_theme_mod('vw_book_store_pro_counter_bgimage'.$i) ){
              $counter_backg = 'background-image:url(\''.esc_url( get_theme_mod('vw_book_store_pro_counter_bgimage'.$i) ).'\')';
            }else{
              $counter_backg = ''; 
            }
            ?>
              <div class="col-md-3 col-sm-6">
                <div class="counter_inner text-center wow zoomInUp delay-3000 animated" style="<?php echo esc_attr($counter_backg); ?>" data-wow-duration="2s">
                  <div class="counter-box">
                    <?php if( get_theme_mod('vw_book_store_pro_our_records_image'.$i) != ''){ ?>
                      <img class="mb-2" src="<?php echo esc_url(get_theme_mod('vw_book_store_pro_our_records_image'.$i)); ?>" alt="">
                    <?php } ?>
                      <h4 class="vwcount"><?php echo esc_html(get_theme_mod('vw_book_store_pro_number_title1'.$i)); ?></h4>
                    <div class="radius-para">
                      <p class="text-uppercase"><?php echo esc_html(get_theme_mod('vw_book_store_pro_circle_content1'.$i)); ?></p>
                    </div>
                  </div>
                </div>
              </div>
            <?php
          }
        ?>
      </div>
    </div>   
    <div class="clearfix"></div>
  </section>
<?php get_footer(); ?>