More progress at mobile breakpoint

src/layouts/index.html

@@ -61,7 +61,7 @@
 
 <!-- Package Section: Before -->
 
-<section>
+<section class="package-before-section">
   <div class="gen-art" id="gen-art-3"></div>
   <div class="gen-art" id="gen-art-4"></div>
   <div class="container package_before">

src/layouts/partials/floating-join-btn.html

@@ -141,23 +141,23 @@
 @media only screen and (max-width: 576px) {
 
   .gf-container {
-    width: 15vw;
-    height: 15vw;
+    width: 20vw;
+    height: 20vw;
     border-radius: 100px;
     display: flex;
     flex-direction: column;
     position: fixed;
     text-align:center;
-    padding-top: 3vw;
-    font-size: 1.562vw;
+    padding-top: 7vw;
+    font-size: 4vw;
     background-color: #1a1a1a !important;
     border: 2px solid #949494;
     color: #ffffff;
     text-decoration: none;
     font-family: "pp-neue-machina", sans-serif;
     text-transform: uppercase;
-    right: 15px;
-    top: 5.3vw;
+    right: 3vw;
+    bottom: 3vw !important;
     cursor: pointer;
     z-index: 3;
     transition: 0.2s ease-in-out;
@@ -165,7 +165,7 @@
 
   .gf-container:hover {
     color:#1a1a1a;
-    box-shadow: inset 0vw 0vw 0vw 0.358vw #1a1a1a !important;
+    box-shadow: inset 0vw 0vw 0vw 1vw #1a1a1a !important;
     background-color: #00ffd0 !important;
 
   }

src/static/css/buttons.css

@@ -241,7 +241,7 @@
   }
 
   .button-container{
-    padding: 0vw 6.5vw !important;
+    padding: 0vw 6.2vw !important;
   }
 
   .dev-count{

src/static/css/homepage.css

@@ -260,6 +260,10 @@ hr{
     height:10vw;
   }
 
+  .package-before-section{
+    padding: 4vw !important;
+  }
+
   .package_before{
     background-image: url("/Images/small-grid.svg");
     background-position: top;