<!-- Begin Direction Details-->
<section id="direction-details" class="direction-details">
    <div class="content-wrapper">
        <section class="image-section standart-height" style="background-image: url('{{ site.baseurl }}/img/sections-background/{{ site.directionDetailsImage }}');">
            <h3>{{ site.directionDetailsTitle }}</h3>
        </section>
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-left">
                {% assign animationDelay = 0 %}
                {% for card in site.directionDetailsCards %}
                {% assign colWidth = 12 | divided_by: forloop.length %}
                <div class="col-md-{{ colWidth }} col-xs-12 same-height animated hiding" data-animation="fadeInDown" data-delay="{{ animationDelay }}">
                    <div class="card">
                        <h4>{{ card.title }}</h4>
                        <p>{{ card.information }}</p>
                    </div>
                </div>
                {% assign animationDelay = animationDelay | plus:500 %}
                {% endfor %}
                
                {% for wideCard in site.directionDetailsWideCards %}
                <div class="col-md-12 col-xs-12 animated hiding" data-animation="fadeInDown" data-delay="0">
                    <div class="card questions">
                        <h4>{{ wideCard.title }}</h4>
                        {% for subCard in wideCard.subCards %}
                        {% assign wideCardColWidth = 12 | divided_by: forloop.length %}
                        <div class="col-md-{{ wideCardColWidth }} col-xs-12">
                            <h5>{{ subCard.title }}</h5>
                            <ul>
                                {% for linkElement in subCard.links %}
                                <li><a href="{% if linkElement.permalink != null %} {{ linkElement.permalink | prepend: site.baseurl }} {% else %} {{ linkElement.link }} {% endif %}" {% if linkElement.link != null %}target="_blank"{% endif %}>{{ linkElement.text }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
<!-- End Direction Details -->