<div id="carouselExampleAutoplayingban" class="carousel  slide carousel-fade banner-bg" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <?php
    $i = 0;
    foreach ($banners as $banner) {
      $actives = '';
      if ($i == 0) {
        $actives = 'active';
      }
      $i++;
      ?>
      <button type="button" data-bs-target="#carouselExampleAutoplayingban" data-bs-slide-to="<?php echo $i; ?>"
        class="active" aria-current="true" aria-label="Slide 1"></button>
    <?php } ?>
  </div>

  <div class="carousel-inner banner-bg">
    <?php
    $i = 0;
    foreach ($banners as $banner) {
      $actives = '';
      if ($i == 0) {
        $actives = 'active';
      }
      $i++;
      ?>

      <div class="carousel-item <?php echo $actives; ?>">
        <img src="<?= $this->Url->image($banner->image_path) ?>" class="img-fluid d-block bg-image w-100"
          alt="<?= $banner->title ?>">
        <div class="carousel-caption d-none d-md-block  d-sm-block">
          <div id="carousel-caption">
            <p class="mb-2 lh-sm animated fw-4 fadeInUp slim slow pr-5" style="animation-delay: 1s; color:#FFF;">
              <?= $banner->title ?></p>
            <h4 class="mb-2 animated fadeInUp slow d-none d-md-block lh-base" style="animation-delay: 1s; color:#FFF;">
              <?= $banner->description ?></h4>

          </div>
        </div>
      </div>

    <?php } ?>

  </div>
  <button class="carousel-control-prev " type="button" data-bs-target="#carouselExampleAutoplayingban"
    data-bs-slide="prev">
    <span id="control" class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplayingban"
    data-bs-slide="next">
    <span id="control" class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-xl-12 col-xxl-12 d-flex justify-content-center icons_below">
      <div class="container py-3">
        <div class="row">

          <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
            <div class="la_card service-card card-inverse">
              <div class="text-center ">
                <span class="bi bi-folder-symlink-fill display-4 la_icon_blue"></span>
                <h5 class="">Accounts</h5>
              </div>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
            <div class="la_card service-card card-inverse">
              <div class="text-center">
                <span class="bi bi-umbrella-fill display-4 la_icon_blue"></span>
                <h5 class="">Remittance</h5>
              </div>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
            <div class="la_card service-card card-inverse">
              <div class="text-center">
                <span class="bi bi-wallet-fill display-4 la_icon_blue"></span>
                <h5 class="">Loans</h5>
              </div>
            </div>
          </div>


          <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
            <div class="service-card card-inverse">
              <div class="text-center">
                <span class="bi bi-piggy-bank-fill display-4 la_icon_blue"></span>
                <h5 class="">Investment</h5>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</div>