@extends('template.master')


<style>
    .content {
        padding: 30px 0;
    }

    /*** Pricing table ***/
    .pricing {
        position: relative;
        margin-bottom: 15px;
        border: 3px solid #eee;
    }

    .pricing-active {
        border: 3px solid #eee;
        margin-top: -10px;
        box-shadow: 7px 7px rgba(30, 30, 246, 0.5);
    }

    .pricing:hover {
        border: 3px solid blue;
    }

    .pricing:hover h4 {
        color: #36d7ac;
    }

    .pricing-head {
        text-align: center;
    }

    .pricing-head h3,
    .pricing-head h4 {
        margin: 0;
        line-height: normal;
    }

    .pricing-head h3 span,
    .pricing-head h4 span {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        font-style: italic;
    }

    .pricing-head h3 {
        font-weight: 300;
        color: #fafafa;
        padding: 12px 0;
        font-size: 27px;
        background: blue;
        border-bottom: solid 1px #41b91c;
    }

    .pricing-head h4 {
        color: #bac39f;
        padding: 5px 0;
        font-size: 54px;
        font-weight: 300;
        background: #fbfef2;
        border-bottom: solid 1px #f5f9e7;
    }

    .pricing-head-active h4 {
        color: #36d7ac;
    }

    .pricing-head h4 i {
        top: -8px;
        font-size: 28px;
        font-style: normal;
        position: relative;
    }

    .pricing-head h4 span {
        top: -10px;
        font-size: 14px;
        font-style: normal;
        position: relative;
    }

    /*Pricing Content*/
    .pricing-content li {
        color: #888;
        font-size: 12px;
        padding: 7px 15px;
        border-bottom: solid 1px #f5f9e7;
    }

    /*Pricing Footer*/
    .pricing-footer {
        color: #777;
        font-size: 11px;
        line-height: 17px;
        text-align: center;
        padding: 0 20px 19px;
    }

    /*Priceing Active*/
    .price-active,
    .pricing:hover {
        z-index: 9;
    }

    .price-active h4 {
        color: #36d7ac;
    }

    .no-space-pricing .pricing:hover {
        transition: box-shadow 0.2s ease-in-out;
    }

    .no-space-pricing .price-active .pricing-head h4,
    .no-space-pricing .pricing:hover .pricing-head h4 {
        color: #36d7ac;
        padding: 15px 0;
        font-size: 80px;
        transition: color 0.5s ease-in-out;
    }

    .yellow-crusta.btn {
        color: #FFFFFF;
        background-color: #f3c200;
    }

    .yellow-crusta.btn:hover,
    .yellow-crusta.btn:focus,
    .yellow-crusta.btn:active,
    .yellow-crusta.btn.active {
        color: #FFFFFF;
        background-color: #cfa500;
    }
</style>
@section('content')
<!--==================================
=            Pricing table       =
===================================-->
<section class="feature section pt-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center section-title">
                <h2>Transparant Pricing</h2>
                <p>Border less account pricing.</p>
            </div>
            <div class="col-md-4">
                <div class="pricing hover-effect">
                    <div class="pricing-head">
                        <h3>Basic
                            <span>
                                Get your business up and running
                            </span>
                        </h3>
                        <h4><i>$</i>15
                            <span>
                                Per Month </span>
                        </h4>
                    </div>
                    <ul class="pricing-content list-unstyled">
                        <li>
                            Free plan available
                        </li>
                        <li>
                            100% Transparant cost
                        </li>
                        <li>
                            Real-time spending overview
                        </li>
                        <li>
                            Full data compliance
                        </li>
                        <li>
                            Commitment-free
                        </li>
                        <li>
                            Debit mastercard include
                        </li>
                    </ul>
                    <div class="pricing-footer">
                        <button class="btn btn-primary">Choose this plan</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing pricing-active hover-effect">
                    <div class="pricing-head pricing-head-active">
                        <h3>Advanced
                            <span>
                                Get your business up and running
                            </span>
                        </h3>
                        <h4><i>$</i>49
                            <span>
                                Per Month </span>
                        </h4>
                    </div>
                    <ul class="pricing-content list-unstyled">
                        <li>
                            Free plan available
                        </li>
                        <li>
                            100% Transparant cost
                        </li>
                        <li>
                            Real-time spending overview
                        </li>
                        <li>
                            Full data compliance
                        </li>
                        <li>
                            Commitment-free
                        </li>
                        <li>
                            Debit mastercard include
                        </li>
                    </ul>
                    <div class="pricing-footer">
                        <button class="btn btn-primary">Choose this plan</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing hover-effect">
                    <div class="pricing-head">
                        <h3>Premium
                            <span>
                                Get your business up and running
                            </span>
                        </h3>
                        <h4><i>$</i>99
                            <span>
                                Per Month </span>
                        </h4>
                    </div>
                    <ul class="pricing-content list-unstyled">
                        <li>
                            Free plan available
                        </li>
                        <li>
                            100% Transparant cost
                        </li>
                        <li>
                            Real-time spending overview
                        </li>
                        <li>
                            Full data compliance
                        </li>
                        <li>
                            Commitment-free
                        </li>
                        <li>
                            Debit mastercard include
                        </li>
                    </ul>
                    <div class="pricing-footer">
                        <button class="btn btn-primary">Choose this plan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!--==============================
=            Services            =
===============================-->
<section class="service section bg-gray">
    <div class="container-fluid p-0">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title">
                    <h2>Compare us with others</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium quia temporibus ex repudiandae recusandae molestias dignissimos officiis unde aut eveniet.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-12 align-self-center pr-5 pl-5">
            <div class="row">
                <div class="table-responsive">
                    <table class="table">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">Features</th>
                                <th scope="col">Feature Description</th>
                                <th scope="col">Plan C</th>
                                <th scope="col">Plan B</th>
                                <th scope="col">Plan A</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>


@include('template.contact_information')

@endsection