anwi_website/styles/pages/_productOverview.scss

.productoverviewmain {
  background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
  background-color: white;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  position: relative;
}

$PO_footerText: 0.7rem;

.photo_dual {
  width: 40rem;
}

.price_footer {
  background: rgba(255, 255, 255, 0.25);
  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  border: 1px solid rgba(255, 255, 255, 0.18);
  border: 2px solid;

  position: absolute;
  z-index: 999;
  bottom: 0;
  left: 0;
}

.boxImgContainer {
  width: 4rem;
}

.priceCut_multi {
  font-size: $PO_footerText;
}

.PO_learnMore {
  font-size: $PO_footerText;
}

.productOverview .overviewProductHeading {
  font-size: 2.1rem;
  font-family: "satoshi", sans-serif;
  font-weight: 500;
}

.productOverview .overviewProductFullTitle {
  padding: 2rem 11rem;
  font-size: 3rem;
  font-family: "orbitron", sans-serif;
}

.productOverview .overviewProductDes {
  padding: 0 2rem;
  font-size: 1.5rem;
  font-family: "satoshi", sans-serif;
}

.PO_galleryContainer .PO_gallery_display {
  min-height: 500px;
  width: 100%;
  background: white;
  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
  position: relative;
}
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.PO_galleryContainer .PO_gallery_box_inner {
  padding: 2rem;
  background-color: #eeeeee;
}

.productoverBox {
  .PO_box {
    // background-color: red;
    height: 100%;
    > div {
      padding: 1rem 0rem;
    }
    .box_inner {
      height: 100%;
    }

    .bgBox_Content {
      background: rgb(236, 236, 236);
      background: linear-gradient(
        90deg,
        rgba(236, 236, 236, 1) 4%,
        rgba(118, 118, 118, 1) 100%
      );
    }
    .box_inner_right {
      padding-left: 1rem;
    }
    .box_inner_left {
      padding-right: 1rem;
    }
  }
}

.displayscreenpad {
  .displayscreenpadContainer {
    text-align: center;
  }
  .displayscreenpadHeading {
    font-size: 8rem;
  }

  .displayscreenpadMain {
    top: -108px;
  }
  .displayscreenpadleft {
    > img {
      left: -8%;
    }
  }

  .displayscreenpadright {
    > img {
      right: -10%;
    }
  }
}

.dual_des_heading{
  font-size: 3rem;
}


.dualLaptop{
  width: 100vw;
  height: 1000px;
  top:-100px;
  margin-bottom: -100px;
  position: relative;


  .zeroBMain_desP{
    font-size: 1.2rem;
  }
  .zeroBMain_des{
    position: absolute;
    top: 0;
    right: 0;
    max-width: 700px;
    padding-right: 9rem;
  }

  .dualImgs{
    position: absolute;


    .dualImgsInner{
      width: 63%;
    }
  }

  
  
  .dualImgsOne{
    top:0;
    left: -10%;
    transform: rotate(343deg);
    width: 68%;
  }
  
  .dualImgsTwo{
    // top:0;
    // right: -80%;
    // transform: rotate(330deg);

    top: 31%;
    right: -68%;
    transform: rotate(339deg);
    .dualImgsInner{
      width: 82%;
    }
  }
}

.tableLaptop{
  margin-top: 300px;

  // border: 1px solid;
  height: 90vh;
  width: 100vw;
  position: relative;
  .circleTableLaptop_Heading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -311%);
  }
  .justTableLaptop{
    position: absolute;
    width: 86%;
    top: -10px;
    right: 128px;
    z-index: 1;
  }

  .circleTableLaptop{
    background-color: #ECECEC;
    height: 70rem;
    width: 70rem;
    border-radius: 50%;
    position: relative;
    overflow: hidden;

   
    .circleTableLaptopTop{
      
    bottom: -3%;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 2%);

    }
  }

  .circleTableLaptop_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 168%);

  }

  margin-bottom: 300px;
}

.trueLifeDisplay{
 .trueLifeDisplay_headingHD{
  >.headingLife{
    font-size: 6rem; 
  }
 }

 .trueLifeDisplay_des{
  padding: 0 10rem;

 }
}

.font_p_Dual{
  font-size: 1.2rem;
}

.controlPanel{
  
  margin-top: 10rem;
  padding-bottom: 550px;
  .controlPanel_des{
    position: absolute;
    top: -170px;
    left: 80px;

  }
  .bgControlpanel{
    min-height: 100vh;
    background-color: #ECECEC;
    border-radius: 157px;
    position: relative;

    .bgControlpaneltabs{
      
      position: absolute;
      top: 100px;
      right: 0;

      .nav-tabs{
        border-bottom: 1px solid;
        margin-bottom: 2rem;
      }
      .nav-item{
        position: relative;
        border: none;
      }
     
    
      .nav-tabs .nav-link {
       position: relative;
       color: black;
       font-weight: 500;
      }
    
      .nav-tabs .nav-link.active{
        border: none;
        background-color: transparent;
      }
    
      .nav-tabs .nav-link.active::before {
        display: block;
      }
    
      .nav-item .nav-link::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        bottom: -2px;
        right: 0;
        display: none;
        background-color: black;
      }
    }
  }
 

}

.designedProLaptop{
  position: relative;
  .designedProLaptop_title{
    position: absolute;
    top: -200px;
    left: 0;
    z-index: 1;

    
  }
  .designedProLaptop_title_text{
    font-size: 10rem;
  }
  .designedProLaptop_img{
    position: absolute;
    top: 0;
    right: 700px;
  }
}