<?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');
				$steptitle = get_theme_mod('step_title', 'Why choose us ? ');

			?>
			<!-- <div class="col-md-6 wow zoomIn" data-wow-duration="1s"> -->
			<div class="rightbx">
				<div class="row justify-content-center wow zoomIn">
						<div class="section-title">
					   		 <?php if($steptitle ){ ?>
						    	<h2><?php echo ($steptitle);?></h2> 
			         		<?php }?>
			    		</div>
				</div>
				<?php
					$showStatic = true;
					for( $i = 1; $i < 11; $i++ ){
						$stepus_page_id = get_theme_mod('stepus_page_title'.$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-4';
							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, 'Affordable');
							$stepus_page_sptitle = get_theme_mod('stepus_page_sptitle'.$i, 'Prices');
							//$stepus_page_num = get_theme_mod('stepus_page_num'.$i, '01 STEP');
							$stepus_page_id = get_theme_mod('stepus_page'.$i); 
							$stepus_page_title = get_theme_mod('stepus_page_title'.$i);
							if($stepus_page_title){		
						?>
							<div class="<?php echo $colCls;?> stepbx">
								<div class="stepus-single wow zoomIn" data-wow-duration="1s" >
									<div class="step-area-data">
										<h4 class="inner-area-title"><?php echo $stepus_page_title; ?><br><span><?php echo $stepus_page_sptitle; ?></span></h4>
										<div class="clearfix"></div>
										<div class="sec-icn">
											<div class="icn-brd"></div>
											<i class="fa fa-circle" aria-hidden="true"></i>
										</div>

									</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
							<?php					
									}
								}else{?>
							<div class="<?php echo $colCls;?> stepbx">
								<div class="stepus-single wow zoomIn" data-wow-duration="1s">
									<div class="step-area-data">
										<h4 class="inner-area-title">Affordable <br><span></span>Prices</h4>
										<div class="clearfix"></div>
										<div class="sec-icn">
											<div class="icn-brd"></div>
											<i class="fa fa-circle" aria-hidden="true"></i>
										</div>
									</div>
									<div class="clearfix"></div>					
								</div>
								<div class="clearfix"></div>
							</div>
						<?php }

							}?>
							<div class="clearfix"></div>
						</div>
						<div class="heading-line " data-wow-duration="3s">
					         <span></span>
					    </div>
					</div>
					
				</div>
			<!-- </div> -->
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- step Area End -->
<?php }  