<?php
/**
 * Template part for displaying Service Section
 *
 * @package Spiral_Lite_One_Page
 */

$services_subtitle = get_theme_mod( 'spiral_lite_one_page_services_section_subtitle', __( "Services featured powerfull option with bootstrap", 'spiral-lite-one-page' ) );
$services_pretitle = get_theme_mod( 'spiral_lite_one_page_services_section_pretitle', __( "Pellentesque sapien purus, sagittis eu accumsan convallis, vehicula ut lectus. Fusce accumsan <strong>purus pretium ligula</strong> vehicula, ut interdum nisl vulputate. Vivamus ultrices luctus quam eu feugiat", 'spiral-lite-one-page' ) );
$service_1_title = get_theme_mod( 'spiral_lite_one_page__single_services_1_title', 'Responsive Design' );
$service_2_title = get_theme_mod( 'spiral_lite_one_page__single_services_2_title', 'Modern Design' );
$service_3_title = get_theme_mod( 'spiral_lite_one_page__single_services_3_title', 'Great Features' );
$service_4_title = get_theme_mod( 'spiral_lite_one_page__single_services_4_title', 'Color Options' );
$service_5_title = get_theme_mod( 'spiral_lite_one_page__single_services_5_title', 'Powerful Options' );
$service_6_title = get_theme_mod( 'spiral_lite_one_page__single_services_6_title', 'Bootstrap Grid' );
$service_7_title = get_theme_mod( 'spiral_lite_one_page__single_services_7_title', 'jQuery Effects' );
$service_8_title = get_theme_mod( 'spiral_lite_one_page__single_services_8_title', 'Easy to Modify' );
$service_9_title = get_theme_mod( 'spiral_lite_one_page__single_services_9_title', 'OnScroll Animation' );
?>

<!-- Services -->
          <!-- Title-->
  <div class="text-center">
				
				<h1 class="title"><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page_services_section_menu_title', 'SERVICES' ) ); ?></h1>

				<div class="icon"><i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page_services_section_icon', 'wrench' ) ); ?>"></i></div>
                 
                 
                <?php

if ( ! empty( $services_subtitle ) ) : ?>
    <h2 class="subtitle" style="color: #666666;"><?php echo esc_html( $services_subtitle ); ?></h2>
<?php endif; ?>

<?php if ( ! empty( $services_pretitle ) ) :?>
    <p class="pretitle"><?php echo wp_kses_post( $services_pretitle ); ?></p>
<?php endif; ?>
                 </div> <!-- End Title -->
            <div class="row"> <!-- Row -->
            
            <?php if ( $service_1_title ) : ?>
            <!-- Services 1 -->
            <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="200">
                        <div class="ibox float-left">
                            <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_1_icon', 'flask' ) ); ?>"></i>
                        </div> <!-- End Icon Box -->
                        
                        <div class="tbox">
                            <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_1_title', 'Responsive Design' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_1_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->
                </div> <!-- End Service Block -->
                <?php endif; ?>

        <?php if ( $service_2_title ) : ?>              
       <!-- Services 2 -->
                <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="400">		
                    <div class="ibox float-left">
                    <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_2_icon', 'pencil' ) ); ?>"></i>
                    </div> <!-- End Icon Box -->
                        
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_2_title', 'Modern Design' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_2_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->	
                </div> <!-- End Service Block -->
                <?php endif; ?>

         <?php if ( $service_3_title ) : ?>
                  <!-- Services 3 -->
            <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="600">
                    <div class="ibox float-left">
                    <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_3_icon', 'cogs' ) ); ?>"></i>
                    </div> <!-- End Icon Box -->
                        
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_3_title', 'Great Features' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_3_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->	
                </div> <!-- End Service Block -->
                <?php endif; ?>

                <?php if ( $service_4_title ) : ?>
                  <!-- Services 4 -->
            <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="200">
                        <div class="ibox float-left">
                        <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_4_icon', 'tint' ) ); ?>"></i>
                        </div> <!-- End Icon Box -->
                
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_4_title', 'Color Options' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_4_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->
                </div> <!-- End Service Block -->
                <?php endif; ?>

            <?php if ( $service_5_title ) : ?>
                 <!-- Services 5 -->
                <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="400">
                        <div class="ibox float-left">
                        <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_5_icon', 'cogs' ) ); ?>"></i>
                        </div> <!-- End Icon Box -->
                    
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_5_title', 'Powerfull Options' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_5_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->						
                </div> <!-- End Service Block -->
                   <?php endif; ?>

            <?php if ( $service_6_title ) : ?>
                 <!-- Services 6 -->
              <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="600">
                        <div class="ibox float-left">
                        <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_6_icon', 'bars' ) ); ?>"></i>
                        </div> <!-- End Icon Box -->
                        
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_6_title', 'Bootstrap Grid' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_6_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->
                 </div> <!-- End Service Block -->
                 <?php endif; ?>

            <?php if ( $service_7_title ) : ?>
                  <!-- Services 7 -->
                <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="200">
                        <div class="ibox float-left">
                        <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_7_icon', 'trophy' ) ); ?>"></i>
                        </div> <!-- End Icon Box -->
                        
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_7_title', 'Jquery Effects' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_7_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->
                </div> <!-- End Service Block -->
                <?php endif; ?>
            
                <?php if ( $service_8_title ) : ?>
                <!-- Services 8 -->
                <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="400">
                        <div class="ibox float-left">
                        <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_8_icon', 'wrench' ) ); ?>"></i>
                        </div> <!-- End Icon Box -->
                    
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_8_title', 'Easy to Modify' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_8_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->
                    </div> <!-- End Service Block -->
                    <?php endif; ?>

                <?php if ( $service_9_title ) : ?>              
                      <!-- Services 9 -->
                <div class="service-block col-lg-4 animated" data-animation="fadeInUp" data-animation-delay="600">
                        <div class="ibox float-left">
                        <i class="fa fa-<?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_9_icon', 'crop' ) ); ?>"></i>
                        </div> <!-- End Icon Box -->
                        
                        <div class="tbox">
                        <h3><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_9_title', 'OnScroll Animation' ) ); ?></h3>
                            <div class="seperator mini"><span></span></div>
                            <p><?php echo esc_html( get_theme_mod( 'spiral_lite_one_page__single_services_9_desc', 'Donec porttitor velit eget lectus ac turpis.' ) ); ?></p>
                        </div> <!-- End Text Box -->
                   </div> <!-- End Service Block -->
                <?php endif; ?>
                </div> <!-- End Row -->

