How to apply margin to only first mat-ink-bar in Angular Material Tabs component?

I am trying to give a margin-left of 52px to only the first mat-ink-bar of the first tab on a mobile screen, I tried to do so using CSS (nth: child) but the styling is are not getting applied. The tabs are scrolled horizontally. The margin-left is only applied for mobile screens.

HTML

<mat-tab-group class="mat_tab_group scroll_tabs_div"> 
 
    <mat-tab label="Label">
       
        <ng-template mat-tab-label class="">
             <!-- <div class="tab_spacer"></div> -->
            <img src="../../../assets/images/image_1.png" alt="image_1" class="tabs_leading_icon mat_tab_active">
            <span class="body-2 mt_10">Label</span>
        </ng-template>
        <div>
            <div class="content">
        <p class="tab_text text-center">
            Tab-bars/web/6-tabs/leading-icon
        </p>
    </div>
</div>
     
</mat-tab>
    <mat-tab label="Label">
        <ng-template mat-tab-label>
            <img src="../../../assets/images/image_1.png" alt="image_1" class="tabs_leading_icon">
            <span class="body-2 mt_10">Label</span>
        </ng-template>
        <div  class="content">
            <p class="tab_text text-center">Tab-bars/web/6-tabs/leading-icon</p>
        </div>
    </mat-tab>
    <mat-tab label="Label">
        <ng-template mat-tab-label>
            <img src="../../../assets/images/image_1.png" alt="image_1" class="tabs_leading_icon">
            <span class="body-2 mt_10">Label</span>
        </ng-template>
        <div  class="content">
            <p class="tab_text text-center">Tab-bars/web/6-tabs/leading-icon</p>
        </div>
    </mat-tab>
    <mat-tab label="Label">
        <ng-template mat-tab-label>
            <img src="../../../assets/images/image_1.png" alt="image_1" class="tabs_leading_icon">
            <span class="body-2 mt_10">Label</span>
        </ng-template>
        <div  class="content">
        <p class="tab_text text-center">Tab-bars/web/6-tabs/leading-icon</p>
    </div></mat-tab>
    <mat-tab label="Label"> 
        <ng-template mat-tab-label>
            <img src="../../../assets/images/image_1.png" alt="image_1" class="tabs_leading_icon">
            <span class="body-2 mt_10">Label</span>
        </ng-template>
        <div  class="content">
        <p class="tab_text text-center">Tab-bars/web/6-tabs/leading-icon</p>
    </div></mat-tab>
    <mat-tab label="Label">
        <ng-template mat-tab-label>
            <img src="../../../assets/images/image_1.png" alt="image_1" class="tabs_leading_icon">
            <span class="body-2 mt_10">Label</span>
        </ng-template>
        <div  class="content">
        <p class="tab_text text-center">Tab-bars/web/6-tabs/leading-icon</p>
    </div>
    
</mat-tab>

  </mat-tab-group>

CSS

.scroll_tabs_div .mat-ink-bar{
    margin-left: 25px !important;
  }
  .scroll_tabs_div .mat-ink-bar{
    visibility: visible;
    left: 16px;
    width: 100px !important;
}
  .mat-tab-header-pagination-chevron{
    display: none !important;
  }
  .mat-tab-label-container::-webkit-scrollbar{
    display: none;
  }
  .mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination {
    display: none !important;
}
.mat-ink-bar{
  height: 2px;
 }

I also tried this way but the margin-left is applied to all the tabs's mat-ink-bar

  .scroll_tabs_div .mat-ink-bar{
    margin-left: 52px !important;
  }

I have also added the expected output image of tabs.