diff --git a/src/Components/Sections/Services/Services.jsx b/src/Components/Sections/Services/Services.jsx
index fefeafe..780695a 100644
--- a/src/Components/Sections/Services/Services.jsx
+++ b/src/Components/Sections/Services/Services.jsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { Wallet, Zap, Users, PieChart, Sparkles } from "lucide-react";
-import { useTranslation } from "react-i18next";
+// import { useTranslation } from "react-i18next";
+import { withTranslation } from "react-i18next";
 
-const Services = () => {
-  const { t } = useTranslation();
+const Services = ({ t, i18n })=> {
   
   const features = [
     {
@@ -105,7 +105,12 @@ const Services = () => {
             </div>
             <div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
           </div>
-          <div className="relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto">
+          {/* <div className="relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto"> */}
+         <div 
+  className={`relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto ${
+    i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+  }`}
+>
             <div className="space-y-8 lg:space-y-10">
               <div className="relative">
                 <div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse">
@@ -114,12 +119,18 @@ const Services = () => {
                   </span>
                   <Sparkles className="w-6 h-6 text-[#57acd9]" />
                 </div>
-                <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4]">
+                {/* <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4]"> */}
+                <h1 className={`text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4] ${
+  i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+}`}>
                   {t("services.pageTitle")}
                 </h1>
               </div>
               <div className="space-y-4">
-                <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl">
+                {/* <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl"> */}
+<h2 className={`text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl ${
+  i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+}`}>
                   {t("services.mainHeading")}
                 </h2>
                 <div className="w-20 h-1 bg-gradient-to-r from-white to-[#57acd9] rounded-full"></div>
@@ -137,4 +148,5 @@ const Services = () => {
   );
 };
 
-export default Services;
\ No newline at end of file
+// export default Services;
+export default withTranslation()(Services);
\ No newline at end of file