<div *ngIf="showFooter">
  <footer class="footer old-footer" #footerFix *ngIf="!layoutConfiguration" [ngClass]="{'player-fullscreen-footer': isFullScreenView}">
    <div  class="ui container">
      <div class="ui grid stackable">
        <div class="four wide column footerMenu mr-auto">
        </div>
  
        <div class="download-mobile-app">
          <div class="download-mobile-app-logo p-16">
            <div class="mobile-circles">
              <div class="big-box border-round border-r50"></div>
              <div class="oval-box border-round ml-24"></div>
              <div class="small-box border-round border-r50 ml-16 mr-8"></div>
              <div class="small-box border-round border-r50"></div>
            </div>
            <label
              class="d-block text-center font-weight-bold">{{resourceService?.frmelmnts?.lbl?.downloadDikshaForMobile | interpolate:'{instance}': instance}}</label>
            <a class="d-block app-download" (click)="redirectToMobileApp()" tabindex="0">
              <img class="playStore-img cursor-pointer" src="/assets/images/google_playstore.png"
                alt="{{ resourceService?.frmelmnts?.lbl?.altGoogleplay }}">
            </a>
            <p class="d-block pt-10">{{resourceService.frmelmnts?.lbl?.getUnlimitedAccess}}</p>
          </div>
        </div>
        <div class="four wide column contantDetails">
          <label class="d-flex flex-w-wrap mb-16 flex-jc-center">
            <ul class="d-flex flex-ai-center fsmall sb-color-white mb-0 mobile only pl-0">
              <li class="mb-0"><a href="/screenreaderaccess.html" class="cursor-pointer sb-color-white">Screen Reader Access</a></li><li class="mx-4 mb-0">|</li>
              <li class="mb-0"><a href="/sitemap.html" class="cursor-pointer sb-color-white">Sitemap</a></li><li class="mx-4 mb-0">|</li>
            </ul>
            <a appTelemetryInteract [telemetryInteractEdata]="setTelemetryInteractEdata('t&c')" href="/term-of-use.html">
              {{resourceService.frmelmnts?.lnk?.footerTnC}}
            </a>
            <span>| &copy; {{date | date:'yyyy'}}, {{instance}}</span>
          </label>
          <label class="sb-footer-license">
           <span><img alt="{{resourceService.frmelmnts?.lbl?.CCbyLicense}}" src="/assets/images/CCby.svg">&nbsp;&nbsp;{{resourceService.frmelmnts?.lbl?.CCbyLicense}}</span>
          </label>
        </div>
      </div>
    </div>
  </footer>
  
  <footer class="new-layout-footer" #footerFix *ngIf="layoutConfiguration" [ngClass]="{'player-fullscreen-footer': isFullScreenView}">
    <div class="sb-g sbt-fluid-content-bg sbt-footer-container relative">
      <div [ngClass]="FIRST_PANEL_LAYOUT"></div>
      <div [ngClass]="SECOND_PANEL_LAYOUT"></div>
      <div class="sbt-container">
        <img src="/assets/images/footer-line.svg" class="sbt-skyline-path" alt="line path">
        <div class="sbt-footer-shade">
          <img src="/assets/images/footer-flower.svg" alt="flower image shade is showing on footer">
        </div>
        <div class="ui grid stackable px-72">
          <div class="six wide column contantDetails px-0">
            <div>
            <label class="d-flex footer-terms-info text-left font-weight-normal flex-w-wrap">
              <ul class="d-flex flex-ai-center fsmall mb-0 mobile only pl-0">
                <li class="mb-0" tabindex="0"><a href="/screenreaderaccess.html" class="cursor-pointer">Screen Reader Access</a></li><li class="mx-4 mb-0">|</li>
                <li class="mb-0" tabindex="0"><a href="/sitemap.html" class="cursor-pointer">Sitemap</a></li><li class="mx-4 mb-0">|</li>
              </ul>
              <a *ngIf="!isDesktopApp" [attr.aria-label]="resourceService.frmelmnts?.lnk?.footerTnC" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="setTelemetryInteractEdata('t&c')"
                href="/term-of-use.html">{{resourceService.frmelmnts?.lnk?.footerTnC}}</a>
              <a *ngIf="isDesktopApp" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="setTelemetryInteractEdata('t&c')"
                href="{{appBaseUrl}}/term-of-use.html" target="_blank">{{resourceService.frmelmnts?.lnk?.footerTnC}}</a>
              <span [attr.aria-label]="instance" tabindex="0">| &copy; {{date | date:'yyyy'}}, {{instance}}</span>
            </label>
            <label class="d-block text-left fsmall" tabindex="0">
              <span>{{resourceService.frmelmnts?.lbl?.CCbyLicense}}&nbsp;&nbsp;<img alt="{{resourceService.frmelmnts?.lbl?.CCbyLicense}}" src="/assets/images/CCby.svg"></span>
            </label>
          </div>
          </div>
          <div class="six wide column p-0 d-flex sbt-footer-download-app">
            <div class="sbt-footer-bg relative">
              <img [attr.aria-label]="resourceService.frmelmnts?.lnk?.footerAppDownload | interpolate:'{instance}':  instance" class="sbt-footer-bg-img cursor-pointer" tabindex="0" src="/assets/images/footer-flower-set.svg" alt="">
              <label class="d-block text-center font-weight-bold sbt-footer-title">{{resourceService.frmelmnts?.lnk?.footerDIKSHAForMobile | interpolate:'{instance}':  instance}}</label>
              <a class="d-block app-download" (click)="redirectToMobileApp()">
                <img tabindex="0" class="playStore-img cursor-pointer" src="/assets/images/google_playstore.png"
                  alt="{{ resourceService?.frmelmnts?.lbl?.altGoogleplay }}">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  </div>

  <extension-point *appDesktopOnly [name]="'content-manager'"></extension-point>

