fix: refactor services page styling and improve component logic

app/services/page.tsx

@@ -2,11 +2,7 @@ import { Metadata } from "next";
 import { fetchServicePageData } from "../../api/servicesApi";
 import { imageUrl } from "../utils/image";
 import Breadcrumb from "../components/Breadcrumb";
-
-export const metadata: Metadata = {
-  title: "Services - Visaway Immigration & Visa Consulting",
-  description: "Immigration & Visa Consulting Services",
-};
+import "./services.css";
 
 export default async function ServicesPage() {
   const data = await fetchServicePageData();
@@ -77,7 +73,7 @@ export default async function ServicesPage() {
             <div className="col-xl-12">
               {services.items.map((service: any) => (
                 <div
-                  key={service.id}
+                  key={service.slug}
                   className={`service-main-item-3 ${service.layout === "right" ? "style-2" : ""} fade-up-anim`}
                 >
                   {service.layout === "right" && (
@@ -203,7 +199,7 @@ export default async function ServicesPage() {
                 {reviews.title.mainTitle}
               </h2>
             </div>
-            <a href="#" className="theme-btn">
+            <a href="/contact" className="theme-btn">
               View All Review
               <i className="fa-solid fa-arrow-right"></i>
             </a>

app/services/services.css

@@ -0,0 +1,53 @@
+/* Custom CSS for Service Image Sizing */
+.service-main-item-3 .service-left .service-image {
+  flex-shrink: 0;
+  width: 352px;
+  height: 216px;
+  overflow: hidden;
+  border-radius: 16px;
+}
+
+.service-main-item-3 .service-left .service-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 16px;
+}
+/* 
+.service-main-item-3 .service-left .content {
+  flex: 1;
+  min-width: 0;
+}
+
+.service-main-item-3 .service-left {
+  gap: 30px;
+  align-items: flex-start;
+} */
+
+/* @media (max-width: 1399px) {
+  .service-main-item-3 .service-left .service-image {
+    width: 250px;
+    height: 180px;
+  }
+}
+
+@media (max-width: 767px) {
+  .service-main-item-3 .service-left .service-image {
+    width: 100%;
+    height: 200px;
+    max-width: 300px;
+  }
+
+  .service-main-item-3 .service-left {
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .service-main-item-3.style-2 .service-left {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    text-align: left;
+  }
+} */