<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)="goback()">More Products</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"> 
          <!-- all template wil go here    -->
          <div class="row" style="margin-top: 40px;">
            <div class="col-sm-5 col-md-5 col-lg-5">
              <div class="row" style="margin-bottom: 30px;">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <div id="toast">
                    <div id="desc">{{data_descip}}</div>
                  </div>
                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active" *ngFor="let images of imageURL">
                        <img class="d-block w-100" src="{{images}}" alt="First slide" style="height: 300px; width: 100%!important; padding: 25px;">
                      </div>
                      <!-- <div class="carousel-item">
                        <img class="d-block w-100" src="../assets/images/trackerImages/AIS140.png" alt="Second slide">
                      </div> -->
                      <!-- <div class="carousel-item">
                        <img class="d-block w-100" src="../assets/images/trackerImages/AIS140.png" alt="Third slide">
                      </div> -->
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" 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">
                <div class="col-sm-6 col-md-6 col-lg-6">
                  <button *ngIf="message.addToCart === false" style="background-color: #ff9f00; color: #fdfdfd; font-size: 16px; width: 100%;" md-raised-button (click)="addtocart()">{{'Add to Cart' | translate}}</button>
                  <button *ngIf="message.addToCart === true" style="background-color: #ff9f00; color: #fdfdfd; font-size: 16px; width: 100%;" md-raised-button (click)="removeCart()">{{'Remove Cart' | translate}}</button>
                </div>
                <div class="col-sm-6 col-md-6 col-lg-6">
                  <button style="background-color: #fb641b; color: #fdfdfd; font-size: 16px; width: 100%;" md-raised-button (click)="buynow()">{{'Buy Now' | translate}}</button>
                </div>
              </div>
            </div>
            <div class="col-sm-7 col-md-7 col-lg-7">
              <div class="row" style="padding-top: 20px;">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <p style="color: #878787; font-size: 16px; margin-bottom: 0; font-weight: 500;">{{message.device_name}}</p>
                  <p style="font-size: 15px; font-weight: 400;margin-bottom: 5px;">{{message.raw.product_specification?message.raw.product_specification.additionalSpec:''}}</p>
                </div>        
              </div>
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <p style="color: #26a541; font-weight: 500; margin-bottom: 0;">Special Price</p>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <span style="font-weight: 500;font-size: 20px;margin-right: 5px;">INR</span><span style="font-size: 20px; font-weight: 500;">{{message.discountPrice}}</span>
                  <span style="text-decoration: line-through; color: #878787; margin: 0px 10px; font-weight: 500; font-size: 16px;">{{message.price}}</span>
                  <span style="color: #26a541;font-size: 16px;font-weight: 500;">{{message.raw.discount_price}}% off</span>      
                </div>        
              </div>
              <div class="row" style="font-size: 20px; font-weight: 500; color: #878787;margin-top: 10px;">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <p>Specifications : </p>
                </div>        
              </div>
              <div class="row" style="height: 60%; overflow: auto;">
                <div class="col-sm-12 col-md-12 col-lg-12">
                   <div class="row" *ngFor="let rowData of RawDataArr">
                     <div class="col-4">
                       <p>{{rowData.k1}}</p>
                     </div>
                     <div class="col-8">  
                       <p>{{rowData.k2}}</p>            
                    </div>
                   </div>
                </div>        
              </div>
            </div>
          </div>
    </div>
  </div>
  </div>