From f935aecd094d07cbcb986fc8cba797294fdee4c9 Mon Sep 17 00:00:00 2001
From: romiz5269 <mojtaba5269@gmail.com>
Date: Wed, 19 Nov 2025 08:15:17 +0330
Subject: [PATCH] responsive

---
 src/app/[lang]/contact-us/page.tsx            |  34 ++---
 src/app/[lang]/dictionaries/ar.json           |   1 +
 src/app/[lang]/dictionaries/en.json           |   2 +
 src/app/[lang]/dictionaries/fa.json           |   2 +
 src/app/[lang]/doctors/page.tsx               |   8 +-
 .../[lang]/medical-services/[slug]/page.tsx   |   4 +-
 src/app/[lang]/medical-services/page.tsx      |   8 +-
 .../[lang]/patient-rights-charter/page.tsx    |   4 +-
 src/app/globals.css                           |   2 +-
 src/ui/components/global/Accordion.tsx        |  16 +--
 src/ui/components/global/CustomLink.tsx       |   2 +-
 src/ui/components/menu/MobileMenu.tsx         | 118 ++++++++++++++++--
 src/ui/components/top-menu/TopMenu.tsx        | 108 ++++++++--------
 src/ui/forms/DoctorsFilterBox.tsx             |  12 +-
 14 files changed, 217 insertions(+), 104 deletions(-)

