description = "Counter Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addJs('assets/vendor/waypoints/jquery.waypoints.min.js');
    $this->addJs('assets/vendor/counterup/jquery.counterup.js');
}
?>
==
{% if data.section_counter_type == 'image' %}
<div {% if data.section_counter_id %}id="{{ data.section_counter_id }}"{% endif %} class="counter py-24 bg-cover position-relative {{ data.section_counter_parallax ? 'jarallax' }}" style="background-image:url({{ data.section_counter_image|media|resize(1920, 600, { mode: 'crop' }) }})">
<div class="position-absolute pos-0 overflow-hidden w-100 h-100 {{ data.section_counter_opacity }} {{ data.section_counter_overlay }}"></div>
{% else %}
<div {% if data.section_counter_id %}id="{{ data.section_counter_id }}"{% endif %} class="counter py-24 {{  data.section_counter_bg }}">
{% endif %}
    <div class="{{ data.section_counter_container }}">
        <!-- Row  -->
        {% if data.section_counter_header or data.section_counter_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4 {{ data.section_counter_fcolor }}">{{ data.section_counter_header }}</h2>
                <h6 class="line-height-normal opacity-50 {{ data.section_counter_fcolor }}">{{ data.section_counter_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row pt-7">
            {% set aos = ['flip-left', 'flip-up', 'flip-right', 'flip-left', 'flip-down', 'flip-right'] %}
            {% for fields in data.section_counter %}
            <!-- column  -->
            <div class="{{ data.section_counter_column }}" {% if data.section_counter_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="{% if data.section_counter_align == "left" %}d-flex{% else %}text-center{% endif %} mb-lg-0 mb-5">
                    <div class="{{ data.section_counter_isize }}"><i class="{{ fields.section_counter_icon }} {{ data.section_counter_icolor }}"></i></div>
                    <div class="{% if data.section_counter_align == "left" %}ml-8{% endif %}">
                        <h1 class="{{ data.section_counter_fcolor }} font-weight-light mb-0 count-{{ data.section_counter_id }}">{{ fields.section_counter_number }}</h1>
                        <h6 class="{{ data.section_counter_fcolor }} display-13 text-uppercase opacity-75">{{ fields.section_counter_title }}</h6>
                    </div>
                </div>
            </div>
            <!-- column  -->
            {% endfor %}
        </div>
    </div>
</div>

{% if data.section_counter_count %}
{% put scripts %}
<script>
//Counter
$('.count-{{ data.section_counter_id }}').counterUp({
    delay: 10,
    time: 2000
});
</script>
{% endput %}
{% endif %}