<?php
if(get_theme_mod('luzuk_about_area_disable') != 'on' ){
  ?>
  <!-- About Area Start -->
  <?php 
        if( get_theme_mod('about_areaTpadding1',true) ) {
          $about_areaTpadding1 = 'padding-top:'.esc_attr(get_theme_mod('about_areaTpadding1')).';';
        }
        if( get_theme_mod('about_areaBpadding1',true) ) {
          $about_areaBpadding1 = 'padding-bottom:'.esc_attr(get_theme_mod('about_areaBpadding1')).';';
        }

  ?>      

  <div class="about-area " id="about">  
     <div class="container">
      <?php
        $about_page_id = get_theme_mod('about_page');
        $abouttitle = get_theme_mod('about_title', 'Qualified Experts');
        $abouttext = get_theme_mod('about_text', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat erat quis est semper, vitae sodales massa luctus. Nam aliquam odio vel sodales faucibus. Proin nec eleifend urna. Suspendisse rutrum gravida turpis, et suscipit erat blandit efficitur. Nulla iaculis bibendum nunc, lacinia tincidunt nibh eleifend at.');    
      ?>
      <div class=" abtimg wow zoomIn">
          <div class="col-md-6 abtimginn ">
            <div class="abou-img3">
              <div class="aboutimg3">
              <?php 
                  $about_image3 = get_theme_mod('about_image3');
                  if(!empty($about_image3)){
                    echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image3).'" class="img-responsive secondry-bg-img" />';
                  }else{
                    echo '<img alt="About us" src="'.get_template_directory_uri().'/images/about3.jpg" class="img-responsive" />';
                  }
              ?>
              </div>
              <div class="clearfix"></div>
            </div> 

            <div class="abou-img3">
              <div class="aboutimg2">
              <?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 alt="About us" src="'.get_template_directory_uri().'/images/about2.jpg" class="img-responsive" />';
                  }
              ?>
              </div>
              <div class="clearfix"></div>
            </div>

            <div class="abou-img3">
                <div class="aboutimg1">
                <?php 
                    $about_image1 = get_theme_mod('about_image1');
                    if(!empty($about_image1)){
                      echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image1).'" class="img-responsive secondry-bg-img" />';
                    }else{
                      echo '<img alt="About us" src="'.get_template_directory_uri().'/images/about1.jpg" class="img-responsive" />';
                    }
                ?>
            </div>
              <div class="clearfix"></div>
            </div> 
         <div class="clearfix"></div>
      </div>
      <div class="col-md-6 about-rhs wow zoomIn" data-wow-duration="1s">
        <div class="row">
            <div class="section-title">
                <?php if($abouttitle ){ ?>
                  <h2><?php echo ($abouttitle);  ?></h2>  
              <?php }?>
            </div>
            <div class="htext"><?php echo ($abouttext);  ?></div>
        </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', 4);
          $cols++;
          // echo '$cold: '.$cols;
          switch($cols){
            case 1:
            $colCls = 'col-md-12 col-sm-12 col-xs-12';
            break;
            case 2:
            case 4:
            case 8:
            case 7:
            case 10:
            case 11:
            case 12:
            $colCls = 'col-md-12 col-sm-12 col-xs-12';
            break;
            default: 
            $colCls = 'col-md-12 col-sm-12 col-xs-12';
            break;
          }
          $icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
          ?>
          <div class="row aboutus-post-boxes">
            <?php
            for( $i = 1; $i <= $cols; $i++ ){
                if($showStatic === false){
                  $aboutus_page_id = get_theme_mod('aboutus_page'.$i); 
                  $aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'Lorem ipsum dolor sit amet, consectetur adipiscing');
                  
                  
                  $aboutus_page_icon = get_theme_mod('aboutus_page_icon'.$i);
                  if($aboutus_page_icon){
                    
                  ?>
                  <div class="<?php echo $colCls;?>">
                    <?php if($aboutus_page_title ){ ?>
                      <div class="aboutus-single">
                            <div class="hi-icon">
                                <span class="<?php echo $aboutus_page_icon; ?>"></span>
                            </div> 
                            <div class="about-area-data">
                                <h4 class="inner-area-title"><?php echo $aboutus_page_title; ?></h4>
                            </div>
                      <div class="clearfix"></div>
                      </div>
                      <?php } ?>
                      <div class="clearfix"></div>
                  </div>
                  <?php
                      
                  }
                }else{?>
                  <div class="<?php echo $colCls;?> pd-0">
                      <div class="aboutus-single">
                              <div class="hi-icon">
                                  <span class="fa fa-check"></span>
                              </div>
                              <div class="about-area-data">
                                    <h4 class="inner-area-title">Lorem ipsum dolor sit amet, consectetur adipiscing</h4>
                                 
                              </div>
                          
                          <div class="clearfix"></div>            
                      </div>
                      <div class="clearfix"></div>
                  </div>
                <?php }
            }?>
            <div class="clearfix"></div>
          </div>
          
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div> 
  </div>
</div>
  <!-- About Area End -->
<?php }?>  