diff --git a/index.html b/index.html
index 4367ddf3..1dfa927d 100644
--- a/index.html
+++ b/index.html
@@ -19,9 +19,9 @@
     <div
          class="dropMenuLinks ease-in-out duration-300 flex flex-col justify-between overflow-y-auto h-screen z-50 absolute top-0 -right-[2000px] backdrop-blur-sm sm:p-12 p-8 bg-white/90 w-screen ">
       <!-- Row - 1  -->
-      <div class="row-1 flex items-center justify-between text-indigo-600 ">
+      <div class="row-1 flex items-center justify-between text-black ">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-             class="w-6 h-6 closeDropDown cursor-pointer ease-in-out duration-300 hover:text-indigo-600">
+             class="w-6 h-6 closeDropDown cursor-pointer ease-in-out duration-300 hover:text-black">
           <path fill-rule="evenodd"
                 d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-4.28 9.22a.75.75 0 000 1.06l3 3a.75.75 0 101.06-1.06l-1.72-1.72h5.69a.75.75 0 000-1.5h-5.69l1.72-1.72a.75.75 0 00-1.06-1.06l-3 3z"
                 clip-rule="evenodd" />
@@ -33,26 +33,26 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
 
       <!-- Row - 2  -->
       <div class="">
-        <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+        <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
            href="#mental">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-               class="h-3 w-3 group-hover:text-indigo-600">
+               class="h-3 w-3 group-hover:text-black">
             <path fill-rule="evenodd"
                   d="M4.72 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 010-1.06zm6 0a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 010-1.06z"
                   clip-rule="evenodd" />
           </svg>
-          <span class="text-md p-3 group-hover:text-indigo-600">Mental Health Problems</span>
+          <span class="text-md p-3 group-hover:text-black">Mental Health Problems</span>
         </a>
 
-        <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+        <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
            href="./Blogs/Blog.html">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-               class="h-3 w-3 group-hover:text-indigo-600">
+               class="h-3 w-3 group-hover:text-black">
             <path fill-rule="evenodd"
                   d="M4.72 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 010-1.06zm6 0a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 010-1.06z"
                   clip-rule="evenodd" />
           </svg>
-          <span class="text-md p-3 group-hover:text-indigo-600">Power of Knowledge Blogs</span>
+          <span class="text-md p-3 group-hover:text-black">Power of Knowledge Blogs</span>
         </a>
 
         <div class="features flex flex-col">
@@ -67,80 +67,80 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
 
           <!-- Nested Links for features  -->
           <div class="nestedLinks flex flex-col ml-4">
-            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
                href="AR_Meditate/meditation.html">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="h-3 w-3 group-hover:text-indigo-600">
+                   class="h-3 w-3 group-hover:text-black">
                 <path fill-rule="evenodd"
                       d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
                       clip-rule="evenodd" />
               </svg>
-              <span class="text-sm p-3 group-hover:text-indigo-600">Augmented Reality Meditation</span>
+              <span class="text-sm p-3 group-hover:text-black">Augmented Reality Meditation</span>
             </a>
 
-            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
                href="./Iskcon/event.html">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="h-3 w-3 group-hover:text-indigo-600">
+                   class="h-3 w-3 group-hover:text-black">
                 <path fill-rule="evenodd"
                       d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
                       clip-rule="evenodd" />
               </svg>
-              <span class="text-sm p-3 group-hover:text-indigo-600">Iskcon Events</span>
+              <span class="text-sm p-3 group-hover:text-black">Iskcon Events</span>
             </a>
 
-            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
                href="./Divine_page/story.html">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="h-3 w-3 group-hover:text-indigo-600">
+                   class="h-3 w-3 group-hover:text-black">
                 <path fill-rule="evenodd"
                       d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
                       clip-rule="evenodd" />
               </svg>
-              <span class="text-sm p-3 group-hover:text-indigo-600">Divine Activities for all Generation
+              <span class="text-sm p-3 group-hover:text-black">Divine Activities for all Generation
               </span>
             </a>
 
