@extends('layouts.experience_achat')
@section('meta-title', 'Sélectionnez votre pièce')
@section('meta-keywords', '')
@section('body-class', 'nouveauprojet')
@section('meta-description', 'test')

@section('meta')
    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Sélectionnez votre pièce | Pipcke – Décoration d’intérieur en ligne" />
    <meta property="og:description"
        content="N’hésitez pas à sélectionner l’ensemble des espaces que vous souhaitez décorer ou aménager. Vous pouvez choisir plusieurs pièces." />
    <meta name="description"
        content="N’hésitez pas à sélectionner l’ensemble des espaces que vous souhaitez décorer ou aménager. Vous pouvez choisir plusieurs pièces." />
@endsection

@section('style')
    <style>
        #espacesCount {
            font-size: 30px;
            background: #29b542;
            color: #fff;
            padding: 3px 7px;
            vertical-align: top;
            margin-left: -7px;
        }

        .badge {
            padding-left: 9px;
            padding-right: 9px;
            -webkit-border-radius: 9px;
            -moz-border-radius: 9px;
            border-radius: 9px;
        }

        .label-warning[href],
        .badge-warning[href] {
            background-color: #c67605;
        }

        @media all and (max-width: 500px) {
            header.main-header {
                margin-top: 0px !important;
                top: -1px !important;
                position: fixed !important;
            }
        }

        @media (max-width: 767px) {
            .col-md-3 {
                width: 50%;
                padding: 10px !important;
                ;
                /* Display two columns per row */
            }

            .theme-selection,
            .theme,
            .theme-quiz,
            .theme-quiz-autre {
                padding-top: 20px !important;
                height: 210px;
                margin-bottom: 10px !important;
                line-height: 20px !important;
            }

            .w-75 {
                width: 90% !important;
                font-size: 14px !important;
            }

            .vc_row {
                margin-bottom: 10px !important;
            }
        }
    </style>
@endsection

@section('content')
    <div class="loader">
        <div></div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="container quiz">
                <div id="step6">
                    @include('partials.quiz_step6_grp', ['data' => $data[5], 'nouveauprojet' => 1])
                </div>
            </div>
        </div>
    </div>
@endsection
{{-- @section('script')
<script type="text/javascript">
	$(document).ready(function() {
		$(document).on('click', '.theme', function (event) {
			$([document.documentElement, document.body]).animate({
				scrollTop: $("#confirmer_nouveau_projet").offset().top -200
			}, 500);
		});
	});
</script>
@endsection --}}