boxes icon position changed
@ -30,11 +30,7 @@ export default function ServicesSection() {
|
||||
: service.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>
|
||||
{service?.shortDescription?.length > 70
|
||||
? service.shortDescription.slice(0, 70) + "..."
|
||||
: service.shortDescription}
|
||||
</p>
|
||||
<p>{service?.shortDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 12 KiB |
@ -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>
|
||||
|
||||