@extends('layouts.app')
@section('expertise')

    <!-- inner banner -->
    <div class="inner-banner">
        <section class="w3l-breadcrumb">
            <div class="container">
                <h4 class="inner-text-title font-weight-bold text-white mb-sm-3 mb-2">Pôles d'expertise</h4>
                <ul class="breadcrumbs-custom-path">
                    <li><a href="{{route('index')}}">Accueil</a></li>
                    <li class="active"><span class="fa fa-chevron-right mx-2" aria-hidden="true"></span>Services</li>
                </ul>
            </div>
        </section>
    </div>
    <!-- //inner banner -->
    
    <!-- services -->
    <div class="popular-wthree py-5">
        <div class="container py-lg-5 py-md-4 py-3">
            <div class="row">
                <div class="col-md-6 left-ser-texti">
                    <h4 class="theme-style-top">Nos clients nous apprécient pour la qualité que nous offrons </h4>
                </div>
            </div>
            <div class="row text-center mt-5">
                <div class="col-lg-3 col-sm-6 serv-block">
                    <a href="#services">
                        <div class="services-wthree-grid">
                            <img src="assets/img/consei.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="popular-wthree-text">
                            <h5>Conseil &amp; stratégie</h5>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 serv-block mt-sm-0 mt-4">
                    <a href="#services">
                        <div class="services-wthree-gri d">
                            <img src="assets/img/branding.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="popular-wthree-text">
                            <h5>Branding</h5>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 serv-block mt-lg-0 mt-4">
                    <a href="#services">
                        <div class="services-wthree-grid">
                            <img src="assets/img/reseau.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="popular-wthree-text">
                            <h5>Réseaux sociaux</h5>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 serv-block mt-lg-0 mt-4">
                    <a href="#services">
                        <div class="services-wthree-grid">
                            <img src="assets/img/web.jpeg" class="img-fluid" alt="" />
                        </div>
                        <div class="popular-wthree-text">
                            <h5>Développement web</h5>
                        </div>
                    </a>
                </div>
            </div>

            <!-- second one -->
            <div class="row text-center mt-5">
                <div class="col-lg-3 col-sm-6 serv-block">
                    <a href="#services">
                        <div class="services-wthree-grid">
                            <img src="assets/img/creation.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="popular-wthree-text">
                            <h5>Création graphique</h5>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6 serv-block mt-sm-0 mt-4">
                    <a href="#services">
                        <div class="services-wthree-grid">
                            <img src="assets/img/MED.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="popular-wthree-text">
                            <h5>Médiation</h5>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- //services -->
@endsection