<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>