Enhance responsiveness and styling of service section

Improved the layout for better visual appeal and responsiveness across the different screen sizes.

css/custom.css

@@ -20,3 +20,53 @@
 #navLogo {
   margin-top: 6px;
 }
+
+/* This is for the service section on www */
+
+#service .service-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  margin: 10px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  height: 350px;
+  box-sizing: border-box;
+}
+
+#service .service-item img{
+  width: 100px;
+  height: 100px;
+}
+@media screen and (min-width: 768px) and (max-width: 1043px) {
+  .col-sm-6 {
+    max-width: 50%;
+    flex: 0 0 50%;
+  }
+  .service-item {
+    height: auto;
+  }
+}
+@media (max-width: 767.98px) {
+  .col-sm-6 {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  .col-md-3 {
+    max-width: 33.33%;
+    flex: 0 0 33.33%;
+  }
+}
+@media (min-width: 1200px) {
+  .col-md-3 {
+    max-width: 25%;
+    flex: 0 0 25%;
+  }
+}
+