Why Ionic header changes are not showing in android phone?

Question

I have build a android application. So I wanted to customize the header of the application

Here is the HTML code

    <ion-header>
  <ion-toolbar>
    <ion-title>Verification Code</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="verification">

  <div class="verification-container">

    <div class="heading">
      <ion-label>OTP</ion-label>
    </div>

    <div class="sub-heading">
      <ion-label>OTP has seen to your registed phone number. Please verify</ion-label>
    </div>

    <div class="otp">
      <ng-otp-input  [config]="{length:6}"></ng-otp-input>
    </div>

    <div class="send-again">
      <ion-label>Didn't recieved OTP ?</ion-label><a> Send again</a>  
    </div>

    <div class="verification-btn">
      <ion-button class="verify-btn" type="submit" expand="block" (click)="verified()" color="secondary">Verify</ion-button>
    </div>
  </div>
  
</ion-content>

Here is the CSS for changing the header (global.scss)

    ion-toolbar, ion-header {
    --min-height: 71px;
    --background: transparent;
    --border-color: transparent;
   }

   ion-title {
    margin-top: 47px;
    height: 25px;
    font-weight: 500;
    font-size: 18px;
    color: #292929;
  }

in web browser I can see the header changes but if I installed the apk file in android phone header changes are not there