@extends('layouts.front')

@section('css')
@endsection

@section('pagetitle')
<section class="page-title-area about-us-page-title-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-padding">
                    <div class="page-title-content text-center">
                       <p>Our History</p>
                       <h2>About Us</h2>
                    </div>
                    <div class="breadcrumbs text-center">
                       <ul class="page-breadcrumbs">
                           <li><a href="#">home</a></li>
                           <li><a href="#">About Us</a></li>
                       </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('content')
<section class="page-title-area about-us-page-title-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-padding">
                    <div class="page-title-content text-center">
                       <p>About Us</p>
                       <h2>About St. John Law, LLC</h2>
                    </div>
                    <div class="breadcrumbs text-center">
                       <ul class="page-breadcrumbs">
                           <li><a href="#">Home</a></li>
                           <li><a href="#">St. John Law</a></li>
                       </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="welcome-area">
    <div class="welcome-title-area">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <div class="Title-area">
                        <h3>Hello Dear</h3>
                        <h2>Welcome To St. John Law</h2>
                        <p>In the criminal justice system, the people are represented by two separate yet equally important groups: the police, who investigate crime; and the district attorneys.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wellcome-asset">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <div class="asset-content">
                        <h2>Mission <br>& History <span>01.</span></h2>
                        <p>In the criminal justice system, the people are represented by two separate yet equally important groups: the police, who investigate crime; and the district attorneys.</p>
                        <a href="#">Read More <span><i class="fa fa-long-arrow-right"></i></span></a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="asset-content">
                        <h2>Values<br>& Philosophy <span>02.</span></h2>
                        <p>In the criminal justice system, the people are represented by two separate yet equally important groups: the police, who investigate crime; and the district attorneys.</p>
                        <a href="#">Read More <span><i class="fa fa-long-arrow-right"></i></span></a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="asset-content">
                        <h2>Mission<br>& Services <span>03.</span></h2>
                        <p>In the criminal justice system, the people are represented by two separate yet equally important groups: the police, who investigate crime; and the district attorneys.</p>
                        <a href="#">Read More <span><i class="fa fa-long-arrow-right"></i></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="home-9-trust">
    <div class="home-3-contact">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="home-9-slider">
                        <div id="home-9-demo" class="owl-carousel owl-theme">
                            <div class="item home-9-slider-content text-center">
                                <h2>“We cannot expect people to have respect for law and order until we teach respect to those we have entrusted to enforce those laws.”</h2>
                                <p>― Hunter S. Thompson</p>
                            </div>
                            <div class="item home-9-slider-content text-center">
                                <h2>“We cannot expect people to have respect for law and order until we teach respect to those we have entrusted to enforce those laws.”</h2>
                                <p>― Michael S. Butler</p>
                            </div>
                        </div>
                    </div>
                </div>
           </div>
        </div>
    </div>
</section>



<div class="help-area">
    <div class="left-half"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <div class="help-img">
                    <img src="images/horse.png" alt="">
                </div>
            </div> <!-- end left side image area -->

            <div class=" col-md-6 help-custom-padding">
                <div class="help-text-heading">
                    <h2>WE ARE HERE TO PROVIDE LEGAL HELP</h2>
                    <p>In Trust, we are aiming to provide high quality legal consultancy, support and results for your legal issues.</p>
                </div><!--  end heading text -->

                <!-- start content -->
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="help-content">
                            <i class="fa fa-gavel"></i>
                            <h2>Get Your Legal Advice</h2>
                            <p>Post your question and get free legal advice directly from our experienced lawyers, We are here to help you.</p>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="help-content">
                            <i class="fa fa-users"></i>
                            <h2>Work With Expert Lawyers</h2>
                            <p>Our lawyers are expertise and experts in all law fields, They will obtain the best results they could achieve.</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="help-content">
                            <i class="fa fa-money"></i>
                            <h2>Have Great Discounted Rates</h2>
                            <p>If Trust accept your case, we'll never require you to pay huge fees or expenses as we work with alow cost.</p>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="help-content">
                            <i class="fa fa-university"></i>
                            <h2>Review Your Case Documents</h2>
                            <p>Get a thorough review of your legal documents by an expert attorney for as little as $0 per document.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<section class="our-client-area">
    <div class="welcome-title-area">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <div class="Title-area">
                        <h3>Learn More </h3>
                        <h2>Our Clients</h2>
                        <p>In the criminal justice system, the people are represented by two separate yet equally important groups: the police, who investigate crime; and the district attorneys.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="client-slider">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="client-content">
                        <div id="client-demo" class="owl-carousel owl-theme home-client-content">
                            <div class="item client-item">
                                <a href="#"><img src="images/client-1.png" alt=""></a>
                            </div>
                            <div class="item client-item">
                                <a href="#"><img src="images/client-2.png" alt=""></a>
                            </div>
                            <div class="item client-item">
                                <a href="#"><img src="images/client-3.png" alt=""></a>
                            </div>
                            <div class="item client-item">
                                <a href="#"><img src="images/client-4.png" alt=""></a>
                            </div>
                            <div class="item client-item">
                                <a href="#"><img src="images/client-5.png" alt=""></a>
                            </div>
                            <div class="item client-item">
                                <a href="#"><img src="images/client-6.png" alt=""></a>
                            </div>
                            <div class="item client-item">
                                <a href="#"><img src="images/client-1.png" alt=""></a>
                            </div>
                            <div class="item client-item">
                                <a href="#"><img src="images/client-2.png" alt=""></a>
                            </div>
                        </div>
                        <div class="testimonial-customNavigation client-customNavigation">
                          <a class="btn prev"><i class="fa fa-long-arrow-left"></i></a>
                          <a class="btn next"><i class="fa fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
@endsection