style: sticky navbar (#685)

## Closes: #684

### Describe the changes you've made

- Made the navbar sticky with blur effect 

## Type of change

What sort of change have you made:

<!--
Example how to mark a checkbox:-
- [x] My code follows the code style of this project.
-->

- [ x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Code style update (formatting, local variables)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update.
- [ ] This change requires a documentation update



## Checklist

<!--
Example how to mark a checkbox:-
- [x] My code follows the code style of this project.
-->

- [x ] My code follows the guidelines of this project.
- [x ] I have performed a self-review of my own code.
- [ x] I have commented on my code, particularly wherever it was hard to
understand.
- [x ] I have made corresponding changes to the documentation.
- [x ] My changes generate no new warnings.
- [ ] I have added tests that prove my fix is effective or that my
feature works.
- [ ] Any dependent changes have been merged and published in downstream
modules.

## Screenshots (if applicable)

## Code of Conduct

- [ x] I agree to follow this project's [Code of
Conduct](https://github.com/amanjaiman1/Product_3D/blob/main/CODE_OF_CONDUCT.md)

src/containers/Header/Navbar.jsx

@@ -17,7 +17,9 @@ const Navbar = () => {
     navbar.classList.toggle("sticky", this.scrollY > 0);
   });
   return (
-    <nav className={`flex justify-between items-center h-[90px] mb-5 p-5 `}>
+    <nav
+      className={`flex justify-between items-center h-[90px] mb-5 p-5  top-0 sticky bg-black bg-opacity-40 z-20 backdrop-blur-md`}
+    >
       {/* ... Your existing code ... */}
       <div className="flex justify-start ml-6">
         <Link to="/">