./main-footer.component.scss

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "layout/footer" as *;

:host ::ng-deep{
  .new-layout-footer{
    margin-top:calculateRem(24px);
    &.player-fullscreen-footer{
      display: none;
    }
    .sbt-footer-container {
      height: calculateRem(272px); //296px
      width: 100%;
      padding: 0% 2%;
      background: none;
      margin-top:calculateRem(8px);
    }
    .sbt-page-content-area {
      border-radius: 0rem 0 0 0;
    }
    .sbt-container{
      width:calc(100% - 4%);
      padding: 0;
      margin: 0 auto;
      padding-top: calculateRem(60px);
      border-radius: calculateRem(40px) calculateRem(40px) 0 0;
      background-color: var(--sbt-footer-bg);
      box-shadow: var(--sbt-box-shadow-6px);
      left:0;
      position:absolute;
      top:calculateRem(0px); //24px
      bottom: 0;
      right:0;
      z-index:8;
      @include respond-below(sm){
        bottom: auto;
      }
      .sbt-skyline-path{
        position: absolute;
        bottom: 0%;
        overflow: hidden;
        width: 88%;
        html[dir="rtl"] & {
          -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
        }
        @include respond-below(sm){
          display: none;
        }
      }
      .sbt-footer-shade{
        position: absolute;
        bottom: 0;
        left: calculateRem(40px);
        html[dir="rtl"] & {
          left: auto;
          right: calculateRem(40px);
          -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
        }
        @include respond-below(sm){
          display: none;
        }
      }
      .footerMenu {
        .help-center{
          margin-bottom: calculateRem(24px);
          @include respond-below(sm) {
            margin-bottom: calculateRem(16px);
          }
          a{
            color: var(--primary-color);
            font-size: calculateRem(14px);
            font-weight: bold;
          }
        }
        .contact-info{
          @include respond-below(sm) {
            margin-bottom: calculateRem(16px);
          }
          a{
            color: var(--primary-color);
            font-size: calculateRem(14px);
          }
          .contact-info-title{
            color: var(--primary-color);
            font-weight: bold;
            font-size: calculateRem(14px);
            margin-bottom: calculateRem(8px);
            @include respond-below(sm){
              margin-bottom: calculateRem(4px);
            }
          }
        }
      }
      .footer-terms-info{
        a{
          color: var(--sbt-footer-info-links);
          font-size: calculateRem(14px);
          font-weight: bold;
          &:hover{
            color: var(--sbt-footer-info-links-hover);
          }
        }
        color: var(--sbt-footer-info-links);
        font-size: calculateRem(14px);
        font-weight: bold
      }
      .sbt-footer-download-app{
        justify-content: flex-end;
        @include respond-below(sm){
          justify-content: center;
        }
        .sbt-footer-bg{
          padding-top: calculateRem(30px);
          .sbt-footer-bg-img{
            height: calculateRem(200px);
            width: calculateRem(380px);
            @include respond-below (sm){
              height: calculateRem(180px);
              width: calculateRem(320px);
            }
          }
          .sbt-footer-title{
            font-size: calculateRem(16px) !important;
            color: var(--gray-800);
            padding: 0 calculateRem(24px);
            position: absolute;
            width: calculateRem(130px);
            bottom: calculateRem(95px);
            left: 0;
            right: 0;
            margin: 0 auto;
            @include respond-below (sm){
              bottom: calculateRem(80px);
            }
          }
          .playStore-img{
            width: calculateRem(164px);
            position: absolute;
            bottom: calculateRem(30px);
            left: 0;
            right: 0;
            margin: 0 auto;
            @include respond-below(sm){
              width: calculateRem(144px);
              position: absolute;
              bottom: calculateRem(20px);
            }
          }
        }
      }
      .ui.grid.stackable{
        @include respond-below(md){
          padding: 0 calculateRem(32px) !important;
        }
      }
      .ui.stackable.grid>.wide.column{
        @include respond-below(md){
          padding: 0 !important;
        }
      }
    }   
  }
}