diff --git a/src/app/[lang]/contact-us/page.tsx b/src/app/[lang]/contact-us/page.tsx
index d3e0f0b..ce3bb3b 100644
--- a/src/app/[lang]/contact-us/page.tsx
+++ b/src/app/[lang]/contact-us/page.tsx
@@ -27,15 +27,15 @@ export default async function ContactUs({
         imageSrc="/header-slider-1.webp"
       />
       <section className="mt-16 container">
-        <div className="bg-[#F8F9FA] rounded-4xl px-20 py-16">
+        <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
           <div className="grid grid-cols-12 items-center">
-            <div className="col-span-8 grid grid-cols-12 gap-x-20">
-              <div className="col-span-3">
-                <div className="relative h-[200px] w-[200px] rounded-xl overflow-hidden">
-                  <Image fill src={"/heidarnejad.jpg"} alt="doctor" />
+            <div className="md:col-span-8 col-span-12 grid grid-cols-12 md:gap-x-20">
+              <div className="md:col-span-3 col-span-12  bg-amber-50">
+                <div className="relative md:h-[200px] h-[250px] md:w-[200px] w-full  rounded-xl overflow-hidden ">
+                  <Image fill src={"/heidarnejad.jpg"} alt="doctor" className="object-fill" />
                 </div>
               </div>
-              <div className="col-span-9 h-full items-center">
+              <div className="md:col-span-9 col-span-12  items-center md:my-0 my-4">
                 <div className="flex flex-col items-start justify-center gap-y-4">
                   <h3 className="text-3xl font-black text-blue-primary">
                     {about_page?.heidarnejad?.name}
@@ -49,17 +49,17 @@ export default async function ContactUs({
                 </div>
               </div>
             </div>
-            <div className="col-span-4 h-full">
+            <div className="md:col-span-4 col-span-12 h-full">
               <div className="bg-secondary p-8 rounded-xl h-full grid grid-cols-2 items-center">
-                <div className="col-span-1 flex flex-col justify-start items-center gap-y-4">
+                <div className="md:col-span-1 col-span-12 flex flex-col justify-start items-center gap-y-4">
                   <span className="text-white">
                     <TelephoneSvg size="60" />
                   </span>
                   <span className="text-lg text-white font-semibold">
-                    {footer?.contact_us?.ipd_technician_number}
+                    <a href={`tel:${footer?.contact_us?.ipd_technician_number}`}>{footer?.contact_us?.ipd_technician_number}</a>
                   </span>
                 </div>
-                <div className="col-span-1 flex flex-col justify-start items-center gap-y-4">
+                <div className="md:col-span-1 col-span-12 flex flex-col justify-start items-center gap-y-4">
                   <span className="text-white">
                     <svg
                       width="60"
@@ -75,7 +75,7 @@ export default async function ContactUs({
                     </svg>
                   </span>
                   <span className="text-lg text-white font-semibold">
-                    {default_info.email}
+                    <a href={`mailto:${default_info.email}`}>{default_info.email}</a>
                   </span>
                 </div>
               </div>
@@ -84,13 +84,13 @@ export default async function ContactUs({
         </div>
       </section>
       <section className="mt-16 container">
-        <div className="bg-[#F8F9FA] rounded-4xl px-20 py-16">
-          <h3 className="text-[3em] font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
+        <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
+          <h3 className="md:text-[3em] text-2xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
             {contact_us_page?.info_box_title}
           </h3>
           <div className="mt-16">
             <div className="grid grid-cols-12 gap-x-4">
-              <div className="col-span-6 space-y-8">
+              <div className="md:col-span-6 col-span-12 space-y-8">
                 <div className="flex items-center gap-x-4">
                   <div className="w-[70px] h-[70px] flex items-center justify-center rounded-2xl bg-secondary">
                     <span>
@@ -190,7 +190,7 @@ export default async function ContactUs({
                   </a>
                 </div>
               </div>
-              <div className="col-span-6">
+              <div className="md:col-span-6 col-span-12 md:mt-0 mt-8">
                 <iframe
                   src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6419.524849772638!2d52.347594!3d36.439127!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8fbd6849bf386b%3A0x26cbc9441b00f373!2sShomal%20Hospital!5e0!3m2!1sen!2sus!4v1762836982418!5m2!1sen!2sus"
                   width="100%"
@@ -211,10 +211,10 @@ export default async function ContactUs({
         className="lg:mb-24 mb-10 lg:mt-10 mt-4 container "
       >
         <div className="bg-[#F8F9FA] rounded-4xl lg:px-40 lg:py-16 p-2">
-          <h3 className="lg:text-[3em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
+          <h3 className="mb-10 lg:text-[3em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
             {accept_request_form?.head_text}
           </h3>
-          <p className="text-center lg:text-[1.2rem] leading-8 text-[#454547] mt-10">
+          <p className="text-center lg:text-[1.2rem] leading-8 text-[#454547] ">
             {about_page?.form?.sub_text}
           </p>
           <PatientAcceptForm lang={lang} dict={about_page} />
diff --git a/src/app/[lang]/dictionaries/ar.json b/src/app/[lang]/dictionaries/ar.json
index 530951e..0859e8a 100644
--- a/src/app/[lang]/dictionaries/ar.json
+++ b/src/app/[lang]/dictionaries/ar.json
@@ -2,6 +2,7 @@
   "products": {
     "cart": "أضف إلى السلة"
   },
+  "select_expertise":"اختر التخصص",
   "about_page": {
     "page_title": "من نحن",
     "introduction": "مقدمة عن قسم المرضى الدوليين",
diff --git a/src/app/[lang]/dictionaries/en.json b/src/app/[lang]/dictionaries/en.json
index e77693c..419092c 100644
--- a/src/app/[lang]/dictionaries/en.json
+++ b/src/app/[lang]/dictionaries/en.json
@@ -2,6 +2,8 @@
   "products": {
     "cart": "Add to Cart"
   },
+  "select_expertise": "Select expertise ...",
+
   "about_page": {
     "page_title": "About Us",
     "introduction": "Introduction to the International Patients Department",
diff --git a/src/app/[lang]/dictionaries/fa.json b/src/app/[lang]/dictionaries/fa.json
index 48132ae..42a20a1 100644
--- a/src/app/[lang]/dictionaries/fa.json
+++ b/src/app/[lang]/dictionaries/fa.json
@@ -174,6 +174,8 @@
   "license_number": "شماره نظام پزشکی",
   "search_by_name": "جستجو بر اساس نام پزشک",
   "select_this": "انتخاب کنید",
+  "select_expertise": "تخصص انتخاب کنید",
+
   "search": "جستجو",
   "our_medical_packages": "<ul><li>💼 هماهنگی کامل پیش از ورود: هماهنگی با بیمارستان شمال برای بررسی مدارک پزشکی، مشاوره با پزشکان متخصص و ارسال برآورد هزینه</li><li>🛬 پذیرش و استقبال از فرودگاه: ترانسفر اختصاصی از فرودگاه به بیمارستان یا هتل</li><li>🌐 مترجم همزمان: ارائه خدمات ترجمه به زبان‌های انگلیسی، عربی، کردی، ترکی و...</li><li>🏨 رزرو هتل و اقامتگاه: همکاری با هتل‌های هم‌سطح با استانداردهای بین‌المللی در نزدیکی بیمارستان</li><li>🧾 راهنمایی و پشتیبانی امور اداری: صدور دعوت‌نامه برای ویزای درمانی، راهنمایی در امور گمرکی و اقامت</li><li>👨‍⚕️ دسترسی سریع به پزشکان متخصص: کاملاً هماهنگ با بیمارستان شمال؛ نوبت‌دهی فوری و ارجاع مستقیم به بهترین پزشکان در هر تخصص</li><li>📋 پیگیری بعد از ترخیص: ارسال پرونده پزشکی، ارتباط با پزشک معالج و پاسخ به سوالات بعدی بیمار</li></ul>",
   "medical_packages_headTitle": "خدمات پزشکی ما",
diff --git a/src/app/[lang]/doctors/page.tsx b/src/app/[lang]/doctors/page.tsx
index 4d895ef..5a1e947 100644
--- a/src/app/[lang]/doctors/page.tsx
+++ b/src/app/[lang]/doctors/page.tsx
@@ -21,7 +21,7 @@ export default async function DoctorsPage({
 }) {
   const {lang} = await params;
   const {name = "", expertise = ""} = await searchParams;
-  const {our_doctors,license_number,search_by_name,search,select_this,doctors}=await getDictionary(lang)
+  const {our_doctors,license_number,search_by_name,search,select_expertise,doctors}=await getDictionary(lang)
   const filteredData = doctors.filter((doctor) => {
     const nameMatch = name
       ? Object.values(doctor.fullname.toString())
@@ -45,7 +45,7 @@ export default async function DoctorsPage({
         imageSrc="/header-slider-1.webp"
       />
       <div className="my-16 container">
-        <div className="bg-[#F8F9FA] rounded-4xl lg:px-20 py-16">
+        <div className="bg-[#F8F9FA] rounded-4xl lg:px-20 md:py-16 py-4">
           <h3 className="lg:text-[3em] text-2xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
             {our_doctors}
           </h3>
@@ -53,13 +53,13 @@ export default async function DoctorsPage({
             lang={lang}
             defaultName={name}
             defaultExpertise={expertise}
-            dict={{search,search_by_name,select_this}}
+            dict={{search,search_by_name,select_this:select_expertise}}
           />
           <div className="grid grid-cols-4 gap-10 mt-10 ">
             {filteredData?.map((doctor) => (
               <div
                 key={doctor.id}
-                className="lg:col-span-1 col-span-3 rounded-2xl border-[1px] border-neutral-200 overflow-hidden relative"
+                className="lg:col-span-1 col-span-4 rounded-2xl border-[1px] border-neutral-200 overflow-hidden relative"
               >
                 <div className="lg:h-[250px] h-[200px] relative before:absolute before:bottom-0 before:bg-gradient-to-t before:from-white before:to-transparent before:z-10 before:w-full before:h-full before:top-0 before:right-0">
                   <Image
diff --git a/src/app/[lang]/medical-services/[slug]/page.tsx b/src/app/[lang]/medical-services/[slug]/page.tsx
index fdcb8b8..4ddbf3d 100644
--- a/src/app/[lang]/medical-services/[slug]/page.tsx
+++ b/src/app/[lang]/medical-services/[slug]/page.tsx
@@ -26,8 +26,8 @@ export default async function SingleMedicalService({
         imageSrc="/header-slider-1.webp"
       />
       <section className="mt-16 container">
-        <div className="bg-[#F8F9FA] rounded-4xl px-20 py-16">
-          <h3 className="text-[3em] font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
+        <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
+          <h3 className="md:text-[3em] text-xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
             انواع خدمات پزشکی {data?.title.toString()}
           </h3>
           <div className="mt-10 space-y-6">
diff --git a/src/app/[lang]/medical-services/page.tsx b/src/app/[lang]/medical-services/page.tsx
index 0cc3567..75d72b6 100644
--- a/src/app/[lang]/medical-services/page.tsx
+++ b/src/app/[lang]/medical-services/page.tsx
@@ -27,8 +27,8 @@ export default async function MedicalServices({
         imageSrc="/header-slider-1.webp"
       />
       <section className="mb-24 mt-10 container ">
-        <div className="bg-[#F8F9FA] rounded-4xl px-40 py-16">
-          <h3 className="text-[3em] font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
+        <div className="bg-[#F8F9FA] rounded-4xl md:px-40 px-4 md:py-16 py-4">
+          <h3 className="md:text-[3em] text-2xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
             {medical_packages_headTitle}
           </h3>
           <div className="mt-16">
@@ -36,14 +36,14 @@ export default async function MedicalServices({
             </p>
             <br />
             <br /> */}
-            <div className="introduction_description_subText" dangerouslySetInnerHTML={{__html:our_medical_packages}}/>
+            <div className="introduction_description_subText " dangerouslySetInnerHTML={{__html:our_medical_packages}}/>
             <div className="w-full mt-20 grid grid-cols-12 gap-6">
               {medical_packages_data.map((item) => {
                 const LazyComponent = lazy(
                   () => import(`@/ui/components/icons/${item.svg}.tsx`)
                 );
                 return (
-                  <div className="col-span-4" key={item.id}>
+                  <div className="md:col-span-4 col-span-12" key={item.id}>
                     <Link
                       href={`/medical-services/${item.slug}`}
                       className="flex flex-col items-center justify-center py-10 w-full h-full  rounded-xl border-[1px] border-neutral-200 bg-white  hover:border-secondary"
diff --git a/src/app/[lang]/patient-rights-charter/page.tsx b/src/app/[lang]/patient-rights-charter/page.tsx
index e5fbadb..d2fdaa4 100644
--- a/src/app/[lang]/patient-rights-charter/page.tsx
+++ b/src/app/[lang]/patient-rights-charter/page.tsx
@@ -23,8 +23,8 @@ export default async function PatientRights({
         imageSrc="/header-slider-1.webp"
       />
       <section className="my-16 container">
-        <div className="bg-[#F8F9FA] rounded-4xl px-20 py-16">
-          <h3 className="text-[3em] font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
+        <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
+          <h3 className="md:text-[3em] text-2xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
             {patient_rights_charter?.page_title}
           </h3>
           <div className="mt-16">
diff --git a/src/app/globals.css b/src/app/globals.css
index 98881fd..6b6e22e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -106,7 +106,7 @@ body {
 .gradient-slider {
 }
 .introduction_description_subText ul {
-  @apply list-disc list-inside marker:text-secondary marker:text-2xl text-[1.2rem] space-y-2 text-[#454547];
+  @apply list-disc list-inside marker:text-secondary marker:text-2xl md:text-[1.2rem] space-y-6 text-[#454547];
 }
 .packages_subpackages_list ul {
   @apply list-disc list-inside marker:text-secondary marker:text-2xl text-[1rem] space-y-1 text-[#454547];
diff --git a/src/ui/components/global/Accordion.tsx b/src/ui/components/global/Accordion.tsx
index 1980d3e..1cb81c7 100644
--- a/src/ui/components/global/Accordion.tsx
+++ b/src/ui/components/global/Accordion.tsx
@@ -36,26 +36,26 @@ export default function Accordion({
 
   return (
     <div className="w-full  space-y-4 overflow-hidden">
-      <div key={index} className="p-4 bg-secondary rounded-2xl ">
+      <div key={index} className="md:p-4 py-4 px-1 bg-secondary rounded-2xl ">
         <button
           className="flex w-full items-center justify-between text-right h-full cursor-pointer"
           onClick={() => toggle(index)}
         >
-          <span className="text-lg font-semibold text-white">{title}</span>
+          <span className="md:text-lg text-sm font-semibold text-white">{title}</span>
           <span
             className={` text-white transition-all duration-300  ${
               openIndex === index ? "rotate-90" : "-rotate-90"
             }`}
           >
-            <ChevronLeftSvg size="20" />
+            <ChevronLeftSvg size="16" />
           </span>
         </button>
 
         <div>
           {openIndex === index && (
-            <div className="bg-white p-10 mt-10 space-y-10">
+            <div className="bg-white md:p-10 px-3 py-1 mt-10 space-y-10">
               {thumbnail && (
-                <div className="h-[600px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden">
+                <div className="md:h-[600px] h-[200px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden">
                   <Image
                     src={`/packages/${thumbnail}`}
                     fill
@@ -66,7 +66,7 @@ export default function Accordion({
               )}
               {description && (
                 <div
-                  className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base"
+                  className="overflow-hidden text-gray-600 mt-2 leading-relaxed md:text-base text-sm"
                   dangerouslySetInnerHTML={{__html: description}}
                 />
               )}
@@ -101,11 +101,11 @@ export default function Accordion({
               )}
               <>
                 <h4 className="font-bold text-lg">
-                  رزرو نوبت و مشاوره رايگان با پزشك و كارشناس IPD :
+                  
                 </h4>
                 <div className="overflow-hidden text-gray-600  leading-relaxed text-base ">
                   <div>ایمیل : <a href={`mailto:${default_info.email}`}>{default_info.email}</a></div>
-                  <div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}></a></div>
+                  <div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}>{default_info.phone_number}</a></div>
                 </div>
               </>
             </div>
diff --git a/src/ui/components/global/CustomLink.tsx b/src/ui/components/global/CustomLink.tsx
index 804d010..8bbfd18 100644
--- a/src/ui/components/global/CustomLink.tsx
+++ b/src/ui/components/global/CustomLink.tsx
@@ -7,7 +7,7 @@ interface CustomLinkProps {
 }
 export default function CustomLink({href, label, className}: CustomLinkProps) {
   return (
-    <Link href={href} className={className }>
+    <Link href={href} className={className}>
       {label}
     </Link>
   );
diff --git a/src/ui/components/menu/MobileMenu.tsx b/src/ui/components/menu/MobileMenu.tsx
index 17c21f5..a86a1ee 100644
--- a/src/ui/components/menu/MobileMenu.tsx
+++ b/src/ui/components/menu/MobileMenu.tsx
@@ -1,14 +1,24 @@
 "use client";
+import {DefaultMenuLinks} from "@/constants/menu/menu.const";
 import React, {useState} from "react";
+import CustomLink from "../global/CustomLink";
+import {languages_types} from "@/types";
+import ChevronLeftSvg from "../icons/ChevronLeftSvg";
+import {getHref} from "@/utils/functions";
 
-export default function MobileMenu() {
+export default function MobileMenu({lang}: {lang: languages_types}) {
   const [open, setOpen] = useState(false);
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const toggle = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
   return (
     <>
       <button
         type="button"
         className="lg:hidden block text-blue-primary"
-        onClick={()=>setOpen(!open)}
+        onClick={() => setOpen(!open)}
       >
         <svg
           stroke="currentColor"
@@ -28,12 +38,104 @@ export default function MobileMenu() {
         </svg>
       </button>
       {open && (
-        <div className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-full" onClick={(e)=>{
-          e.stopPropagation();
-          e.preventDefault();
-          setOpen(!open)
-        }}>
-          <div className={`absolute top-0 right-0 h-full ${open ? 'w-[80%]' : 'w-0'} bg-white transition-all duration-300`}></div>
+        <div
+          className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-screen"
+          onClick={(e) => {
+            
+            setOpen(!open);
+          }}
+        >
+          <div
+            className={`absolute top-0 right-0 h-full ${
+              open ? "w-[80%]" : "w-0"
+            } bg-white transition-all duration-300`}
+            onClick={(e)=>e.stopPropagation()}
+          >
+            <div className="p-4">
+              <div className="w-full flex items-center justify-end">
+                <button className="" onClick={() => setOpen(!open)}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="40"
+                    height="40"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
+                      fill="#0F1729"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="mt-5">
+                {DefaultMenuLinks.map((link) => (
+                  <div key={link.id} className="w-full h-fit">
+                    {link.sub.length > 0 ? (
+                      <div className="flex items-center justify-between">
+                        <div className="w-full  space-y-4 overflow-hidden">
+                          <div
+                            key={link.id}
+                            className="rounded-2xl py-4"
+                          >
+                            <button
+                              className="flex w-full items-center justify-between text-right h-full cursor-pointer"
+                              onClick={() => toggle(link.id)}
+                            >
+                              <span >
+                                {link.label[lang]}
+                              </span>
+                              <span
+                                className={`transition-all duration-300  ${
+                                  openIndex === link.id
+                                    ? "rotate-90"
+                                    : "-rotate-90"
+                                }`}
+                              >
+                                <ChevronLeftSvg size="14" />
+                              </span>
+                            </button>
+
+                            <div>
+                              {openIndex === link.id && (
+                                <div className="bg-neutral-200 p-4 mt-4 space-y-10 rounded-2xl">
+                                  <div className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base">
+                                    {link.sub.map((submenu) => (
+                                      <div
+                                        key={submenu.id}
+                                        className="w-full text-blue-primary hover:font-medium  p-1 px-3"
+                                      >
+                                        <CustomLink
+                                          href={getHref(submenu.href, lang)}
+                                          label={submenu.label[lang]}
+                                          className="text-sm font-medium text-black hover:text-secondary transition-all"
+                                        />
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="w-full flex">
+                        <CustomLink
+                          href={getHref(link.href, lang)}
+                          label={link.label[lang]}
+                          className="w-full py-4"
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
       )}
     </>
diff --git a/src/ui/components/top-menu/TopMenu.tsx b/src/ui/components/top-menu/TopMenu.tsx
index 5a57de3..c66b620 100644
--- a/src/ui/components/top-menu/TopMenu.tsx
+++ b/src/ui/components/top-menu/TopMenu.tsx
@@ -9,10 +9,12 @@ import {languages_types} from "@/types";
 import MobileMenu from "../menu/MobileMenu";
 import {getHref} from "@/utils/functions";
 
-export default function TopMenu({lang}: {lang: string}) {
+export default function TopMenu({lang}: {lang: languages_types}) {
   const [isSticky, setIsSticky] = useState(false);
 
   useEffect(() => {
+    if (window.innerWidth < 1024) return;
+
     const handleScroll = () => {
       if (window.scrollY > 50) {
         setIsSticky(true);
@@ -25,49 +27,46 @@ export default function TopMenu({lang}: {lang: string}) {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
   return (
-    <div
-      className={`w-full z-50 transition-all duration-300 container flex lg:justify-around justify-between items-center 
+    <>
+      <div
+        className={`w-full z-30 transition-all duration-300 container flex lg:justify-around justify-between items-center 
       ${
         isSticky
           ? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/80"
           : "lg:h-[120px] h-[60px] bg-white relative"
       }`}
-      // className="bg-white container   sticky top-0 z-30"
-    >
-      {/* <div className="top-0 absolute h-[40px] bg-radial bg-secondary/30 backdrop-blur-2xl w-full">
+        // className="bg-white container   sticky top-0 z-30"
+      >
+        {/* <div className="top-0 absolute h-[40px] bg-radial bg-secondary/30 backdrop-blur-2xl w-full">
 
       </div> */}
-      <div className="lg:w-[210px] flex gap-x-10 transition-all duration-300 items-center ">
-        <Link href={"/"} className="flex items-center gap-x-2">
-          <div
-            className={`relative ${
-              isSticky
-                ? " h-[70px] w-[70px]"
-                : "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
-            }`}
-          >
-            <Image
-              loading="lazy"
-              src="/shomalhospital-ipd-logo.png"
-              fill
-              alt="shomal hospital"
-              style={{color: "transparent", fill: "red", objectFit: "fill"}}
-            />
-          </div>
-        </Link>
-      </div>
-
-      <MobileMenu />
-      <div className="lg:grid hidden grid-cols-12  gap-x-1 w-full h-full items-center">
-        <div className="col-span-8 flex items-center justify-center w-full h-full">
-          <Menu
-            lang={lang}
-            direction="horizontal"
-            items={DefaultMenuLinks}
-          />
+        <div className="lg:w-[210px] flex gap-x-10 transition-all duration-300 items-center ">
+          <Link href={"/"} className="flex items-center gap-x-2">
+            <div
+              className={`relative ${
+                isSticky
+                  ? " h-[70px] w-[70px]"
+                  : "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
+              }`}
+            >
+              <Image
+                loading="lazy"
+                src="/shomalhospital-ipd-logo.png"
+                fill
+                alt="shomal hospital"
+                style={{color: "transparent", fill: "red", objectFit: "fill"}}
+              />
+            </div>
+          </Link>
         </div>
-        <div className="col-span-4 flex items-center justify-center gap-x-5">
-          {/* <a
+
+        <MobileMenu lang={lang} />
+        <div className="lg:grid hidden grid-cols-12  gap-x-1 w-full h-full items-center">
+          <div className="col-span-8 flex items-center justify-center w-full h-full">
+            <Menu lang={lang} direction="horizontal" items={DefaultMenuLinks} />
+          </div>
+          <div className="col-span-4 flex items-center justify-center gap-x-5">
+            {/* <a
             href="tel:0114492"
             className="text-white relative group  flex items-end hover:bg-blue-primary p-3 hover:text-white transition-all rounded-xl"
           >
@@ -80,24 +79,29 @@ export default function TopMenu({lang}: {lang: string}) {
               <TelephoneSvg size="28" />
             </span>
           </a> */}
-          {/* <Dropdown options={site_languages} /> */}
+            {/* <Dropdown options={site_languages} /> */}
 
-          <CustomLink
-            href={getHref("/contact-us#request_accept", lang)}
-            label={Menu_buttons.request_to_accept[lang as languages_types] || ""}
-            className={`bg-blue-primary text-white rounded-full ${
-              isSticky ? "py-4 px-4" : "py-4 px-6"
-            } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap  shadow-neutral-300 hover:shadow-none transition-all duration-200`}
-          />
-          <CustomLink
-            href={getHref("/upload-documents", lang)}
-            label={Menu_buttons.upload_document[lang as languages_types] || ""}
-            className={`bg-secondary text-white rounded-full ${
-              isSticky ? "py-4 px-4" : "py-4 px-6"
-            } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
-          />
+            <CustomLink
+              href={getHref("/contact-us#request_accept", lang)}
+              label={
+                Menu_buttons.request_to_accept[lang as languages_types] || ""
+              }
+              className={`bg-blue-primary text-white rounded-full ${
+                isSticky ? "py-4 px-4" : "py-4 px-6"
+              } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap  shadow-neutral-300 hover:shadow-none transition-all duration-200`}
+            />
+            <CustomLink
+              href={getHref("/upload-documents", lang)}
+              label={
+                Menu_buttons.upload_document[lang as languages_types] || ""
+              }
+              className={`bg-secondary text-white rounded-full ${
+                isSticky ? "py-4 px-4" : "py-4 px-6"
+              } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/ui/forms/DoctorsFilterBox.tsx b/src/ui/forms/DoctorsFilterBox.tsx
index 5ac22ff..5d1a580 100644
--- a/src/ui/forms/DoctorsFilterBox.tsx
+++ b/src/ui/forms/DoctorsFilterBox.tsx
@@ -46,14 +46,16 @@ export default function DoctorsFilterBox({
   return (
     <>
       <div className="grid grid-cols-12 gap-4 mt-16">
-        <div className="col-span-4">
+        <div className="md:col-span-4 col-span-12">
+         
           <CustomSelect
             value={expertise} // must be string
             onChange={setExpertise} // returns string
             options={options}
-            className="bg-white"
+            className="bg-white mt-2"
             isClearable
             placeholder={dict.select_this}
+            
           />
         </div>
         <div className="col-span-5">
@@ -65,12 +67,12 @@ export default function DoctorsFilterBox({
             className="bg-white py-4 px-6 rounded-2xl border-[1px] border-neutral-200 w-full focus:outline-secondary focus:outline-[1px]"
           /> */}
         </div>
-        
-        <div className="col-span-3">
+
+        <div className="md:col-span-3 col-span-12">
           <button
             type="button"
             onClick={applyFilters}
-            className="bg-blue-primary text-white font-medium w-full h-full rounded-2xl cursor-pointer"
+            className="bg-blue-primary text-white font-medium w-full h-full rounded-2xl cursor-pointer md:py-0 py-4"
           >
             {dict.search}
           </button>