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

{% block stylesheets %} 

<style>
.chooseus-section .offer-box .bg-layer:before {
    position: absolute;
    content: '';
    background: linear-gradient(rgb(5 16 54 / 98%), rgba(5, 16, 54, 0.7), rgb(5 16 54));
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0.9;
}
.offer-box h2 {
    margin-top: 0;
}
</style>
{% endblock %}

{% block body %}

        <!-- page-title -->
        <section class="page-title centred">
            <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/background/page-title.jpg')}});"></div>
            <div class="auto-container">
                <div class="content-box">
                    <h1>A propos de nous</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="{{path('home')}}">Accueil</a></li>
                        <li>A propos de nous</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- page-title end -->


        <!-- about-style-two -->
        <section class="about-style-two pt_150 pb_150">
            <div class="pattern-layer-2" style="background-image: url({{asset('assets/assets/images/shape/shape-12.png')}});"></div>
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-6 col-md-12 col-sm-12 image-column">
                        <div class="image_block_one">
                            <div class="image-box mr_50 pl_110 pt_80">
                                <figure class="image"><img src="{{asset('assets/assets/images/resource/about-1.jpg')}}" alt=""></figure>
                                <div class="video-inner" style="background-image: url({{asset('assets/assets/images/resource/about-2.jpg')}});">
                                    {# <a href="https://www.youtube.com/watch?v=nfP5N9Yc72A&amp;t=28s" class="lightbox-image video-btn" data-caption=""><i class="icon-12"></i></a> #}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content_block_five">
                            <div class="content-box">
                                <div class="sec-title mb_30">
                                    <span class="sub-title">À propos de l'entreprise</span>
                                    <h2>Notre mission</h2>
                                </div>
                                <div class="text-box mb_50">
                                    <p>Nous proposons des expériences de voyage sur mesure, alliant authenticité, sécurité et découverte.</p>
                                    <p>Notre équipe dédiée met tout en œuvre pour créer des séjours inoubliables et répondre à vos besoins.</p>
                                </div>
                                <div class="inner-box mb_55">
                                    <div class="count-outer count-box">
                                        <span class="count-text" data-speed="1500" data-stop="200">0</span><span>+</span>
                                        <h6>Voyages organisés</h6>
                                    </div>
                                    <div class="count-outer count-box">
                                        <span class="count-text" data-speed="1500" data-stop="40">0</span><span>+</span>
                                        <h6>Destinations Proposées</h6>
                                    </div>
                                    <div class="count-outer count-box">
                                        <span class="count-text" data-speed="1500" data-stop="15">0</span><span></span>
                                        <h6>Partenaires <br /></h6>
                                    </div>
                                </div>
                                <div class="btn-box">
                                    <a href="{{ path('contact') }}" class="theme-btn btn-three">Nous Contacter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- about-style-two end -->


        <!-- feature-section -->
        <section class="feature-section centred pt_150 pb_120 bg-color-1">
            <div class="pattern-layer" style="background-image: url({{asset('assets/assets/images/shape/shape-6.png')}});"></div>
            <div class="auto-container">
                <div class="sec-title mb_60">
                    <span class="sub-title"></span>
                    <h2>Nos valeurs</h2>
                    <p></p>
                </div>
                <div class="row clearfix">
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-18"></i></div>
                                <h3><a href="#">Valeur 1</a></h3>
                                <p>Une valeur à laquelle nous tenons et sommes devoués</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="200ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-19"></i></div>
                                <h3><a href="#">Valeur 2</a></h3>
                                <p>Une valeur à laquelle nous tenons et sommes devoués</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="400ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-20"></i></div>
                                <h3><a href="#">Valeur 3</a></h3>
                                <p>IUne valeur à laquelle nous tenons et sommes devoués</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12 feature-block">
                        <div class="feature-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-21"></i></div>
                                <h3><a href="#">Valeur 4</a></h3>
                                <p>Une valeur à laquelle nous tenons et sommes devoués</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- feature-section end -->


        <!-- chooseus-section -->
        <section class="chooseus-section pt_150 pb_150">
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content_block_one">
                            <div class="content-box mr_30">
                                <div class="sec-title mb_60">
                                    <span class="sub-title">Pourquoi nous choisir ?</span>
                                    <h2>Nos distinctions</h2>
                                    <p>L'engagement pour l'excellence et la passion du voyage, reconnus par les experts du secteur et certifiés par la satisfaction de nos voyageurs.</p>
                                </div>
                                <ul class="list-style-one clearfix pb_30">
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Agence de Voyage de l'Année</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Partenaire Certifié IATA</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Trophée de l'Innovation Touristique</a></li>
                                    <li><a href="#" class="gradient-color"><i class="icon-11 gradient-color"></i> Certification Afnor</a></li>
                                </ul>
                                <div class="btn-box">
                                     <a href="{{ path('contact') }}" class="theme-btn btn-three">Nous Contacter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offer-box">
                <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/background/chooseus-bg.jpg')}});"></div>
                <div class="content_block_two">
                    <div class="content-box" style="max-width: 615px;">
                        <h2 class="gradient-color" style="font-size: 50px;">Mot de la Directrice Générale<span></span></h2>
                        <p> Chers visiteurs,<br>
                            Bienvenue chez Sun Travels & Services.<br>
                            Nous avons conçu une approche du voyage fondée sur la simplicité, l’accompagnement et 
                            l’excellence. De la billetterie à votre installation à destination, en passant par la gestion des formalités, 
                            nous prenons en charge chaque étape pour vous offrir une expérience fluide et sans contrainte.<br>
                            Spécialistes des circuits touristiques, nous créons des expériences immersives et mémorables, pensées dans les moindres détails.<br>
                            Avec <b> Sun Travels & Services</b>, voyagez autrement… avec simplicité et sérénité.
                        </p>
                        <span class="sub-title" style="font-size: 30px;">
                            Miss Rebecc KONAN <br>
                            Directrice Générale
                        </span>
                        {# <h3>Nouvelles expériences en Thaïlande</h3> #}
                    </div>
                </div>
            </div>
        </section>
        <!-- chooseus-section end -->


        <!-- funfact-section -->
        {# <section class="funfact-section centred pt_160 pb_150">
            <div class="bg-layer parallax-bg" data-parallax='{"y": 100}' style="background-image: url({{asset('assets/assets/images/background/funfact-bg.jpg')}});"></div>
            <div class="auto-container">
                <div class="inner-container">
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{asset('assets/assets/images/shape/shape-2.png')}});"></div>
                            <div class="icon-box"><i class="icon-7"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="500">0</span>
                            </div>
                            <h3>Réservation de vols</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{asset('assets/assets/images/shape/shape-3.png')}});"></div>
                            <div class="icon-box"><i class="icon-8"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="250">0</span>
                            </div>
                            <h3>Réservation de croisières</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="arrow-shape" style="background-image: url({{asset('assets/assets/images/shape/shape-2.png')}});"></div>
                            <div class="icon-box"><i class="icon-9"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="750">0</span>
                            </div>
                            <h3>Circuits exceptionnels</h3>
                        </div>
                    </div>
                    <div class="funfact-block-one">
                        <div class="inner-box">
                            <div class="icon-box"><i class="icon-10"></i></div>
                            <div class="count-outer count-box">
                                <span class="count-text" data-speed="1500" data-stop="150">0</span>
                            </div>
                            <h3>Réservation d'hôtels</h3>
                        </div>
                    </div>
                </div>
            </div>
        </section> #}
        <!-- funfact-section end -->


        <!-- team-style-two -->
        <section class="team-style-two pt_150 pb_120 centred">
            <div class="auto-container">
                <div class="sec-title mb_60">
                    <span class="sub-title"></span>
                    <h2>Notre équipe</h2>
                    <p>Des personnes passionnées et expérimentées dédiées à la réussite de vos voyages.</p>
                </div>
                <div class="row clearfix justify-content-center">
                    {% for equipe in equipes %}
                    <div class="col-lg-3 col-md-6 col-sm-12 team-block">
                        <div class="team-block-two wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="image-box">
                                    <figure class="image"><img src="{{ asset('uploads/equipes/' ~ equipe.photo) }}" alt=""></figure>
                                    <div class="share-icon"><i class="icon-23"></i></div>
                                    {# 
                                    <ul class="social-links clearfix">
                                        <li><a href="{{ equipe.facebook }}"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="{{ equipe.twiter }}"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="{{ equipe.linkedin }}"><i class="fab fa-linkedin-in"></i></a></li>
                                    </ul> 
                                    #}
                                </div>
                                <div class="lower-content">
                                    <h3><a href="team-details.html">{{ equipe.nom }}</a></h3>
                                    <span class="designation gradient-color">{{equipe.role}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <!-- team-style-two end -->


        <!-- explore-section -->
        {# <section class="explore-section centred">
            <div class="outer-container clearfix">
                <div class="single-column">
                    <div class="offer-box-one">
                        <figure class="image-layer"><img src="{{asset('assets/assets/images/resource/explore-1.png')}}" alt=""></figure>
                        <span class="sub-title">Envi Évasions</span>
                        <h2><span>Faites votre réservation</span></h2>
                        <h3></h3>
                    </div>
                </div>
                <div class="single-column">
                    <div class="offer-box-two">
                        <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/resource/explore-1.jpg')}});"></div>
                        <figure class="image-layer"><img src="{{asset('assets/assets/images/resource/explore-2.png')}}" alt=""></figure>
                        <div class="sec-title mb_30 light">
                            <span class="sub-title">bonnes vacances</span>
                            <h2>Laissez votre curiosité <br />faire la réservation</h2>
                        </div>
                    </div>
                </div>
                <div class="single-column">
                    <div class="offer-box-three">
                        <figure class="image-layer"><img src="{{asset('assets/assets/images/resource/explore-3.png')}}" alt=""></figure>
                        <div class="sec-title mb_30 light">
                            <span class="sub-title">Bonnes vacances</span>
                            <h2>Laissez votre curiosité <br />faire la réservation</h2>
                        </div>
                    </div>
                </div>
            </div>
        </section> #}
        <!-- explore-section end -->


        <!-- testimonial-section -->
         <!--
        <section class="testimonial-section pt_150 pb_120">
            <div class="thumb-inner">
                <figure class="thumb thumb-1"><img src="{{asset('assets/assets/images/resource/thumb-1.png')}}" alt=""></figure>
                <figure class="thumb thumb-2"><img src="{{asset('assets/assets/images/resource/thumb-2.png')}}" alt=""></figure>
                <figure class="thumb thumb-3"><img src="{{asset('assets/assets/images/resource/thumb-3.png')}}" alt=""></figure>
                <figure class="thumb thumb-4"><img src="{{asset('assets/assets/images/resource/thumb-4.png')}}" alt=""></figure>
                <figure class="thumb thumb-5"><img src="{{asset('assets/assets/images/resource/thumb-5.png')}}" alt=""></figure>
                <figure class="thumb thumb-6"><img src="{{asset('assets/assets/images/resource/thumb-6.png')}}" alt=""></figure>
            </div>
            <div class="auto-container">
                <div class="sec-title centred mb_60">
                    <span class="sub-title">Témoignages</span>
                    <h2>Ce que disent nos clients satisfaits</h2>
                    <p>Des retours positifs qui reflètent notre engagement et notre qualité de service.</p>
                </div>
                <div class="testimonial-carousel swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="{{asset('assets/assets/images/resource/testimonial-1.png')}}" alt=""></figure>
                                        <h3>Jenny Wilson</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="{{asset('assets/assets/images/resource/testimonial-2.png')}}" alt=""></figure>
                                        <h3>Alex Hels</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="testimonial-block-one">
                                <div class="inner-box">
                                    <div class="shape-1"></div>
                                    <div class="shape-2"></div>
                                    <div class="icon-box gradient-color"><i class="icon-22"></i></div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan.</p>
                                    <div class="author-box">
                                        <figure class="thumb-box"><img src="{{asset('assets/assets/images/resource/testimonial-1.png')}}" alt=""></figure>
                                        <h3>Tomas Adison</h3>
                                        <span class="designation gradient-color">Web Designer</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial__pagination"></div>
                </div>
            </div>
        </section>
    -->
        <!-- testimonial-section end -->


      
{% endblock %}