@extends('layouts.app')

@section('content')
    <!-- Header Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">About Us</h4>
            <ol class="breadcrumb d-flex justify-content-center mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Pages</a></li>
                <li class="breadcrumb-item active text-primary">About</li>
            </ol>
        </div>
    </div>
    <!-- Header End -->

    <!-- About Start -->
    <div class="container-fluid bg-light about pb-5">
        <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
        </div>
        <div class="container pb-5">
            <div class="row g-5">
                <div class="col-xl-6 wow fadeInLeft text-center" data-wow-delay="0.2s">
                    <div class="about-item-content bg-white rounded p-5 h-100">
                        <h1 class="display-4 mb-4">Maritimes Republic LTD</h1>
                        </br>
                        <h4>HOW MARITIMES REPUBLIC LTD IS CHANGING AFRICA</h4>
                        <p>● We are limited liability Company Based in Lomé - Togo</p>
                        <p>● We are Committed to provide our Customers with exceptional Services - Trade Global
                            Commodities & Petroleum Product and we have strong partnerships with the industries
                            leading Suppliers. Our Company's Mission is to Contribute Quick and flexible response to
                            meet the Changing & specific needs of Customers. </p>

                        <a class="btn btn-primary rounded-pill py-3 px-5" href="{{ route('service') }}">More Information</a>
                    </div>
                </div>
                <div class="col-xl-6 wow fadeInRight" data-wow-delay="0.2s">
                    <div class="bg-white rounded p-5 h-100">
                        <div class="row g-4 justify-content-center">
                            <div class="col-12">
                                <div class="rounded bg-light">
                                    <img src="{{ asset('img/about.jpg') }}" class="img-fluid rounded w-100" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection