@extends('frontend.layouts.master')
@section('content')
<div class="page-content">
	<!--section-->
	<div class="section mt-0">
		<div class="breadcrumbs-wrap">
			<div class="container">
				<div class="breadcrumbs">
					<a href="{{ url('/') }}">Home</a>
					<span>{{ $page_name }}</span>
				</div>
			</div>
		</div>
	</div>
	<!--//section-->
	<!--section-->
	<div class="section page-content-first mb-6">
		<div class="container pt-5">
            @foreach ($messsages as $messsages)

			<div class="row py-4 mb-2">
				<div class="col-md-8 order-2 centerme">
                   
					<div class="overflow-hidden">
                       
						<h2 class="text-color-dark font-weight-bold text-8 mb-0 pt-0 mt-0 appear-animation animated maskUp appear-animation-visible" data-appear-animation="maskUp" data-appear-animation-delay="300" style="animation-delay: 300ms;">{{$messsages->name}}</h2>
					</div>
					<div class="overflow-hidden mb-3">
						<p class="font-weight-bold text-primary text-uppercase mb-0 appear-animation animated maskUp appear-animation-visible" data-appear-animation="maskUp" data-appear-animation-delay="500" style="animation-delay: 500ms;">{{$messsages->designation}}</p>
					</div>
					<hr class="solid my-4 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900" style="animation-delay: 900ms;">
					<p class="lead appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700" style="animation-delay: 700ms;">
                        <p> {{$messsages->message}}</p>
					
				</div>
				<div class="col-md-4 order-md-2 mb-4 mb-lg-0 appear-animation animated fadeInRightShorter appear-animation-visible" style="text-align:center;" data-appear-animation="fadeInRightShorter" style="animation-delay: 100ms;">
					<img src="{{ asset($messsages->image) }}" class="img-fluid mb-2" alt="">
				</div>
			</div>
            @endforeach
		</div>
	</div>
	</div>

@endsection