<hr id="about" style="visibility: hidden;">
<div class="container">

  <!-- First container -->

  <!-- Section About -->
  <section  class="section feature-box mb-5">

      <!-- Section title -->
      <h2 class="text-center text-uppercase my-5 pt-5 wow fadeIn" data-wow-delay="0.2s">{{site.data.about.heading | default: site.data.default.about_section_heading}}</h2>

      <p class="text-center w-responsive mx-auto wow fadeIn my-5" data-wow-delay="0.2s">{{site.data.about.description | default: site.data.default.about_section_description}} </p>

      <!-- First row -->
      <div class="row features-big text-center wow fadeIn justify-content-center" data-wow-delay="0.4s">
          {% assign professions = site.data.about.professions | default: site.data.default.professions %}
          {% for profession in professions %}
          <!-- First column -->
          <div class="col-md-4 mb-5">

              <!-- Panel -->
              <div class="card card-body {% if profession.color %}{{ profession.color}}{% endif %} hoverable">

                  <i class="{{profession.icon }} fa-3x mb-4" aria-hidden="true"></i>

                  <h5 class="font-weight-bold {{ profession.text_color | default: 'dark-grey-text'}} text-uppercase mb-4">{{ profession.name}}</h5>

                  <p class="{{ profession.text_color | default: 'dark-grey-text'}} lighten-2">{{ profession.description}}</p>

              </div>
              <!-- Panel -->

          </div>
          <!-- First column -->
          {% endfor %}

      </div>
      <!-- First row -->

  </section>
  <!-- Second section -->

  <!-- First container -->
  <hr>

</div>