{% extends 'base.html.twig' %}


{% block seo %}
    <title>CUMAS365 - SFT {{ 'lang.features' | trans }}</title>

    <meta name="description" content="{{ 'lang.features_meta_description' | trans }}">
    <meta name="keywords" content="{{ 'lang.features_meta_keywords' | trans }}">
    <meta name="robots" content="index, follow">

    {% set currentLocale = app.request.locale %}

    {% for locale in ['en', 'de', 'es', 'ru'] %}
        {% if currentLocale != locale %}
            <link rel="alternate" hreflang="{{ locale }}" href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': locale})) }}">
        {% endif %}
    {% endfor %}

{% endblock %}


{% block styles %}
    <style>
        .custom-navbar {
            color: #FFFFFF !important;
            /*background: linear-gradient(to top,*/
            /*rgba(255, 255, 255, 0.2),*/
            /*rgba(153, 153, 153, 0.2)) !important;*/
        }

        .footer {
            background-color: #202020 !important;
        }
    </style>
{% endblock %}

        {% block body %}
            <div class="features-container container p-0 pt-md-5">

                <h1 class="d-none d-md-flex text-center fw-700 col-12 col-md-10 ml-mr-auto mt-100">
                    {{ 'lang.featuresHeaderTitle' | trans }}
                </h1>
                <h2 class="col-6 d-none d-md-flex mb-100 ml-mr-auto text-center">
                    {{ 'lang.featuresHeaderSubtitle' | trans }}
                </h2>

                <div class="row color-back m-sm-3 p-5">
                    <h2 class="
                    text-white fs-30
                    d-flex d-md-none text-center fw-700 col-12 col-md-10 pt-5 p-md-0 ml-mr-auto mt-100">
                        {{ 'lang.featuresHeaderTitle' | trans }}
                    </h2>
                    <div class="col-12 col-md-6 p-5  display-flex-center element-hidden slide-in-left">
                        <img src="/images/rocket.png">
                    </div>
                    <div class="col-12 col-md-6 d-flex flex-column justify-content-center element-hidden slide-in-right">
                        <h3>
                            {{ 'lang.featuresText1Title' | trans }}
                        </h3>
                        <h4>
                            {{ 'lang.featuresText1Subtitle' | trans }}
                        </h4>
                        <p>
                            {{ 'lang.featuresText1Description' | trans }}
                        </p>
                    </div>
                </div>

                <div class="row mt-2 m-sm-3  p-5">
                    <div class="d-none d-md-flex col-12 col-md-6 flex-column justify-content-center element-hidden slide-in-left">
                        <h3>
                            {{ 'lang.featuresText2Title' | trans }}
                        </h3>
                        <h4>
                            {{ 'lang.featuresText2Subtitle' | trans }}
                        </h4>
                        <p>
                            {{ 'lang.featuresText2Description' | trans }}
                        </p>
                    </div>
                    <div class="col-12 col-md-6 display-flex-center element-hidden slide-in-right">
                        <img src="/images/folder.png">
                    </div>
                    <div class="d-flex d-md-none col-12 col-md-6 flex-column justify-content-center element-hidden slide-in-left">
                        <h3>
                            {{ 'lang.featuresText2Title' | trans }}
                        </h3>
                        <h4>
                            {{ 'lang.featuresText2Subtitle' | trans }}
                        </h4>
                        <p>
                            {{ 'lang.featuresText2Description' | trans }}
                        </p>
                    </div>
                </div>

                <div class="row mt-2 m-sm-3 p-5 color-back">
                    <div class="col-12 col-md-6 display-flex-center element-hidden slide-in-left">
                        <img src="/images/secure.png">
                    </div>
                    <div class="col-12 col-md-6 d-flex flex-column justify-content-center element-hidden slide-in-right">
                        <h3>
                            {{ 'lang.featuresText3Title' | trans }}
                        </h3>
                        <h4>
                            {{ 'lang.featuresText3Subtitle' | trans }}
                        </h4>
                        <p>
                            {{ 'lang.featuresText3Description' | trans }}
                        </p>
                    </div>
                </div>

                <div class="row mt-2 m-sm-3 p-5 mb-10">
                    <div class="d-none d-md-flex col-12 col-md-6 flex-column justify-content-center element-hidden slide-in-left">
                        <h3>
                            {{ 'lang.featuresText4Title' | trans }}
                        </h3>
                        <h4>
                            {{ 'lang.featuresText4Subtitle' | trans }}
                        </h4>
                        <p>
                            {{ 'lang.featuresText4Description' | trans }}
                        </p>
                    </div>
                    <div class="col-12 col-md-6 display-flex-center element-hidden slide-in-right">
                        <img src="/images/docsearch.png">
                    </div>
                    <div class="d-flex d-md-none col-12 col-md-6 flex-column justify-content-center element-hidden slide-in-left">
                        <h3>
                            {{ 'lang.featuresText4Title' | trans }}
                        </h3>
                        <h4>
                            {{ 'lang.featuresText4Subtitle' | trans }}
                        </h4>
                        <p>
                            {{ 'lang.featuresText4Description' | trans }}
                        </p>
                    </div>
                </div>
            </div>

        {% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('features') }}
{% endblock %}