Merge branch 'main' into main

Anishkagupta04 · Jun 3, 2024 · f9b36c4 · f9b36c4
2 parents dc9b80c + 78a9a9b
commit f9b36c4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -440,24 +440,23 @@ <h2>Services</h2>
         <p>Our services are for your good health. We are with you at every digital step.</p>
       </div>
       <div class="container">
-        <div class="row">
-          <div class="col-lg-4 col-md-3 d-flex align-items-stretch ">
+          <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-heartbeat"></i></div>
               <h4><a href="">Clinics/Labs</a></h4>
               <p>Locate the best healthcare facilities around you hassle-free.</p>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
+          <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-pills"></i></div>
               <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
               <p>Get your prescribed medicines delivered at your doorstep.</p>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
+          <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-hospital-user"></i></div>
               <h4><a href="">Daily Feed</a></h4>
@@ -466,33 +465,30 @@ <h4><a href="">Daily Feed</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4  col-md-6 d-flex align-items-stretch ">
+          <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-dna"></i></div>
               <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
               <p>Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.</p>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
+          <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-wheelchair"></i></div>
               <h4><a href="">Disabled Person</a></h4>
               <p>Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.</p>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+          <div class="align-items-stretch">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-notes-medical"></i></div>
               <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
               <p>Weekly, monthly, yearly or each day, however you like it!</p>
             </div>
           </div>
-
         </div>
-
-      </div>
     </section><!-- End Services Section -->
 
     <!-- Add Patient Portal Section -->

diff --git a/style.css b/style.css
@@ -889,7 +889,6 @@ section {
 
 /*################----Services----################*/
 .services .icon-box {
-  z-index: -1;
   text-align: center;
   margin-left: 80px;
   margin-right: 80px;
@@ -904,7 +903,6 @@ section {
 }
 
 .services .icon-box .icon {
-
   margin: 0 auto;
   width: 64px;
   height: 64px;
@@ -919,14 +917,11 @@ section {
 }
 
 .services .icon-box .icon i {
-
   color: #060606;
   font-size: 28px;
 }
 
 .services .icon-box .icon::before {
-
-
   position: absolute;
   content: '';
   left: -8px;
@@ -940,24 +935,26 @@ section {
 }
 
 .services .icon-box h4 {
-
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 24px;
 }
 
 .services .icon-box h4 a {
-
   color: #55a5ea;
 }
 
 .services .icon-box p {
-
   line-height: 24px;
   font-size: 14px;
   margin-bottom: 0;
+}
 
-
+.services .container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* gap: 20px; */
+  margin-top: 8px;
 }
 
 .services .icon-box:hover {
@@ -982,6 +979,31 @@ section {
   color: #111111;
 }
 
+/* Styles for medium screens */
+@media (max-width: 991px) {
+  .services .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Styles for smaller screens */
+@media (max-width: 767px) {
+  .services .container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Additional smaller adjustments */
+@media (max-width: 575px) {
+  .services .icon-box {
+    padding: 20px;
+  }
+  .services .icon i {
+    font-size: 30px;
+  }
+}
+
+
 
 
 /*################----Appointments----################*/