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

{% block title %}Next Level Garage{% endblock %}

{% block body %}
    <!-- template sections -->

    <section class="page_slider">
        <div class="flexslider" data-nav="false" data-dots="true">
            <ul class="slides">
                {% for slide in slides %}
                <li class="ds bs cover-image flex-slide">
                    <span class="flexslider-overlay"></span>
                    <img src="{{ asset('images/slides/'~slide.image) }}" alt="Next Level Garage">
                    {{ slide.text|raw }}
                </li>
                {% endfor %}
            </ul>
        </div> <!-- eof flexslider -->
    </section>

    <section class="ds s-pt-60 s-pt-md-5 s-pb-0 s-pb-md-15 s-pb-lg-150 choose-us-section c-gutter-10 overflow-visible" id="choose-us">
        <div class="container">
            <div class="row plan-content c-mt-0 c-mt-lg-10 c-mt-xl-0">
                <div class="col-xl-3 col-md-6">
                    {{ slotService.get('plan1')|raw }}
                </div>
                <div class="col-xl-3 col-md-6">
                    {{ slotService.get('plan2')|raw }}
                </div>
                <div class="col-xl-3 col-md-6">
                    {{ slotService.get('plan3')|raw }}
                </div>
                <div class="col-xl-3 col-md-6">
                    {{ slotService.get('plan4')|raw }}
                </div>
                <div class="divider-145 d-none d-lg-block"></div>
            </div>

            <div class="row c-mb-45 c-mb-lg-0">
                <div class="divider-40 d-block d-lg-none"></div>
                <div class="offset-lg-2 col-lg-8 item-content text-center">
                    {{ slotService.get('whyUs')|raw }}
                </div>
            </div>
            <div class="divider-50 d-none d-lg-block"></div>
        </div>
    </section>

    <section class="s-pt-55 s-pb-0 s-pt-md-50 s-pt-lg-140 s-pb-lg-145 ls ms text-center steps-section" id="steps">
        <div class="container">
            <div class="col-12 text-center mb-55">
                <h4>Cum <span class="text-gradient">procedăm</span> noi</h4>
                <p class="fs-20 color-dark">&nbsp;</p>
                <div class="divider-60 d-none d-xl-block"></div>
            </div>
            <div class="row c-mb-53 c-mb-lg-0">
                <div class="col-12 col-lg-3">
                    <div class="steps">
                        <img src="{{ asset('images/slots/'~slotService.getImage('step1')) }}" alt="">
                        {{ slotService.get('step1')|raw }}
                    </div>
                </div>
                <div class="col-12 col-lg-3">
                    <div class="steps feature-step">
                        <img src="{{ asset('images/slots/'~slotService.getImage('step2')) }}" alt="">
                        {{ slotService.get('step2')|raw }}
                    </div>
                </div>
                <div class="col-12 col-lg-3">
                    <div class="steps">
                        <img src="{{ asset('images/slots/'~slotService.getImage('step3')) }}" alt="">
                        {{ slotService.get('step3')|raw }}
                    </div>

                </div>
                <div class="col-12 col-lg-3">
                    <div class="steps feature-step last-step">
                        <img src="{{ asset('images/slots/'~slotService.getImage('step4')) }}" alt="">
                        {{ slotService.get('step4')|raw }}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ls s-pt-55 s-pt-md-50 s-pb-5 s-pt-lg-140 s-pb-lg-145 service-section text-center text-lg-left c-gutter-0" id="service">
        <div class="container">
            <div class=" col-12 mb-50 text-center">
                <h4>Serviciile<span class="text-gradient">noastre</span></h4>
                <p class="fs-20 color-dark">&nbsp;</p>
                <div class="divider-60 d-none d-xl-block"></div>
            </div>
            <div class="row align-items-center">
                <div class="col-lg-4 col-xl-3">
                    <div class="media">
                        {{ slotService.get('service1')|raw }}
                    </div>
                    <div class="divider-130 d-none d-lg-block"></div>
                    <div class="media">
                        {{ slotService.get('service2')|raw }}
                    </div>
                    <div class="divider-130 d-none d-lg-block"></div>
                    <div class="media">
                        {{ slotService.get('service3')|raw }}
                    </div>
                </div>
                <div class="col-lg-4 col-xl-6">
                    <img src="{{ asset('images/01.png') }}" alt="Next Level Garage">
                </div>
                <div class="col-lg-4 col-xl-3">
                    <div class="media">
                        {{ slotService.get('service4')|raw }}
                    </div>
                    <div class="divider-130 d-none d-lg-block"></div>
                    <div class="media">
                        {{ slotService.get('service5')|raw }}
                    </div>
                    <div class="divider-130 d-none d-lg-block"></div>
                    <div class="media">
                        {{ slotService.get('service6')|raw }}
                    </div>
                </div>
            </div>
        </div>
    </section>


{% endblock %}