Enhance responsive design in CSS for better mobile usability

website/betaal.css

@@ -4,13 +4,16 @@ body {
     padding: 50px;
     background-color: #f9f9f9;
 }
+
 h1 {
     color: #F56E28;
 }
+
 p {
     font-size: 1.2em;
     margin-top: 20px;
 }
+
 button {
     margin-top: 30px;
     padding: 10px 20px;
@@ -20,6 +23,27 @@ button {
     cursor: pointer;
     font-size: 1.1em;
 }
+
 button:hover {
     background-color: #F56E28;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    body {
+        padding: 20px;
+    }
+
+    h1 {
+        font-size: 1.5em;
+    }
+
+    p {
+        font-size: 1em;
+    }
+
+    button {
+        font-size: 1em;
+        padding: 10px 15px;
+    }
 }