Fix mobile 1

mobileStyles.css

@@ -245,10 +245,12 @@
     }
 }
 
+
 @media only screen and (max-width: 500px) {
     .btnFluxcore2, .btnFluxcore, .btnExtra{
         width: 80% !important;
         margin-right: 0px;
+        display: block;
     }
     header{
         background-position: 25%;
@@ -382,6 +384,24 @@
     }
 }
 
+/* Adjust styles for screens smaller than 650px */
+@media only screen and (max-width: 650px) {
+    .subtext7 {
+        width: 100%;
+        font-size: 15px;
+    }
+    .btnFluxcore2, .btnExtra {
+        display: block;
+        width: 100%;
+        text-align: center;
+        margin: 10px 0;
+    }
+    .btnExtra {
+        margin-top: 5px;
+    }
+}
+
+
 
 
 @media only screen and (max-width: 1000px) {
@@ -842,4 +862,51 @@
     nav ul.responsive li {
       display: block;
     }
-  }
+  }
+
+/* Ensure images scale correctly and maintain their shape */
+.gridBox img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+/* Adjust the grid layout and images for smaller screens */
+@media only screen and (max-width: 650px) {
+    .daPerks {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .gridBox {
+        width: 90%;
+        margin: 10px auto;
+        overflow: hidden; /* Ensure content stays within the box */
+        text-align: center; /* Center-align text and elements within gridBox */
+        padding: 20px; /* Add padding to ensure space around content */
+        box-sizing: border-box; /* Include padding in the element's total width and height */
+    }
+    .iconCont {
+        width: 100px; /* Fixed size to maintain circular shape */
+        height: 100px; /* Fixed size to maintain circular shape */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 auto 10px auto; /* Center the icon container and add margin below */
+        overflow: hidden; /* Hide overflow to maintain shape */
+        border-radius: 50%; /* Maintain circular shape */
+        background-color: #f5f5f5; /* Optional: add a background color */
+    }
+    .iconCont img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover; /* Ensure the image covers the container without distortion */
+    }
+    .gridBox h2 {
+        margin-top: 10px; /* Add margin to ensure space between icon and heading */
+    }
+    .gridBox p {
+        margin-top: 10px; /* Add margin to ensure space between heading and text */
+    }
+}