fix: header nav style

src/components/Blocks/Content/index.tsx

@@ -7,7 +7,7 @@ export function ContentBlock(props: any) {
     <div className="container relative">
       <div className="row">
         {/* Content */}
-        <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+        <div className="col-md-10 offset-md-1 col-lg-10 offset-lg-1">
           {/* Post */}
           <div className="blog-item mb-10">
             <div className="blog-item-body">

src/components/Blogs/BlogDetail.tsx

@@ -100,7 +100,7 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
         <div className="container relative">
           <div className="row">
             {/* Content */}
-            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+            <div className="col-md-10 offset-md-1 col-lg-10 offset-lg-1">
               {/* Post */}
               <div className="blog-item mb-80 mb-xs-40">
                 <div className="blog-item-body">
@@ -133,7 +133,7 @@ export function BlogDetailContentSkeleton() {
       <div className="container relative">
         <div className="row">
           {/* Content */}
-          <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+          <div className="col-md-10 offset-md-1 col-lg-10 offset-lg-1">
             {/* Post */}
             <div className="blog-item mb-80 mb-xs-40">
               <div className="blog-item-body">

src/components/Header.tsx

@@ -41,20 +41,13 @@ export default function Header({ links }: { links: typeof navMenuData }) {
   return (
     <nav className="main-nav dark stick-fixed wow-menubar wch-unset relative">
       <div className="main-nav-sub full-wrapper">
-        <div className="nav-logo-wrap local-scroll">
+        <div className="nav-logo-wrap local-scroll lg:hidden">
           <Link href={`/`} className="logo">
             <Image
               src="/assets/images/demo-slick/logo-dark.webp"
-              alt="Your Company Logo"
-              width={500}
-              height={195}
-              className="light-mode-logo"
-            />
-            <Image
-              src="/assets/images/demo-slick/logo-dark.webp"
-              alt="Your Company Logo"
-              width={500}
-              height={195}
+              alt="Company Logo"
+              width={250}
+              height={150}
               className="dark-mode-logo"
             />
           </Link>
@@ -67,29 +60,41 @@ export default function Header({ links }: { links: typeof navMenuData }) {
         {/* Main Menu */}
         <div className="inner-nav desktop-nav">
           <ul className="clearlist local-scroll">
+            <li className="!hidden lg:!block">
+              <Link href={`/`} className="logo">
+                <Image
+                  src="/assets/images/demo-slick/logo-dark.webp"
+                  alt="Company Logo"
+                  width={165}
+                  height={100}
+                  className="dark-mode-logo"
+                />
+              </Link>
+            </li>
             <HeaderNav links={links} />
-          </ul>
-
-          <ul className="items-end flex flex-col justify-center h-full">
+            <li>
               <div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
+                <div className="flex justify-center">
                   <a
                     href="/contact"
-                className="bg-extColorPrimary6 hover:bg-extColorPrimary8 px-3 py-2 rounded-full text-white font-semibold hover:cursor-pointer hover:scale-[1.15] mt-3 lg:mt-0 transition-all duration-300"
+                    className="bg-extColorPrimary6 hover:bg-extColorPrimary8 px-4 py-2 rounded-full text-white font-semibold hover:cursor-pointer hover:scale-[1.15] mt-3 lg:mt-0 transition-all duration-300"
                   >
                     REQUEST CONSULTATION
                   </a>
+                </div>
                 <div className="flex justify-between w-full flex-col lg:flex-row">
                   {Object.keys(shareIcons).map((k, idx) => {
                     return (
-                    <li key={idx} className="!p-0 !m-0">
+                      <div key={idx} className="!p-0 !m-0">
                         <a className="cursor-pointer text-white" href={shareIcons[k].link} target="_blank">
                           {shareIcons[k].dom}
                         </a>
-                    </li>
+                      </div>
                     );
                   })}
                 </div>
               </div>
+            </li>
           </ul>
         </div>
 

src/components/HeaderNav.tsx

@@ -125,7 +125,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
           </li>
           {index != links.length - 1 && (
             <div
-              className="text-white bg-white h-[1px] md:h-[25px] mx-2 opacity-[0.3]"
+              className="text-white bg-white h-[1px] lg:h-[25px] mx-2 opacity-[0.3]"
               style={{ border: "1px solid white" }}
             />
           )}