<div class="blog-page-wrapper pb-100 pt-100" style="<?= $bg_section_color; ?>">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!-- <div class="row mb-50" style="margin: 0 auto;">
                    <div class="col-md-12 text-center">
                        <ul>
                            <li style="display: inline-block;">
                                <h3>
                                    <a href="javascript:void(0)">
                                        Blog / Event
                                    </a>
                                </h3>
                            </li> 
                        </ul>
                    </div>
                </div> -->
                <!--=======  blog-post-wrapper  =======-->
                
<div class="row blog-post-wrapper blog-post-wrapper--masonry">
    <?php foreach ($blogs as $blog) : ?>
        <!--=======  single slider post  =======-->
        <div class="col-lg-4 col-md-6 single-slider-post grid-item mb-40"> 
            <div class="single-slider-post__image mb-30">
                <a href="<?= base_url() . 'blog/' . strtolower($blog->alias); ?>">
                    <img src="<?= base_url() . 'uploads/blog/' . $blog->image1; ?>" class="img-fluid" alt="">
                </a>
            </div>

            <div class="single-slider-post__content">
                <div class="post-date">
                    <i style="color: #2B286E;" class="ion-android-calendar"></i>
                    <a style="color: #2B286E;" href="<?= base_url() . 'blog/' . strtolower($blog->alias); ?>"> <?= date('M d, Y',strtotime($blog->publish_date)); ?></a>
                </div>
                <h4 class="post-title">
                    <a href="<?= base_url() . 'blog/' . strtolower($blog->alias); ?>">
                        <?= ucwords($blog->blog); ?>
                    </a>
                </h4>
                <p class="post-excerpt">
                    <?= $blog->short_description; ?>
                </p>
                <a href="<?= base_url() . 'blog/' . strtolower($blog->alias); ?>" class="blog-readmore-btn">
                    read more
                </a>
            </div>  
        </div>
        <!--=======  End of single slider post  =======--> 
    <?php endforeach; ?> 
</div>
                    
                <!--=======  End of blog-post-wrapper  =======-->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12"> 
                
                <div class="pagination div_pagination text-center mt-80">
                    <?= $this->pagination->create_links(); ?>
                    <!-- <ul>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">NEXT</a></li>
                    </ul> -->
                </div>
                 
            </div>
        </div>
    </div>
</div>
<style>
    .div_pagination{
        justify-content: center;
    }
    .div_pagination ul {
        width: auto !important;
    }
    .div_pagination ul li.active { 
        border-bottom: 0 !important; 
    }
    .div_pagination ul li {  
        margin-right: 0px !important; 
        min-width: auto !important;
    }
    .div_pagination ul li.active a{ 
        border-bottom: 1px solid #ababab; 
    }
    .div_pagination ul li a{
        margin-right: 20px !important;  
        min-width: 20px !important;
    }
    @media (max-width: 450px){
        .blog-page-wrapper{
            padding-top: 30px !important;
        }
    }
</style>