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

{% block css %}

{% endblock %}

{% block body %}
    <!-- start banner-->
    <div class="rev_slider_wrapper fullscreen custom-controls">
        <div id="rev_slider_1" class="rev_slider fullscreenbanner" style="display: none;" data-version="5.4.5">
            <ul>
                <li data-transition="fade">

                    <img src="{{ asset('assets/img/img/banner1.jpg') }}" alt="slide6" class="rev-slidebg">

                    <!-- start layer 1 -->
                    <div class="tp-caption alt-font font-weight-700 text-white font-champagne-limousine" data-x="30" data-y="center" data-voffset="[-100,-100,-130,-140]" data-fontsize="[58,48,36,32]" data-lineheight="[60,52,40,36]" data-width="[700, 700, 500, 300]" data-whitespace="[normal, normal, normal, normal]" data-frames='[{
                                    "delay":0,
                                    "split":"chars",
                                    "splitdelay":0.05,
                                    "speed":2000,
                                    "frame":"0",
                                    "from":"y:[-100%];z:0;rZ:35deg;sX:1;sY:1;skX:0;skY:0;",
                                    "mask":"x:0px;y:0px;s:inherit;e:inherit;",
                                    "to":"o:1;",
                                    "ease":"Power4.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]' data-splitout="none">Salon de toilettage pour Chiens et Chats à Galgon
                    </div>
                    <!-- end layer 1 -->

                    <!-- layer nr. 2 -->
                    <div class="tp-caption slider-text text-white font-champagne-limousine" data-x="30" data-y="center" data-voffset="[-10,-10,-30,-15]" data-fontsize="[19,19,19,19]" data-lineheight="30" data-width="[600, 500, 400, 300]" data-whitespace="[normal, normal, normal, normal]" data-frames='[{
                                    "delay":1400,
                                    "speed":1500,
                                    "frame":"0",
                                    "from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;",
                                    "mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;",
                                    "ease":"Power3.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]'>
                        <p class="white-space">Toutes les races de chiens et chats sont les bienvenues !</p>
                    </div>
                    <!-- END LAYER 2 -->

                    <!-- layer nr. 3 -->
                    <div class="tp-caption" data-x="30" data-y="center" data-voffset="[90,110,90,115]" data-lineheight="55" data-width="[200, 300, 200, 200]" data-hoffset="0" data-frames='[{
                                    "delay":1800,
                                    "speed":2000,
                                    "frame":"0",
                                    "from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;",
                                    "to":"o:1;",
                                    "ease":"Power4.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]'><a href='{{ path('contact') }}' class='butn theme'><span>Contact</span></a>
                    </div>
                    <!-- layer nr. 3 -->

                </li>

                <!--
                <li data-transition="fade">

                    <img src="{{ asset('assets/img/img/banner2.jpg') }}" alt="slide2" class="rev-slidebg">

                    <div class="tp-caption tp-resizeme text-center alt-font font-weight-700 text-white" data-x="['center','center','center','center']" data-y="center" data-hoffset="[0,0,0,0]" data-voffset="[-100,-100,-130,-140]" data-fontsize="[58,48,36,32]" data-lineheight="[60,52,40,36]" data-width="[700, 700, 500, 300]" data-whitespace="[normal, normal, normal, normal]" data-frames='[{
                                    "delay":0,
                                    "split":"chars",
                                    "splitdelay":0.05,
                                    "speed":2000,
                                    "frame":"0",
                                    "from":"y:[-100%];z:0;rZ:35deg;sX:1;sY:1;skX:0;skY:0;",
                                    "mask":"x:0px;y:0px;s:inherit;e:inherit;",
                                    "to":"o:1;",
                                    "ease":"Power4.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]' data-splitout="none">Soins et toilettage canin
                    </div>
                    <div class="tp-caption tp-resizeme text-center slider-text text-white" data-x="['center','center','center','center']" data-y="center" data-voffset="[-10,-10,-30,-15]" data-fontsize="[19,19,19,19]" data-lineheight="30" data-hoffset="[0,0,0,0]" data-width="[600, 500, 400, 300]" data-whitespace="[normal, normal, normal, normal]" data-frames='[{
                                    "delay":1400,
                                    "speed":2000,
                                    "frame":"0",
                                    "from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;",
                                    "mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;",
                                    "ease":"Power3.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]'>
                        <p class="white-space">Emmenez vos petits monstres pour un moment de bien être.</p>
                    </div>
                    <div class="tp-caption text-center tp-resizeme" data-x="['center','center','center','center']" data-y="center" data-voffset="[90,110,90,115]" data-lineheight="55" data-width="[200, 200, 200, 200]" data-hoffset="[0,0,0,0]" data-frames='[{
                                        "delay":1800,
                                    "speed":2000,
                                    "frame":"0",
                                    "from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;",
                                    "to":"o:1;",
                                    "ease":"Power4.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]'>
                        <a href="{{ path('contact') }}" class="butn theme">
                            <span class="alt-font">Contact</span>
                        </a>
                    </div>
                </li>-->

                <li data-transition="fade">

                    <img src="{{ asset('assets/img/img/banner3.jpg') }}" alt="slide3" class="rev-slidebg">

                    <!-- start layer 1 -->
                    <div class="tp-caption tp-resizeme alt-font font-weight-700 text-white font-champagne-limousine" data-x="30" data-y="center" data-voffset="[-100,-100,-130,-140]" data-fontsize="[58,48,36,32]" data-lineheight="[60,52,40,36]" data-width="[700, 700, 500, 300]" data-whitespace="[normal, normal, normal, normal]" data-frames='[{
                                    "delay":0,
                                    "split":"chars",
                                    "splitdelay":0.05,
                                    "speed":2000,
                                    "frame":"0",
                                    "from":"y:[-100%];z:0;rZ:35deg;sX:1;sY:1;skX:0;skY:0;",
                                    "mask":"x:0px;y:0px;s:inherit;e:inherit;",
                                    "to":"o:1;",
                                    "ease":"Power4.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]' data-splitout="none">Un univers consacré au bien-être animal
                    </div>
                    <!-- end layer 1 -->

                    <!-- layer nr. 2 -->
                    <div class="tp-caption tp-resizeme slider-text text-white font-champagne-limousine" data-x="30" data-y="center" data-voffset="[-10,-10,-30,-15]" data-fontsize="[19,19,19,19]" data-lineheight="30" data-width="[600, 500, 400, 300]" data-whitespace="[normal, normal, normal, normal]" data-frames='[{
                                    "delay":1400,
                                    "speed":1500,
                                    "frame":"0",
                                    "from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;",
                                    "mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;",
                                    "ease":"Power3.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]'>
                        <p class="white-space">Prestations de toilettage et vente de produits animaliers</p>
                    </div>
                    <!-- END LAYER 2 -->

                    <!-- layer nr. 3 -->
                    <div class="tp-caption tp-resizeme" data-x="30" data-y="center" data-voffset="[90,110,90,115]" data-lineheight="55" data-width="[200, 200, 200, 200]" data-hoffset="0" data-frames='[{
                                        "delay":1800,
                                    "speed":2000,
                                    "frame":"0",
                                    "from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;",
                                    "to":"o:1;",
                                    "ease":"Power4.easeInOut"
                                    },{
                                    "delay":"wait",
                                    "speed":300,
                                    "frame":"999",
                                    "to":"auto:auto;",
                                    "ease":"Power3.easeInOut"}]'><a href='{{ path('contact') }}' class='butn theme'><span>Contact</span></a>
                    </div>
                    <!-- layer nr. 3 -->

                </li>

            </ul>
        </div>
    </div>
    <!-- end banner-->

    <!-- start extra section -->
    <section>
        <div class="container lg-container">
            <div class="row">
                <div class="col-lg-4 col-md-6 sm-margin-40px-bottom">
                    <img src="{{ asset('assets/img/img/magasin-galgon.png') }}" class="border-radius-5" alt="" />
                    <div class="padding-20px-top">
                        <h5 class="font-weight-800">Salon situé à Galgon</h5>
                        <p>Le salon de toilettage vous accueille au sein du pôle animalier de Galgon du lundi au samedi matin sur rendez vous (mercredi fermé)</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 sm-margin-40px-bottom">
                    <img src="{{ asset('assets/img/img/services.jpg') }}" class="border-radius-5" alt="" />
                    <div class="row">
                        <div class="col-5">
                            <ul class="no-margin-bottom padding-20px-top working-hour">
                                <li>Bain</li>
                                <li>Brushing</li>
                                <li>Démêlage</li>
                                <li>Epilation</li>
                                <li>Coupe ciseaux</li>
                                <li>Tonte</li>
                            </ul>
                        </div>
                        <div class="col-7">
                            <ul class="no-margin-bottom padding-20px-top working-hour">
                                <li>Soins dermatologiques</li>
                                <li>Coupe des ongles</li>
                                <li>Vente d’accessoires</li>
                                <li>Vente de cosmétiques</li>
                                <li>Alimentation</li>
                                <li>Conseils pratiques</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="bg-img padding-30px-all" data-background="img/img/banner1.jpg">
                        <h4 class="font-size24 font-weight-800">Horaires d'ouverture</h4>
                        <p>Uniquement sur rendez-vous.</p>
                        <ul class="list-style2">
                            <li>Lundi<span class="float-right text-theme-color">9h30 - 17h00</span> </li>
                            <li>Mardi<span class="float-right text-theme-color">9h30 - 17h00</span> </li>
                            <li>Mercredi<span class="float-right text-theme-color">Fermé</span> </li>
                            <li>Jeudi<span class="float-right text-theme-color">9h30 - 17h00</span> </li>
                            <li>Vendredi<span class="float-right text-theme-color">9h30 - 17h00</span> </li>
                            <li>Samedi<span class="float-right text-theme-color">9h30 - 12h00</span> </li>
                            <li>Dimanche<span class="float-right text-theme-color">Fermé</span> </li>
                        </ul>
                        <a href="{{ path('contact') }}" class="butn theme small margin-30px-top"><span class="alt-font">Me contacter</span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end extra section -->

    <!-- start testimonial section -->
    <section class="bg-img cover-background padding-100px-tb" data-overlay-dark="0" data-background="{{ asset('assets/img/img/bandeau1.jpg') }}">
        <div class="container lg-container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="bg-light-gray padding-60px-lr padding-70px-tb xs-padding-40px-all border-radius-5 mobile-text-center owl-theme owl-carousel" id="testmonials-carousel">
                        <div class="row align-items-center">
                            <div class="col-sm-3 mobile-margin-25px-bottom">
                                <img src="{{ asset('assets/img/testmonials/nina-laurent.jpg') }}" class="border-radius-50" alt="" />
                            </div>
                            <div class="col-sm-9">
                                <h4>Nina et Laurent</h4>
                                <p class="no-margin-bottom">"Toiletteur agréable et professionnelle. Un vrai plaisir ! Nous reviendrons."</p>
                            </div>
                        </div>
                        <div class="row align-items-center">
                            <div class="col-sm-3 mobile-margin-25px-bottom">
                                <img src="{{ asset('assets/img/testmonials/fabien.jpg') }}" class="border-radius-50" alt="" />
                            </div>
                            <div class="col-sm-9">
                                <h4>Fabien</h4>
                                <p class="no-margin-bottom">"Super prestation sur mes Main coon, je recommande !"</p>
                            </div>
                        </div>
                        <div class="row align-items-center">
                            <div class="col-sm-3 mobile-margin-25px-bottom">
                                <img src="{{ asset('assets/img/testmonials/debo.jpg') }}" class="border-radius-50" alt="" />
                            </div>
                            <div class="col-sm-9">
                                <h4>Déborah</h4>
                                <p class="no-margin-bottom">"Très ravie d'avoir retrouvé mon petit Néo tout propre et tout beau !"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end testimonial section -->

    <!--
    <section class="no-padding-bottom">
        <div class="container lg-container">

            <div class="text-center margin-40px-bottom">
                <h3 class="font-weight-900 font-size50 xs-font-size40 xs-margin-10px-bottom">Dernières actualités</h3>
                <p class="width-50 sm-width-70 xs-width-80 mobile-width-100 center-col">Retrouvez l'actualité du salon.</p>
            </div>

            <div class="row">

                <div class="col-lg-4 sm-margin-50px-bottom xs-margin-40px-bottom">
                    <div class="blog-block overflow-hidden">
                        <div class="blog-img position-relative">
                            <img src="{{ asset('assets/img/img/services.jpg') }}" alt="" />
                            <div class="blog-date text-white text-center padding-15px-top z-index-1">
                                <span class="font-size20 md-font-size18">21 Jan</span>
                            </div>
                        </div>
                        <div class="padding-20px-top">
                            <h5><a href="gallery-blog-post.html" class="text-extra-dark-gray">The ultimate guide to pet-friendly events</a></h5>
                            <a href="gallery-blog-post.html" class="text-extra-dark-gray">En savoir plus<i class="fas fa-arrow-right margin-5px-left font-size12 vertical-align-middle"></i></a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 sm-margin-50px-bottom xs-margin-40px-bottom">
                    <div class="blog-block overflow-hidden">
                        <div class="blog-img position-relative">
                            <img src="{{ asset('assets/img/img/services.jpg') }}" alt="" />
                            <div class="blog-date text-white text-center padding-15px-top z-index-1">
                                <span class="font-size20 md-font-size18">18 Jan</span>
                            </div>
                        </div>
                        <div class="padding-20px-top">
                            <h5><a href="gallery-blog-post.html" class="text-extra-dark-gray">How to keep your pets comfortable anytime</a></h5>
                            <a href="gallery-blog-post.html" class="text-extra-dark-gray">En savoir plus<i class="fas fa-arrow-right margin-5px-left font-size12 vertical-align-middle"></i></a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="blog-block overflow-hidden">
                        <div class="blog-img position-relative">
                            <img src="{{ asset('assets/img/img/services.jpg') }}" alt="" />
                            <div class="blog-date text-white text-center padding-15px-top z-index-1">
                                <span class="font-size20 md-font-size18">10 Jan</span>
                            </div>
                        </div>
                        <div class="padding-20px-top">
                            <h5><a href="gallery-blog-post.html" class="text-extra-dark-gray">What to look for when buying a dog coat</a></h5>
                            <a href="gallery-blog-post.html" class="text-extra-dark-gray">En savoir plus<i class="fas fa-arrow-right margin-5px-left font-size12 vertical-align-middle"></i></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>-->

{% endblock %}

{% block javascripts %}

{% endblock %}