<!-- ================Blog section start here <================== -->
<section class="blog padding-top padding-bottom bg--white">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up" data-aos-duration="900">
            <p class="subtitle">Ultimas Noticias</p>
            <h2>Nuestros Recientes Artículos</h2>
        </div>
        
        <!-- Carrusel de noticias -->
        <div class="blog-carousel">
            <div class="blog-carousel__wrapper">
                <div class="blog-carousel__track" id="blogCarouselTrack">
                    <!-- Elementos del carrusel -->
                    <div class="blog-carousel__slide">
                        <div class="blog__item" data-aos="fade-up" data-aos-duration="900">
                            <div class="blog__inner">
                                <div class="blog__thumb">
                                    <img src="assets/images/blog/01.jpg" alt="Blog Images">
                                </div>
                                <div class="blog__content">
                                    <div class="blog__content-top">
                                        <span class="blog__meta-tag">Agrojam</span>
                                        <h4><a href="#">Ganadores del Agrojam 2023</a></h4>
                                        <ul class="blog__meta d-flex flex-wrap align-items-center">
                                            <li class="blog__meta-author">
                                                <a href="#"><span><i class="fa-solid fa-user"></i></span> Carolina
                                                    Garzón</a>
                                            </li>
                                        </ul>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="blog-carousel__slide">
                        <div class="blog__item" data-aos="fade-up" data-aos-duration="900" data-aos-delay="100">
                            <div class="blog__inner">
                                <div class="blog__thumb">
                                    <img src="assets/images/blog/02.jpg" alt="Blog Images">
                                </div>
                                <div class="blog__content">
                                    <div class="blog__content-top">
                                        <span class="blog__meta-tag">Agrojam</span>
                                        <h4><a href="#">Ganadores del Agrojam 2023</a></h4>
                                        <ul class="blog__meta d-flex flex-wrap align-items-center">
                                            <li class="blog__meta-author">
                                                <a href="#"><span><i class="fa-solid fa-user"></i></span> Carolina
                                                    Garzón
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="blog-carousel__slide">
                        <div class="blog__item" data-aos="fade-up" data-aos-duration="900" data-aos-delay="200">
                            <div class="blog__inner">
                                <div class="blog__thumb">
                                    <img src="assets/images/blog/03.jpg" alt="Blog Images">
                                </div>
                                <div class="blog__content">
                                    <div class="blog__content-top">
                                        <span class="blog__meta-tag">Agrojam</span>
                                        <h4><a href="#">Ganadores del Agrojam 2023</a></h4>
                                        <ul class="blog__meta d-flex flex-wrap align-items-center">
                                            <li class="blog__meta-author">
                                                <a href="#"><span><i class="fa-solid fa-user"></i></span> Carolina
                                                    Garzón</a>
                                            </li>
                                        </ul>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="blog-carousel__slide">
                        <div class="blog__item" data-aos="fade-up" data-aos-duration="900" data-aos-delay="200">
                            <div class="blog__inner">
                                <div class="blog__thumb">
                                    <img src="assets/images/blog/04.jpg" alt="Blog Images">
                                </div>
                                <div class="blog__content">
                                    <div class="blog__content-top">
                                        <span class="blog__meta-tag">Agrojam</span>
                                        <h4><a href="#">Ganadores del Agrojam 2023</a></h4>
                                        <ul class="blog__meta d-flex flex-wrap align-items-center">
                                            <li class="blog__meta-author">
                                                <a href="#"><span><i class="fa-solid fa-user"></i></span> Carolina
                                                    Garzón</a>
                                            </li>
                                        </ul>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="blog-carousel__slide">
                        <div class="blog__item" data-aos="fade-up" data-aos-duration="900" data-aos-delay="200">
                            <div class="blog__inner">
                                <div class="blog__thumb">
                                    <img src="assets/images/blog/05.jpg" alt="Blog Images">
                                </div>
                                <div class="blog__content">
                                    <div class="blog__content-top">
                                        <span class="blog__meta-tag">Agrojam</span>
                                        <h4><a href="#">Ganadores del Agrojam 2023</a></h4>
                                        <ul class="blog__meta d-flex flex-wrap align-items-center">
                                            <li class="blog__meta-author">
                                                <a href="#"><span><i class="fa-solid fa-user"></i></span> Carolina
                                                    Garzón</a>
                                            </li>
                                        </ul>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Controles de navegación del carrusel -->
            <div class="blog-carousel__nav">
                <button class="blog-carousel__btn blog-carousel__btn--prev" id="blogCarouselPrev">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <button class="blog-carousel__btn blog-carousel__btn--next" id="blogCarouselNext">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div>
            
            <!-- Indicadores del carrusel -->
            <div class="blog-carousel__indicators" id="blogCarouselIndicators">
                <!-- Los indicadores se generan dinámicamente con JavaScript -->
            </div>
        </div>
    </div>
</section>
<!-- ================Blog section end here <================== -->
