Merge pull request #933 from Nayanika-12/main

Made the required changes

index.html

@@ -43,6 +43,17 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
           <span class="text-md p-3 group-hover:text-indigo-600">Home</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 "
+           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">
+            <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>
+        </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 "
            href="./Blogs/Blog.html">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
@@ -160,6 +171,11 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
                   <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>
                 </li>
+                <li>
+                  <a href="#mental"
+                     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 ">
+                    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
@@ -244,12 +260,13 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
         <!-- Mental Health Problems  -->
         <div class="mentalHealthVideo my-8 lg:w-3/4" id="mentalhealth">
           <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
-            <span class="pb-2 border-double border-b-4 border-indigo-600">Mental Health Problems</span>
+            <span class="pb-2 border-double border-b-4 border-indigo-600" id="mental">Mental Health Problems</span>
           </h1>
           <iframe src="https://www.youtube.com/embed/BEsKgEGRjYU" title="YouTube video player" frameborder="0"
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   allowfullscreen="" class="h-[400px] w-full my-12 lg:mx-auto"></iframe>
-          <p class="text-justify px-8 font-medium">
+          <!-- <p class="text-justify px-1 font-base text-lg font-serif mb-6"> -->
+            <p class="text-base leading-8 text-center font-semibold mb-10">
             There are numerous mental problems affecting the people in modern
             society, including fear, false egos, anxiety, comparisons,
             competitions, peer pressure and stressful work environment. Mental