diff --git a/src/Components/Sections/Services/Services.jsx b/src/Components/Sections/Services/Services.jsx
index 8d477eb..af57cc7 100644
--- a/src/Components/Sections/Services/Services.jsx
+++ b/src/Components/Sections/Services/Services.jsx
@@ -35,40 +35,36 @@ const Services = ({ t, i18n }) => {
     <section id="services">
       <div className="min-h-screen bg-transparent font-sans overflow-hidden relative w-full" dir="rtl">
         <div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center w-full">
-          {/* Left side - Features Cards */}
           <div className="w-full lg:w-1/2 flex flex-col justify-center px-4 sm:px-6 md:px-8 py-12 lg:py-0">
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4 sm:gap-6 md:gap-8 max-w-7xl mx-auto w-full">
-              {features.map((feature) => (
-                <div 
-                  key={feature.id} 
-                  className="group relative overflow-hidden w-full"
-                >
-                  <div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
-                  
-                  <div className="relative p-4 sm:p-5 md:p-6 z-10">
-                    <div className="flex items-start space-x-4 rtl:space-x-reverse">
-                      <div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg flex-shrink-0">
-                        {feature.icon}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <h3 className="text-lg sm:text-xl md:text-xl font-bold text-gray-800 mb-2 sm:mb-3 group-hover:text-[#47718b] transition-colors duration-500 break-words">
-                          {feature.title}
-                        </h3>
-                        <p className="text-gray-600 leading-relaxed text-sm sm:text-sm md:text-base break-words">
-                          {feature.description}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
+    {features.map((feature) => (
+  <div 
+    key={feature.id} 
+    className="group relative overflow-hidden w-full"
+  >
+    <div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
+    
+    <div className="relative p-4 sm:p-5 md:p-6 z-10">
+      <div className="flex items-start space-x-4 rtl:space-x-reverse">
+        <div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg flex-shrink-0">
+          {feature.icon}
+        </div>
+        <div className={`flex-1 min-w-0 ${i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'}`}>
+          <h3 className="text-lg sm:text-xl md:text-xl font-bold text-gray-800 mb-2 sm:mb-3 group-hover:text-[#47718b] transition-colors duration-500 break-words">
+            {feature.title}
+          </h3>
+          <p className="text-gray-600 leading-relaxed text-sm sm:text-sm md:text-base break-words">
+            {feature.description}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+))}
             </div>
           </div>
-
-          {/* Right side - Content with Gradient Background */}
           <div className="w-full lg:w-1/2 relative min-h-[60vh] lg:min-h-screen flex items-center justify-center py-12 sm:py-16 lg:py-0">
             <div className="absolute inset-0 w-full h-full">
-              {/* Desktop Gradient Background */}
               <div className="hidden lg:block absolute inset-0 w-full h-full">
                 <div 
                   className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl w-full h-full"
@@ -81,8 +77,6 @@ const Services = ({ t, i18n }) => {
                   }}
                 ></div>
               </div>
-              
-              {/* Mobile/Tablet Gradient Background */}
               <div className="lg:hidden absolute inset-0 w-full h-full">
                 <div 
                   className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl w-full h-full"
@@ -96,8 +90,6 @@ const Services = ({ t, i18n }) => {
                   <div className="absolute inset-0 border-2 border-white/20"></div>
                 </div>
               </div>
-              
-              {/* Decorative Elements */}
               <div className="absolute inset-0 overflow-hidden">
                 <div className="absolute top-1/4 -left-8 sm:-left-16 w-48 h-48 sm:w-64 sm:h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
                 <div className="absolute bottom-1/3 -left-4 sm:-left-8 w-32 h-32 sm:w-48 sm:h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
@@ -106,8 +98,6 @@ const Services = ({ t, i18n }) => {
               
               <div className="absolute top-0 left-0 w-24 sm:w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
             </div>
-            
-            {/* Content */}
             <div 
               className={`relative z-20 text-white p-6 sm:p-8 md:p-12 lg:p-16 max-w-full sm:max-w-2xl mx-auto w-full ${
                 i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'