-            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
                href="./Pomodro_page/reward.html">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="h-3 w-3 group-hover:text-indigo-600">
+                   class="h-3 w-3 group-hover:text-black">
                 <path fill-rule="evenodd"
                       d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
                       clip-rule="evenodd" />
               </svg>
-              <span class="text-sm p-3 group-hover:text-indigo-600">Pomodoro Spiritual Break</span>
+              <span class="text-sm p-3 group-hover:text-black">Pomodoro Spiritual Break</span>
             </a>
 
-            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
                href="./shlok_page/motivation.html">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="h-3 w-3 group-hover:text-indigo-600">
+                   class="h-3 w-3 group-hover:text-black">
                 <path fill-rule="evenodd"
                       d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
                       clip-rule="evenodd" />
               </svg>
-              <span class="text-sm p-3 group-hover:text-indigo-600">Read a Shlok</span>
+              <span class="text-sm p-3 group-hover:text-black">Read a Shlok</span>
             </a>
-            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
                href="./Gita-Storyline/storyline.html">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="h-3 w-3 group-hover:text-indigo-600">
+                   class="h-3 w-3 group-hover:text-black">
                 <path fill-rule="evenodd"
                       d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
                       clip-rule="evenodd" />
               </svg>
-              <span class="text-sm p-3 group-hover:text-indigo-600">Gita StoryLine</span>
+              <span class="text-sm p-3 group-hover:text-black">Gita StoryLine</span>
             </a>
-            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 "
+            <a class="flex group items-center relative font-semibold ease-in-out duration-300 pb relative after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 "
                href="./Rejuvenate_page/rejuvenate.html">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="h-3 w-3 group-hover:text-indigo-600">
+                   class="h-3 w-3 group-hover:text-black">
                 <path fill-rule="evenodd"
                       d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
                       clip-rule="evenodd" />
               </svg>
-              <span class="text-sm p-3 group-hover:text-indigo-600">Rejuvenate</span>
+              <span class="text-sm p-3 group-hover:text-black">Rejuvenate</span>
             </a>
             <div id="google_translate_element" class=""></div>
           </div>
@@ -162,7 +162,7 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
               <img src="./Images/New_Logo_2.webp" alt="Moksh Logo" class="w-[4rem] h-[4rem] rounded-full" />
           
               <span
-                    class="ml-3 text-base lg:text-2xl uppercase font-semibold projectName tracking-widest ease-in-out duration-300 hover:text-indigo-600">Moksh</span>
+                    class="ml-3 text-base lg:text-2xl uppercase font-semibold projectName tracking-widest ease-in-out duration-300 hover:text-black">Moksh</span>
             </a>
           </div>
           <div class="rightSection pr-4">
@@ -171,26 +171,26 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
               <ul class="hidden md:flex items-center gap-10 uppercase text-xs font-semibold tracking-wider ">
                 <li>
                   <a href="./index.html"
-                     class="pb-3 hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Home</a>
+                     class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Home</a>
                 </li>
                 <li>
                   <a href="#mentalHealthComponent"
-                     class="pb-3 hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">
+                     class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">
                     Mental Health Problems </a>
                 </li>
                 <li>
                   <a href="./Blogs/Blog.html"
-                     class="pb-3 hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Power
+                     class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Power
                     of
                     Knowledge Blogs </a>
                 </li>
 
                 <li class="relative group">
                   <a href="#"
-                     class="pb-3 mt-3 group-hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 group-hover:after:w-full after:ease-in-out after:duration-300 flex items-center">
+                     class="pb-3 mt-3 group-hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black group-hover:after:w-full after:ease-in-out after:duration-300 flex items-center">
                     <span>Features</span>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                         class="ml-2 w-3 h-3 group-hover:rotate-180 ease-in-out group-hover:text-indigo-600 duration-300 ">
