@extends('reachassuree_agent_web/theme-2/layouts.main')
@section('content')

<link rel="stylesheet" href="{{ asset('assets-theme1/font-awesome.css') }}">
<link rel="stylesheet" href="{{ asset('assets-theme1/font-awesome.min.css') }}">

<style>
    .intro {
        color: #ffffff;
    }

    .theme2-home .default-btn::after {
        background-color: #ffffff;
        color: red;
    }

    .theme2-home .default-btn:hover {
        color: #153e8a;
        border-color: #213438;
    }

    .theme2-home .default-btn:hover i {
        color: #153e8a !important;
    }

    .banner-content .banner-btn.theme2-home .default-btn {
        border: 1px solid #ffffff;
    }

    span.top-title {
        font-size: 52px;
    }

    /*less than 575px*/
    @media only screen and (max-width: 991px) {
        .carousel_se_02 {
            padding-bottom: 30px;
        }

        .carousel_se_02 h2 {
            text-align: center;
            line-height: 38px;
            margin-bottom: 25px;
            font-size: 30px;
        }
    }

    .col-lg-4.col-sm-6 .feedbackw {
        margin-bottom: 30px;
    }

    .descw {
        white-space: normal;
        word-wrap: break-word;
        height: 160px;
    }

    .banner-area.style-two.bg-color-f3f9f8.ptb-100 {
        background: #f1f5fe;
    }

    /* //theme2 web header changes colors*/
    .banner-content.style-three.theme2 {
        background-color: #f1f5fe;
    }

    .banner-content.style-three.theme2 .top-title {
        color: #153e8a;
    }

    .banner-content.style-three.theme2 h1 {
        color: #153e8a;

    }

    .banner-content.style-three.theme2 .banner-btn .default-btn.active {
        border-color: #153e8a;
        color: #153e8a;
    }

    .banner-content .banner-btn .default-btn.active {
        border: 1px solid #023E8A;
    }

    .banner-content.style-three.theme2::before {
        background-color: #f1f5fe;
    }

    .banner-content.style-three.theme2 .banner-btn .default-btn.active i {
        color: #153e8a !important;
    }

    .banner-content.style-three.theme2 h2 {
        color: #153e8a;
        font-size: 42px;
    }

    .owl-nav {
        display: none;
    }

    .owl-stage .owl-item {
        width: 200px !important;
        margin-right: 0px !important;
    }

    .owl-nav button {
        position: absolute;
        top: 50%;
        background-color: #000;
        color: #fff;
        margin: 0;
        transition: all 0.3s ease-in-out;
    }

    .owl-nav button.owl-prev {
        left: 0;
    }

    .owl-carousel .owl-item img {
        width: auto;
        margin: auto;
        cursor: pointer;
    }

    .owl-nav button.owl-next {
        right: 0;
    }

    .owl-dots {
        text-align: center;
        padding-top: 15px;
    }

    .owl-dots button.owl-dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        background: #ccc;
        margin: 0 3px;
    }

    .owl-dots button.owl-dot.active {
        background-color: #000;
    }

    .owl-dots button.owl-dot:focus {
        outline: none;
    }

    .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.38) !important;
    }

    span {
        font-size: 70px;
        position: relative;
        top: -5px;
    }

    .owl-nav button:focus {
        outline: none;
    }

    span.top-title {
        font-size: 16px;
        /* font-weight: 600; */
    }

    h2.mb-3 {
        font-size: 35px !important;
    }
</style>

<!-- Start Banner Area -->
<div class="banner-area style-three">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-xl-7">
                <div class="banner-img-4">
                    <img src="{{ asset('assets-theme2/images/banner/banner-img-4.png')}}" alt="Image">
                </div>
            </div>

            <div class="col-xl-5">
                <div class="banner-content style-three theme2">
                    <span class="top-title">BETTER INSURANCE BEGINS</span>
                    <h2 class="mb-3">We are here to assist you with exploring Protection. </h2>

                    <div class="banner-btn  theme2-home">
                        <a href="{{route('about.us')}}" class="default-btn"><i class="ri-arrow-right-s-line"></i> Get Started</a>
                        <a href="{{route('contact.us')}}" class="default-btn active"><i class="ri-send-plane-fill"></i>Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Banner Area -->

