<div class="edu-breadcrumb-area">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">Image Gallery</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item"><a href="<?php echo base_url(); ?>">Home</a></li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item"><a href="#">Gallery</a></li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">Image Gallery</li>
            </ul>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1">
            <span></span>
        </li>
        <li class="shape-2 scene"><img data-depth="2" src="<?php echo front_css(); ?>images/about/shape-13.png" alt="shape"></li>
        <li class="shape-3 scene"><img data-depth="-2" src="<?php echo front_css(); ?>images/about/shape-15.png" alt="shape"></li>
        <li class="shape-4">
            <span></span>
        </li>
        <li class="shape-5 scene"><img data-depth="2" src="<?php echo front_css(); ?>images/about/shape-07.png" alt="shape"></li>
    </ul>
</div>

<!--=====================================-->
<!--=        Gallery Area Start         =-->
<!--=====================================-->
<div class="edu-gallery-area edu-section-gap">
    <div class="container">
        <div class="isotope-wrapper">
            <div class="isotop-button button-transparent isotop-filter">
                <button data-filter="*" class="is-checked">
                    <span class="filter-text">All</span>
                </button>
                <?php foreach ($all_category as $key => $category):?>
                <button data-filter=".<?php echo $category->gc_name; ?>">
                    <span class="filter-text"><?php echo $category->gc_name; ?></span>
                </button>
                <?php endforeach; ?>

            </div>
            <div class="isotope-list gallery-grid-wrap">
                <div id="animated-thumbnials">
                    <?php foreach ($all_image as $key => $image):?>
                        <a href="<?php echo base_url(); ?><?php echo $image->gallery_image; ?>" class="edu-popup-image edu-gallery-grid p-gallery-grid-wrap isotope-item <?php echo $image->gc_name; ?>">
                            <div class="thumbnail">
                                <img src="<?php echo base_url(); ?><?php echo $image->gallery_image; ?>" alt="Gallery Image">
                            </div>
                            <div class="zoom-icon">
                                <i class="icon-69"></i>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
.icon-69
{
    line-height: 3.5;
}
</style>

