@extends('layouts.frontend')

@section('title', $service->title)

@section('content')
<!-- En-tête -->
<section class="hero-section">
    <div class="container text-center">
        <p class="lead mb-4">{{ $service->title }}</p>
        <nav aria-label="fil d'ariane">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item"><a href="/what-we-do" class="text-white text-decoration-none">Ce que nous faisons</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">{{ $service->title }}</li>
            </ol>
        </nav>
    </div>
</section>

    <!-- Services Section -->
    <section class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-md-8 mx-auto" style="text-align: justify;">
                    <h2 class="section-title">{{ $service->title }}</h2>
                    <p class="lead">{!! $service->description !!}</p>
                </div>
            </div>
        </div>
    </section>

@endsection