feat: Improve responsive design for larger screens

Adjust the media query breakpoint to 991px to enhance the responsive layout for devices with larger screens. Added specific styling for `p.text-center.special-header` to increase the font size for improved readability. Optimized CSS to ensure primary buttons and navigation elements adapt more smoothly across a wider range of device widths. These adjustments make the UI more flexible and visually accessible, addressing user feedback on readability and interaction with key UI elements on tablets and smaller laptop screens.

assets/css/base.css

@@ -132,7 +132,11 @@ h5 {
 }
 
 /* Responsive Styles */
-@media (max-width: 768px) {
+@media (max-width: 991px) {
+  p.text-center.special-header {
+    font-size: 3rem;
+  }
+
   .navbar .container {
     display: flex;
     flex-direction: column;
@@ -173,29 +177,31 @@ h5 {
     padding: 0 1rem;
   }
 
-  .btn.btn-primary {
-    margin: 1rem auto;
-    display: block;
-    width: 80%;
-  }
-
-  h2 .special-header {
-    font-size: 6rem !important;
-  }
-
-  .special-header {
-    font-size: 2rem;
-  }
-
   .navbar-btn {
     margin: 0 auto !important;
   }
 
-  .that-br {
-    display: none;
-  }
+  @media (max-width: 768px) {
+    .btn.btn-primary {
+      margin: 1rem auto;
+      display: block;
+      width: 80%;
+    }
 
-  .slogan {
-    display: none;
+    h2 .special-header {
+      font-size: 6rem !important;
+    }
+
+    .special-header {
+      font-size: 2rem;
+    }
+
+    .that-br {
+      display: none;
+    }
+
+    .slogan {
+      display: none;
+    }
   }
 }