From 3de7dfd6421c8d864d9fd7b4611a876be284a8fe Mon Sep 17 00:00:00 2001
From: DEV <121149738+Devmoni@users.noreply.github.com>
Date: Mon, 16 Dec 2024 21:09:33 +0530
Subject: [PATCH] Enhance responsiveness and styling of service section (#592)

Improved the layout for better visual appeal and responsiveness across the different screen sizes.
---
 css/custom.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/css/custom.css b/css/custom.css
index aec82d34..e8fb4010 100644
--- a/css/custom.css
+++ b/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%;
+  }
+}
+