@extends('client.layouts.master')
@section('content')

<style>
    ul.nav.nav-tabs.tp-tabs.style-two{
        text-align: left;
    }
    .pt-4, .py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem !important;
}
</style>

    <!-- blog area start -->
    <div class="user-profile-area pd-top-120">
        <div class="container">
            <div class="row pt-4">
                <div class="col-xl-10 col-lg-12">
                    <div class="row">
                        <div class="col-lg-4">
                            <ul class="nav nav-tabs tp-tabs style-two">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#tabs_1"><i class="fa fa-user"></i>Fire Alarm Systems</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#tabs_2"><i class="fa fa-check-square-o"></i>Video Door Entry Systems</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link"  data-toggle="tab" href="#tabs_3"><i class="fa fa-cog"></i>CCTV Solutions</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link"  data-toggle="tab" href="#tabs_4"><i class="fa fa-credit-card-alt"></i>Residential Security</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link"  data-toggle="tab" href="#tabs_5"><i class="fa fa-credit-card-alt"></i>Intruder Alarms</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link"  data-toggle="tab" href="#tabs_5"><i class="fa fa-credit-card-alt"></i>Commercial Security</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xl-7 col-md-8 col-lg-8 offset-xl-1">
                            <div class="tab-content user-tab-content">
                                <div class="tab-pane fade show active" id="tabs_1" >
                                   
                                </div>
                                <div class="tab-pane fade" id="tabs_2">
                                 
                                </div>
                                <div class="tab-pane fade" id="tabs_3">
                                   
                                </div>
                                <div class="tab-pane fade" id="tabs_4">
                                   
                                </div>
                                <div class="tab-pane fade" id="tabs_5">
                                
                                </div>
                                <div class="tab-pane fade" id="tabs_6">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </div>
    <!-- blog area End -->




@endsection