
  <!-- Start main-content -->
  <div class="main-content">

    <!-- Section: inner-header -->
    <section class="inner-header divider parallax layer-overlay overlay-dark-5" data-stellar-background-ratio="0.5" data-bg-img="images/bg/bg1.jpg">
      <div class="container pt-10 pb-10">
        <!-- Section Content -->
        <div class="section-content">
          <div class="row"> 
            <div class="col-md-12">
              <h3 class="title text-white"><?php echo $event->page_event_title; ?></h3>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section: Causes -->
    <section>
      <div class="container">
        <div class="row mtli-row-clearfix">
          <div class="col-sm-6 col-md-8 col-lg-8">
            <div class="causes maxwidth500 mb-sm-50">
              <div class="thumb">
                <img class="img-fullwidth" alt="<?php echo $event->page_event_title; ?>" src="<?php echo base_url(); ?><?php echo $event->page_event_image; ?>">
              </div>
              
              <div class="causes-details clearfix">
                <div class="p-30 p-sm-15 bg-lighter">
                  <div class="text-center pb-10">
                    <div class="event-content flip">
                      <span class="mb-10 text-gray-darkgray mr-10"><i class="fa fa-calendar-o mr-5 text-theme-colored"></i> <?php echo date('M d, Y', strtotime($event->page_event_date_time)); ?></span>
                      <span class="mb-10 text-gray-darkgray mr-10"><i class="fa fa-clock-o mr-5 text-theme-colored"></i>  <?php echo date('h:i A', strtotime($event->page_event_date_time)); ?></span>
                      <span class="text-gray-darkgray"><i class="fa fa-map-marker mr-5 text-theme-colored"></i> <?php echo $event->page_event_location; ?></span>
                    </div>
                  </div>
                  <h4><a><?php echo $event->page_event_title; ?></a></h4>
                  <p><?php echo $event->page_event_short_description; ?></p>
                </div>
                
              </div>
            </div>
            <div class="event-details">
                <?php echo $event->page_event_description; ?>
            </div>
          </div>
          <div class="col-sm-6 col-md-4 col-lg-4">
            <h3 class="mt-0 line-bottom"><span class="font-weight-300">Latest </span> Event</h3>
            <div class="bxslider-upcoming-events bx-nav-top">
              <?php foreach ($all_event as $event):?>
                <div class="event media mb-20 no-bg no-border">
                  <div class="event-date media-left text-center flip bg-theme-colored p-20">
                    <ul>
                      <li class="font-30 text-white font-weight-600 border-bottom pb-10"><?php echo date('d', strtotime($event->page_event_date_time)); ?></li>
                      <li class="font-22 text-white text-uppercase"><?php echo date('M', strtotime($event->page_event_date_time)); ?></li>
                    </ul>
                  </div>
                  <div class="media-body pl-20">
                    <div class="event-content pull-left flip">
                      <h4 class="event-title media-heading font-raleway font-weight-700"><a href="<?php echo base_url(); ?>/event-details/<?php echo $event->page_event_slug; ?>"><?php echo mb_strimwidth($event->page_event_title, 0, 50, "..."); ?></a></h4>
                      <span class="mb-10 text-gray-darkgray mr-10"><i class="fa fa-clock-o mr-5 text-theme-colored"></i> at <?php echo date('h:i A', strtotime($event->page_event_date_time)); ?></span>
                      <span class="text-gray-darkgray"><i class="fa fa-map-marker mr-5"></i> <?php echo $event->page_event_location; ?></span>
                      <p class="mt-5"><?php echo mb_strimwidth($event->page_event_short_description, 0, 100, "..."); ?></p>
                    </div>
                  </div>
                </div>
              <?php endforeach; ?>
            </div>
            <h3 class="mt-40 line-bottom"><span class="font-weight-300">Latest</span> Case</h3>
            <?php foreach ($all_latest_case as $latest_case):?>
              <div class="event media mt-20 mb-10 no-bg no-border">
                <div class="event-date media-left pull-left flip">
                  <img src="<?php echo base_url(); ?><?php echo $latest_case->latest_case_image ?>" class="mt-5" alt="<?php echo $latest_case->latest_case_title ?>" width="100px">
                </div>
                <div class="media-body pl-20">
                  <div class="event-content pull-left flip">
                    <h4 class="event-title media-heading font-raleway font-weight-700"><a href="<?php echo base_url(); ?>/case-details/<?php echo $latest_case->latest_case_slug; ?>"><?php echo $latest_case->latest_case_title ?></a></h4>
                    <p><?php echo mb_strimwidth($latest_case->latest_case_short_description, 0, 50, "...") ?></p>
                  </div>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </section>

  </div>
  <!-- end main-content -->