<div class="mpl-box-lg text-center" id="demo" data-sr="demos" data-sr-interval="200" data-sr-duration="1200"
            data-sr-distance="20">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6 col-xl-5">
                        <h2 class="display-2" data-sr-item="demos">What We <span class="text-brand">ARE</span> About
                        </h2>
                        <p class="lead mb-60" data-sr-item="demos"
                            style="visibility: visible;width: 650px;margin-left: -80px;">We are a militarily structured organisation with approximately half of our current membership comprised of military veterans from all services and multiple countries, but welcome all to join and become a part of our family.</p>
                    </div>
                </div>
                <div class="row hgap-lg vgap-lg justify-content-center">
                    <div class="col-12 col-md-6" data-sr-item="demos">
                        <div class="mpl-demo-item">
                            <a class="mpl-demo-item-image" href="#">
                                <img src="{{ asset('assets/images/bg/training.png') }}" alt="">
                            </a>
                            <a class="mpl-demo-item-title h3" href="#">Training</a>
                            <span class="mpl-demo-item-description">
                                <ul style="list-style:none; margin-left: -40px;">
                                    <li>Introductory</li>
                                    <li>Intermediate</li>
                                    <li>Advanced</li>
                                    <li>Improvement Monitoring</li>
                                </ul>
                            </span>
                            <a class="mpl-demo-item-btn btn btn-brand" href="{{ route('apply') }}">Apply Now</a>
                        </div>
                    </div>
                    <div class="col-12 col-md-6" data-sr-item="demos">
                        <div class="mpl-demo-item">
                            <a class="mpl-demo-item-image" href="#">
                                <img src="{{ asset('assets/images/bg/cb.png') }}" alt="">
                            </a>
                            <a class="mpl-demo-item-title h3" href="#">Clan Battles</a>
                            <span class="mpl-demo-item-description">
                                <div class="row">
                                    <div class="col-md-3">NGA<br><span id="league"><img
                                                src="{{ asset('assets/images/league/storm1.png') }}" alt="Storm I"></span>
                                    </div>
                                    <div class="col-md-3">NGA-A<br><span id="league"><img
                                                src="{{ asset('assets/images/league/storm1.png') }}" alt="Storm I"></span>
                                    </div>
                                    <div class="col-md-3">NGA-B<br><span id="league"><img
                                                src="{{ asset('assets/images/league/gale1.png') }}" alt="Storm I"></span>
                                    </div>
                                    <div class="col-md-3">NGA-D<br><span id="league"><img
                                                src="{{ asset('assets/images/league/storm3.png') }}" alt="Storm I"></span>
                                    </div>
                                </div>
                            </span>
                            <a class="mpl-demo-item-btn btn btn-brand" href="{{ route('apply') }}">Apply Now</a>
                        </div>
                    </div>
                    <div class="col-12 col-md-6" data-sr-item="demos">
                        <div class="mpl-demo-item">
                            <a class="mpl-demo-item-image" href="#">
                                <img src="{{ asset('assets/images/bg/clans.png') }}" alt="">
                            </a>
                            <a class="mpl-demo-item-title h3" href="#">Competitive, Semi-Competitve &amp; Casual
                                Clans</a>
                            <span class="mpl-demo-item-description">
                                <ul style="list-style:none; margin-left: -40px;">
                                    <li><span style="color: lime;">+</span>25% to Free XP</li>
                                    <li><span style="color: deeppink;">-</span>15% to Research Costs</li>
                                    <li><span style="color: deeppink;">-</span>12% to Repair Costs</li>
                                    <li><span style="color: lime;">+</span>10% to Commander XP</li>
                                    <li><span style="color: lime;">+</span>10% More Coal</li>
                                    <li><span style="color: lime;">+</span>10% More Steel</li>
                                    <li><span style="color: lime;">+</span>5% to XP For All Ships</li>
                                </ul>
                            </span>
                            <a class="mpl-demo-item-btn btn btn-brand" href="{{ route('apply') }}">Apply Now</a>
                        </div>
                    </div>
                    <div class="col-12 col-md-6" data-sr-item="demos">
                        <div class="mpl-demo-item">
                            <a class="mpl-demo-item-image" href="#">
                                <img src="assets/images/demo/demo-gamer.jpg" alt="">
                            </a>
                            <a class="mpl-demo-item-title h3" href="#">Website</a>
                            <span class="mpl-demo-item-description">Get your PR, ship stats, etc. <span
                                    class="badge badge-warning">Current Work In Progress</span></span>
                            <a class="mpl-demo-item-btn btn btn-brand" href="{{ route('apply') }}">Apply Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>