<ion-content dir="ltr" *ngIf="userInfo.company_type == 'CS'">
  <!-- <ion-grid class="card-size">
    <ion-row>
      <ion-col size='6'>
        <img class="logo-img-style" [src]='userInfo.company_logo' alt="https://hmgwebservices.com/images/Moheem/CS.jpg"/>
      </ion-col>
      <ion-col size='6'>
        <img class="qr-style" [src]="userInfo.qr"/>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size='12'>
        <ion-label>
          <h1 class='font-text-style' style="font-size: 20px !important; width: 200%;">{{userInfo.name_en}}</h1>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.job_en}}</h5>
        </ion-label>
      </ion-col>
      <ion-col>
        <ion-label>
          <h5 class='font-text-style' style="position: relative; left: 398px; text-align: end;">{{userInfo.ar}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>        
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.mobile}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>        
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.email}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>        
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.company_url}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
  </ion-grid> -->
  <div style="height: 300px; width: 300px; transform: rotate(90deg) !important;">
    <img style="width: 100px; margin-left: 20px; margin-top: 26px;" [src]='userInfo.company_logo' alt="https://hmgwebservices.com/images/Moheem/CS.jpg"/>
    <h1 class='font-text-style' style="font-size: 25px !important; margin-left: 20px; margin-top: 5px; margin-bottom: 0px;">{{userInfo.name_en}}</h1>
    <h5 class='font-text-style' style="margin-left: 20px; margin-top: 0px; ">{{userInfo.job_en}}</h5>
    <h5 class='font-text-style' style="margin-left: 20px; font-size: 18px; margin-bottom: 0px;">{{userInfo.mobile}}</h5>
    <h5 class='font-text-style' style="margin-left: 20px; margin-top: 5px; font-size: 12px; margin-bottom: 5px;">{{userInfo.email}}</h5>
    <h5 class='font-text-style' style="margin-left: 20px; margin-top: 0px;">{{userInfo.company_url}}</h5>
  </div>

  <div style="height: 150px; width: 300px;">
    <img style="width: 140px; margin-left: 145px; margin-top: 26px;" [src]="userInfo.qr"/>
  </div>
</ion-content> 


<ion-content dir="ltr" *ngIf="userInfo.company_type != 'CS'">
  <!-- <ion-grid class="cs-card-size">
    <ion-row>
      <ion-col style="padding-left: 315px;">
        <img class="logo-img-hmg-style" [alt]='userInfo.company_logo' src="../assets/icon/HMG_LOGO.png"/>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <img class="qr-img-hmg-style" [src]="userInfo.qr"/>
      </ion-col>
      <ion-col>
        <ion-label>
          <h1 class='font-text-style' style="font-size: 25px !important; width: 400px;">{{userInfo.name_en}}</h1>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row class="name-div">
      <ion-col>
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.job_en}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>        
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.mobile}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>        
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.email}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>        
        <ion-label>
          <h5 class='font-text-style'>{{userInfo.company_url}}</h5>
        </ion-label>
      </ion-col>
    </ion-row>
  </ion-grid> -->
  <div style="height: 300px; width: 300px; transform: rotate(90deg) !important;">
    <img style="width: 300px; margin-left: 185px; margin-top: 26px;" [alt]='userInfo.company_logo' src="../assets/icon/HMG_LOGO.png"/>
    <div style="margin-top: 30px;">
      <h1 class='font-text-style' style="font-size: 25px !important; margin-left: 20px; margin-top: 5px; margin-bottom: 0px;">{{userInfo.name_en}}</h1>
      <h5 class='font-text-style' style="margin-left: 20px; margin-top: 0px; ">{{userInfo.job_en}}</h5>
      <h5 class='font-text-style' style="margin-left: 20px; font-size: 18px; margin-bottom: 0px;">{{userInfo.mobile}}</h5>
      <h5 class='font-text-style' style="margin-left: 20px; margin-top: 5px; font-size: 12px; margin-bottom: 5px;">{{userInfo.email}}</h5>
      <h5 class='font-text-style' style="margin-left: 20px; margin-top: 0px;">{{userInfo.company_url}}</h5>
    </div>
  </div>

  <div style="height: 150px; width: 300px;">
    <img style="width: 140px; margin-left: 10px; margin-top: 50px;" [src]="userInfo.qr"/>
  </div>
</ion-content>