<div class="offcanvas-overlay"></div>

    <!-- Page Title/Header Start -->
    <div class="page-title-section section" data-bg-image="<?php echo base_url(); ?>assets/images/bg/page-title-1.webp">
        <div class="container">
            <div class="row">
                <div class="col">

                    <div class="page-title">
                        <h1 class="title">Product Category</h1>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="<?php echo base_url(); ?>">Home</a></li>
                            <li class="breadcrumb-item active">Category</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>


 <!-- Category Banner Section Start -->
    <div class="section categorySec">
        <div class="container">
            <div class="row row-cols-lg-4 row-cols-sm-2 row-cols-1 learts-mb-n40">
                <?php  
                $category= $this->db->order_by('cat_id','desc')->get('category')->result_array();
                //print_r($category);
                foreach ($category as $category_data) {
                ?>
                <div class="col learts-mb-40">
                    <div class="category-banner4">
                        <a href="<?php echo base_url(); ?>Product/index/<?php echo md5($category_data['cat_id']);?>" class="inner">
                            <div class="image"><img src="<?php echo base_url(); ?>uploads/category/<?php echo $category_data['img']; ?>" alt=""></div>
                            <div class="content" data-bg-color="#121212f2">
                                <h3 class="title"><?php echo $category_data['cat_name']; ?></h3>
                            </div>
                        </a>
                    </div>
                </div>
                <?php } ?>

            </div>
        </div>
    </div>
    <!-- Category Banner Section End -->