Merge pull request #568 from Shivin1016/new_feature_main

Spacing fixes in about us section

Author: gyanshankar1708

index.html

@@ -290,12 +290,12 @@
       border-radius: 12px;
       border: 1px solid green;
       transition: all 0.3s ease;
-      box-shadow: 0 2px 12px #8f91f7;
+      box-shadow: 0 2px 12px #75e47a;
     }
 
     .about-card p:hover {
       transform: translateY(3px);
-      box-shadow: 0 5px 20px #100699;
+      box-shadow: 0 5px 20px #409B44;
     }
 
     .about-card:hover {
@@ -304,8 +304,9 @@
     }
 
     .about-card h4 {
-      color: #463896;
+      color: #409B44;
       font-weight: 600;
+      white-space: nowrap;
     }
 
     .btn-group {
@@ -1971,8 +1972,8 @@ <h2 class="about-title mb-2">About Us</h2>
       <div class="row justify-content-center g-4">
         <!-- Card 1 -->
         <div class="col-sm-6 col-lg-4">
-          <div class="about-card p-4 h-100 shadow rounded">
-            <h4 class="mb-4"> <i class="fas fa-users icon"></i> Who We Are</h4>
+          <div class="about-card p-4 h-100 w-100 shadow rounded">
+            <h4 class="mb-4  fs-5 fs-md-4"> <i class="fas fa-users icon"></i> Who We Are</h4>
             <p>
               GrowCraft is a one-stop shop for Software, App, Website development, Digital Marketing, Graphic Design &
               Social Media. We deliver high-quality services that align with market trends.
@@ -1983,7 +1984,7 @@ <h4 class="mb-4"> <i class="fas fa-users icon"></i> Who We Are</h4>
         <!-- Card 2 -->
         <div class="col-sm-6 col-lg-4">
           <div class="about-card p-4 h-100 shadow rounded">
-            <h4 class="mb-4"><i class="fas fa-microchip icon"></i> Tech-Driven Solutions</h4>
+            <h4 class="mb-4 fs-5 fs-md-4"><i class="fas fa-microchip icon"></i> Tech-Driven Solutions</h4>
             <p>
               We use the latest technologies & best practices to deliver innovative solutions. Our services evolve
               constantly to meet clients’ changing needs.
@@ -1993,8 +1994,8 @@ <h4 class="mb-4"><i class="fas fa-microchip icon"></i> Tech-Driven Solutions</h4
 
         <!-- Card 3 -->
         <div class="col-sm-6 col-lg-4">
-          <div class="about-card p-4 h-100 shadow rounded">
-            <h4 class="mb-4"><i class="fas fa-handshake icon"></i> Client-Centric Approach</h4>
+          <div class="about-card p-4 h-100 w-100 shadow rounded">
+            <h4 class="mb-4 w-100  fs-5 fs-md-4"><i class="fas fa-handshake icon"></i> Client-Centric Approach</h4>
             <p>
               Every client has unique needs. We understand their goals before creating custom solutions and involve them
               throughout the development process.
@@ -2004,8 +2005,8 @@ <h4 class="mb-4"><i class="fas fa-handshake icon"></i> Client-Centric Approach</
 
         <!-- Card 4 -->
         <div class="col-sm-6 col-lg-4">
-          <div class="about-card p-4 h-100 shadow rounded">
-            <h4 class="mb-4"><i class="fas fa-shield-alt icon"></i> Reliable & Transparent</h4>
+          <div class="about-card p-4 h-100 w-100 shadow rounded">
+            <h4 class="mb-4 w-100  fs-5 fs-md-4"><i class="fas fa-shield-alt icon"></i> Reliable & Transparent</h4>
             <p>
               With clear communication, timely delivery, and transparent processes, we ensure success for both our
               clients and ourselves.
@@ -2016,7 +2017,7 @@ <h4 class="mb-4"><i class="fas fa-shield-alt icon"></i> Reliable & Transparent</
         <!-- Card 5 -->
         <div class="col-sm-6 col-lg-4">
           <div class="about-card p-4 h-100 shadow rounded">
-            <h4 class="mb-4"><i class="fas fa-award icon"></i> Affordable & Proven</h4>
+            <h4 class="mb-4  fs-5 fs-md-4"><i class="fas fa-award icon"></i> Affordable & Proven</h4>
             <p>
               We offer cost-effective services and have a history of successful projects. For a reliable digital
               partner, GrowCraft is your best choice.

src/style.css

@@ -237,8 +237,10 @@ h5 {
 .bg-body-tertiary {
   background-color: transparent !important;
 }
-.icon {
-  height: 6.5rem;
+.icon {  
+  font-size: 2rem;
+  border-radius: 20px;
+  margin-right: 1rem;
 }
 
 .training-links {
@@ -1116,7 +1118,7 @@ body.dark .mb-4:hover {
 }
 
 .about-title {
-  border-bottom: 3px solid #2a63f4;
+  border-bottom: 3px solid #409B44;
   display: inline-block;
 }