boxes icon position changed

components/sections/home/ServicesSection.js

@@ -30,11 +30,7 @@ export default function ServicesSection() {
                                                             : service.title}
                                                     </Link>
                                                 </h3>
-                                                <p>
+                                               <p>{service?.shortDescription}</p>
-                                                    {service?.shortDescription?.length > 70
-                                                        ? service.shortDescription.slice(0, 70) + "..."
-                                                        : service.shortDescription}
-                                                </p>
                                             </div>
                                         </div>
                                     </div>

public/assets/css/module-css/service.css

@@ -12,7 +12,7 @@
   background: #fff;
   border-radius: 20px;
   transition: all 500ms ease;
-  overflow: visible; /* ✅ Important: Allow icon to go outside */
+  overflow: visible;
 }
 
 .service-block-one .inner-box:hover {
@@ -40,7 +40,6 @@
   transform: scale(1.05);
 }
 
-/* ✅ LOWER CONTENT STYLING */
 .service-block-one .inner-box .lower-content {
   position: relative;
   display: block;
@@ -48,17 +47,17 @@
   border-radius: 0px 0px 20px 20px;
   padding: 40px 40px 40px 105px;
   transition: all 500ms ease;
-  overflow: visible; /* ✅ Allows icon outside the box */
+  overflow: visible; 
+  min-height: 285px;
 }
 
 .service-block-one .inner-box:hover .lower-content {
   border-color: #fff;
 }
 
-/* ✅ ICON BOX COMPLETELY OUTSIDE */
 .service-block-one .inner-box .lower-content .icon-box {
   position: absolute;
-  left: -13px; /* ✅ Move icon fully outside */
+  left: -13px;
   bottom: 40px;
   width: 100px;
   height: 100px;
@@ -73,16 +72,14 @@
   z-index: 10;
 }
 
-/* ✅ HOVER EFFECT - ICON SLIDES UP */
 .service-block-one .inner-box:hover .lower-content .icon-box {
-  bottom: 145px;
+  bottom: 183px;
 }
 
-/* ✅ RED TRIANGLE EDGE UNDER ICON */
 .service-block-one .inner-box .lower-content .icon-box:before {
   position: absolute;
   content: '';
-  background: #bc0000; /* Same red as icon */
+  background: #bc0000; 
   width: 12px;
   height: 14px;
   left: 0px;
@@ -90,7 +87,6 @@
   clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
 }
 
-/* ✅ TITLE STYLING */
 .service-block-one .inner-box .lower-content h3 {
   position: relative;
   display: block;

utils/Services.utils.js

@@ -1124,7 +1124,7 @@ export const servicesList = [
         sidebarImg: "/assets/images/services/orthotics/left.webp",
         bigImg: "/assets/images/services/orthotics/big-img.webp",
         icon: "/assets/images/services/icons/orthotics.webp",
-        shortDescription: "Orthotics are medical devices that you wear inside your shoes to correct biomechanical foot issues. They can also help with foot pain caused by medical.",
+        shortDescription: "Orthotics are medical devices that you wear inside your shoes to help correct common biomechanical foot issues. They can also help with foot pain caused by medical conditions.",
         description: `<div>
                     <div class="text-box ">
                     <h2>Orthotics Therapy Clinic</h2>
@@ -1272,7 +1272,7 @@ export const servicesList = [
         sidebarImg: "/assets/images/services/concussion-management/left.webp",
         bigImg: "/assets/images/services/concussion-management/big-img.webp",
         icon: "/assets/images/services/icons/concussion-management.webp",
-        shortDescription: "Concussion is a traumatic brain injury that can cause lasting effects on brain tissue occurs when the brain is violently shaken and changes the chemical.",
+        shortDescription: "Concussion is a brain injury that can cause lasting effects on brain tissue occurs when the brain is violently shaken and changes the chemical.",
         description: `<div>
                     <div class="text-box ">
                     <h2>Concussion Management</h2>
@@ -1402,7 +1402,7 @@ export const servicesList = [
         sidebarImg: "/assets/images/services/chronic-pain/left.webp",
         bigImg: "/assets/images/services/chronic-pain/big-img.webp",
         icon: "/assets/images/services/icons/chronic-pain.webp",
-        shortDescription: "The goal of physiotherapy is to enable and empower the individual to gain back control of their life, and reduce the fear and avoidance.",
+        shortDescription: "The goal of physiotherapy is to empower the individual to regain control of their life, and reduce fear and avoidance.",
         description: `<div>
                 <div class="text-box ">
                     <h2>Chronic Pain Management Etobicoke</h2>