diff --git a/src/bestDeals.html b/src/bestDeals.html
index 7bbc561..ec291a0 100644
--- a/src/bestDeals.html
+++ b/src/bestDeals.html
@@ -97,7 +97,7 @@ <h4>Shop now</h4>
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
@@ -145,7 +145,7 @@ <h5 class=" my-1 text-[#191c1e] text-sm "> The most powerful body spray to repel
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
@@ -194,7 +194,7 @@ <h5 class=" my-1 text-[#191c1e] text-sm "> The most powerful body spray to repel
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
@@ -242,7 +242,7 @@ <h5 class=" my-1 text-[#191c1e] text-sm "> The most powerful body spray to repel
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
@@ -290,7 +290,7 @@ <h5 class=" my-1 text-[#191c1e] text-sm "> The most powerful body spray to repel
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
@@ -338,7 +338,7 @@ <h5 class=" my-1 text-[#191c1e] text-sm "> The most powerful body spray to repel
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
@@ -386,7 +386,7 @@ <h5 class=" my-1 text-[#191c1e] text-sm "> The most powerful body spray to repel
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
@@ -434,7 +434,7 @@ <h5 class=" my-1 text-[#191c1e] text-sm "> The most powerful body spray to repel
                     <!-- Overlay -->
                     <div
                         class="absolute inset-0  bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                        <div class="flex space-x-4">
+                        <div class="flex gap-4">
                             <div
                                 class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                 <i class="fa-regular fa-heart"></i>
diff --git a/src/featursProducts.html b/src/featursProducts.html
index e8f5c52..88332f2 100644
--- a/src/featursProducts.html
+++ b/src/featursProducts.html
@@ -29,7 +29,7 @@ <h6 class=" text-center text-[#be4646] ">COMPUTER & ACCESSORIES</h6>
                     <a href="shop.html" class="flex items-center  mb-0">
                         <div class="h-11 px-3 bg-[#f98131] rounded-sm justify-center items-center gap-2 inline-flex">
                             <div class="text-white text-base font-['Public Sans'] uppercase tracking-tight">Shop now</div>
-                            <i class="fa text-white fa-arrow-right" aria-hidden="true"></i>
+                            <i class="fa text-white fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i>
                         </div>
                     </a>
                     <div class="">
@@ -73,7 +73,7 @@ <h3 class="text-[#191c1e] text-2xl mb-4 md:mb-0">Featured Products</h3>
                                 <div class="bg-white justify-start items-start gap-2.5 inline-flex">
                                     <a href="shop.html"
                                         class="text-[#f98131] text-sm font-semibold leading-tight">Browse All Products <i
-                                            class="fa fa-arrow-right" aria-hidden="true"></i></a>
+                                            class="fa fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i></a>
                                 </div>
                             </li>
                         </ul>
@@ -91,7 +91,7 @@ <h3 class="text-[#191c1e] text-2xl mb-4 md:mb-0">Featured Products</h3>
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
@@ -136,7 +136,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
@@ -181,7 +181,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
@@ -226,7 +226,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
@@ -271,7 +271,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
@@ -316,7 +316,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
@@ -361,7 +361,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
@@ -406,7 +406,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                     
                                 <!-- Overlay -->
                                 <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <div class="flex space-x-4">
+                                    <div class="flex gap-4">
                                         <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                             <i class="fa-regular fa-heart"></i>
                                         </div>
diff --git a/src/header.html b/src/header.html
index a993f8c..d332aab 100644
--- a/src/header.html
+++ b/src/header.html
@@ -98,7 +98,7 @@ <h2 class="text-[#191c1e] text-3xl md:text-5xl  leading-[56px] my-1">Xbox
                 <a href="shop.html" class="flex items-center">
                   <div class="h-11 px-3 bg-[#f98131] rounded-sm justify-center items-center gap-2 inline-flex">
                     <div class="text-white text-base font-['Public Sans'] uppercase tracking-tight">Shop now</div>
-                    <i class="fa text-white fa-arrow-right" aria-hidden="true"></i>
+                    <i class="fa text-white fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i>
                   </div>
                 </a>
               </div>
@@ -138,18 +138,18 @@ <h2 class="text-white text-2xl mb-2">New Google Pixel 6 Pro</h2>
           <a href="shop.html" class="flex items-center">
             <div class="h-11 px-3 bg-[#f98131] rounded-sm justify-center items-center gap-2 inline-flex">
               <div class="text-white text-base font-['Public Sans'] uppercase tracking-tight">Shop now</div>
-              <i class="fa text-white fa-arrow-right" aria-hidden="true"></i>
+              <i class="fa text-white fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i>
             </div>
           </a>
         </div>
         <div class=" basis-1/2 relative ">
         </div>
 
