@extends('site.layout')
@section('content')

@section('styles')
    <style>
        .boxed_wrapper {
            background: #fff none repeat scroll 0 0 !important;
        }
        @media (max-width: 768px)
        {
            img{
                width: 100% !important;
            }
        }
    </style>
@endsection

<!--Start blog area-->
<section id="blog-area" class="blog-single-area" style="background-image: url({{ asset('site_assets/images/Background.png') }}) !important;
    background-repeat: no-repeat !important;
    background-position-y: -7% !important">
    <div class="container">

        <div style="text-align: center">
            <img src="{{ asset('site_assets/images/Invisalign-Logo-1200x343.png') }}" alt="Awesome Image" style="
            width: 50%; text-align: center;">
        </div>
        @foreach ($invisalign as $in)
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="blog-post">
                    <!--Start Single blog Post-->
                    <div class="single-blog-post single_post">
                        <div class="sec-title max-width text-center">
                            <h1>{{ $in['titulo'] }}</h1>
                        </div>

                        <div class="text-box1 noticia-texto" style="width: 80%; margin-left: 10%; font-size: 16px !important">
                            {!! $in['texto'] !!}
                        </div>
                        <div class="single-post-image">
                            <div class="image-box" style="text-align: center;">
                                <img src="{{ url("storage/invisalign/{$in["imagem"]}") }}" alt="" style="width: 60%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>


@endsection