@extends('reachassuree_agent_web/theme-4/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .form-control:focus {
        border-color: #25cdc7;
    }

    .quform-has-error input,
    .quform-has-error textarea,
    .quform-has-error select,
    .quform-has-error input[type=file],
    .quform-has-error .custom-file-label {
        border-color: #f5543f;
    }

    .legal-termcond ul.nav .nav-item button.nav-link {
        width: 100%;
        display: block;
        text-decoration: none;
    }

    .legal-termcond ul.nav li.nav-item {
        flex: 1;
        text-align: center;
    }

    p.doc-p {
        font-weight: 500;
        font-size: 15px;
        line-height: 21px;
    }

    p.content {
        position: relative;
        margin-bottom: 5px;
    }

    .content::before {
        content: "";
        background: -webkit-linear-gradient(left, #35d3e1 -45%, #023E8A 110%, #023E8A 140%);
        background: linear-gradient(90deg, #35d3e1 -45%, #023E8A 110%, #023E8A 140%);
        border-radius: 50%;
        height: 6px;
        width: 6px;
        position: absolute;
        left: -15px;
        top: 7px;
    }

    p.heading {
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 8px;
        color: #272c49;
        text-transform: uppercase;
    }

    p.content1 {
        font-weight: 600;
        margin-bottom: 8px;
    }

    .nav {
        background-color: #272c49;
        border-radius: 0.8rem;
    }

    .nav-tabs {
        border-bottom: 0;
    }

    .nav-link {
        color: #ffffff;
        padding: 0.7rem 1.5rem;
        font-weight: 500;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        border-color: unset;
        border: none;
        color: #fff;
        background-color: #47cdc7;
        border-radius: 0.6rem;
    }

    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border-color: unset;
        border: 0;
        color: #ffffff;
    }

    .nav-tabs .nav-link {
        border-radius: 0.6rem;
        border: 0;
    }
</style>

<!-- PAGE TITLE ================================================== -->
<section class="page-title-section top-position1 bg-img cover-background left-overlay-dark" data-overlay-dark="6" data-background="{{ asset('assets-theme4/img/banner/contact-1.png')}}">
    <div class="container">
        <div class="page-title">
            <div class="row">
                <div class="col-md-12">
                    <h1>Legal Page</h1>
                </div>
                <div class="col-md-12">
                    <ul class="ps-0">
                        <li><a href="{{ route('home.page') }}" class="text-white">Home</a></li>
                        <li><a href="{{route('legal.pages')}}" class="text-white">Legal Page</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="d-inline-block p-2 border border-width-2 border-white top-20 right-10 ani-move position-absolute rounded-circle z-index-1"></div>
    <div class="d-inline-block p-2 border border-width-2 border-white bottom-10 left-10 ani-left-right position-absolute z-index-1"></div>
    <img src="{{ asset('assets-theme4/img/content/shape5.png')}}" class="position-absolute top-20 left-5 ani-top-bottom z-index-1" alt="...">
</section>

<!-- CONTACT FORM ================================================== -->
<section class="mt-5 mb-4 container legal-termcond">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">{{$data['terms_condition']}} </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">{{$data['terms_of_use']}}</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="intellectual-property-policy-tab" data-bs-toggle="tab" data-bs-target="#intellectual-property-policy" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">{{$data['PropertiesPolicy']}}</button>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    {!! $data['terms_condition_description']!!}
                </div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                    {!! $data['terms_of_use_description']!!}
                </div>
                <div class="tab-pane fade" id="intellectual-property-policy" role="tabpanel" aria-labelledby="intellectual-property-policy-tab">
                    {!!$data['PropertiesPolicy_description']!!}
                </div>
            </div>
        </div>
    </div>
</section>
@endsection