updated the tabs location in the varnmala page

Author: Ciphrox

src/assets/styles/varnmala.css

@@ -1,41 +1,39 @@
-.container__varnmala {
-  & .tabs {
-    position: sticky;
-    top: var(--header-height);
-    z-index: 10;
-    padding: 1rem;
-    width: fit-content;
-    border: 1px solid var(--border);
-    border-radius: 1rem;
-    background: var(--background);
-    display: flex;
-    gap: 1rem;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  }
+.tabs {
+  z-index: 10;
+  width: fit-content;
+  border: 1px solid var(--border);
+  border-radius: 1rem;
+  background: var(--background);
+  display: flex;
+  gap: 1rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
 
-  & .tab {
-    padding: 0.5rem 2rem;
-    font-size: 1.2rem;
-    border-bottom: 2px solid transparent;
-    transition: all 0.2s ease;
-    position: relative;
-    background: var(--background-alt);
-    border-radius: 0.5rem;
+.tab {
+  padding: 0.5rem 2rem;
+  font-size: 1.2rem;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+  position: relative;
+  background: var(--background-alt);
+  border-radius: 0.5rem;
 
-    &:hover {
-      background: var(--background-hover);
-    }
+  &:hover {
+    background: var(--background-hover);
   }
+}
 
-  & .tab.active {
-    color: var(--primary);
-    border-bottom-color: var(--primary);
-    background: var(--primary);
-    color: var(--background);
-  }
+.tab.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+  background: var(--primary);
+  color: var(--background);
+}
+
+.container__varnmala {
 
   #english,
   & #hindi {
     scroll-margin-top: calc(var(--header-height) + 80px);
   }
-}
+}

src/pages/varnmala.astro

@@ -8,17 +8,18 @@ import { varnmala_english, varnmala_hindi } from "@/utils/common";
 
 <BaseLayout meta={{ title: "Alphabets" }}>
   <Fragment slot="header-right">
+    <nav class="tabs">
+      <button class="tab active" data-target="english">English</button>
+      <button class="tab" data-target="hindi">Hindi</button>
+    </nav>
     <Help
       title="Varnmala"
       description="Varnmala is a collection of alphabets in Hindi and English. It is used to teach kids the basics of language."
     />
   </Fragment>
 
   <article class="container__varnmala">
-    <nav class="tabs">
-      <button class="tab active" data-target="english">English</button>
-      <button class="tab" data-target="hindi">Hindi</button>
-    </nav>
+   
     <div id="english">
       <Alphabet list={varnmala_english} title="English" />
     </div>