code added

dist/css/main.css

@@ -15,6 +15,8 @@ ORDER: Base + typography > general layout + grid > page layout > components
 
 1em = 16px
 */
+
+/* Orbitron */
 @font-face {
   font-family: "Orbitron";
   src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
@@ -39,7 +41,28 @@ ORDER: Base + typography > general layout + grid > page layout > components
   font-weight: 700;
   font-style: normal;
 }
+/* Orbitron end */
+/* Satoshi */
+@font-face {
+  font-family: "Satoshi";
+  src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi";
+  src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi";
+  src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
 
+/* Satoshi end */
 *,
 *::after,
 *::before {
@@ -50,14 +73,21 @@ ORDER: Base + typography > general layout + grid > page layout > components
   font-family: "Orbitron" ,sans-serif;
 }
 
+.satoshi_font{
+  font-family: "Satoshi", sans-serif;
+}
+
 html {
   font-size: 100%; }
 
 body {
-  box-sizing: border-box; }
+  box-sizing: border-box; 
+  overflow-x: hidden;
+}
   @media only screen and (max-width: 56.25em) {
     body {
-      padding: 0; } }
+      padding: 0; } 
+  }
 
 .bg-green {
   background-color: #3bb78f;
@@ -90,6 +120,9 @@ body {
 .padding_top_14 {
   padding-top: 14rem; }
 
+.padding_top_10 {
+  padding-top: 10rem; }
+
 .p-6 {
   padding: 5rem; }
 
@@ -108,6 +141,9 @@ body {
 .fw-600 {
   font-weight: 600; }
 
+  .fw-700 {
+    font-weight: 700; }
+
 .h-200p {
   height: 200px; }
 /* button */

dist/css/pages/productOverview.css

@@ -1,18 +1,29 @@
 .productoverviewmain{
   background-image: url("../../assets/imgs/productoverview/productbg.png");
-  background-color: #cccccc;
-  background-size:     cover;                      /* <------ */
+  background-color: #C9DBB5;
+  background-size:     cover;                    
   background-repeat:   no-repeat;
-  background-position: center center; 
-}
+  background-position: center; 
+
+  position: relative;
+}  
 
 .photo_dual {
   width: 40rem;
 }
 
 .price_footer {
-  background-color: #52cba5;
+  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;
+  bottom: 0;
+  left: 0;
 }
 
 .boxImgContainer {