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

<?php 
    if( get_theme_mod('bannerTpadding',true) ) {
     $bannerTpadding = 'padding-top:'.esc_attr(get_theme_mod('bannerTpadding')).';';
   }
   if( get_theme_mod('bannerBpadding',true) ) {
     $bannerBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('bannerBpadding')).';';
   }

?> 
<section id="banner-section" class="ht-section" style="<?php echo esc_attr($bannerTpadding); ?>" "<?php echo esc_attr($bannerBpadding); ?>">       
    
        <?php
            // width 
            $c_width = get_theme_mod('bann1_c_width', 'container');

            if ($c_width === 'container') {
                $c_alignment = 'container';
            } elseif ($c_width === 'container-fluid') {
                $c_alignment = 'container-fluid';
            } else {
                $text_alignment = 'container'; // Default to 'container' if the setting is invalid
            }             
        ?>

      <?php
        $banner_page_id = get_theme_mod('banner_page');
        $txt_1 = get_theme_mod('txt_1', 'HIGH TECH');
        $txt_2 = get_theme_mod('txt_2', 'INSTALLATION & REPAIR');

        $f2txt_1 = get_theme_mod('f2txt_1', 'SERVICES BY PROFESSIONAL');

        $f3txt_1 = get_theme_mod('f3txt_1', 'TECHNICIANS, AND DESIGNERS');

        $f4txt_1 = get_theme_mod('f4txt_1', 'FOR COMPLETE');
        $f4txt_2 = get_theme_mod('f4txt_2', 'NEEDS');
        
        
      ?>
    <div class="<?php echo esc_attr($c_width); ?>">
        <div class="line1">   
            <li>
                <div class="f1_txt1">
                    <?php echo ($txt_1); ?>  
                </div>
            </li>
            <?php if( get_theme_mod('bannsimg_img1_display','show' ) == 'show') :?>
            <li>
                <div class="s_imgbx">                 
                    <?php 
                        $bann1_image = get_theme_mod('bann1_image');
                        if(!empty($bann1_image)){
                            echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($bann1_image).'" class="img-responsive secondry-bg-img" />';
                        }else{
                            echo '<img src="'.get_template_directory_uri().'/images/bann1.jpg" class="img-responsive" />';
                        }
                    ?>  
                                     
                </div>  
            </li>  
            <?php endif ?>

            <?php if($txt_2 ){ ?>
            <li>
                <div class="f1_txt2">
                    <div class="linebrd"></div>
                    <?php echo ($txt_2); ?>  
                </div>
            </li>     
            <?php }?>
        </div>
        <!--  -->
        <div class="line2">   
            <li>
                <?php if( get_theme_mod('bannsimg_img2_display','show' ) == 'show') :?>
                <div class="s_imgbx">                 
                    <?php 
                        $bann2_image = get_theme_mod('bann2_image');
                        if(!empty($bann2_image)){
                            echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($bann2_image).'" class="img-responsive secondry-bg-img" />';
                        }else{
                            echo '<img src="'.get_template_directory_uri().'/images/bann2.jpg" class="img-responsive" />';
                        }
                    ?>  
                                     
                </div>  
                <?php endif ?>
            </li> 
            <li>
                <div class="f2_txt1">
                    <?php echo ($f2txt_1); ?>  
                </div>
            </li>
             <?php if( get_theme_mod('bannsicn_display','show' ) == 'show') :?>
            <li>
                <div class="arrowbx">
                    <!-- <i class="fa fa-arrow-right"></i> -->
                    <svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg>
                </div>
            </li>
              <?php endif ?>       
        </div>
            
        <!--  -->
        <div class="line3">  
            <?php if($f3txt_1 ){ ?> 
            <li>
                <div class="f3_txt1">
                    <div class="linebrd3"></div>
                    <?php echo ($f3txt_1); ?>  
                </div>
            </li> 
            <?php }?>
            <li>
                <?php if( get_theme_mod('bannsimg_img3_display','show' ) == 'show') :?>
                <div class="s_imgbx">                 
                    <?php 
                        $bann3_image = get_theme_mod('bann3_image');
                        if(!empty($bann3_image)){
                            echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($bann3_image).'" class="img-responsive secondry-bg-img" />';
                        }else{
                            echo '<img src="'.get_template_directory_uri().'/images/bann3.jpg" class="img-responsive" />';
                        }
                    ?>  
                                     
                </div>  
                <?php endif ?>
            </li>         
        </div>
       <!--  -->
       <?php if($f4txt_1 || $f4txt_2 ){ ?>
       <div class="line4">   
            <li>
                <div class="f4_txt1">
                    <?php echo ($f4txt_1); ?>  
                </div>
            </li> 
            <?php if( get_theme_mod('bannsimg_img4_display','show' ) == 'show') :?>  
            <li>
                <div class="s_imgbx">                 
                    <?php 
                        $bann4_image = get_theme_mod('bann4_image');
                        if(!empty($bann4_image)){
                            echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($bann4_image).'" class="img-responsive secondry-bg-img" />';
                        }else{
                            echo '<img src="'.get_template_directory_uri().'/images/bann4.png" class="img-responsive" />';
                        }
                    ?>                               
                </div>  
            </li>
            <?php endif ?>   
            <li>
                <div class="f4_txt2">
                    <?php echo ($f4txt_2); ?>  
                </div>
            </li>      
        </div>
        <?php }?>
    </div>
</section>

<?php
} 
