fixed payment ,colors , add Mosque distance and fixed some elemnent

app/loading.js

@@ -1,8 +1,10 @@
 "use client";
 
 import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
 
 export default function Loading() {
+  const { t } = useTranslation();
   return (
     <div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: "#08172f" }}>
       <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1.3 }} transition={{ duration: 0.4 }} className="text-center flex flex-col items-center justify-center gap-4">
@@ -27,7 +29,9 @@ export default function Loading() {
           </div>
         </motion.div>
 
-        <p className="text-amber-400 text-sm font-bold tracking-wide animate-pulse">... جاري التحميل</p>
+        <p className="text-amber-400 text-sm font-bold tracking-wide animate-pulse" suppressHydrationWarning>
+          ... {t("loading")}
+        </p>
       </motion.div>
     </div>
   );