<div [appBodyClass]="'font-f-4'"> 
<app-breadcrumb [Title]="'Our Services'" [subTitle]="'Our Service 2'" />

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

      @for(item of blogData;track $index){
      <div class="col-lg-4">
        <div
          class="blog1-single-box active page-blog1-single-box page-service-box2"
        >
          <div class="blog1-box-img img100">
            <img [src]="item.image" alt="" />
          </div>
          <div class="blog1-hadding hadding1">
            <h4>
              <a routerLink="/service-details">{{item.title}}</a>
            </h4>
            <div class="space14"></div>
            <p>
              {{item.des}}
            </p>
            <div class="space24"></div>
            <a class="learn-more1" routerLink="/service-details"
              >Read More<span><i class="fa-solid fa-arrow-right"></i></span
            ></a>
          </div>
        </div>
      </div>
      }
    </div>

    <div class="space60"></div>
    <div class="row">
      
        <app-theme-pagination/>
    </div>
  </div>
</div>
</div>