From 0f887b4bf07edce8cd0dbc347f3e03687f0fbd0e Mon Sep 17 00:00:00 2001
From: nimtaurel <hopeless.mero.d@gmail.com>
Date: Wed, 27 Dec 2023 17:57:11 +0600
Subject: [PATCH] fix

---
 styles.css     | 26 ++++++++++++++++++--------
 styles.css.map |  2 +-
 styles.scss    | 25 +++++++++++++++++--------
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/styles.css b/styles.css
index 1c3aac1..f0361ab 100644
--- a/styles.css
+++ b/styles.css
@@ -11,6 +11,10 @@ p {
   margin: 0;
 }
 
+header {
+  height: 70px;
+}
+
 .PBP-container {
   padding: 0;
 }
@@ -47,9 +51,11 @@ p {
 }
 .PBP-container main {
   position: relative;
+  height: calc(100vh - 70px);
+  min-height: fit-content;
 }
 .PBP-container main img {
-  height: calc(100vh - 84px);
+  height: 100%;
   object-fit: cover;
   width: 100%;
   background-position: center;
@@ -66,12 +72,13 @@ p {
   z-index: 1;
 }
 .PBP-container main .container {
+  max-height: 60%;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   position: absolute;
-  top: 30%;
+  top: 20%;
   text-align: center;
   z-index: 999;
 }
@@ -81,7 +88,7 @@ p {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: 100px;
+  margin-bottom: 20%;
 }
 .PBP-container main .container .main-text-wrapper h1 {
   font-size: 29px;
@@ -103,7 +110,7 @@ p {
   color: white;
   font-size: 16px;
   font-weight: 500;
-  margin-bottom: 200px;
+  margin-bottom: 25%;
   transition: all 0.3s;
 }
 .PBP-container main .container .btn-pb:hover {
@@ -164,9 +171,11 @@ p {
 }
 .PF-container .main-pf {
   position: relative;
+  height: calc(100vh - 70px);
+  min-height: fit-content;
 }
 .PF-container .main-pf img {
-  height: calc(100vh - 84px);
+  height: 100%;
   object-fit: cover;
   width: 100%;
   position: relative;
@@ -184,12 +193,13 @@ p {
   z-index: 1;
 }
 .PF-container .main-pf .container {
+  max-height: 60%;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   position: absolute;
-  top: 30%;
+  top: 20%;
   text-align: center;
   z-index: 999;
   color: #D05353;
@@ -200,7 +210,7 @@ p {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: 125px;
+  margin-bottom: 26%;
 }
 .PF-container .main-pf .container .main-text-wrapper h1 {
   font-size: 29px;
@@ -222,7 +232,7 @@ p {
   color: white;
   font-size: 16px;
   font-weight: 500;
-  margin-bottom: 200px;
+  margin-bottom: 25%;
   transition: all 0.3s;
 }
 .PF-container .main-pf .container .btn-pb:hover {
diff --git a/styles.css.map b/styles.css.map
index 3753037..bfcd716 100644
--- a/styles.css.map
+++ b/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EAEA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAIN;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAMV;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EAEA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAKN;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EAEA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAIN;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAMV;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EAEA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE","file":"styles.css"}
\ No newline at end of file
diff --git a/styles.scss b/styles.scss
index 3730c54..ddf6961 100644
--- a/styles.scss
+++ b/styles.scss
@@ -10,6 +10,9 @@ body {
 p {
   margin: 0;
 }
+header {
+  height: 70px;
+}
 .PBP-container {
   padding: 0;
   .PBP-header {
@@ -46,8 +49,10 @@ p {
   }
   main {
     position: relative;
+    height: calc(100vh - 70px);
+    min-height: fit-content;
     img {
-      height: calc(100vh - 84px);
+      height: 100%;
       object-fit: cover;
       width: 100%;
       background-position:center;
@@ -64,12 +69,13 @@ p {
       z-index: 1;
     }
     .container {
+      max-height: 60%;
       display: flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
       position: absolute;
-      top: 30%;
+      top: 20%;
       text-align: center;
       z-index: 999;
 
@@ -79,7 +85,7 @@ p {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        margin-bottom: 100px;
+        margin-bottom:  20%;
         h1 {
           font-size: 29px;
           font-weight: 600;
@@ -101,7 +107,7 @@ p {
         color: white;
         font-size: 16px;
         font-weight: 500;
-        margin-bottom: 200px;
+        margin-bottom: 25%;
         transition: all 0.3s;
       }
       .btn-pb:hover {
@@ -170,8 +176,10 @@ p {
 
   .main-pf {
     position: relative;
+    height: calc(100vh - 70px);
+    min-height: fit-content;
     img {
-      height: calc(100vh - 84px);
+      height: 100%;
       object-fit: cover;
       width: 100%;
       position: relative;
@@ -191,12 +199,13 @@ p {
     }
 
     .container {
+      max-height: 60%;
       display: flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
       position: absolute;
-      top: 30%;
+      top: 20%;
       text-align: center;
       z-index: 999;
       color: #D05353;
@@ -207,7 +216,7 @@ p {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        margin-bottom:  125px;
+        margin-bottom:  26%;
 
         h1 {
           font-size: 29px;
@@ -232,7 +241,7 @@ p {
         color: white;
         font-size: 16px;
         font-weight: 500;
-        margin-bottom: 200px;
+        margin-bottom: 25%;
         transition: all 0.3s;
       }