<div class="topDiv">   
  <div *ngIf="!showNav" class="row" style="margin: 0;box-shadow: 0px 2px 6px 1px #868686;margin-bottom: 3px;position: absolute;height: 65px; z-index: 1111; width: 100%; background: white;">
          <div class="col-sm-2 col-md-2 col-lg-2" style="text-align: center; padding: 10px;">
            
                  <img style="width:150px" src={{this.logo_1}} alt="AVATAR">
          </div>
          <div class="col-sm-6 col-md-6 col-lg-6" >         
                <div style="text-align: right;padding-top: 20px;">         
                        <span style="font-size: 18px; font-weight: 400; color: #2a2828; padding-right: 30px;cursor:pointer;font-weight:500">Become a Reseller</span>
                        <span style="font-size: 18px; font-weight: 400; color: #767474;">Support Contact</span>
                        <span style="font-size: 18px; font-weight: 500; padding-left: 20px;"><a>{{supportContact}}</a></span>
                        <!-- {{supportContact}} -->
                </div>
          </div>
          <div class="col-sm-4 col-md-4 col-lg-4">      
                  <div style="text-align: center;">
                          <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: -4px; width: 125px; color:blue" (click)="getADemoReq()">Back To Login</button>
                          <!-- <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: 15px;margin-left: 20px;">Go To Site</button> -->
                          <a type="button" class="btn btn-primary-outline" class="txt1" href={{mainSiteurl}} style="padding-top: 4px;border: 1px solid black; margin-top: 18px; margin-left: 20px; width: 125px; height: 34px; text-align: center; border-radius: 4px;">Go to Site</a>
                          <!-- <i title="Shop Tracker" class="fas fa-shopping-cart" style="cursor: pointer;float: right; font-size: 25px; padding: 24px 10px 0px 0px; color: #2db4c1;" (click)="backtoLogin()"></i> -->
                          <!-- *ngIf="showLink || cpn_showLink || saanvi_showLink" -->
                  </div>
          </div>            
  </div>
  <div class="row" style="max-height: 100vh; padding-top: 4%;height: 100vh; margin-left: 200px; margin-right: 200px; background: white; overflow: auto;">
    <div class="col-sm-12 col-md-12 col-lg-12"> 
      <div class="row" style="background: whitesmoke;height:93vh">
        <!-- below this card -->
        <div class="col-sm-4 col-md-4 col-lg-4" *ngFor = "let productCard of ProductArr" style="padding:0">
          <div class="row" style="margin:10px 10px 0px 10px ;padding-bottom: 10px;box-shadow: 1px 2px 4px 0px #5f5d5d;border-radius: 2px;background: white;" >
            <div class="col-sm-12 col-md-12 col-lg-12">
              <!-- <div class="row" style="float: right; font-size: 20px; padding-top: 10px;">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <i class="far fa-heart"></i>
                </div>
              </div> -->
              <div class="row" style="text-align:center" (click)="showProductDetail(productCard)">
                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-top: 10px;">   
                  <div id="toast">
                    <div id="desc">{{data_descip}}</div>
                  </div>
                 <!-- Image wala part -->
                 <!-- <img src="../assets/images/trackerImages/AIS140.png" alt="Tracker" style="cursor: pointer;width:200px"> -->
                 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
                  <div class="carousel-inner">
                    <div class="carousel-item active" *ngFor= "let image of productCard.imageUrl">
                      <img class="d-block w-100" style="height: 220px;" src="{{image}}" alt="First slide">
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
                </div>
              </div>
              <div class="row" style="text-align: center; font-weight: 500; font-size: 20px;padding-top: 15px;">
                <div class="col-sm-12 col-md-12 col-lg-12">
                <!-- device name wala part -->
                <p>{{productCard.device_name?productCard.device_name:''}}</p>
                </div>
              </div>
              <div class="row" style="padding-bottom: 15px;text-align: center;font-weight: 500;">
                <div class="col-sm-6 col-md-6 col-lg-6">
                  <p style="margin-bottom: 0;font-size: 12px;color: grey;">Price</p>
                  <span>INR</span>    
                 <span>{{productCard.price?productCard.price:""}}</span>
                </div>
                <div class="col-sm-6 col-md-6 col-lg-6">   
                  <p style="margin-bottom: 0;font-size: 12px;color: grey;">Discount Price</p>
                  <span>INR</span>    
                  <span>{{productCard.discountPrice?productCard.discountPrice:''}}</span>     
                </div>
              </div>
              <div class="row" style="text-align: center;">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <button *ngIf="productCard.addToCart ===false" style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="addtocart(productCard)">{{'Add to Cart' | translate}}</button>
                  <button *ngIf="productCard.addToCart ===true" style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="removeFromCart(productCard)">{{'Remove Cart' | translate}}</button>
              <!-- add to cart wala part  -->
                </div>
              </div>
            </div>
          </div>
        </div> 
          <!-- below this card -->
      </div>
    </div>
  </div>
  </div>