<div
  id="sticky-wrapper"
  class="sticky-wrapper"
  [style.height]="heightOfAlerts + 'px'"
>
  <div
    #alert
    class="uhelp-announcement-alertgroup clearfix sticky position-fixed"
  >
    <!-- holidays display as announcement -->
    @for (holiday of data?.holidays; track holiday) { @if (holiday?.status == 1)
    { @if (isAlertVisible(holiday, 'holiday')) {
    <ngb-alert
      class="alert-holiday"
      (closed)="dismissAlert(holiday, 'holiday')"
      type="announcement-bg-custom"
      [style.background]="holiday.primaray_color"
      [style.borderColor]="holiday.primaray_color"
      [style.color]="holiday.secondary_color"
    >
      <div class="container">
        <div class="d-flex align-items-top">
          <div
            class="uhelp-announcement me-2 svg-icon"
            [style.background]="addAlphaChannel(holiday.secondary_color, 0.1)"
            [style.color]="holiday.secondary_color"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="24px"
              viewBox="0 0 24 24"
              width="24px"
              fill="currentColor"
            >
              <path
                d="M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 10H4V19H20V10ZM15.0355 11.136L16.4497 12.5503L11.5 17.5L7.96447 13.9645L9.37868 12.5503L11.5 14.6716L15.0355 11.136ZM7 5H4V8H20V5H17V6H15V5H9V6H7V5Z"
              ></path>
            </svg>
          </div>
          <div class="d-flex align-items-top">
            <div class="notice-heading d-flex align-items-top flex-fill">
              <div>
                <span
                  class="fs-18 font-weight-bold holiday-title flex-fill"
                  [style.color]="addAlphaChannel(holiday.secondary_color, 1)"
                  >{{ holiday?.occasion }}</span
                >
                <span class="opacity-50 mx-2"><i class="ti ti-minus"></i></span>
                <div
                  class="mb-0 uhelp-alert-content alert-notice"
                  [innerHTML]="sanitizeHtml(holiday?.holidaydescription)"
                ></div>
                <div class="ms-auto mt-auto">
                  @if (holiday.buttonon == 1) {
                  <a
                    class="btn btn-sm ms-2 text-white text-decoration-underline"
                    routerLink="{{ holiday.buttonurl }}"
                    target="_blank"
                    >{{ holiday.buttonname }}</a
                  >
                  }
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ngb-alert>
    } } } 
    @if (setting?.ANNOUNCEMENT_USER == 'non_login_users'
    && !data?.user || setting?.ANNOUNCEMENT_USER == 'all_users')
    { @for (anct of data?.announcement; track anct) { @if (anct?.status == 1) {
    @if (isAlertVisible(anct, 'anct')) {
    <ngb-alert
      class="alert-announcement"
      (closed)="dismissAlert(anct, 'anct')"
      type="announcement-bg-custom"
      [style.background]="anct.primary_color"
      [style.borderColor]="anct.primary_color"
      [style.color]="anct.secondary_color"
    >
      <div class="container">
        <div class="d-flex align-items-top">
          <div
            class="uhelp-announcement me-2 svg-icon flex-shrink-0"
            [style.background]="addAlphaChannel(anct.secondary_color, 0.1)"
            [style.color]="anct.secondary_color"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
              <rect width="256" height="256" fill="none"></rect>
              <path d="M160,160h40a40,40,0,0,0,0-80H160Z" opacity="0.2"></path>
              <path
                d="M160,80V200.67a8,8,0,0,0,3.56,6.65l11,7.33a8,8,0,0,0,12.2-4.72L200,160"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              ></path>
              <path
                d="M40,200a8,8,0,0,0,13.15,6.12C105.55,162.16,160,160,160,160h40a40,40,0,0,0,0-80H160S105.55,77.84,53.15,33.89A8,8,0,0,0,40,40Z"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              ></path>
            </svg>
          </div>
          <div class="d-flex align-items-top">
            <div class="notice-heading d-flex align-items-top flex-fill">
              <div>
                <span
                  [style.color]="addAlphaChannel(anct.secondary_color, 1)"
                  class="fs-18 font-weight-bold flex-fill"
                  >{{ anct?.title }}
                  <span class="opacity-50 mx-2"
                    ><i class="ti ti-minus"></i
                  ></span>
                </span>
                <div
                  class="mb-0 uhelp-alert-content alert-notice"
                  [innerHTML]="sanitizeHtml(anct?.notice)"
                ></div>
                <span class="mb-0 text-white uhelp-alert-content alert-notice">
                  @if (anct.buttonon == 1) {
                  <a
                    class="btn btn-sm ms-2 text-white text-decoration-underline"
                    routerLink="{{ anct.buttonurl }}"
                    target="_blank"
                    >{{ anct.buttonname }}</a
                  >
                  @if (anct.buttonlable != null && anct.buttonurl != null){
                  <div class="ms-auto mt-auto">
                    <a
                      href="{{ anct.buttonurl }}"
                      target="_blank"
                      class="btn btn-info mt-2 btn-sm"
                      >{{ anct.buttonlable
                      }}<i class="ri-arrow-right-line align-middle ms-1"></i
                    ></a>
                  </div>
                  } }
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ngb-alert>
    } } }
    <!-- ancts display as announcement -->
    @for (ancts of data?.announcements; track ancts) { @for (announceDays of
    ancts?.announcementday.split(','); track announceDays) { @if (ancts?.status
    == 1 && announceDays == (today | date : 'E')) { @if (isAlertVisible(ancts,
    'anct')) {
    <ngb-alert
      class="alert-announcement"
      (closed)="dismissAlert(ancts, 'anct')"
      type="announcement-bg-custom"
      [style.background]="ancts.primary_color"
      [style.borderColor]="ancts.primary_color"
      [style.color]="ancts.secondary_color"
    >
      <div class="container">
        <div class="d-flex align-items-top">
          <div
            class="uhelp-announcement me-2 svg-icon flex-shrink-0"
            [style.background]="addAlphaChannel(ancts.secondary_color, 0.1)"
            [style.color]="ancts.secondary_color"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
              <rect width="256" height="256" fill="none"></rect>
              <path d="M160,160h40a40,40,0,0,0,0-80H160Z" opacity="0.2"></path>
              <path
                d="M160,80V200.67a8,8,0,0,0,3.56,6.65l11,7.33a8,8,0,0,0,12.2-4.72L200,160"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              ></path>
              <path
                d="M40,200a8,8,0,0,0,13.15,6.12C105.55,162.16,160,160,160,160h40a40,40,0,0,0,0-80H160S105.55,77.84,53.15,33.89A8,8,0,0,0,40,40Z"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              ></path>
            </svg>
          </div>
          <div class="d-flex align-items-top">
            <div class="notice-heading d-flex align-items-top flex-fill">
              <div>
                <span
                  [style.color]="addAlphaChannel(ancts.secondary_color, 1)"
                  class="fs-18 font-weight-bold flex-fill"
                  >{{ ancts?.title }}
                  <span class="opacity-50 mx-2"
                    ><i class="ti ti-minus"></i
                  ></span>
                </span>
                <div
                  class="mb-0 uhelp-alert-content alert-notice"
                  [innerHTML]="sanitizeHtml(ancts?.notice)"
                ></div>

                {{ ancts?.buttonon | json }}
                <span class="mb-0 text-white uhelp-alert-content alert-notice">
                  @if (ancts?.buttonon == 1) {
                  <a
                    class="btn btn-sm ms-2 text-white text-decoration-underline"
                    routerLink="{{ ancts?.buttonurl }}"
                    target="_blank"
                    >{{ ancts?.buttonname }}</a
                  >
                  } @if (ancts?.buttonlable != null && ancts?.buttonurl !=
                  null){
                  <div class="ms-auto mt-auto">
                    <a
                      href="{{ ancts?.buttonurl }}"
                      target="_blank"
                      class="btn btn-info mt-2 btn-sm"
                      >{{ ancts?.buttonlable
                      }}<i class="ri-arrow-right-line align-middle ms-1"></i
                    ></a>
                  </div>
                  }
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ngb-alert>
    } } } } } @else { @if (setting?.ANNOUNCEMENT_USER ==
    'only_login_user' && data?.user) {
    <div class="uhelp-announcement-alertgroup">
      @for (anct of data?.announcement; track anct) { @if (anct?.status == 1) {
      @if (isAlertVisible(anct, 'anct')) {
      <ngb-alert
        class="alert-announcement"
        (closed)="dismissAlert(anct, 'anct')"
        type="announcement-bg-custom"
        [style.background]="anct.primary_color"
        [style.borderColor]="anct.primary_color"
        [style.color]="anct.secondary_color"
      >
        <div class="container">
          <div class="d-flex align-items-top">
            <div
              class="uhelp-announcement me-2 svg-icon flex-shrink-0"
              [style.background]="addAlphaChannel(anct.secondary_color, 0.1)"
              [style.color]="anct.secondary_color"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="24px"
                viewBox="0 0 24 24"
                width="24px"
                fill="currentColor"
              >
                <path d="M0 0h24v24H0V0z" fill="none" />
                <path
                  d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                />
              </svg>
            </div>
            <div class="d-flex align-items-top">
              <div class="notice-heading d-flex align-items-top flex-fill">
                <div>
                  <span
                    [style.color]="addAlphaChannel(anct.secondary_color, 1)"
                    class="fs-18 font-weight-bold flex-fill"
                    >{{ anct?.title }}
                    <span class="opacity-50 mx-2"
                      ><i class="ti ti-minus"></i
                    ></span>
                  </span>
                  <div
                    class="mb-0 uhelp-alert-content alert-notice"
                    [innerHTML]="sanitizeHtml(anct?.notice)"
                  ></div>
                  <span
                    class="mb-0 text-white uhelp-alert-content alert-notice"
                  >
                    @if (anct?.buttonon == 1) {
                    <a
                      class="btn btn-sm ms-2 text-white text-decoration-underline"
                      routerLink="{{ anct?.buttonurl }}"
                      target="_blank"
                      >{{ anct?.buttonname }}</a
                    >
                    }
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ngb-alert>
      } } }

      <!-- holidays display as announcement -->
      @for (ancts of data?.announcements; track ancts) { @for (announceDays of
      ancts?.announcementday.split(','); track announceDays) { @if
      (ancts?.status == 1 && announceDays == (today | date : 'E')) { @if
      (isAlertVisible(ancts, 'anct')) {
      <ngb-alert
        class="alert-announcement"
        type="bg-light"
        (closed)="dismissAlert(ancts, 'anct')"
        type="announcement-bg-custom"
        [style.background]="ancts.primary_color"
        [style.borderColor]="ancts.primary_color"
        [style.color]="ancts.secondary_color"
      >
        <div class="container">
          <div class="d-flex align-items-top">
            <div
              class="uhelp-announcement me-2 svg-icon flex-shrink-0"
              [style.background]="addAlphaChannel(ancts.secondary_color, 0.1)"
              [style.color]="ancts.secondary_color"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="24px"
                viewBox="0 0 24 24"
                width="24px"
                fill="currentColor"
              >
                <path d="M0 0h24v24H0V0z" fill="none" />
                <path
                  d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                />
              </svg>
            </div>
            <div class="d-flex align-items-top">
              <div class="notice-heading d-flex align-items-top flex-fill">
                <div>
                  <span
                    [style.color]="addAlphaChannel(ancts.secondary_color, 1)"
                    class="fs-18 font-weight-bold flex-fill"
                    >{{ ancts?.title }}
                    <span class="opacity-50 mx-2"
                      ><i class="ti ti-minus"></i
                    ></span>
                  </span>
                  <div
                    class="mb-0 uhelp-alert-content alert-notice"
                    [innerHTML]="sanitizeHtml(ancts?.notice)"
                  ></div>
                  <span class="mb-0 text-white uhelp-alert-content alert-notice">
                    @if (ancts?.buttonon == 1) {
                    <a
                      class="btn btn-sm ms-2 text-white text-decoration-underline"
                      routerLink="{{ ancts?.buttonurl }}"
                      target="_blank"
                      >{{ ancts?.buttonname }}</a
                    >
                    }
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ngb-alert>
      } } } }
    </div>
    } }
  </div>
