---
layout: post
---

<section>
    <div class="container">
        <div class="row" style="margin-top: 15px;">
            <div class="col-md-12 col-sm-12">
                <div style="text-align: justify">
                    {{content}}
                </div>
            </div>
        </div>
    </div>
</section>


<section>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12 text-center ">
                <img src="{{ site.url }}{{ site.baseurl }}{{ page.img-architecture.path | relative_url }}" style="width: 100%;"/>
                <br>
                <em>{{page.img-architecture.title}}</em>
            </div>
            <div class="col-md-6 col-sm-12 text-center ">
                <img src="{{ site.url }}{{ site.baseurl }}{{ page.img-plan.path | relative_url }}" style="width: 100%;"/>
                <br>
                <em>{{page.img-plan.title}}</em>
            </div>
        </div>
    </div>
</section>

<div class="subtitle-post row d-flex align-items-center mt-5 shadow" >
    <div class="col" style="text-align: center">
        <h1 style="color: white; font-size: 4em">Features</h1>
    </div>
</div>

<section id="feature_about">
    <div class="container">
    {% for item in page.features %}
        <div class="row" style="padding: 1em;margin-bottom: 0.3em">

            <div class="col-sm-12 col-md-3 col-md-push-9 text-center vcenter">
                <div class="service-item">
                    <i class="{{item.feature.icon}} fa-5x"></i>
                    <h4>{{item.feature.title}}</h4>
                    <p style="color: #0074D9 !important;">
                        {{item.feature.description-short}}
                    </p>
                </div>
            </div>
            <div class="col-sm-12 col-md-9 col-md-pull-3 align-middle">
                <p class="text-justify">
                    {{item.feature.description}}
                </p>
            </div>
        </div>
    {% endfor %}
    </div>
</section>