<!-- Section -->
<section>
  <div class="bannerimg cover-image" style="background: url(./assets/images/photos/banner1.jpg) center center;" >
    <div class="header-text mb-0">
      <div class="container">
        <div class="row text-white ">
          <div class="col">
            <h1>{{pages?.pagename}}</h1>
          </div>
          <div class="col col-sm-auto">
            <ol class="breadcrumb text-center">
              <li class="breadcrumb-item">
                <a href="javascript:;" class="text-white-50">{{'Home' | translate}}</a>
              </li>
              <li class="breadcrumb-item active text-wrap">
                <a href="javascript:;" class="text-white">{{pages?.pagename | translate}}</a>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Section -->

<!--Section-->
<section>
  <div class="cover-image sptb">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-8">
          <div class="card">
            <div class="card-header border-0">
              @if (!pages) {
                <h4 class="line-skeleton w-20"></h4>
              } @else {
                <h4 class="card-title ">{{pages?.pagename | translate}}</h4>
              }
            </div>
            <div class="card-body ">
              @if (!pages) {
                <h4 class="line-skeleton w-20"></h4>
              } @else {
                <div class="mb-4" [innerHTML]="sanitizeHtml(pages?.pagedescription)"></div>
              }
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Section-->