fix shadow

app/home/components/OrderByApplication.tsx

@@ -30,7 +30,7 @@ const OrderByApplication: FC = () => {
           <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
         </div>
 
-        <CarouselTrack className="mt-12">
+        <CarouselTrack className="mt-12 px-3 py-4 -mx-3">
           {Array.from({ length: 10 }).map((_, index) => (
             <CarouselSlide key={index}>
               <ProductCard />

app/home/components/ProductCard.tsx

@@ -7,12 +7,12 @@ import { Rating } from "react-simple-star-rating";
 
 const ProductCard: FC = () => {
   return (
-    <div className="rounded-xl overflow-hidden">
-      <div>
+    <div>
+      <div className="rounded-xl overflow-hidden">
         <Image src={ProductImage} alt="product-card" width={500} height={500} className="w-full aspect-square object-cover" />
       </div>
-      <div className="bg-white rounded-xl -mt-6 drop-shadow-2xl shadow">
-        <div className="pt-4 text-[#2A3950] font-bold text-center">جعبه کیبوردی</div>
+      <div className="relative bg-white p-4 rounded-xl -mt-6 shadow-[0_4px_20px_rgba(0,0,0,0.1)]">
+        <div className="text-[#2A3950] font-bold text-center">جعبه کیبوردی</div>
         <div className="mt-2 flex justify-center items-center gap-1.5">
           <Rating initialValue={4.5} size={20} readonly rtl allowFraction SVGstyle={{ display: "inline-block" }} />
           <div className="text-xs mt-1">4.5</div>

app/home/components/ProductSection.tsx

@@ -11,7 +11,7 @@ const ProductSection: FC = () => {
           <CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
         </div>
 
-        <CarouselTrack className="mt-12">
+        <CarouselTrack className="mt-12 px-3 py-4 -mx-3">
           {Array.from({ length: 10 }).map((_, index) => (
             <CarouselSlide key={index}>
               <ProductCard />