make the three lines spin when i click on it

index.html

@@ -56,9 +56,11 @@
                 <a href="#about" class="hover:text-accent transition">About</a>
                 <a href="#contact" class="hover:text-accent transition">Contact</a>
             </div>
-            <button class="md:hidden" id="mobile-menu-button">
-                <i data-feather="menu" class="w-6 h-6"></i>
-            </button>
+        <button class="md:hidden hamburger" id="mobile-menu-button">
+            <div class="hamburger-line w-6 h-0.5 bg-white mb-1.5"></div>
+            <div class="hamburger-line w-6 h-0.5 bg-white mb-1.5"></div>
+            <div class="hamburger-line w-6 h-0.5 bg-white"></div>
+        </button>
 </div>
     </nav>
 
@@ -391,17 +393,32 @@
             <a href="#" class="block text-xl text-white hover:text-accent transition py-2" onclick="hideMobileMenu()">Home</a>
         </div>
     </div>
-<script>
+    <style>
+        .hamburger-line {
+            transition: transform 0.3s ease;
+        }
+        .hamburger.active .hamburger-line:nth-child(1) {
+            transform: translateY(8px) rotate(45deg);
+        }
+        .hamburger.active .hamburger-line:nth-child(2) {
+            opacity: 0;
+        }
+        .hamburger.active .hamburger-line:nth-child(3) {
+            transform: translateY(-8px) rotate(-45deg);
+        }
+    </style>
+    <script>
         feather.replace();
         
         const mobileMenuButton = document.getElementById('mobile-menu-button');
         const mobileMenu = document.getElementById('mobile-menu');
+        const hamburger = document.querySelector('.hamburger');
         function toggleMobileMenu() {
             mobileMenu.classList.toggle('hidden');
+            hamburger.classList.toggle('active');
             document.body.style.overflow = mobileMenu.classList.contains('hidden') ? 'auto' : 'hidden';
         }
-        
-        function hideMobileMenu() {
+function hideMobileMenu() {
             mobileMenu.classList.add('hidden');
             document.body.style.overflow = 'auto';
         }