+                         class="ml-2 w-3 h-3 group-hover:rotate-180 ease-in-out group-hover:text-black duration-300 ">
                       <path fill-rule="evenodd"
                             d="M20.03 4.72a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 11.69l6.97-6.97a.75.75 0 011.06 0zm0 6a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 111.06-1.06L12 17.69l6.97-6.97a.75.75 0 011.06 0z"
                             clip-rule="evenodd" />
@@ -198,28 +198,28 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
 
                   </a>
                   <div
-                       class="absolute hidden group-hover:flex bg-white text-indigo-600 p-4 w-80  shadow-2xl right-0 top-10 flex-col">
+                       class="absolute hidden group-hover:flex bg-white text-black p-4 w-80  shadow-2xl right-0 top-10 flex-col">
                     <a href="AR_Meditate/meditation.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Augmented
+                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Augmented
                       Reality
                       Meditation</a>
                     <a href="Iskcon/event.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Iskcon
+                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Iskcon
                       Events</a>
                     <a href="Divine_page/story.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Divine
+                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Divine
                       Activities for all Generation</a>
                     <a href="Pomodro_page/reward.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Pomodoro
+                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Pomodoro
                       Spiritual Break</a>
                     <a href="shlok_page/motivation.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Read
+                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Read
                       a
                       Shlok</a>
                       <a href="./Gita-Storyline/storyline.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Gita StoryLine</a>
+                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Gita StoryLine</a>
                     <a href="Rejuvenate_page/rejuvenate.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Rejuvenate</a>
+                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Rejuvenate</a>
                   </div>
                 </li>
               </ul>
@@ -227,7 +227,7 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
 
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                  stroke="currentColor"
-                 class="indexOpenDropDown md:hidden h-6 w-6 text-white cursor-pointer ease-in-out duration-300 hover:text-indigo-600">
+                 class="indexOpenDropDown md:hidden h-6 w-6 text-white cursor-pointer ease-in-out duration-300 hover:text-black">
               <path stroke-linecap="round" stroke-linejoin="round"
                     d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
             </svg>
@@ -250,8 +250,8 @@ <h2 class="font-semibold">A Spiritual Productivity Tool for Mental Wellness.</h2
               <h3 class="font-semibold text-lg sm:text-2xl">It is a spiritual productivity tool designed for individuals who want to unlock their potential and achieve true balance in life.</h3>
             </p>
         
-            <div class="scrollDown w-fit mt-4 circle border-2 border-white p-2 rounded-full flex items-center h-12 ease-in-out duration-300 hover:border-indigo-600 group absolute bottom-5 left-1/2 -translate-x-1/2 -translate-y-12 sm:-translate-y-0">
-              <span class="h-2/4 w-2 inline-block rounded-full bg-white group-hover:bg-indigo-600 animate-bounce"></span>
+            <div class="scrollDown w-fit mt-4 circle border-2 border-white p-2 rounded-full flex items-center h-12 ease-in-out duration-300 hover:border-black group absolute bottom-5 left-1/2 -translate-x-1/2 -translate-y-12 sm:-translate-y-0">
+              <span class="h-2/4 w-2 inline-block rounded-full bg-white group-hover:bg-black animate-bounce"></span>
             </div>
           </div>
         </div>
@@ -262,8 +262,8 @@ <h3 class="font-semibold text-lg sm:text-2xl">It is a spiritual productivity too
 
         <!-- Mental Health Problems  -->
         <div class="mental-health-video-container my-8 lg:w-3/4">
-          <h1 class="text-xl mb-5 text-center uppercase font-semibold text-indigo-600">
-            <span class="border-b-4 border-double border-indigo-600 pb-2" id="mental">Mental Health Problems</span>
+          <h1 class="text-xl mb-5 text-center uppercase font-semibold text-black">
+            <span class="border-b-4 border-double border-black pb-2" id="mental">Mental Health Problems</span>
           </h1>
           <div class="video-responsive">
             <iframe src="https://www.youtube.com/embed/BEsKgEGRjYU" title="YouTube video player" frameborder="0"
