{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign dataToShow = site.data.[page.folderName][lang][file] %}

{%- if dataToShow.featureList.first.feature_heading !='' -%}
    
<div class="container mt-4">
    <div class="row">
        <div class="ads_layout feature w-100">
            <div class="col-lg-4 col-md-6 my-3">
                <p class="feature-highlight-title mb-0">Features</p>
            </div>
            {%- if dataToShow.feature_description -%}
            <p class="description">{{dataToShow.feature_description}}</p>
            {%- endif -%}
        </div>
        {%- if site.ezoicAds -%}
        <div class="container p-0">
            <div class="m-0 row text-center features_data">
                {% assign totalHeaderCount = 0 %}
                {% for data in dataToShow.featureList %}
                {% assign words = data.feature_heading | split: " " %}
                {% assign word_count = words | size %}
                {% assign totalHeaderCount = totalHeaderCount | plus: word_count %}
                {% endfor %}

                <div class="col-md-9 mx-auto">
                    <div class="row">
                        {% for entry in dataToShow.featureList %}
                        <div class="col-md-6 my-3">
                            <div class="card-body h-100">
                                <img src="{{ entry.fa_class }}" loading="lazy" height="25px" width="25px"
                                    alt="{{entry.feature_heading}}"></img>
                                {%- if totalHeaderCount > site.count_of_words_in_headings -%}
                                <h2 class="card-title">{{ entry.feature_heading }}</h2>
                                {%- else -%}
                                <div class="card-title">{{entry.feature_heading}}</div>
                                {%- endif -%}
                                <div class="card-text" style="color: #3E3E3E; font-size: 14px;">{{ entry.feature_text}}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {%- else -%}
        <div class="container p-0">
            <div class="m-0 row text-center features_data">
                {% assign totalHeaderCount = 0 %}
                {% for data in dataToShow.featureList %}
                {% assign words = data.feature_heading | split: " " %}
                {% assign word_count = words | size %}
                {% assign totalHeaderCount = totalHeaderCount | plus: word_count %}
                {% endfor %}

                {% for entry in dataToShow.featureList %}
                <div class="col-lg-4 col-md-6 my-3">
                    <div class="card-body h-100">
                        <!-- <img src="{{ entry.fa_class }}" loading="lazy" height="25px" width="25px"
                            alt="{{entry.feature_heading}}"></img> -->
                        <div class="card-title">
                            {%- if totalHeaderCount > site.count_of_words_in_headings -%}
                            {{entry.feature_heading}}
                            {%- else -%}
                            {{ entry.feature_heading }}
                            {%- endif -%}
                        </div>
                        <div class="text-left card-text" style="color: #3E3E3E;
                        font-size: 14px;">{{ entry.feature_text}}</div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {%- endif -%}
    </div>
</div>
{%- endif -%}