<?php
if(get_theme_mod('step_area_disable') != 'on' ){
	?>
	<!-- step Area Start -->
	<?php 
		if( get_theme_mod('step_areaTpadding',true) ) {
			$step_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('step_areaTpadding')).';';
		}
		if( get_theme_mod('step_areaBpadding',true) ) {
			$step_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('step_areaBpadding')).';';
		}
		
	?>			
	<div class="step-area " id="step"> 
		<div class="container">
			<?php
				$step_page_id = get_theme_mod('step_page');
				$stepsubtitle = get_theme_mod('stepsubtitle', 'Working Steps');
				$steptitle = get_theme_mod('step_title', 'My Working Process');

			?>
			<!-- <div class="col-md-6 wow zoomIn" data-wow-duration="1s"> -->
				<div class="rightbx">
		
				<div class="row justify-content-center">
					<?php if($stepsubtitle || $steptitle){ ?>	
						<div class="col-md-5">
							<div class="section-title">
								<?php if(!empty($stepsubtitle)){ ?>
								<h1 class="section-subtitle">
									<div class="dot">
										<i class="fa fa-circle d1" aria-hidden="true"></i>
										<i class="fa fa-circle d2" aria-hidden="true"></i>
										<i class="fa fa-circle d3" aria-hidden="true"></i>
										<i class="fa fa-circle d4" aria-hidden="true"></i>
									</div>
									<?php echo ($stepsubtitle);  ?>	
								</h1>
								<?php }?>
								<h2><?php echo ($steptitle);  ?></h2>
							</div>
						</div>
				<?php }?>
				</div>
				

				<?php
					$showStatic = true;
					for( $i = 1; $i < 11; $i++ ){
						$stepus_page_id = get_theme_mod('stepus_page_icon'.$i); 
						if(!empty($stepus_page_id)){
							$showStatic = false;
							break;
						}
					}
					?>

					<div class="stepus-post-wrap">
						<?php
						$cols = get_theme_mod('stepus_npp_count', 2);
						$cols++;
						// echo '$cold: '.$cols;
						switch($cols){
							case 1:
							$colCls = 'col-md-12 col-sm-12';
							break;
							case 2:
							case 4:
							case 8:
							case 7:
							case 10:
							case 11:
							case 12:
							$colCls = 'col-md-6 col-sm-6';
							break;
							default: 
							$colCls = 'col-md-4 col-sm-6';
							break;
						}
						$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
						?>
						<div class=" stepus-post-boxes">
						<?php
						for( $i = 1; $i <= $cols; $i++ ){
							if($showStatic === false){
									
							$stepus_page_title = get_theme_mod('stepus_page_title'.$i, 'Sketch Drawing');
							$stepus_page_num = get_theme_mod('stepus_page_num'.$i, '01');
							$stepus_page_text = get_theme_mod('stepus_page_text'.$i, 'Nunc vestibulum orci sed ipsum aliquam, quis elementum dui accumsan praesent.');
							$stepus_page_id = get_theme_mod('stepus_page'.$i); 
							$stepus_page_num = get_theme_mod('stepus_page_num'.$i);
							$stepus_page_icon = get_theme_mod('stepus_page_icon'.$i);
							if($stepus_page_icon){
									
						?>
							<div class="<?php echo $colCls;?> stepbx">
								<div class="stepus-single wow bounceInUp" data-wow-duration="3s" >
									<div class="stpbxinn">
										<div class="hi-icon">
											<span class="<?php echo $stepus_page_icon; ?>"></span>
										</div>
										<div class="hi-num">
											<div class="inner-area-num Num"> <?php echo $stepus_page_num; ?></div>
										</div>
									</div>
									<div class="step-area-data">
										<h4 class="inner-area-title"><?php echo $stepus_page_title; ?></h4>
										<h6 class="inner-area-text"><?php echo $stepus_page_text; ?></h6>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
							<?php					
									}
								}else{?>
							<div class="<?php echo $colCls;?> stepbx">
								<div class="stepus-single wow bounceInUp" data-wow-duration="3s">
									<div class="stpbxinn">
										<div class="hi-icon">
											<span class="fa fa-diamond"></span>
										</div>
										<div class="hi-num">
											<div class="inner-area-num Num"> 01</div>
										</div>
									</div>
									<div class="step-area-data">
										<h4 class="inner-area-title">Sketch Drawing</h4>
										<h6 class="inner-area-text">Nunc vestibulum orci sed ipsum aliquam, quis elementum dui accumsan praesent.</h6>
									</div>
									<div class="clearfix"></div>					
								</div>
								<div class="clearfix"></div>
							</div>
						<?php }

							}?>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			<!-- </div> -->
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- step Area End -->
	<script>
  jQuery.noConflict();
  $(function(){
    function innerareatextHeight(){
      var ht = 0;
      $('.inner-area-text').each(function(i){
        var tHt = $(this).height();
        if(ht<tHt){
          ht=tHt;
        }
      });
      $('.inner-area-text').height(ht+'px');
    }
    innerareatextHeight();
  });
  $( window ).resize(function(){
    innerareatextHeight();
  });
</script>
<?php }  