description = "Facts Section"

[viewBag]
==
{% if data.section_facts_image %}
<section id="cool-facts" class="section" {% if this.theme.parallax_js %}data-stellar-background-ratio="0.5"{% endif %} style="background: url({{ data.section_facts_image|media }}) 50% 0px / cover no-repeat {% if this.theme.parallax_js %}fixed{% endif %};">
{% else %}
<section id="cool-facts" class="section" {% if this.theme.parallax_js %}data-stellar-background-ratio="0.5"{% endif %} style="background: url({{ 'assets/images/img/1920x1000.png'|theme }}) 50% 0px / cover no-repeat {% if this.theme.parallax_js %}fixed{% endif %};">
   {% endif %}
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <h1 class="section-title" data-aos="fade-up" data-aos-delay="300">{{ data.section_facts_header }}</h1>
            <p class="section-subcontent" data-aos="fade-up" data-aos-delay="400">{{ data.section_facts_subheader }}</p>
         </div>
         {% for fields in data.section_facts %}
         <div class="col-sm-6 col-md-3 col-lg-3" data-aos="fade-up" data-aos-delay="300">
            <div class="fact-block clearfix">
               <div class="facts-item">
                  <i class="{{ fields.section_facts_icon }}" aria-hidden="true"></i>
                  <div class="fact-count">
                     <h3><span class="counter">{{ fields.section_facts_number }}</span></h3>
                     <h4>{{ fields.section_facts_title }}</h4>
                  </div>
               </div>
            </div>
         </div>
         {% endfor %}
      </div>
   </div>
</section>