responsive page about-us & contact-us & item clinic

components/aboutUs/Services.js

@@ -3,30 +3,27 @@ import UnderlineLG from '../icons/UnderlineLG';
 import TickOrangeA from '../icons/TickOrangeA';
 
 const ourServices = [
-    'برگزاری دوره های آنلاین',
-    'معرفی بهترین باشگاه های گردشگری',
-    'معرفی بهترین باشگاه های گردشگری',
-    'ارتباط با راهنمایان گردشگری',
-    'معرفی جاذبه های گردشگری',
-    'ارتباط با راهنمایان گردشگری',
-    'برگزاری تور ها و برنامه های متنوع',
-    'معرفی بومگردی های سراسر کشور',
-    'برگزاری تور ها و برنامه های متنوع'
+    'جستجوی سریع پزشک ',
+    'جستجوی کلینیک و مراکز درمانی',
+    'نوبت گیری راحت و آسان',
+    'دشبورد تخصصی بیمار',
+    'دشبورد تخصصی پزشک',
+    'نوبت گیری راحت و آسان'
 ]
 
 function Services() {
     return (
-        <div className='mt-[40px] px-[12%]'>
+        <div className='mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[12%]'>
             <div className='flex justify-center'>
                 <AnimationTextHead name='zoom-in-up' text='خدمات ما'>
                     <UnderlineLG />
                 </AnimationTextHead>
             </div>
-            <ul className='mt-[40px] grid grid-cols-3 gap-x-[72px] gap-y-[56px]'>
+            <ul className='mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px]'>
                 {ourServices.map((item, idx) => (
                     <li
                         key={idx}
-                        className='flex items-center justify-start gap-[8px]'
+                        className='flex items-start justify-start gap-[8px]'
                     >
                         <TickOrangeA />
                         <p className='text-[#525252] text-[16px] font-medium'>{item}</p>