<?php   
if( get_theme_mod('peccular_service_enable',true) == true){ ?>

    <div class="services-area text-center" id="services">
        <div class="service-bg"></div>  
            <div class="<?php if(get_theme_mod('peccular_service_section_width','Box Width') == 'Box Width'){ ?>container<?php } elseif(get_theme_mod('peccular_service_section_width','Box Width') == 'Box Width'){ ?> container-fluid  <?php }?>">

            <?php
            $peccular_service_page_id = get_theme_mod('peccular_service_page'); 
            $peccular_services_maintitle = get_theme_mod('peccular_services_maintitle', 'Our <span>SERVICES</span>');
            $peccular_servicestitle2 = get_theme_mod('peccular_servicestitle2', 'There are many');          
            
            ?>                  
                    <?php if($peccular_services_maintitle || $peccular_servicestitle2){ ?>
                    <div class="col-lg-12 col-md-12 col-sm-12">

                        <div class="peccular-section-head" style="text-align: <?php if(get_theme_mod('peccular_services_head_align','Center') == 'Center'){ ?> center <?php } elseif(get_theme_mod('peccular_services_head_align','Left') == 'Left'){ ?> left <?php } elseif(get_theme_mod('peccular_services_head_align','Right') == 'Right'){ ?> right <?php } ?> ">
                           
                             <?php if($peccular_services_maintitle){ ?>
                                 <div class="head-border " style="text-align: <?php if(get_theme_mod('peccular_services_head_align','Center') == 'Center'){ ?> center <?php } elseif(get_theme_mod('peccular_services_head_align','Left') == 'Left'){ ?> left <?php } elseif(get_theme_mod('peccular_services_head_align','Right') == 'Right'){ ?> right <?php } ?> "></div>
                                <h2><?php echo ($peccular_services_maintitle);  ?></h2>
                                 <?php if($peccular_servicestitle2){ ?>
                                 <h4><?php echo ($peccular_servicestitle2);  ?></h4>
                             <?php }?>                                                  
                             <?php }?>                                                  
                        
                        </div>
                    </div>
                    <?php }?>
                
               <div class="row md-1">  
                <div class="owl-carousel owl-theme">
                <?php 
                $showStatic = true;
                $cols = get_theme_mod('peccular_service_number', 2);
                $cols++;
                switch($cols){
                    case 1:
                    $colCls = 'col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12';
                    break;
                    case 2: 
                    $colCls = 'col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12';
                    break;
                    case 3:
                    case 5:
                    case 6:
                    case 9:
                    case 11:
                    case 13:
                    case 15:
                    case 17:
                    case 19:
                    case 21:
                    case 23:
                    $colCls = 'col-lg-4 col-md-6 col-sm-6 col-xs-12';
                    break;
                    default: 
                    $colCls = 'col-lg-4 col-md-6 col-sm-6 col-xs-12';
                    break;
                }
                for( $i = 1; $i <= $cols; $i++ ){
                    $peccular_service_page_id = get_theme_mod('peccular_service_page'.$i); 
                    $peccular_service_page_icon_left = get_theme_mod('peccular_service_page_icon_left'.$i);
                    if($peccular_service_page_id){
                        $showStatic = false;
                        echo servicesShortCode($peccular_service_page_id, $isCustomizer=true, $i);
                    }
                }
                if($showStatic === true){
                    for( $i = 1; $i <= $cols; $i++ ){ ?>
                        <div class="item serbrdr pb-5">
                            <!-- <div class="row md-1">   -->
                           <div  service-match-height="groupName" class="peccular-service-box <?php echo esc_attr(get_theme_mod('peccular_service_box_onload_effects','wow zoomIn')); ?>" data-wow-duration="2s">
                               
                                    <div class="peccular-service-image">
                                    <a href="<?php the_permalink();?>">                                         
                                    <img class="peccular-service-img" src="<?php echo esc_url(get_template_directory_uri().'/images/serviceimg.jpg');?>" alt="service" style="height: <?php echo esc_attr(get_theme_mod('peccular_services_post_image_height','415')) ?>px;" />    
                                    <div class="overlay simple-overlay-3"></div>                            
                                     </a>   
                                      <div class="content-bor">
                                    <div class="peccular-service-content" style="text-align: <?php if(get_theme_mod('peccular_services_content_align','Left') == 'Left'){ ?> left <?php } elseif(get_theme_mod('peccular_services_content_align','Center') == 'Center'){ ?> center <?php } elseif(get_theme_mod('peccular_services_content_align','Right') == 'Right'){ ?> right <?php } ?> ">
                                        <div class="bg-icon">
                                            <span>
                                            <i class="fa fa-delicious" aria-hidden="true"></i></span>
                                        </div>
                                        <h4><a href="<?php the_permalink(); ?>" style="text-transform : <?php if(get_theme_mod('peccular_service_title_case','Capitalize') == 'Capitalize'){ ?> Capitalize <?php } elseif(get_theme_mod('peccular_service_title_case','Lowercase') == 'Lowercase'){ ?> lowercase <?php } elseif(get_theme_mod('peccular_service_title_case','Capitalize') == 'Capitalize'){ ?> capitalize <?php } elseif(get_theme_mod('peccular_service_title_case','Uppercase') == 'Uppercase'){ ?> uppercase <?php } ?> ">Solar Panel</a>
                                        </h4>                                         
                                        <p>There are many variations of passages of Lorem Ipsum

                                            <?php //$peccular_excerpt = get_the_excerpt(); echo esc_html( peccular_string_limit_words( $peccular_excerpt, esc_attr(get_theme_mod('peccular_services_post_excerpt','15')) ) ); ?></p>

                                    <div class="clearfix"></div>
                                     <?php
                                        $peccular_service_button_text = get_theme_mod('peccular_service_button_text', 'Read more'); ?>
                                     <?php if( get_theme_mod('peccular_service_button_enable',true) == true){ ?>
                                        <a href="<?php the_permalink(); ?>" class="service-btn"><?php echo ($peccular_service_button_text );  ?></a>
 
                                    <?php }?>                           
                                             
                                <div class="clearfix"></div> 
                                </div>   
                                 </div>

                                    </div><!-- div image-->                                     
                                    
                               <!--  <div class="content-bor">
                                    <div class="peccular-service-content" style="text-align: <?php if(get_theme_mod('peccular_services_content_align','Left') == 'Left'){ ?> left <?php } elseif(get_theme_mod('peccular_services_content_align','Center') == 'Center'){ ?> center <?php } elseif(get_theme_mod('peccular_services_content_align','Right') == 'Right'){ ?> right <?php } ?> ">
                                        <div class="bg-icon">
                                            <span>
                                            <i class="fa fa-delicious" aria-hidden="true"></i></span>
                                        </div>
                                        <h4><a href="<?php the_permalink(); ?>" style="text-transform : <?php if(get_theme_mod('peccular_service_title_case','Capitalize') == 'Capitalize'){ ?> Capitalize <?php } elseif(get_theme_mod('peccular_service_title_case','Lowercase') == 'Lowercase'){ ?> lowercase <?php } elseif(get_theme_mod('peccular_service_title_case','Capitalize') == 'Capitalize'){ ?> capitalize <?php } elseif(get_theme_mod('peccular_service_title_case','Uppercase') == 'Uppercase'){ ?> uppercase <?php } ?> ">Solar Panel</a>
                                        </h4>                                         
                                        <p>There are many variations of passages of Lorem Ipsum

                                            <?php //$peccular_excerpt = get_the_excerpt(); echo esc_html( peccular_string_limit_words( $peccular_excerpt, esc_attr(get_theme_mod('peccular_services_post_excerpt','15')) ) ); ?></p>

                                    <div class="clearfix"></div>
                                     <?php
                                        $peccular_service_button_text = get_theme_mod('peccular_service_button_text', 'Read more'); ?>
                                     <?php if( get_theme_mod('peccular_service_button_enable',true) == true){ ?>
                                        <a href="<?php the_permalink(); ?>" class="service-btn"><?php echo ($peccular_service_button_text );  ?></a>
 
                                    <?php }?>                           
                                             
                                <div class="clearfix"></div> 
                                </div>   
                                 </div> -->
                                
                            </div> 
                            <!-- </div>     -->                       
                        </div>
                        <?php 
                    }
                } ?>
            </div>
            <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
            </div>
        <div class="clearfix"></div>
    </div>
</div>
<script>
        $(document).ready(function() {
          $('#services .owl-carousel').owlCarousel({
           slideSpeed : 1500,
            autoplay: false,
              loop: true,
              margin: 10,
              responsiveClass: true,
              responsive: {
                0: {
                  items: 1,
                  nav: false,
                   dots: false
                },
                600: {
                  items:2,
                  nav: false,
                  dots: false
                },
                1000: {
                  items:3,
                  nav: true,
                  loop: true,
                  margin: 10
              }
            }
          })
        })
      
    var matchHeight = function () {
    
    function init() {
        eventListeners();
        matchHeight();
    }
    
    function eventListeners(){
        $(window).on('resize', function() {
            matchHeight();
        });
    }
    
    function matchHeight(){
        var groupName = $('[service-match-height]');
        var groupHeights = [];
        
        groupName.css('min-height', 'auto');
        
        groupName.each(function() {
            groupHeights.push($(this).outerHeight());
        });
        
        var maxHeight = Math.max.apply(null, groupHeights);
        groupName.css('min-height', maxHeight);
    };
    
    return {
        init: init
    };
    
} ();

$(document).ready(function() {
    matchHeight.init();
});
</script>
<?php }?>