@@ -281,8 +281,8 @@ <h1 class="text-xl mb-5 text-center uppercase font-semibold text-indigo-600">
 
         <!-- Moksh Features All Cards -->
         <div class="features w-full lg:px-12 flex flex-col justify-center items-center md:pb-8">
-          <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
-            <span class="pb-2 border-double border-b-4 border-indigo-600">Features</span>
+          <h1 class="text-black text-center mb-10 uppercase font-semibold">
+            <span class="pb-2 border-double border-b-4 border-black">Features</span>
           </h1>
 
           <div class="features-card grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-10 ease-in-out duration-700">
@@ -294,7 +294,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
 
               <div class="card-details flex flex-col items-center grow py-4">
 
-                <div class="card-heading py-8 md:pt-4 md:py-0 text-indigo-600 font-semibold">
+                <div class="card-heading py-8 md:pt-4 md:py-0 text-black font-semibold">
                   <span>Augmented Reality Meditation</span>
                 </div>
 
@@ -307,13 +307,13 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
                     inner self and the divine.
                   </p>
                   <a href="./AR_Meditate/meditation.html"
-                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-indigo-600 duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-indigo-600 uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-indigo-600 after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">
+                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-black duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-black uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-black after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">
                     <span class="">Try
                       it out</span>
                   </a>
                 </div>
 
-                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-indigo-600 md:hidden"></div>
+                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-black md:hidden"></div>
 
               </div>
             </div>
@@ -324,7 +324,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
               <img src="./Images/modernIskon.jpeg" alt="modernIskon" class="md:h-[300px] w-full" />
 
               <div class="card-details flex flex-col items-center grow py-4">
-                <div class="card-heading py-8 md:pt-4 md:py-0 text-indigo-600 font-semibold">
+                <div class="card-heading py-8 md:pt-4 md:py-0 text-black font-semibold">
                   <span>Connect with Iskcon Events</span>
                 </div>
 
@@ -338,9 +338,9 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
                     community.
                   </p>
                   <a href="./Iskcon/event.html"
-                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-indigo-600 duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-indigo-600 uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-indigo-600 after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Connect</a>
+                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-black duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-black uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-black after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Connect</a>
                 </div>
-                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-indigo-600 md:hidden"></div>
+                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-black md:hidden"></div>
               </div>
             </div>
 
@@ -350,7 +350,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
               <img src="./Images/modernDivine.webp" alt="modernDivine" class="md:h-[300px] w-full" />
 
               <div class="card-details flex flex-col items-center grow py-4">
-                <div class="card-heading py-8 md:pt-4 md:py-0 text-indigo-600 font-semibold">
+                <div class="card-heading py-8 md:pt-4 md:py-0 text-black font-semibold">
                   <span>Divine Activities for All Generation</span>
                 </div>
 
@@ -363,10 +363,10 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
                     exercises to reduce back pain while working.
                   </p>
                   <a href="./Divine_page/story.html"
-                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-indigo-600 duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-indigo-600 uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-indigo-600 after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Read
+                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-black duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-black uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-black after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Read
                     More</a>
                 </div>
-                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-indigo-600 md:hidden"></div>
+                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-black md:hidden"></div>
               </div>
             </div>
 
@@ -376,7 +376,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
               <img src="./Images/modernPomodoro.webp" alt="modernClock" class="md:h-[300px] w-full" />
 
               <div class="card-details flex flex-col items-center grow py-4">
-                <div class="card-heading py-8 md:pt-4 md:py-0 text-indigo-600 font-semibold">
+                <div class="card-heading py-8 md:pt-4 md:py-0 text-black font-semibold">
                   <span>Pomodoro Spiritual Break</span>
                 </div>
 
@@ -390,10 +390,10 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
                     and well-being.
                   </p>
                   <a href="./Pomodro_page/reward.html"
-                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-indigo-600 duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-indigo-600 uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-indigo-600 after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Take
+                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-black duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-black uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-black after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Take
                     a Break</a>
                 </div>
