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

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

			<?php
			$dinero_service_page_id = get_theme_mod('dinero_service_page');	
			$dinero_services_maintitle = get_theme_mod('dinero_services_maintitle', 'OUR SERVICES');
			$dinero_services_subtitle = get_theme_mod('dinero_services_subtitle', 'WORKING COMPANY FACILITY');
			
			?>
			
				<div class="row ">
					<?php if($dinero_services_maintitle || $dinero_services_subtitle){ ?>
					<div class="col-xl-12 col-lg-12 col-sm-12">
						<div class="dinero-section-head" style="text-align: <?php if(get_theme_mod('dinero_services_head_align','Left') == 'Left'){ ?> left <?php } elseif(get_theme_mod('dinero_services_head_align','Center') == 'Center'){ ?> center <?php } elseif(get_theme_mod('dinero_services_head_align','Right') == 'Right'){ ?> right <?php } ?> ">
							 <?php if($dinero_services_maintitle){ ?>
		                        <h2><?php echo ($dinero_services_maintitle);  ?></h2>
		                        <?php }?>
							   <?php if( get_theme_mod('dinero_service_head_icon_enable','No') == 'Yes'){ ?>
          						<div class="dinero-section-head-icon">
      								<i class="<?php echo esc_attr(get_theme_mod('dinero_service_head_icon' . $i, 'fa fa-bell')); ?>"></i>
      							</div>
      							<?php }?>
							<h3><?php echo ($dinero_services_subtitle);  ?></h3>								
						</div>
					<?php }?>
				</div>
	           <div class="row">  
                <?php 
                $showStatic = true;
                $cols = get_theme_mod('dinero_service_number', 2);
                $cols++;
                switch($cols){
                    case 1:
                    $colCls = 'col-md-12 col-sm-12';
                    break;
                    case 2: 
                    $colCls = 'col-md-6 col-sm-6';
                    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-md-4 col-sm-6';
                    break;
                    default: 
                    $colCls = 'col-md-3 col-sm-6';
                    break;
                }
                for( $i = 1; $i <= $cols; $i++ ){
                    $dinero_service_page_id = get_theme_mod('dinero_service_page'.$i); 
                    //$dinero_service_page_icon = get_theme_mod('dinero_service_page_icon'.$i);
                    if($dinero_service_page_id){
                        $showStatic = false;
                        echo servicesShortCode($dinero_service_page_id, $isCustomizer=true, $i);
                    }
                }
                if($showStatic === true){
                    for( $i = 1; $i <= $cols; $i++ ){ ?>
                        <div class="<?php echo $colCls;?>">
                           <div  service-match-height="groupName" class="dinero-service-box <?php echo esc_attr(get_theme_mod('dinero_service_box_onload_effects','wow zoomIn')); ?>" data-wow-duration="2s">
                                 <div class="dinero-service-image">
	                                <a href="<?php the_permalink(); ?>">
	                                    <img class="dinero-service-img" src="<?php echo esc_url(get_template_directory_uri().'/images/default.png');?>" alt="service" style="height: <?php echo esc_attr(get_theme_mod('dinero_services_post_image_height','200')) ?>px;" />
	                                    <div class="overlay"></div>
	                                </a>
                                </div>
                                   <?php if( get_theme_mod('dinero_service_icon_enable',true) == true){ ?>
                                    <div class="dinero-service-icon">
                                        <i class="<?php echo esc_attr(get_theme_mod('dinero_service_icon' . $i, 'fa fa-bar-chart')); ?>"></i>
                                    </div>
	      							<?php }?>
    	      						<div class="dinero-service-content" style="text-align: <?php if(get_theme_mod('dinero_services_content_align','Left') == 'Left'){ ?> left <?php } elseif(get_theme_mod('dinero_services_content_align','Center') == 'Center'){ ?> center <?php } elseif(get_theme_mod('dinero_services_content_align','Right') == 'Right'){ ?> right <?php } ?> ">
    				            		<h4><a href="<?php the_permalink(); ?>" style="text-transform : <?php if(get_theme_mod('dinero_service_title_case','Uppercase') == 'Uppercase'){ ?> uppercase <?php } elseif(get_theme_mod('dinero_service_title_case','Lowercase') == 'Lowercase'){ ?> lowercase <?php } elseif(get_theme_mod('dinero_service_title_case','Capitalize') == 'Capitalize'){ ?> capitalize <?php } ?> ">Financial Analysis</a></h4>
    				            		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor</p> 
                                        <?php
                                             $dinero_service_button_text = get_theme_mod('dinero_service_button_text', 'READ MORE'); ?>
                                         <?php if( get_theme_mod('dinero_service_button_enable',true) == true){ ?>
                                            <a href="<?php the_permalink(); ?>" class="read-btn"><?php echo ($dinero_service_button_text );  ?><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>

                                        <?php }?>
    				            	</div>
                            </div>                            
                        </div>
                        <?php 
                    }
                } ?>
            </div>
			</div>
		<div class="clearfix"></div>
	</div>
</div>
<script>
    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 }?>