@extends('layouts.app')

@section('title', 'CNP')

@section('home')

    @if ($articles)
        @include('home.articles')
    @endif

    @if ($slides)
        @include('home.slides')
    @endif

    <div class="container">
        <div class="row" style="padding-top:40px;">
            <div class="col-md-3">
                <div class="jelly_homepage_builder jl_cus_grid_overlay">
                    @include('home.evenements')
                </div>
            </div>
            <div class="col-md-9 home circulaire-timeline">
                @if ($circulaires)
                    @include('home.circulaires')
                @endif
            </div>
        </div>
    </div>

    <div class="container-fluid bg-white-grey">
        <div class="container">
            <div class="row" style="padding-top:40px;">
                <div class="col-md-12" style="padding-left:05px;">
                    @if ($services)
                        @include('home.services')
                    @endif
                </div>

                {{--  <div class="col-md-4 publication-home-side">
                    @if ($publications)
                        @include('home.publications')
                    @endif
                </div>  --}}
            </div>
        </div>
    </div>

    @if ($typePartenaires)
        @include('home.partenaires-home')
    @endif
@endsection

@section('css')
    <style>
        .my-content-page {
            display: none !important;
        }
        .bg-blue {
            background-color: #1b63a6;
        }
        .text-white {
            color: white;
        }
        .text-center {
            text-align: center !important;
        }
        .p-7 {
            padding: 7px !important;
        }
        .p-x-7 {
            padding: 7px 0px !important;
        }
        .pb-0 {
            padding-bottom: 0px !important
        }
        .pt-7 {
            padding-top: 03px !important
        }
        .mt-10 {
            margin-top: 10px !important;
        }
        .mb-10 {
            margin-bottom: 10px !important;
        }
        .bordered {
            border: 1px solid #1b63a6;
        }
        @media (max-width: 767.98px) {
            .article-slid-title (
                display: none !important;
            )
        }
        @media (min-width: 992px) { 
            .carousel-inner.slides {
                height: 400px !important;
            }
        }
    </style>
@endsection

@section('script')
    <script>
        $('#blogCarousel').carousel({
            interval: 5000
		});
    </script>
@endsection