@extends('layouts.page')

@section('content')

<style>
    #find-out-more-btn {
        background-color: #033266;
        color: #e1a12;
    }

    #find-out-more-btn:hover {
        background-color: #033266;
        color: white;
    }
</style>
    
<div class="page-wrapper">
    <section class="page-title" style="background-image:url(imgs/image-1.jpg)">
    	<div class="auto-container">
			<h1>About Us</h1>
			<ul class="page-breadcrumb">
				<li><a href="{{ route('web.home') }}">Home</a></li>
				<li>{{ $page['name'] }}</li>
			</ul>
        </div>
    </section>


    <div class="row d-flex justify-content-around my-4">
        <div class="col-md-12 col-xl-8">
            <div class="row align-items-center">
                <div class="col-md-3 d-flex justify-content-center">
                    <img src="{{ asset(Storage::url('public/sections/about-us/' . $sections[2]['image'])) }}" alt="" class="img-fluid">
                </div>
                <div class="col-md-9">
                    <div class="px-3">
                        {!! $sections[2]['description'] !!}
                        <div>
                            <a id="find-out-more-btn" class="btn" href="{{ route('web.blog') }}" role="button">FIND OUT MORE</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection