<?php   
if(get_theme_mod('project_area_disable') != 'on' ){ ?>

<div class="project-area " id="project" >
		<div class="container">
				<div class="row m-0">
						<div class="col-lg-4 pd-0">
								<?php
						        $proj_title1 = get_theme_mod('projtitle1', 'OUR');
						        $proj_title2 = get_theme_mod('proj_title2', 'Project');

						        $proj_subtitle = get_theme_mod('proj_subtitle', 'Some of our project done by us.');
						        $proj_txt = get_theme_mod('proj_txt', 'Maecenas interdum suscipit nibh in malesuada. Sed quis purus eu urna venenatis egestas. Suspendisse nulla velit, tincidunt ornare lacinia a, gravida at felis. Nam auctor leo at erat rhoncus facilisis. Ut tincidunt vehicula ultricies. Etiam varius dolor nisi, et dictum quam porta in.');
						    ?>
		       
				        <?php if($proj_title1 || $proj_title2 ){ ?> 
				        <div class="section-title">
				            <?php if($proj_title1 ){ ?> 
				            <h2>
				                <?php echo ($proj_title1); ?>
				                <div class="t-brd"></div>
				            </h2>   
				            <?php }?>

				            <?php if($proj_title2 ){ ?> 
				            <h3><?php echo ($proj_title2); ?></h3>
				            <?php }?>

				            <div class="subtitlebx">
				            		<h1><?php echo ($proj_subtitle); ?></h1>
				            		<p><?php echo ($proj_txt); ?></p>
				            </div>
				        </div>
				        <?php }?>			
						</div>
						<div class="col-lg-8">
								<div class="project-single-area" > 
										<div class="projbx">
												<div class="owl-carousel owl-theme">
												<!-- <div class="row mr-0"> -->
													<?php 
													$showStatic = true;
													$cols = get_theme_mod('project_npp_count', 3);
													$cols++;
													switch($cols){
														case 1:
														$colCls = 'col-lg-12 col-md-12 col-sm-12';
														break;
														case 2:	
														$colCls = 'col-lg-6 col-md-6 col-sm-6';
														break;
														case 3:
														case 5:
														case 6:
														case 9:
														case 11:
														case 13:
														case 15:
														$colCls = 'col-lg-4 col-md-4 col-sm-6';
														break;
														default: 
														$colCls = 'col-lg-3 col-md-4 col-sm-6';
														break;
													}
														
												for( $i = 1; $i <= $cols; $i++ ){
													$projects_page_id = get_theme_mod('projects_page'.$i); 
													$projects_page_icon = get_theme_mod('projects_page_icon'.$i);
													$projects_page_icon1 = get_theme_mod('projects_page_icon1'.$i);
													if($projects_page_id){
														$showStatic = false;
														echo projectShortCode($projects_page_id, $isCustomizer=true, $i);
													}
												}
											if($showStatic === true){
												for( $i = 1; $i <= $cols; $i++ ){ ?>
												<!-- <div class="</?php echo $colCls;?> single-project-bx wow zoomIn"> -->
													<div class="item single-project-bx">
															<div class="single-project ">
																	<div class="project-icon">

																		<div class="row">
			                            <div class="col-md-6">
			                                <a href="#">
			                                   <div class="project-img">
			                                        <div class="project-tag left-tag">Before</div>
			                                       <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/project1.jpg');?>" alt="projects" /> 
			                                    
			                                    </div> 
			                                </a>
			                            </div>
			                            <div class="col-md-6">
			                                <a href="#">
			                                   <div class="project-img2 ">
			                                      <div class="project-tag right-tag">After</div>
			                                       <img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/project2af.jpg');?>" alt="projects" /> 
			                                       
			                                    </div> 
			                                </a>
			                            </div>
			                        </div>

																	</div>
																	<div class="clearfix"></div>						
															</div>
															<div class="clearfix"></div>	
													</div>
													<?php 
													}
												} ?>
												</div>
										</div>
								</div>
						</div>
				</div>
		</div>
</div>
  <script>
      $(document).ready(function() {
        $('#project .owl-carousel').owlCarousel({
          refreshClass: 'owl-refresh',
          autoplayTimeout:9000,
          loop: true,
          margin: 30,
          autoHeight: true,
          autoWidth: false,
          autoplay: true,
          // rtl:true,
           navText: [
                    '<i class="fa fa-long-arrow-left"></i> ',
                    '<i class="fa fa-long-arrow-right" ></i>'
                ],
          responsiveClass: true,
          responsive: {
            0: {
              items: 1,
              nav: true,
              margin: 10
            },
            400: {
              items: 1,
              nav: true,
              margin: 10
            },
            500: {
              items: 1,
              nav: true,
              margin: 10
            },
            991: {
              items:1,
              nav: true,
              margin: 10
            },
            1000: {
              items:1,
              nav: true,
              loop: true,
              margin: 10
            }
          }
        })
      })
  </script>

<?php }