Улучшил мобильное меню и модальное окно

assets/css/main.css

@@ -317,19 +317,27 @@ a:hover {
 
 .mobile-menu-toggle {
     display: none;
-    flex-direction: column;
     background: none;
     border: none;
     cursor: pointer;
-    padding: 5px;
+    padding: 8px;
-    gap: 4px;
+    font-size: 1.5rem;
+    color: var(--text-dark);
+    transition: var(--transition);
+    line-height: 1;
+}
+
+.mobile-menu-toggle i {
+    transition: var(--transition);
+    display: inline-block;
+}
+
+.mobile-menu-toggle.active i {
+    transform: rotate(90deg);
 }
 
 .mobile-menu-toggle span {
-    width: 25px;
+    display: none;
-    height: 3px;
-    background-color: var(--text-dark);
-    transition: var(--transition);
 }
 
 /* Hero Section */
@@ -658,7 +666,9 @@ a:hover {
     font-size: 1.5rem;
     color: var(--text-light);
     cursor: pointer;
-    padding: 0.5rem;
+    width: 40px;
+    height: 40px;
+    padding: 0;
     border-radius: 50%;
     transition: var(--transition);
     flex-shrink: 0;
@@ -666,6 +676,9 @@ a:hover {
     top: 1rem;
     right: 1rem;
     z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .modal-close:hover {

assets/js/main.js

@@ -52,17 +52,16 @@ function initMobileMenu() {
     if (mobileMenuToggle && navbarMenu) {
         mobileMenuToggle.addEventListener('click', function() {
             navbarMenu.classList.toggle('active');
+            mobileMenuToggle.classList.toggle('active');
             
-            // Animate hamburger menu
+            // Toggle hamburger/close icon
-            const spans = mobileMenuToggle.querySelectorAll('span');
+            const icon = mobileMenuToggle.querySelector('i');
             if (navbarMenu.classList.contains('active')) {
-                spans[0].style.transform = 'rotate(45deg) translateY(7px)';
+                icon.classList.remove('fa-bars');
-                spans[1].style.opacity = '0';
+                icon.classList.add('fa-times');
-                spans[2].style.transform = 'rotate(-45deg) translateY(-7px)';
             } else {
-                spans[0].style.transform = 'none';
+                icon.classList.remove('fa-times');
-                spans[1].style.opacity = '1';
+                icon.classList.add('fa-bars');
-                spans[2].style.transform = 'none';
             }
         });
         
@@ -70,10 +69,10 @@ function initMobileMenu() {
         navLinks.forEach(link => {
             link.addEventListener('click', () => {
                 navbarMenu.classList.remove('active');
-                const spans = mobileMenuToggle.querySelectorAll('span');
+                mobileMenuToggle.classList.remove('active');
-                spans[0].style.transform = 'none';
+                const icon = mobileMenuToggle.querySelector('i');
-                spans[1].style.opacity = '1';
+                icon.classList.remove('fa-times');
-                spans[2].style.transform = 'none';
+                icon.classList.add('fa-bars');
             });
         });
         
@@ -81,10 +80,10 @@ function initMobileMenu() {
         document.addEventListener('click', function(e) {
             if (!navbarMenu.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
                 navbarMenu.classList.remove('active');
-                const spans = mobileMenuToggle.querySelectorAll('span');
+                mobileMenuToggle.classList.remove('active');
-                spans[0].style.transform = 'none';
+                const icon = mobileMenuToggle.querySelector('i');
-                spans[1].style.opacity = '1';
+                icon.classList.remove('fa-times');
-                spans[2].style.transform = 'none';
+                icon.classList.add('fa-bars');
             }
         });
     }

index.html

@@ -98,9 +98,7 @@
                 </div>
                 
                 <button class="mobile-menu-toggle" id="mobile-menu-toggle">
-                    <span></span>
+                    <i class="fas fa-bars"></i>
-                    <span></span>
-                    <span></span>
                 </button>
             </div>
         </nav>