More

src/styles/homepage.scss

@@ -699,35 +699,110 @@ li.nav-item {
   padding: 0 19px;
 }
 
+@media only screen and (min-width: 498px) {
+  .mobile-lower-header-1 {
+    display: none;
+  }
+  .heading-1-mobile {
+    display: none;
+  }
+  .mobile-lower-header-top {
+    display: none;
+  }
+  .mobile-lower-header-bottom {
+    display: none;
+  }
+  .mobile-lower-header-bottom-up {
+    display: none;
+  }
+  .mobile-lower-header-bottom-down {
+    display: none;
+  }
+}
+
 @media only screen and (max-width: 1100px) {
   .join-heading {
     width: 370px;
   }
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 498px) {
   ul.navbar-nav {
     margin-left: auto;
   }
 
   .heading-one-container {
-    padding: 20px 0px 10px 0px;
-    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 16px 0px 10px 0px;
+    margin-top: 0px;
     max-width: 290px;
   }
 
+  .mobile-lower-header-top {
+    height: 60%;
+
+    padding-top: 12px;
+    color: #fff;
+  }
+
+  .mobile-sw-deck {
+    color: #fff;
+    font-size: 16px;
+    font-family: Roboto;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    margin-top: -4px;
+  }
+
+  .mobile-sw-dtrk {
+    color: #fff;
+    font-size: 16px;
+    font-family: Roboto;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    margin-top: 58px;
+  }
+
+  .ex-arca-two {
+    color: white;
+    line-height: 1.2;
+  }
+  .mobile-sw-reptwo {
+    height: 140px;
+    padding-top: 51px;
+  }
+
+  .mobile-lower-header-bottom {
+    height: 40%;
+  }
+
+  .mobile-lower-header-bottom-up {
+    height: 50%;
+  }
+
+  .mobile-lower-header-bottom-bottom {
+    height: 50%;
+  }
   .logo-container {
     margin-left: -24px;
   }
 
   .first-section-subcontainer {
+    width: 100%;
     padding-top: 4px;
     padding-left: 0px;
   }
 
+  .mobile-col-up {
+    height: 400px;
+  }
+
   .try-it-button-box {
     align-items: end;
     margin-top: -6px;
+    display: none;
   }
 
   .try-it-button-box > button {
@@ -735,16 +810,21 @@ li.nav-item {
     margin-left: 10px;
   }
 
+  .mobile-lower-header-1 {
+    width: 60%;
+    height: 260px;
+  }
+
   .upper-row-one {
     padding-left: 10px;
   }
 
   .text-block-1 {
-    visibility: hidden;
+    visibility: none;
   }
 
   .text-block-two {
-    visibility: hidden;
+    display: none;
   }
 
   section.section-1 {
@@ -772,24 +852,18 @@ li.nav-item {
   }
 
   h1.heading-1 {
-    color: #fff;
+    display: none;
+  }
+
+  .heading-1-mobile {
     font-family: Roboto;
-    font-size: 27px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 32px; /* 140.625% */
-    text-transform: capitalize;
+    font-size: 42px;
+    color: #fff;
+    margin-bottom: 1px;
   }
 
   p.text-block-1 {
-    color: #fff;
-    font-family: Roboto;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18.756px; /* 123.983% */
-    width: 100%;
-    padding: 10px 0 !important;
+    display: none;
   }
 
   .home-col-50 {
@@ -815,8 +889,11 @@ li.nav-item {
   }
 
   .heading-2-mobile {
+    margin-top: 6px;
+    font-weight: 400;
     display: flex;
     font-size: 1.365rem;
+    color: #fff;
   }
 
   button.button-1 {