ud

src/App.css

@@ -30,7 +30,7 @@ ul, li {
 
 .App-header {
   background-color: #282c34;
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -106,7 +106,7 @@ body {
 .layout {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
 }
 
 .layout-header {

src/components/Banner.module.css

@@ -1,7 +1,7 @@
 /* Hero */
 .hero {
   position: relative;
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
   background-size: cover;
   background-position: center;
   padding-bottom: 3.125rem;

src/components/ScreenOpen/index.module.css

@@ -1,6 +1,6 @@
 .screenOpen {
     width: 100%;
-    height: calc(100vh / var(--zoom-compensation, 1));
+    height: 100dvh;
     position: fixed;
     top: 0;
     left: 0;
@@ -21,7 +21,7 @@
 
     .screenOpenBackground {
         width: 100%;
-        height: calc(100vh / var(--zoom-compensation, 1));
+        height: 100dvh;
         position: absolute;
         top: 0;
         left: 0;

src/components/layout/BottomTabsSection/index.module.css

@@ -3,7 +3,7 @@
     overflow: hidden;
     width: 100%;
     /* height: 67.5rem; */
-    /* height: calc(100vh / var(--zoom-compensation, 1)); */
+    /* height: 100dvh; */
     padding: 6.25rem 0;
     background-size: cover;
     background-position: center;

src/components/layout/JobPage/index.module.css

@@ -1,6 +1,6 @@
 .jobPage {
     width: 100%;
-    min-height: calc(100vh / var(--zoom-compensation, 1));
+    min-height: 100dvh;
     padding: 7.5rem 6.25rem;
 
     .jobPageHeaderLine {

src/components/layout/RowAccordion/index.module.css

@@ -6,7 +6,7 @@
     overflow-anchor: none;
     /* padding: 0 13.54vw; */
     width: 100%;
-    height: calc(100vh / var(--zoom-compensation, 1));    
+    height: 100dvh;    
 }
 .rowAccordionBgContainer {
     position: absolute;

src/components/layout/SwiperCardSection/index.module.css

@@ -1,5 +1,5 @@
 .swiperCardSection {
-    min-height: calc(100vh / var(--zoom-compensation, 1));
+    min-height: 100dvh;
     padding: 6.25rem 13.54vw;
     background: #D8D8D8;
     background-size: cover;
@@ -24,7 +24,7 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    left: -5.625rem;
+    left: -90px;
     z-index: 99;
     display: flex;
     justify-content: center;
@@ -33,7 +33,7 @@
 
 .nextBtn {
     left: auto;
-    right: -5.625rem;
+    right: -90px;
 }
 
 .swiperCardList {

src/components/layout/TopTabsSection/index.module.css

@@ -1,8 +1,7 @@
 .topTabsSection {
     padding: 6.25rem 0 0 0;
-    padding: 6.25rem 13.54vw 0 13.54vw;
+    padding: 6.25rem 13.54vw;
     width: 100%;
-    height: calc(100vh / var(--zoom-compensation, 1));
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

src/index.css

@@ -19,6 +19,8 @@ html {
 @media screen and (max-width: 1440px) {
   html {
     --design-rem-base: 14px;
+    font-size: 10px;
+
   }
 }
 

src/pages/About/About.module.css

@@ -1,7 +1,7 @@
 /* Section block - full-width with background */
 .section {
   position: relative;
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
   background-size: cover;
   background-position: center;
   display: flex;

src/pages/About/Founder.module.css

@@ -1,7 +1,7 @@
 .section {
   background: rgba(255, 255, 255, 0.6);
   border-radius: 0;
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
   width: 100%;
   padding: 6.25rem 13.54vw;
   display: flex;
@@ -109,7 +109,7 @@
 
 .sectionFounder {
   padding: 6.25rem 0 9.375rem;
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

src/pages/About/History.module.css

@@ -7,7 +7,7 @@
     rgba(200, 200, 205, 0.3) .125rem,
     rgba(200, 200, 205, 0.3) .25rem
   );
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
   width: 100%;
   padding: 6.25rem 0;
   padding-bottom: 9.375rem;

src/pages/Business/CommercialGroup.module.css

@@ -163,7 +163,7 @@
 /* Features Section */
 .featuresHero {
   width: 100%;
-  height: calc(100vh / var(--zoom-compensation, 1));
+  height: 100dvh;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -252,7 +252,7 @@
 }
 
 .propertyServices {
-  height: calc(100vh / var(--zoom-compensation, 1));
+  height: 100dvh;
   color: #fff;
   padding: 0 13.54vw;
 }

src/pages/Business/InvestGroup.module.css

@@ -111,7 +111,7 @@
 
 .industryFoster {
     width: 100%;
-    height: calc(100vh / var(--zoom-compensation, 1));
+    height: 100dvh;
     display: flex;
     align-items: center;
     position: relative;

src/pages/Home/Home.module.css

@@ -1,7 +1,7 @@
 /* Hero */
 .hero {
   position: relative;
-  min-height: calc(100vh / var(--zoom-compensation, 1));
+  min-height: 100dvh;
   background-size: cover;
   background-position: center;
 }
@@ -41,7 +41,7 @@
 /* Commercial */
 .commercial {
   position: relative;
-  height: calc(100vh / var(--zoom-compensation, 1));
+  height: 100dvh;
   background-size: cover;
   background-position: center;
   display: flex;

src/pages/Social/Sustainability.tsx

@@ -126,7 +126,7 @@ export default function Sustainability() {
                     <ColumnXGrids items={columnXGridsData} />
                 </ParagraphSection>
             )}
-            {section3Data && (
+            {section3Data && section3Data.hide !== true && (
                 <Section
                     title={section3Data.title}
                     background={section3Data.backgroundImage ?? ""}