<!-- Start About Area -->
<div class="about-area bg-color-f8f8f8 pt-100 pb-70">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="about-img mr-15">
                    <div class="row align-items-center">
                        <div class="col-lg-6 col-sm-6">
                            <div class="about-3"><img src="{{ asset('assets-theme1/images/about/about-1.png')}}" alt="Image"></div>
                        </div>
                        <div class="col-lg-6 col-sm-6">
                            <div class="about-1"><img src="{{ asset('assets-theme1/images/about/about-2.png')}}" alt="Image"></div>
                            <div class="about-2 mb-0"><img src="{{ asset('assets-theme1/images/about/about-3.png')}}" alt="Image"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="about-content ml-15">
                    <span class="top-title">ABOUT INCEP</span>
                    <h2>Life Insurance That Creates Wealth For Everyone</h2>
                    <ul>
                        <li>
                            <i class="flaticon-insurance-3"></i>
                            <h3>Trusted By Thousand</h3>
                            <p>We are trusted by thousands of satisfied customers who have experienced the benefits of our comprehensive coverage and wealth-building opportunities.</p>
                        </li>
                        <li>
                            <i class="flaticon-insurance-4"></i>
                            <h3>Set For Life</h3>
                            <p>Our policies offer long-term security and financial stability, ensuring that your family's needs are taken care of, no matter what the future holds.</p>
                        </li>
                        <li>
                            <i class="flaticon-life-insurance"></i>
                            <h3>Protective Insurance</h3>
                            <p> It acts as a powerful tool for wealth accumulation, offering potential for growth through various investment and savings components.</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End About Area -->

@if(count($data['achievement']) > 0)
<div class="owl-slider ptb-100">
    <div class="container">
        <div class="section-title mt-4">
            <span class="top-title">Achievement</span>
        </div>
        <div id="carousel" class="owl-carousel">
            @foreach ($data['achievement'] as $key => $value)
            <div class="item">
                <img src="{{asset(getSpaceFilePath('/s/'.getAgentPath(agentDetails(9)) . '/setting/achievement/'.$value['achievement_images']))}}" alt="Image">
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<!-- Start Services Area -->
<div class="services-area bg-color-f8f8f8 ptb-100 pt-4">
    <div class="container">
        <div class="section-title mt-4">
            <span class="top-title">INSURANCE SERVICES</span>
            <h2>Take The Worry Out Of Life With Insurance Protection</h2>
        </div>

        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="single-services-item-card d-flex justify-content-start align-items-center">
                    <div class="icon"><i class="flaticon-home-insurance-4"></i></div>
                    <div>
                        <h3><a href="{{route('life.insurance')}}">Life Insurance</a></h3>
                        <p>Ensure the financial security of your loved ones with term life insurance. This type of insurance provides a lump-sum payment to your beneficiaries in the event of your passing during the specified term.</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6">
                <div class="single-services-item-card d-flex justify-content-start align-items-center">
                    <div class="icon"><i class="flaticon-medical-insurance-3"></i></div>
                    <div>
                        <h3><a href="{{route('health.insurance')}}">Health Insurance</a></h3>
                        <p>Take care of your health and well-being with our comprehensive health insurance plans. Our policies cover a range of medical expenses, including hospitalisation, doctor visits, prescription drugs, preventive care, and more.</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6">
                <div class="single-services-item-card d-flex justify-content-start align-items-center">
                    <div class="icon"><i class="flaticon-insurance-2"></i></div>
                    <div>
                        <h3><a href="{{route('vehicle.insurance')}}">Vehicle Insurance</a></h3>
                        <p>Safeguard your vehicles, including cars, motorcycles, or recreational vehicles, against accidents, theft, and other risks. We offer comprehensive coverage options, including liability, collision, and comprehensive insurance.</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6">
                <div class="single-services-item-card d-flex justify-content-start align-items-center">
                    <div class="icon"><i class="flaticon-car-insurance-3"></i></div>
                    <div>
                        <h3><a href="{{route('business.insurance')}}">Business Insurance</a></h3>
                        <p>Protect your business from potential risks and liabilities. Our business insurance options include coverage for property damage,liability, professional errors, and workers' compensation.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Services Area -->
@endsection

@section('custom-scripts')
<script src="{{ asset('assets-theme1/js/subscribe-us-script.js') }}"></script>

<script type="text/javascript">
    var ajaxRegistationURL = "{{route('subscribe.us.save')}}";

    $("#tab_home").addClass("hightlight-tab");

    jQuery("#carousel").owlCarousel({
        autoplay: true,
        rewind: true,
        margin: 20,
        responsiveClass: true,
        autoHeight: true,
        autoplayTimeout: 7000,
        smartSpeed: 800,
        nav: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1024: {
                items: 4
            },
            1366: {
                items: 4
            }
        }
    });
</script>
@endsection