@extends('frontend.layout.master')
@section('content')
<link rel="stylesheet" href="{{ asset('frontend/css/sub-header.css') }}">

<!-- main-area -->
<main class="fix">
    <!-- breadcrumb-area -->
    <section class="breadcrumb__area breadcrumb__bg" data-background="{{ asset('frontend/images/breadcrumb_bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="breadcrumb__content">
                        <h2 class="title">Products</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('frontend.index')}}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Products</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="breadcrumb__shape">
            <img src="{{ asset('frontend/images/breadcrumb_shape01.png') }}" alt="">
            <img src="{{ asset('frontend/images/breadcrumb_shape02.png') }}" alt="" class="rightToLeft">
            <img src="{{ asset('frontend/images/breadcrumb_shape03.png') }}" alt="">
            <img src="{{ asset('frontend/images/breadcrumb_shape04.png') }}" alt="">
            <img src="{{ asset('frontend/images/breadcrumb_shape05.png') }}" alt="" class="alltuchtopdown">
        </div>
    </section>
    <!-- breadcrumb-area-end -->
    
    <!-- services-area -->
    <section id="scroll" class="services-area services-bg" data-background="images/services_bg.jpg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-8">
                    <div class="section-title text-center mb-40 tg-heading-subheading animation-style3">
                        <span class="sub-title">WHAT WE OFFER</span>
                        <h2 class="title tg-element-title">We Offer An Effective Solutions</h2>
                    </div>
                </div>
            </div>


            <div class="services-item-wrap">
                <div class="row justify-content-center">
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                        <div class="box" id="box1">
                            <div class="services-item shine-animate-item">
                                <div class="services-thumb">
                                    <a href="#section1" class="shine-animate"><img src="{{ asset('frontend/images/services_img01.jpg')}}" alt=""></a>
                                </div>
                                <div class="services-content">
                                    <div class="icon">
                                        <img src="{{ asset('frontend/images/life-insurance.png')}}" alt="">
                                    </div>
                                    <h4 class="title"><a href="#section1">Life Insurance</a></h4>
                                    <a href="#section1" class="btn">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                        <div class="box" id="box2">
                            <div class="services-item shine-animate-item">
                                <div class="services-thumb">
                                    <a href="#section2" class="shine-animate"><img src="{{ asset('frontend/images/services_img04.jpg')}}" alt=""></a>
                                </div>
                                <div class="services-content">
                                    <div class="icon">
                                        <img src="images/health-insurance.png" alt="">
                                    </div>
                                    <h4 class="title"><a href="#section2">Health Insurance</a></h4>
                                    <a href="#section2" class="btn">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="text-align: center;"><img width="600px" src="images/line.png" alt=""></div>

            </div>

            <!-- Start Life Insurance -->
            <div class="section" id="section1" style="display: none;">
                <div class="services-item-wrap mt-50">
                    <h2 style="text-align: center;">Life Insurance</h2>
                    <div class="row justify-content-center mt-50">
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="box" id="box3">
                                <div class="services-item shine-animate-item">
                                    <div class="services-thumb">
                                        <a href="#section3" class="shine-animate"><img src="images/mahfooz.jpg" alt=""></a>
                                    </div>
                                    <div class="services-content">
                                        <div class="icon">
                                            <img src="{{ asset('frontend/images/Mahfooz-Plan.png')}}" alt="">
                                        </div>
                                        <h4 class="title"><a href="#section3">Mahfooz Plan</a></h4>
                                        <a href="#section3" class="btn">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: center;"><img width="600px" src="images/line.png" alt=""></div>
                </div>
            </div>
            <!-- End Life Insurance -->

            <!-- Start Health Insurance -->
            <div class="section" id="section2" style="display: none;">
                <div class="services-item-wrap mt-50">
                    <h2 style="text-align: center;">Health Insurance</h2>
                    <div class="row justify-content-center mt-50">
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="box" id="box4">
                                <div class="services-item shine-animate-item">
                                    <div class="services-thumb">
                                        <a href="#section4" class="shine-animate"><img src="images/services_img02.jpg" alt=""></a>
                                    </div>
                                    <div class="services-content">
                                        <div class="icon">
                                            <img src="images/icon1.png" alt="">
                                        </div>
                                        <h4 class="title"><a href="#section4">Sehat Zindagi Plan</a></h4>
                                        <a href="#section4" class="btn">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                            <div class="services-item shine-animate-item">
                                <div class="box" id="box5">
                                    <div class="services-thumb">
                                        <a href="#section5" class="shine-animate"><img src="{{ asset('frontend/images/health-img1.jpg')}}" alt=""></a>
                                    </div>
                                    <div class="services-content">
                                        <div class="icon">
                                            <img width="35px" src="{{ asset('frontend/images/icon2.png')}}" alt="">
                                        </div>
                                        <h4 class="title"><a href="#section5">Sinf E Aahan Cancer Protection</a></h4>
                                        <a href="#section5" class="btn">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: center;"><img width="600px" src="{{ asset('frontend/images/line.png')}}" alt=""></div>
                </div>
            </div>
            <!-- End Health Insurance -->

        </div>
    </section>
    <!-- services-area-end -->

    <!-- project-area -->
    <section class="project-area section" id="section3" style="display: none;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-7">
                    <div class="section-title text-center mb-50 tg-heading-subheading animation-style3">
                        <span class="sub-title">Life Insurance</span>
                        <h2 class="title tg-element-title">Let’s Discover All Our Products</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="project-item-wrap">
            <div class="container custom-container-two">
                <div class="row justify-content-center">
                    <div class="col-xl-3 col-md-6">
                        <div class="project-item">
                            <div class="project-thumb">
                                <a href="dashboard.php"><img src="{{ asset('frontend/images/project_img01.jpg')}}" alt=""></a>
                            </div>
                            <div class="project-content">
                                <div class="left-side-content">
                                    <h4 class="title"><a href="dashboard.php">Accidental & Indemnity Product (150K Coverage)</a></h4>
                                    <span>Mahfooz Plan</span>
                                </div>
                                <div class="link-arrow">
                                    <a href="dashboard.php">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="project-item">
                            <div class="project-thumb">
                                <a href="dashboard.php"><img src="{{ asset('frontend/images/project_img01.jpg')}}" alt=""></a>
                            </div>
                            <div class="project-content">
                                <div class="left-side-content">
                                    <h4 class="title"><a href="dashboard.php">Accidental & Indemnity Product (250K Coverage)</a></h4>
                                    <span>Mahfooz Plan</span>
                                </div>
                                <div class="link-arrow">
                                    <a href="dashboard.php">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="project-item">
                            <div class="project-thumb">
                                <a href="dashboard.php"><img src="{{ asset('frontend/images/project_img01.jpg')}}" alt=""></a>
                            </div>
                            <div class="project-content">
                                <div class="left-side-content">
                                    <h4 class="title"><a href="dashboard.php">Accidental & Indemnity Product (400K Coverage)</a></h4>
                                    <span>Mahfooz Plan</span>
                                </div>
                                <div class="link-arrow">
                                    <a href="dashboard.php">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="project-content-bottom">
                                <p>We successfully cope with tasks of varying complexity, <br> provide long-term guarantees and regularly</p>
                                <a href="dashboard.php" class="btn">See All Projects</a>
                            </div>
                        </div>
                    </div> -->
            </div>
        </div>
        <div class="project-shape-wrap">
            <img src="{{ asset('frontend/images/project_shape01.png')}}" alt="" class="alltuchtopdown">
            <img src="{{ asset('frontend/images/project_shape02.png')}}" alt="" class="rotateme">
        </div>
    </section>

    <!-- ---------- -->
    <section class="project-area section" id="section4" style="display: none;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-7">
                    <div class="section-title text-center mb-50 tg-heading-subheading animation-style3">
                        <span class="sub-title">Health Insurance</span>
                        <h2 class="title tg-element-title">Let’s Discover All Our Products</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="project-item-wrap">
            <div class="container custom-container-two">
                <div class="row justify-content-center">
                    <div class="col-xl-3 col-md-6">
                        <div class="project-item">
                            <div class="project-thumb">
                                <a href="dashboard.php"><img src="{{ asset('frontend/images/project_img02.jpg')}}" alt=""></a>
                            </div>
                            <div class="project-content">
                                <div class="left-side-content">
                                    <h4 class="title"><a href="dashboard.php">Basic Hospitalization Cover</a></h4>
                                    <span>Sehat Zindagi Plan</span>
                                </div>
                                <div class="link-arrow">
                                    <a href="dashboard.php">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="project-item">
                            <div class="project-thumb">
                                <a href="dashboard.php"><img src="{{ asset('frontend/images/project_img03.jpg')}}" alt=""></a>
                            </div>
                            <div class="project-content">
                                <div class="left-side-content">
                                    <h4 class="title"><a href="dashboard.php">Basic Hospitalization Cover (Including Maternity)</a></h4>
                                    <span>Sehat Zindagi Plan</span>
                                </div>
                                <div class="link-arrow">
                                    <a href="dashboard.php">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="project-shape-wrap">
            <img src="{{ asset('frontend/images/project_shape01.png')}}" alt="" class="alltuchtopdown">
            <img src="{{ asset('frontend/images/project_shape02.png')}}" alt="" class="rotateme">
        </div>
    </section>

    <!-- ---------- -->
    <section class="project-area section" id="section5" style="display: none;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-7">
                    <div class="section-title text-center mb-50 tg-heading-subheading animation-style3">
                        <span class="sub-title">Health Insurance</span>
                        <h2 class="title tg-element-title">Let’s Discover All Our Products</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="project-item-wrap">
            <div class="container custom-container-two">
                <div class="row justify-content-center">
                    <div class="col-xl-3 col-md-6">
                        <div class="project-item">
                            <div class="project-thumb">
                                <a href="dashboard.php"><img src="images/project_img04.jpg" alt=""></a>
                            </div>
                            <div class="project-content">
                                <div class="left-side-content">
                                    <h4 class="title"><a href="dashboard.php">Sinf e Aahan Cancer Protection</a></h4>
                                    <span>Sinf E Aahan Cancer Protection</span>
                                </div>
                                <div class="link-arrow">
                                    <a href="dashboard.php">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15" fill="none">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6293 3.27957C17.7117 2.80341 17.4427 2.34763 17.0096 2.17812C16.9477 2.15385 16.8824 2.13552 16.8144 2.12376L6.96081 0.419152C6.41654 0.325049 5.89911 0.689856 5.80491 1.23411C5.71079 1.77829 6.07564 2.29578 6.61982 2.38993L14.0946 3.68295L1.36574 12.6573C0.914365 12.9756 0.806424 13.5995 1.12467 14.0509C1.44292 14.5022 2.06682 14.6102 2.51819 14.2919L15.247 5.31753L13.954 12.7923C13.8598 13.3365 14.2247 13.854 14.7689 13.9482C15.3131 14.0422 15.8305 13.6774 15.9248 13.1332L17.6293 3.27957Z" fill="currentcolor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="project-shape-wrap">
            <img src="images/project_shape01.png" alt="" class="alltuchtopdown">
            <img src="images/project_shape02.png" alt="" class="rotateme">
        </div>
    </section>
    <!-- project-area-end -->

</main>
<!-- main-area-end -->

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    // jQuery code
    $(document).ready(function() {
        // Attach click event to each box
        $(".box").click(function() {
            // Hide all sections
            $(".section").hide();

            // Get the ID of the clicked box
            var boxID = $(this).attr("id");

            // Show the corresponding section
            $("#section" + boxID.slice(-1)).show();
        });
    });
</script>
@endsection