<div class="edu-breadcrumb-area">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">Blogs</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 active" aria-current="page">Blogs</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>

<!--=====================================-->
<!--=        Blog Area Start            =-->
<!--=====================================-->
<section class="section-gap-equal">
    <div class="container">
        <div class="row g-5" id="masonry-gallery">
            <!-- Start Blog Grid  -->
            <?php foreach ($get_all_blog as $key => $all_blog):?>
                <div class="col-lg-4 col-md-6 col-12 masonry-item" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="edu-blog blog-style-5">
                        <div class="inner">
                            <div class="thumbnail">
                                <a href="<?php echo base_url(); ?>blog/<?php echo $all_blog->blog_slug; ?>">
                                    <img src="<?php echo base_url(); ?><?php echo $all_blog->blog_image; ?>" alt="<?php echo $all_blog->blog_title; ?>">
                                </a>
                            </div>
                            <div class="content position-top">
                                <div class="read-more-btn">
                                    <a class="btn-icon-round" href="<?php echo base_url(); ?>blog/<?php echo $all_blog->blog_slug; ?>"><i class="icon-4"></i></a>
                                </div>
                                <h5 class="title"><a href="<?php echo base_url(); ?>blog/<?php echo $all_blog->blog_slug; ?>"><?php echo $all_blog->blog_title; ?></a></h5>
                                <ul class="blog-meta">
                                    <li><i class="icon-27"></i><?php echo date('d M, Y', strtotime($all_blog->created_at)); ?></li>
                                    
                                </ul>
                                <p><?php echo $all_blog->blog_short_description; ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>

        </div>


        <!-- <ul class="edu-pagination top-space-30">
            <li><a href="#" aria-label="Previous"><i class="icon-west"></i></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="more-next"><a href="#"></a></li>
            <li><a href="#">8</a></li>
            <li><a href="#" aria-label="Next"><i class="icon-east"></i></a></li>
        </ul> -->

    </div>
</section>
<style type="text/css">
    .icon-4
    {
        line-height: 5;
    }
</style>