<?php 
/**
 * @version    1.7
 * @package    EcoHosting
 * @author     Themelooks <support@themelooks.com>
 *
 * Websites: http://www.themelooks.com
 *
 */

 // overlay
    if( ecohost_meta_id( 'feature_overlay' ) ){
        $overlay = 'class="bg-overlay"';
    }else{
        $overlay = '';
    }
 
?>
<!-- Features Area Start -->
<div id="features" <?php echo ecohost_section_bg('feature_bgimg').' '.$overlay; ?>>
    <div class="container">
        <?php 
        // Section Title
        ecohost_section_heading('feature-section-title');
        
        // feature image
        if( ecohost_meta_id('feature-img') ){
            // row div
            echo '<div class="row vc--features">';
            // col-sm-4
            echo '<div class="col-md-4 features--img">';
                echo '<img src="'.esc_url( ecohost_meta_id('feature-img') ).'" alt="'.esc_attr__( 'Features Image', 'ecohosting' ).'" class="img-responsive">';
            echo '</div>'; 
            
            // feature content div
            echo '<div class="col-md-8">';
        }else{
            // row
            echo '<div class="row">';
            // col-sm-12
            echo '<div class="col-md-12">';
        }
        ?>
            <div class="row">
                <?php 
                // Feature Item 
                $features = ecohost_meta_id('group-feature');
                if( is_array( $features ) && $features ){
                    
                    foreach( $features as $feature ){
                        if( $feature ){
                            if( ecohost_meta_id('feature-img') ){
                                echo '<div class="col-md-4 col-sm-6 feature-item">';
                            }else{
                                echo '<div class="col-md-3 col-sm-6 feature-item text-center">';
                            }
                            
                                // feature icon
                                if( isset( $feature['_eco_feature-image-icon'] ) && $feature['_eco_feature-image-icon'] ){

                                    echo '<div class="feature-item-icon">';
                                        echo '<img src="'.esc_url( $feature['_eco_feature-image-icon'] ).'" alt="'.esc_attr__( 'Image', 'ecohosting' ).'" class="img-responsive">';
                                    echo '</div>';
                                
                                }else{
                                    if( isset( $feature['_eco_feature-icon'] ) && $feature['_eco_feature-icon'] ){
                                        
                                        echo '<div class="feature-item-icon">';
                                            echo '<i class="fa '.esc_html( $feature['_eco_feature-icon'] ).'"></i>';
                                        echo '</div>'; 
                                    
                                    }
                                }

                                echo '<div class="feature-item-content">';
                                
                                // feature title 
                                if( isset( $feature['_eco_feature-title'] ) && $feature['_eco_feature-title'] ){
                                    
                                    echo '<h4>'.esc_html( $feature['_eco_feature-title'] ).'</h4>';    
                                }
                                // feature descriptions
                                if( isset( $feature['_eco_feature-descriptions'] ) && $feature['_eco_feature-descriptions'] ){
                                    
                                    echo '<p>'.ecohost_wp_kses_allow( $feature['_eco_feature-descriptions'] ).'</p>';
                                }  
                                   
                                echo '</div>';
                            echo '</div>';  
                        }
                    }
                }
                ?>

                </div>
            </div>
        </div>
    </div>
</div>