-                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-indigo-600 md:hidden"></div>
+                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-black md:hidden"></div>
               </div>
             </div>
 
@@ -403,7 +403,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
               <img src="./Images/modernShlok.webp" alt="modernShlok" class="md:h-[300px] w-full" />
 
               <div class="card-details flex flex-col items-center grow py-4">
-                <div class="card-heading py-8 md:pt-4 md:py-0 text-indigo-600 font-semibold">
+                <div class="card-heading py-8 md:pt-4 md:py-0 text-black font-semibold">
                   <span>Read a Shlok</span>
                 </div>
 
@@ -420,9 +420,9 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
                     encourage a connection with the divine.
                   </p>
                   <a href="./shlok_page/motivation.html"
-                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-indigo-600 duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-indigo-600 uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-indigo-600 after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Read</a>
+                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-black duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-black uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-black after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Read</a>
                 </div>
-                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-indigo-600 md:hidden"></div>
+                <div class="forBorder my-4 w-full py-2 border-b-4 border-b-black md:hidden"></div>
               </div>
             </div>
 
@@ -432,7 +432,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
               <img src="./Images/modernRejuvenate.webp" alt="modernRejuvenate" class="md:h-[300px] w-full" />
 
               <div class="card-details flex flex-col items-center grow py-4">
-                <div class="card-heading py-8 md:pt-4 md:py-0 text-indigo-600 font-semibold">
+                <div class="card-heading py-8 md:pt-4 md:py-0 text-black font-semibold">
                   <span>Rejuvenate</span>
                 </div>
 
@@ -445,7 +445,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
                     stressful times and can uplift the spirit.
                   </p>
                   <a href="./Rejuvenate_page/rejuvenate.html"
-                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-indigo-600 duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-indigo-600 uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-indigo-600 after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Get
+                     class="px-3 w-2/3 text-center hover:text-white ease-in-out border-2 border-black duration-300 py-3 text-xs mt-3 bg-transparent rounded-md after:rounded-none z-20 text-black uppercase tracking-widest relative font-semibold after:content-[''] after:top-0 after:h-full after:w-0 after:left-0 after:absolute after:bg-black after:-z-10 hover:after:w-full after:ease-in-out after:duration-300 ">Get
                     Inspired</a>
                 </div>
 
@@ -458,8 +458,8 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
         <!-- Contributors List  -->
         <div
              class="contributors mt-8 md:mt-0 flex-col overflow-x-auto flex items-center justify-center bg-blue-100 w-full py-8">
-          <div class="text-indigo-600 text-center font-semibold w-full sm:w-2/3 p-4">
-            <span class="pb-2 border-double border-b-4 border-indigo-600 uppercase">Moksh Contributors</span>
+          <div class="text-black text-center font-semibold w-full sm:w-2/3 p-4">
+            <span class="pb-2 border-double border-b-4 border-black uppercase">Moksh Contributors</span>
 
             <p class="normal mt-4 text-slate-900">
               <b>We extend our heartfelt gratitude to these incredible
@@ -529,7 +529,7 @@ <h1 class="text-3xl projectName">Moksh</h1>
                 <div class="social flex justify-center lg:justify-start items-center gap-x-4 mt-4">
                   <a href="https://github.com/akshitagupta15june/Moksh">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
-                         class="bi bi-github text-slate-300 ease-in-out duration-300 hover:text-indigo-600"
+                         class="bi bi-github text-slate-300 ease-in-out duration-300 hover:text-black"
                          viewBox="0 0 16 16">
                       <path
                             d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
@@ -537,7 +537,7 @@ <h1 class="text-3xl projectName">Moksh</h1>
                   </a>
                   <a href="https://twitter.com/ExperienceMoksh">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
-                         class="bi bi-twitter text-slate-300 ease-in-out duration-300 hover:text-indigo-600"
+                         class="bi bi-twitter text-slate-300 ease-in-out duration-300 hover:text-black"
                          viewBox="0 0 24 24" version="1.1">
                       <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                      </svg>