-        <div class="absolute top-8  -right-36 xl:w-fit w- ">
+        <div class="absolute top-8  ltr:-right-36 rtl:-left-36 xl:w-fit w- ">
           <div class="relativ ">
             <img src="./../assets/images/Image.svg" class=" w-4/5 " alt="">
             <div
-              class="px-4 py-2  bg-[#efd33d] rounded-sm justify-start items-start inline-flex absolute  top-0 left-[29%]  ">
+              class="px-4 py-2  bg-[#efd33d] rounded-sm justify-start items-start inline-flex absolute  top-0 ltr:left-[29%] rtl:right-[29%] ">
               <span class="text-[#141414] text-base font-semibold">29% OFF</span>
             </div>
 
@@ -167,7 +167,7 @@ <h2 class="text-2xl">New Google Pixel 6 Pro</h2>
           <a href="shop.html" class="flex items-center">
             <div class="h-11 px-3 bg-[#f98131] rounded-sm justify-center items-center gap-2 inline-flex">
               <div class="text-white text-base uppercase tracking-tight">Shop now</div>
-              <i class="fa text-white fa-arrow-right" aria-hidden="true"></i>
+              <i class="fa text-white fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i>
             </div>
           </a>
         </div>
diff --git a/src/offer.html b/src/offer.html
index 3717b95..7c2f716 100644
--- a/src/offer.html
+++ b/src/offer.html
@@ -9,7 +9,7 @@
     
  <div class="py-3  relative bg-[#191c1e] flex flex-col lg:flex-row justify-between items-center">
     <!--  Black Friday -->
-    <div class="flex items-center gap-2.5  lg:ml-[100px] ">
+    <div class="flex items-center gap-2.5  ltr:lg:ml-[100px] rtl:lg:mr-[100px]">
       <!-- Banner div  -->
       <div class="px-2.5 py-1.5 bg-[#f3de6d] -rotate-3">
         <span class="text-[#191c1e] text-base sm:text-xl ">Black</span>
@@ -26,16 +26,16 @@ <h1 class="text-white text-lg sm:text-2xl ">Friday</h1>
     </div>
   
     <!-- shop now -->
-    <a href="shop.html" class="flex items-center  ] lg:mr-[100px]">
+    <a href="shop.html" class="flex items-center ltr:lg:mr-[100px] rtl:lg:ml-[100px]">
       <div class="h-11 px-3 bg-[#eac70b] rounded-sm justify-center items-center gap-2 inline-flex">
         <div class="text-[#191c1e] text-sm sm:text-base font-bold font-['Public Sans'] uppercase  tracking-tight">Shop
           now</div>
-        <i class="fa fa-arrow-right" aria-hidden="true"></i>
+        <i class="fa fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i>
       </div>
     </a>
   
     <!-- Exit Button -->
-    <button class="p-2 right-4 sm:right-6 absolute bg-[#303639] rounded-sm flex items-center">
+    <button class="p-2 ltr:right-4 ltr:sm:right-6 rtl:left-4 rtl:sm:left-6 absolute bg-[#303639] rounded-sm flex items-center">
       <i class="fa-solid fa-x text-white text-xs"></i>
     </button>
   </div>
diff --git a/src/shop.html b/src/shop.html
index 9859172..fd86ae1 100644
--- a/src/shop.html
+++ b/src/shop.html
@@ -332,7 +332,7 @@ <h6 class="text-[#191c1e] md:text-sm text-[9px] font-normal font-['Public Sans']
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -377,7 +377,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -422,7 +422,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -467,7 +467,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -512,7 +512,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -557,7 +557,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -602,7 +602,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -647,7 +647,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -692,7 +692,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -737,7 +737,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -782,7 +782,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -827,7 +827,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -872,7 +872,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -917,7 +917,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -962,7 +962,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1007,7 +1007,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1052,7 +1052,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1097,7 +1097,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1142,7 +1142,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1187,7 +1187,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1232,7 +1232,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1277,7 +1277,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1322,7 +1322,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1367,7 +1367,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1412,7 +1412,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1457,7 +1457,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1502,7 +1502,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1547,7 +1547,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1592,7 +1592,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1637,7 +1637,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1682,7 +1682,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>
@@ -1727,7 +1727,7 @@ <h5 class="my-1 text-[#191c1e] text-sm">The most powerful body spray to repel fl
                 
                             <!-- Overlay -->
                             <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                <div class="flex space-x-4">
+                                <div class="flex gap-4">
                                     <div class="p-2 cursor-pointer bg-[#f8f8f8] rounded-full flex justify-center items-center transition-transform duration-300 hover:scale-110">
                                         <i class="fa-regular fa-heart"></i>
                                     </div>