code added

styles/pages/_productOverview.scss

@@ -1,27 +1,30 @@
-.productoverviewmain{
+.productoverviewmain {
   background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
-  background-color: #C9DBB5;
-  background-size:     cover;                    
-  background-repeat:   no-repeat;
-  background-position: center; 
+  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 );
+  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: 1px solid rgba(255, 255, 255, 0.18);
   border: 2px solid;
 
   position: absolute;
+  z-index: 999;
   bottom: 0;
   left: 0;
 }
@@ -31,21 +34,29 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
 }
 
 .priceCut_multi {
-  font-size: 0.7rem;
+  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 13rem;
+  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 {
@@ -66,3 +77,264 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
   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;
+  }
+}