fix: menu dropdown header font size (#2384)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context. List any dependencies that
are required for this change.

Fixes #2379 

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce.

- [x] Manual Test

# Screenshots / Screen recording
**BEFORE:**

![image](https://github.com/zesty-io/website/assets/70579069/89b79127-06b6-4663-9973-d98ebe7bedee)

**FIXED:** 
![Screenshot 2024-02-28
191433](https://github.com/zesty-io/website/assets/70579069/6da01324-da23-4c07-98d5-e9d41d1d491d)

---------

Co-authored-by: root <[email protected]>

src/layouts/Main/components/Topbar/components/NavItem/LeftGridLinks.js

@@ -29,20 +29,21 @@ const LeftGridLinks = ({ route }) => {
         {/* Header */}
         <Typography
           variant="caption"
-          component="p"
+          component="h6"
           sx={{
             color: theme.palette.zesty.zestyLightGrey,
             fontWeight: 'bold',
             mb: 2,
             height: 20,
+            fontSize: '16px',
           }}
         >
           {route?.column_one_title || ''}
         </Typography>
 
         <Box
           sx={{
-            mt: 4,
+            mt: 6,
             display: 'flex',
             flexDirection: 'column',
             gap: 4,
@@ -58,13 +59,14 @@ const LeftGridLinks = ({ route }) => {
         {(route?.column_two_title || !isSmall) && (
           <Typography
             variant="caption"
-            component="p"
+            component="h6"
             sx={{
               color: theme.palette.zesty.zestyLightGrey,
               fontWeight: 'bold',
               mt: isSmall && 5,
               mb: 2,
               height: 20,
+              fontSize: '16px',
             }}
           >
             {route?.column_two_title || ''}
@@ -73,7 +75,7 @@ const LeftGridLinks = ({ route }) => {
 
         <Box
           sx={{
-            mt: 4,
+            mt: 6,
             display: 'flex',
             flexDirection: 'column',
             gap: 4,

src/layouts/Main/components/Topbar/components/NavItem/RightGridLinks.js

@@ -28,13 +28,14 @@ const RightGridLinks = ({ route }) => {
     <>
       <Typography
         variant="caption"
-        component="p"
+        component="h6"
         sx={{
           mt: 2,
           color: theme.palette.zesty.zestyLightGrey,
           fontWeight: 'bold',
-          mb: 2,
+          mb: 4,
           height: 20,
+          fontSize: '16px',
         }}
       >
         {route?.column_three_title || ''}