</div>


<!--Banner Section-->
<section>
  <div class="banner-1 cover-image sptb-tab bg-background-support" style="background: url(./assets/images/photos/banner2.jpg) center center;">
    <!-- <div class="banner-1 cover-image sptb-tab bg-background-support"> -->
    <div class="header-text content-text mb-0">
      <div class="container">
        <div class="text-center text-white mb-7 mt-9">
          <h1 class="mb-2">{{data?.title?.searchtitle | translate}}</h1>
          <p class="fs-18">{{data?.title?.searchsub | translate}}</p>
        </div>
        <div class="row">
          <div class="col-xl-7 col-lg-12 col-md-12 d-block mx-auto">
            <div class="search-background p-0">
              <input type="text" class="form-control input-lg" name="search_name" id="search_name" placeholder="{{'Ask your Questions' | translate }}....." (keyup)="search($event)">
              <button class="btn"><i class="fe fe-search"></i></button>
              <div id="searchList">
                @if (dropdownData != undefined) {
                  <ul class="dropdown-menu sprukohomesearch">
                    @for (list of dropdownData; track list) {
                      <li>
                        @if (list?.articleslug != null) {
                          <a (click)="closeSearchBakcDrop()" routerLink="/article/{{list?.articleslug}}">
                            {{list?.title?.slice(0,60)}}
                            <span class="badge bg-success-transparent text-success float-end fs-11">
                              ({{list?.category?.name.slice(0, 20)}})
                            </span>
                          </a>
                        } @else {
                          <a (click)="closeSearchBakcDrop()" routerLink="/article/{{list?.id}}">
                            {{list?.title?.slice(0,60)}}
                            <span class="badge bg-success-transparent text-success float-end fs-11">
                              ({{list?.category?.name.slice(0, 20)}})
                            </span>
                          </a>
                        }
                      </li>
                    }
                    @empty {
                      
                      <li class="p-2">{{'No Articel Found' | translate}}</li>
                    }
                  </ul>
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- </div> -->
</div>
</section>

<!--Banner Section-->
@if (!data) {
  <!--Feature Box Section skeleton loader-->
  <section>
    <div class="cover-image sptb">
      <div class="container">
        <div class="section-title center-block text-center">
          <h2 class="line-skeleton w-30 m-auto"></h2>
          <p class="line-skeleton w-50 m-auto d-block"></p>
        </div>
        <div class="row row-deck featureboxcenter">
          <div class="col-lg-4 col-md-4">
            <div class="support-card card text-center wow" data-wow-delay="0.2s">
              <div class="suuport-body">
                <div class="choose-icon">
                  <span class="icon-skeleton d-block noimage mx-auto"></span>
                </div>
                <div class="servic-data mt-3">
                  <h4 class="line-skeleton w-30 m-auto"></h4>
                  <p class="line-skeleton w-50 m-auto d-block"></p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="support-card card text-center wow" data-wow-delay="0.2s">
              <div class="suuport-body">
                <div class="choose-icon">
                  <span class="icon-skeleton d-block noimage mx-auto"></span>
                </div>
                <div class="servic-data mt-3">
                  <h4 class="line-skeleton w-30 m-auto"></h4>
                  <p class="line-skeleton w-50 m-auto d-block"></p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="support-card card text-center wow" data-wow-delay="0.2s">
              <div class="suuport-body">
                <div class="choose-icon">
                  <span class="icon-skeleton d-block noimage mx-auto"></span>
                </div>
                <div class="servic-data mt-3">
                  <h4 class="line-skeleton w-30 m-auto"></h4>
                  <p class="line-skeleton w-50 m-auto d-block"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Call Action Section skeleton loader-->
  <section>
    <div class="banner-2 cover-image" style="background : url(./assets/images/pattern/pattern2.png)">
      <div class="header-text content-text mb-0">
        <div class="container">
          <div class="row">
            <div class="col-md-7 sptb">
              <div class="text-white wow">
                <h2 class="line-skeleton w-30 "></h2>
                <p class="line-skeleton w-50 d-block"></p>
              </div>
            </div>
            <div class="col-md-5 d-flex align-items-center justify-content-center">
              <span class="icon-skeleton d-block noimage mx-auto header-text3 img-fluid"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Article Section skeleton loader-->
  <section>
    <div class="cover-image sptb">
      <div class="container">
        <div class="section-title center-block text-center">
          <h2 class="line-skeleton w-40 m-auto"></h2>
          <p class="line-skeleton w-60 m-auto d-block"></p>
        </div>
        <div class="row row-deck">
          <div class="col-xl-6">
            <div class="card">
              <div class="card-header border-bottom-0">
                <h4 class="fs-25 card-title">{{'Recent Articles' | translate}}</h4>
              </div>
              <div class="card-body">
                <ul class="list-unstyled list-article mb-0">
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="card">
              <div class="card-header border-bottom-0">
                <h4 class="fs-25 card-title">{{'Popular Articles' | translate}}</h4>
              </div>
              <div class="card-body">
                <ul class="list-unstyled list-article mb-0">
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                  <li> <i class="typcn typcn-document-text"></i> <span class="line-skeleton w-50"></span></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-xl-4">
            <div class="card">
              <div class="card-header border-bottom-0 d-block">
                <h4 class="fs-25 card-title d-flex line-skeleton w-30"></h4>
              </div>
              <div class="card-body">
                <ul class="list-unstyled list-article mb-0">
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-xl-4">
            <div class="card">
              <div class="card-header border-bottom-0 d-block">
                <h4 class="fs-25 card-title d-flex line-skeleton w-30"></h4>
              </div>
              <div class="card-body">
                <ul class="list-unstyled list-article mb-0">
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-xl-4">
            <div class="card">
              <div class="card-header border-bottom-0 d-block">
                <h4 class="fs-25 card-title d-flex line-skeleton w-30"></h4>
              </div>
              <div class="card-body">
                <ul class="list-unstyled list-article mb-0">
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                  <li><i class="typcn typcn-document-text"></i><span class="categ-text line-skeleton w-50"></span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Testimonial Section skeleton loader-->
  <section>
    <div class="cover-image sptb bg-white">
      <div class="container">
        <div class="section-title center-block text-center">
          <h2 class="line-skeleton w-40 m-auto"></h2>
          <p class="line-skeleton w-60 m-auto d-block"></p>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div>
              <div class="carousel-container">
                <div class="item text-center">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-xl-8 col-md-12 d-block mx-auto">
                        <div class="testimonia">
                          <div class="testimonia-img mx-auto mb-3">
                            <span class="icon-skeleton d-block noimage mx-auto"></span>
                          </div>
                          <p class="line-skeleton w-30 m-auto"></p>
                          <div class="testimonia-data">
                            <h4 class="line-skeleton w-30 m-auto"></h4>
                            <p class="line-skeleton w-50 m-auto d-block"></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--FAQ Section skeleton loader-->
  <section>
    <div class="cover-image sptb">
      <div class="container">
        <div class="section-title center-block text-center">
          <h2 class="line-skeleton w-30 m-auto"></h2>
          <p class="line-skeleton w-50 m-auto d-block"></p>
        </div>
        <div class="row justify-content-center">
          <div class="col-lg-3 col-sm-6">
            <div class="card">
              <div class="card-body p-4 tickets-category">
                <div class="faq-category d-flex align-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" fill="#dee5f7" />
                    <path fill="#565b95"
                      d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z" />
                  </svg>
                  <span class="line-skeleton w-20 ms-2"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="card">
              <div class="card-body p-4 tickets-category">
                <div class="faq-category d-flex align-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" fill="#dee5f7" />
                    <path fill="#565b95"
                      d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z" />
                  </svg>
                  <span class="line-skeleton w-20 ms-2"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="card">
              <div class="card-body p-4 tickets-category">
                <div class="faq-category d-flex align-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" fill="#dee5f7" />
                    <path fill="#565b95"
                      d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z" />
                  </svg>
                  <span class="line-skeleton w-20 ms-2"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
} @else {
  <!--Feature Box Section-->
  @if (data?.title?.featurecheck == 'on') {
    <section>
      <div class="cover-image sptb">
        <div class="container">
          <div class="section-title center-block text-center">
            <h2 class="wow fs-30" data-wow-delay="0.1s">{{data?.title?.featuretitle | translate}}</h2>
            <p class="wow fs-18" data-wow-delay="0.15s">{{data?.title?.featuresub | translate}}</p>
          </div>
          <div class="row row-deck featureboxcenter">
            @if (data) {
              @for (box of data.feature; track box) {
                <div class="col-lg-4 col-md-4">
                  <div class="support-card card text-center wow" data-wow-delay="0.2s">
                    <div class="suuport-body">
                      <a href="{{box.featureboxurl}}" class="featureboxurl" [target]="box.url_checkbox != null ? '_blank' : ''"></a>
                      <div class="choose-icon">
                        @if (box.profileimage) {
                          <img [src]="box.profileimage" alt="img" class="" loading="lazy" decoding="async">
                        }
                      </div>
                      <div class="servic-data mt-3">
                        <h4 class="font-weight-semibold mb-2">{{box?.title | translate}}</h4>
                        <p class="text-muted mb-0">{{box?.subtitle | translate}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              }
            }
          </div>
        </div>
      </div>
    </section>
  }
  <!--Feature Box Section-->
  @if (data?.call?.callcheck == 'on') {
    <!--Call Action Section-->
    <section>
      <div class="banner-2 cover-image" style="background : url(./assets/images/pattern/pattern2.png)">
        <div class="header-text content-text mb-0">
          <div class="container">
            <div class="row">
              <div class="col-md-7 sptb">
                <div class="text-white wow">
                  <h2 class="mb-2 fs-30 font-weight-semibold">{{data?.call?.title | translate}}</h2>
                  <p class="fs-18 text-white-50">{{data?.call?.subtitle | translate}}</p>
                  <a href="{{data?.call?.buttonurl}}" class="btn btn-secondary btn-lg" target="_blank">{{data?.call?.buttonname | translate}}</a>
                </div>
              </div>
              <div class="col-md-5 d-flex align-items-center justify-content-center">
                @if (data?.call?.profileimage) {
                  <img [src]="data?.call?.profileimage" alt="img" class="header-text3 img-fluid" loading="lazy" decoding="async">
                }
              </div>
            </div>
          </div>
        </div><!-- /header-text -->
      </div>
    </section>
    <!--Call Action Section-->
  }
  @if (data?.title?.articlecheck == 'on') {
    <!--Article Section-->
    <section>
      <div class="cover-image sptb">
        <div class="container">
          <div class="section-title center-block text-center">
            <h2 class="wow fs-30" data-wow-delay="0.1s">{{data?.title?.articletitle | translate}}</h2>
            <p class="wow fs-18" data-wow-delay="0.15s">{{data?.title?.articlesub | translate}}</p>
          </div>
          <div class="row row-deck">
            @if (data?.article?.length) {
              <div class="col-xl-6">
                <div class="card">
                  <div class="card-header border-bottom-0">
                    <h4 class="fs-25 card-title">{{'Recent Articles' | translate}}</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-unstyled list-article mb-0">
                      @for (articles of data?.article; track articles) {
                        @if (articles.articleslug != null) {
                          <li>
                            <a class="" routerLink="/article/{{articles?.articleslug}}"><i class="typcn typcn-document-text"></i>
                            @if (articles.subcategory != null && articles.subcategorys) {
                              <small class="fs-12 d-block text-muted">{{articles.subcategorys.subcategoryname | translate}}</small>
                            }
                            <span class="categ-text">{{articles?.title?.slice(0,100)}}</span>
                          </a>
                        </li>
                      } @else {
                        <li>
                          <a class="" routerLink="/article/{{articles?.id}}"><i class="typcn typcn-document-text"></i>
                          @if (articles.subcategory != null && articles.subcategorys) {
                            <small class="fs-12 d-block text-muted">{{articles.subcategorys.subcategoryname | translate}}</small>
                          }
                          <span class="categ-text">{{articles?.title?.slice(0,100)}}</span>
                        </a>
                      </li>
                    }
                  }
                </ul>
              </div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="card">
              <div class="card-header border-bottom-0">
                <h4 class="fs-25 card-title">{{'Popular Articles' | translate}}</h4>
              </div>
              <div class="card-body">
                <ul class="list-unstyled list-article mb-0">
                  @for (populararticles of data.populararticle; track populararticles) {
                    @if (populararticles.articleslug != null) {
                      <li>
                        <a class="" routerLink="/article/{{populararticles?.id}}"><i class="typcn typcn-document-text"></i>
                        @if (populararticles.subcategory != null && populararticles.subcategorys) {
                          <small class="fs-12 d-block text-muted">{{populararticles.subcategorys.subcategoryname | translate}}</small>
                        }
                        <span class="categ-text">{{populararticles?.title?.slice(0,100)}}</span>
                      </a>
                    </li>
                  } @else {
                    <li>
                      <a class="" routerLink="/article/{{populararticles?.id}}"><i class="typcn typcn-document-text"></i>
                      @if (populararticles.subcategory != null && populararticles.subcategorys) {
                        <small class="fs-12 d-block text-muted">{{populararticles.subcategorys.subcategoryname | translate}}</small>
                      }
                      <span class="categ-text">{{populararticles?.title?.slice(0,100)}}</span>
                    </a>
                  </li>
                }
              }
            </ul>
          </div>
        </div>
      </div>
    }
    @for (category of data.categorys; track category) {
      @if (category?.articles?.length) {
        <div class="col-xl-4">
          <div class="card">
            <div class="card-header border-bottom-0 d-block">
              <h4 class="fs-25 card-title d-flex">{{category?.name}}
                <span class="card-options float-end font-weight-normal fs-14">
                  @if (category?.articles) {
                    @for (article of category?.articles.slice(0,1); track article) {
                      @if (article?.status == 'Published') {
                        @if (category?.categoryslug) {
                          <a routerLink="/category/{{category?.categoryslug}}" class="text-primary">{{'View All' | translate}}</a>
                        } @else {
                          <a routerLink="/category/{{category?.id}}" class="text-primary">{{'View All' | translate}}</a>
                        }
                      }
                    }
                  }
                </span>
              </h4>
            </div>
            <div class="card-body">
              <ul class="list-unstyled list-article mb-0">
                @for (articless of category?.articles; track articless) {
                  @if (articless.status == 'Published') {
                    @if (articless.articleslug != null) {
                      <li>
                        <a lass="" routerLink="/article/{{articless?.articleslug}}"><i class="typcn typcn-document-text"></i>
                        @if (articless.subcategory != null && articless.subcategorys) {
                          <small class="fs-12 d-block text-muted">{{articless.subcategorys.subcategoryname | translate}}</small>
                        }
                        <span class="categ-text">{{articless?.title?.slice(0,100)}}</span>
                      </a>
                    </li>
                  } @else {
                    <li>
                      <a class="" routerLink="/article/{{articless?.id}}"><i class="typcn typcn-document-text"></i>
                      @if (articless.subcategory != null && articless.subcategorys) {
                        <small class="fs-12 d-block text-muted">{{articless.subcategorys.subcategoryname | translate}}</small>
                      }
                      <span class="categ-text">{{articless?.title?.slice(0,100)}}</span>
                    </a>
                  </li>
                }
              }
            }
          </ul>
        </div>
      </div>
    </div>
  }
}
</div>
</div>
</div>
</section>
<!--Article Section-->
}
@if (data?.title?.testimonialcheck == 'on') {
  <!--Testimonial Section-->
  <section>
    <div class="cover-image sptb bg-white">
      <div class="container">
        <div class="section-title center-block text-center">
          <h2 class="wow fs-30" data-wow-delay="0.1s">{{data?.title?.testimonialtitle | translate}}</h2>
          <p class="wow fs-18" data-wow-delay="0.15s">{{data?.title?.testimonialsub | translate}}</p>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div>
              <div class="carousel-container">
                <owl-carousel-o [options]="customOptions">
                  @for (testimonials of data.testimonial; track testimonials) {
                    {{testimonials | json}}
                    <ng-template carouselSlide [id]="testimonials.id">
                      <div class="item text-center">
                        <div class="card-body">
                          <div class="row">
                            <div class="col-xl-8 col-md-12 d-block mx-auto">
                              <div class="testimonia">
                                <div class="testimonia-img mx-auto mb-3">
                                  @if (testimonials?.profileimage) {
                                    <img [src]="testimonials?.profileimage" class="avatar avatar-xxl brround text-center mx-auto"
                                      [alt]="testimonials?.profileimage" loading="lazy" decoding="async">
                                  }
                                </div>
                                <p>
                                  <i class="fa fa-quote-left"></i>
                                  {{testimonials?.description}}
                                </p>
                                <div class="testimonia-data">
                                  <h4 class="fs-20 mb-1">{{testimonials?.name | translate}}</h4>
                                  <p>{{testimonials?.designation | translate}}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ng-template>
                  }
                </owl-carousel-o>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Testimonial Section-->
}
@if (data?.title?.faqcheck == 'on') {
  <!--FAQ Section-->
  <section>
    <div class="cover-image sptb">
      <div class="container">
        <div class="section-title center-block text-center">
          <h2 class="wow fs-30" data-wow-delay="0.1s">{{data?.title?.faqtitle | translate}}</h2>
          <p class="wow fs-18" data-wow-delay="0.15s">{{data?.title?.faqsub | translate}}</p>
        </div>
        <div class="row justify-content-center">
          @for (faqcategory of data.faqcategorys; track faqcategory) {
            <div class="col-lg-3 col-sm-6">
              <div class="card">
                <div class="card-body p-4 tickets-category">
                  <a routerLink="/faq-category/{{faqcategory?.id}}"></a>
                  <div class="faq-category d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" fill="#dee5f7" />
                      <path fill="#565b95"
                        d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z" />
                    </svg>
                    <span class="fs-16 font-weight-semibold ms-2">{{faqcategory?.faqcategoryname | translate}}</span>
                  </div>
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  </section>
  <!--FAQ Section-->
}
}

<div #seachBackdrop (click)="closeSearchBakcDrop()" class="search-backdrop"></div>