<?php
if(get_theme_mod('about_area_disable') != 'on' ){
?>
	<?php 
		if( get_theme_mod('about_areaTpadding',true) ) {
			$about_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('about_areaTpadding')).';';
		}
		if( get_theme_mod('about_areaBpadding',true) ) {
			$about_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('about_areaBpadding')).';';
		}
		if( get_theme_mod('about_areawave',true) ) {
			$about_areawave = 'top:'.esc_attr(get_theme_mod('about_areawave')).';';
		}
	?>			
	<div class="about-area" id="about">
		<div class="container">
			<div class="about-area-bx">
				<div class="row mr-0">
			<?php
				$about_page_id = get_theme_mod('about_page');
				$imgtle = get_theme_mod('imgtle', '20 Years of Craftmanship');
				$imgtxt = get_theme_mod('imgtxt', 'Our Work By Category');
				$abouttitle = get_theme_mod('about_title', 'Welcome to our website');
				$abouttext = get_theme_mod('about_text', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words . which don not look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure .');

				$aboutus_calltxt = get_theme_mod('aboutuscalltxt', 'Call for Service');
				$aboutus_callnumber = get_theme_mod('aboutuscallnumber', '+123456789026');

				$imgyear = get_theme_mod('imgyear', '13');
				$EXPERIENCE = get_theme_mod('EXPERIENCE', 'YEARS EXPERIENCE');
			?>
					<div class="col-lg-6 col-md-6 pl-0">
						<div class="imgtitle">
							<div class="tle"><?php echo ($imgtle);  ?></div>
							<div class="txt"><?php echo ($imgtxt);  ?></div>
						</div>
						<div class="row mr-0">
							<div class="col-lg-6 pd-0">
								<div class="aboutarea-img">
									
									<?php 
										$about_image = get_theme_mod('about_image');
										if(!empty($about_image)){
											echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image).'" class="img-responsive secondry-bg-img" />';
										}else{
											echo '<img src="'.get_template_directory_uri().'/images/abotimg1.jpg" class="img-responsive" />';
										}

									?>

									<svg xmlns="http://www.w3.org/2000/svg" width="285.116" height="47.383" viewBox="0 0 285.116 47.383">
									  <g id="Group_142" data-name="Group 142" transform="translate(-100 -1895.617)">
									    <g id="Group_27" data-name="Group 27" transform="translate(100 1895.617)">
									      <path id="Path_7" data-name="Path 7" d="M365.953,1948.145V1931.5" transform="translate(-213.161 -1927.949)" fill="#d9d9d9" stroke="#d9d9d9" stroke-width="20"/>
									      <path id="Path_6" data-name="Path 6" d="M164,1920.117H445.189" transform="translate(-164 -1890.539)" fill="#d9d9d9" stroke="#d9d9d9" stroke-width="20"/>
									      <rect id="Rectangle_20" data-name="Rectangle 20" width="7.854" height="29" rx="3.927" transform="translate(285.116 44.078) rotate(180)" fill="#bcbcbc"/>
									      <rect id="Rectangle_21" data-name="Rectangle 21" width="7.854" height="29" rx="3.927" transform="translate(7.854 44.078) rotate(180)" fill="#bcbcbc"/>
									      <path id="Rectangle_22" data-name="Rectangle 22" d="M0,0H1.169a4,4,0,0,1,4,4V22a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(165.642) rotate(90)" fill="#bcbcbc"/>
									    </g>
									    <g id="Group_25" data-name="Group 25" transform="translate(-27 8)">
									      <g id="Ellipse_4" data-name="Ellipse 4" transform="translate(265 1906)" fill="none" stroke="#e63543" stroke-width="3">
									        <circle cx="14.5" cy="14.5" r="14.5" stroke="none"/>
									        <circle cx="14.5" cy="14.5" r="13" fill="none"/>
									      </g>
									      <line id="Line_3" data-name="Line 3" x2="18" y2="18" transform="translate(270.5 1911.5)" fill="none" stroke="#e63543" stroke-width="1"/>
									      <line id="Line_4" data-name="Line 4" x1="18" y2="18" transform="translate(270.5 1911.5)" fill="none" stroke="#e63543" stroke-width="1"/>
									      <line id="Line_5" data-name="Line 5" y2="27" transform="translate(279.5 1906.5)" fill="none" stroke="#e63543" stroke-width="1"/>
									      <line id="Line_6" data-name="Line 6" x2="26" transform="translate(266.5 1920.5)" fill="none" stroke="#e63543" stroke-width="1"/>
									    </g>
									  </g>
									</svg>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="col-lg-6 abt_rimg">
								<div class="aboutarea-img2">
									
									<?php 
										$about_image2 = get_theme_mod('about_image2');
										if(!empty($about_image2)){
											echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image2).'" class="img-responsive secondry-bg-img" />';
										}else{
											echo '<img src="'.get_template_directory_uri().'/images/abotimg2.jpg" class="img-responsive" />';
										}

									?>
								</div>
								<div class="year">
									<div class=" row">
										<div class="col-md-3 y-num"><?php echo ($imgyear);  ?></div>
										<div class="col-md-9 y-text"><?php echo ($EXPERIENCE);  ?></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6 col-md-6 abt-rbx " data-wow-duration="1s">
						<div class="abtsection-title">
							<h2><?php echo ($abouttitle);  ?></h2>
						</div> 
						<div class="section-subtext">
							<p><?php echo ($abouttext);  ?></p>

						</div>
						<div class="clearfix"></div>
						<?php
							$showStatic = true;
							for( $i = 1; $i < 11; $i++ ){
								$aboutus_page_id = get_theme_mod('aboutus_page_icon'.$i); 
								if(!empty($aboutus_page_id)){
									$showStatic = false;
									break;
								}
							}
						?>
						<div class="aboutus-post-wrap">
							<?php
							$cols = get_theme_mod('aboutus_npp_count', 1);
							$cols++;
							// echo '$cold: '.$cols;
							switch($cols){
								case 1:
								$colCls = 'col-lg-12 col-md-12 col-sm-12';
								break;
								case 2:
								case 4:
								case 8:
								case 7:
								case 10:
								case 11:
								case 12:
								$colCls = 'col-lg-6 col-md-12 col-sm-12';
								break;
								default: 
								$colCls = 'col-md-6 col-sm-12';
								break;
							}
							$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
							?>
							<div class="aboutus-post-boxes">
								<div class="row mr-0">
							<?php
							for( $i = 1; $i <= $cols; $i++ ){
							if($showStatic === false){
								
								$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'plumber service');
								$aboutus_page_txt = get_theme_mod('aboutus_page_txt'.$i, 'There are many variations of passages of Lorem');
								$aboutus_page_id = get_theme_mod('aboutus_page'.$i); 
								$aboutus_page_icon = get_theme_mod('aboutus_page_icon'.$i);
								if($aboutus_page_icon){
									
							?>
								<!-- <div class=" pl-0"> -->
									<div class=" <?php echo $colCls;?> aboutus-single pl-0" >
										<div class="row mr-0">
											<?php if($aboutus_page_title){ ?>
												<div class="col-md-3 col-sm-3 col-3 pd-0">
												<div class="hi-icon">
													<!-- <img src="<//?php echo esc_url($aboutus_page_icon); ?>" class="img-responcive" /> -->
													<span class="<?php echo $aboutus_page_icon; ?>"></span> 
												</div>
											</div>
												<div class="col-md-9 col-sm-9 col-9">
												<div class="about-area-data">
													<h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
													<p><?php echo $aboutus_page_txt; ?></p>
												</div>
											</div>
											<div class="clearfix"></div>
											<?php }?>
										</div>
										<div class="clearfix"></div>
									</div>
									
								<!-- </div> -->
								<?php
										
								}
							}else{?>
								<!-- <div class="</?php echo $colCls;?> pl-0"> -->
									<div class="<?php echo $colCls;?> aboutus-single pl-0" >
										<div class="row mr-0">
											<div class="col-md-3 col-sm-3 col-3 pd-0">
												<div class="hi-icon">
													<span class="fa fa-wrench" aria-hidden="true"></span>
													<!-- <img src="<//?php echo esc_url(get_template_directory_uri().'/images/abt1.jpg');?>"  /> -->
												</div>
											</div>
											<div class="col-md-9 col-sm-9 col-9 ">
												<div class="about-area-data">
													<h4 class="inner-area-title">plumber service</h4>
													<p>There are many variations of passages of Lorem</p>
												</div>
											</div>
											<div class="clearfix"></div>	
										</div>				
										<div class="clearfix"></div>
									</div>
									
								<!-- </div> -->
							<?php }
							}?>
							<div class="clearfix"></div>
						</div>
						</div>
						</div>
						<script type="text/javascript">
								var title = 0;
							jQuery("#about .aboutus-single").each(function(){
							  if ($(this).height() > title) { title = $(this).height(); }
							});
							jQuery("#about .aboutus-single").height(title);


							// on Resize change height

							jQuery(window).resize(function(){
							  jQuery("#about .aboutus-single").height("");
							  var title = 0;
							  jQuery("#about .aboutus-single").each(function(){
							    if ($(this).height() > title) { title = $(this).height(); }
							  });
							  jQuery("#about .aboutus-single").height(title);
							});
						</script>

						<div class="callabt">
							<div class="calltxt"><?php echo $aboutus_calltxt; ?></div>
							<a class="callNo" href="tel:<?php echo $aboutus_callnumber;?>"><?php echo $aboutus_callnumber; ?></a>
							
						</div>
						
					</div>
					
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>


<?php }  