
        <!-- events -->
      <section class="event-section">
        <div class="container">
          <!-- Section Title -->
          <div class="section-title text-center">
              <h2>Latest Events</h2>
              <p>We offer a brand new approach to the most basic learning paradigms. Choose from a wide range of learning options and gain new skills! Our school is known.</p>
            </div>

          <div class="row">
               <?php
                    $args = [
                        'post_type'      => 'event',
                        'posts_per_page' => 2, // Fetch at least 6 latest events
						        'post_status'    => 'publish',
                    
                    ];
                    $events = new WP_Query($args);
                    if ($events->have_posts()) :
                        $counter = 0;
                        while ($events->have_posts()) : $events->the_post();
                     
                            $event_image   =  get_the_post_thumbnail_url(get_the_ID(), 'full');
                            $event_time    = get_field('event_time');
                            $event_location = get_field('event_location');
                            $event_title   = get_the_title();
                            $event_date1   = get_the_date('j');
                            $event_date2   = get_the_date('M');
                    ?>
            <!-- Left Big Event -->
            <div class="col-md-4 event123">
              <a href="./blog-detail.html">
                <div class="card event-card">
                  <img src="<?= esc_url($event_image); ?>" alt="<?= esc_attr($event_title); ?>">
                  <div class="event-date-badge">
                  <span class="month"><?= esc_attr($event_date1); ?></span>
                  <span class="day"><?= esc_attr($event_date2); ?></span>
                </div>
                  <div class="card-img-overlay1">
                    <div class="event-meta">
                      <!-- <span><i class="bi bi-calendar-event"></i> 2025-12-23</span> -->
                      <span><i class="bi bi-clock"></i><?= esc_attr($event_time); ?></span>
                      <span><i class="bi bi-geo-alt"></i><?= esc_attr($event_location); ?></span>
                    </div>

                    <h2 class="event-title">
                   <?= esc_html(mb_substr($event_title, 0, 30)).(mb_strlen($event_title) > 30 ? '...' : ''); ?>
                    </h2>
                  </div>
                </div>
              </a>
            </div>
       <?php endwhile; wp_reset_postdata(); endif;?>
            
            <!-- Right Side Event List -->
            <div class="col-md-4 event111">
              <div class="event-list">
                  <?php
                    $args = [
                        'post_type'      => 'event',
                        'posts_per_page' => 2, // Fetch at least 6 latest events
						        'post_status'    => 'publish',
                    'offset'=>2,
                    ];
                    $events = new WP_Query($args);
                    if ($events->have_posts()) :
                        $counter = 0;
                        while ($events->have_posts()) : $events->the_post();
                            $event_image   =  get_the_post_thumbnail_url(get_the_ID(), 'full');
                            $event_time    = get_field('event_time');
                            $event_location = get_field('event_location');
                            $event_title   = get_the_title();
                    ?>
                <!-- Event Item -->
                <div class="side-post">
                  <div class="row">
                    <div class="col-md-5">
                      <a href="<?php the_permalink(); ?>">
                        <img src="<?= esc_url($event_image); ?>" alt="">
                      </a>
                    </div>
                    <div class="col-md-7">
                      <div class="event-meta small">
                        <span><i class="bi bi-calendar-event"></i> <?php echo esc_html( get_the_date('j F') ); ?></span>
                        <span><i class="bi bi-clock"></i><?= esc_attr($event_time); ?></span>
                        <span><i class="bi bi-geo-alt"></i><?= esc_attr($event_location); ?></span>
                      </div>
                      <a href="<?php the_permalink(); ?>">
                      <h3 class="event-title-small">
                      <?= esc_html(mb_substr($event_title, 0, 30)) . (mb_strlen($event_title) > 30 ? '...' : ''); ?>
                      </h3>
                      </a>
                    </div>
                    <hr>
                  </div>
                </div>
                 <?php endwhile; wp_reset_postdata(); endif;?>
                <!-- Event Item -->
                <div class="side-post">
                  <div class="row">
                    <div class="col-md-5">
                      <a href="./event-detail.html">
                        <img src="https://techkagaj.com/wp-content/uploads/2022/09/iphone-14-iphone-14-plus-hero-220907-geo.jpg" alt="">
                      </a>
                    </div>
                    <div class="col-md-7">
                      <div class="event-meta small">
                        <span><i class="bi bi-calendar-event"></i> 21 December</span>
                        <span><i class="bi bi-clock"></i> 3:00 PM</span>
                        <span><i class="bi bi-geo-alt"></i> Dharan</span>
                      </div>
                      <h3 class="event-title-small">
                        Youth meet 
                      </h3>
                    </div>
                    <hr>
                </div>

              </div>

                <!-- Event Item -->
                <div class="side-post">
                  <div class="row">
                    <div class="col-md-5">
                      <a href="./event-detail.html">
                        <img src="https://techkagaj.com/wp-content/uploads/2022/09/iphone-14-iphone-14-plus-hero-220907-geo.jpg" alt="">
                      </a>
                    </div>
                    <div class="col-md-7">
                      <div class="event-meta small">
                        <span><i class="bi bi-calendar-event"></i> 21 December</span>
                        <span><i class="bi bi-clock"></i> 3:00 PM</span>
                        <span><i class="bi bi-geo-alt"></i> Dharan</span>
                      </div>
                      <h3 class="event-title-small">
                        Youth meet 
                      </h3>
                    </div>
                    <hr>
                </div>

              </div>
              <div class="">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="event-meta small">
                        <a class="btn_one btn121" href="/blog/professional-mobile-painting-and-sculpting">View More <i class="bi bi-arrow-up-right"></i></a>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          
            <div class="eventbtn" style="display: none;"> 
            <a class="btn_one btn121" href="/blog/professional-mobile-painting-and-sculpting">View More <i class="bi bi-arrow-up-right"></i></a></div>
        </div>
          </div>
      </section>