@extends('layouts/app')
    @section('content')

    <!-- Page Header Start -->
    <div class="container-fluid page-header py-5 mb-5 wow fadeIn" data-wow-delay="0.1s">
        <div class="container py-5">
            <h1 class="display-3 text-white mb-3 animated slideInDown">Serviços</h1>
            <nav aria-label="breadcrumb animated slideInDown">
                <ol class="breadcrumb text-uppercase mb-0">
                    <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                    <li class="breadcrumb-item"><a class="text-white" href="#">Pagina</a></li>
                    <li class="breadcrumb-item text-primary active" aria-current="page">Serviços</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Page Header End -->

    @php
        use App\Models\Page;
        $pages = Page::get();
        $pages = Page::where('page', 'Servicos')->where('session', 1)->get();
    @endphp

    <!-- Service Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">

                @foreach ($pages as $page)
                    <p class="d-inline-block border rounded-pill py-1 px-4">{{ $page->title }}</p>
                    <h1>{{ $page->subtitle }}</h1>
                @endforeach

            </div>

            @php
                $pages = Page::get();
                $pages = Page::where('page', 'Servicos')->where('session', 2)->get();
            @endphp

            <div class="row g-4">
            @foreach ($pages as $page)
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
               
                    <div class="service-item bg-light rounded h-100 p-5">

                        
                            <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-circle mb-4" style="width: 65px; height: 65px;">
                                <i class="{{ $page->icon }}"></i>
                            </div>
                            <h4 class="mb-3">{{ $page->title }}</h4>
                            <p class="mb-4">{{ $page->subtitle }}</p>
                       

                        <a class="btn" href=""><i class="fa fa-plus text-primary me-3"></i>saiba mais</a>
                     
                    </div>
                   
                </div>
                @endforeach 
            </div>
        </div>
    </div>
    <!-- Service End -->

    <!--Appointment-->
    @include('includes.appointment');

    <!--Testimonial-->
    @include('includes.testimonial');
        
@stop