  <!-- ======= Services Section ======= -->
  <section id="services" class="services section-bg bg-white">
      <div class="container">

          <div class="section-title mt-5">
              <h2>Berita</h2>
              <p>Berita update terpecaya</p>
          </div>
          <div class="row">
              <?php

                $id = $_GET['idkategori'];
                $berita = $koneksi->query("SELECT * FROM tbl_berita WHERE kategori_id='$id'");

                foreach ($berita as $pecah) :
                ?>

                  <div class="col-md-4">
                      <div class="show" style="display: none;">
                          <div class="card mb-3">

                              <img height="200" white="200" src="admin/dist/img/imgberita/<?= $pecah['berita_foto'] ?>" class="card-img-top" alt="...">
                              <i class="icofont-wall-clock mt-3 ml-3"> <small><?= $pecah['berita_tgl'] ?></small></i>
                              <div class="card-body">
                                  <h5 class="card-title"><?= $pecah['berita_nama'] ?></h5>
                                  <!-- <p class="card-text"><?= substr($pecah['berita_ket'], 0, 100) ?></p> -->
                                  <a href="?page=pages/berita/detail_berita&iddetail=<?= $pecah['berita_id'] ?>">
                                      <p style="background: #5fcf80; text-align: center;">Read More...</p>
                                  </a>
                              </div>
                          </div>
                      </div>
                  </div>

              <?php
                endforeach;
                ?>
          </div>

          <a href="#" class="btn mb-5" id="load" style="background-color: #5fcf80; color:white;">Lihat Lagi</a>
          <a href="" class="btn mb-5" style="background-color: #5fcf80; color:white;">Back to top</a>

      </div>
  </section><!-- End Services Section -->

  <script>
      $(function() {
          $('.show').slice(0, 3).show();
          $('#load').on('click', function(e) {
              e.preventDefault();
              $('.show:hidden').slice(0, 3).slideDown();
              if ($('.show:hidden').length == 0) {
                  $('#load').fadeOut('slow');
              }

              $('html,body').animate({
                  scrolltop: $(this).offset().top
              }, 3200)

          })


      })
  </script>