language switch functionality added

public/css/header.css

@@ -10,7 +10,7 @@ header {
     left: 0;
     right: 0;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: var(--theme-transition), transform 0.7s var(--transition-timing), box-shadow 0.7s var(--transition-timing);
+    transition: var(--theme-transition);
     transform: var(--gpu-accelerated);
     padding-left: var(--safe-area-inset-left);
     padding-right: var(--safe-area-inset-right);
@@ -51,6 +51,13 @@ header {
     padding-top: var(--space-md);
 }
 
+.nav-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-left: var(--space-lg);
+}
+
 .nav-menu a {
     color: var(--text);
     text-decoration: none;
@@ -100,7 +107,6 @@ header {
     position: relative;
     width: calc(var(--space-xl) * 1.25);
     height: calc(var(--space-xl) * 1.25);
-    margin-left: var(--space-sm);
 }
 
 .theme-toggle:hover {
@@ -157,3 +163,40 @@ header {
     cursor: pointer;
     padding: var(--space-sm);
 }
+
+/* Mobile Menu Adjustments */
+@media (max-width: 768px) {
+    .mobile-menu-toggle {
+        display: block;
+    }
+
+    .nav-menu {
+        display: none;
+        position: fixed;
+        top: var(--header-height);
+        left: 0;
+        right: 0;
+        background: var(--bg-card);
+        padding: var(--space-xl) var(--space-md);
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-lg);
+    }
+
+    .nav-menu.active {
+        display: flex;
+    }
+
+    .nav-controls {
+        flex-direction: row;
+        gap: var(--space-md);
+        margin: var(--space-md) 0;
+        padding-top: var(--space-md);
+        border-top: 1px solid var(--border-color);
+    }
+
+    .nav-menu a {
+        width: 100%;
+        text-align: center;
+    }
+}