From 70300bdc3f365fc3ec48cc1404bf4ab91a3cd892 Mon Sep 17 00:00:00 2001
From: kalyaniugale <kalyaniugale24@email.com>
Date: Mon, 22 Sep 2025 21:02:02 +0530
Subject: [PATCH 1/2] removed logins from all pages

---
 about.html           |  10 +-
 assets/css/about.css |   2 +-
 contact.html         |  37 +---
 convert.html         | 144 +--------------
 customize.html       | 134 +-------------
 faq.html             | 105 +----------
 feedback.html        |  96 +---------
 helpcenter.html      |  62 +------
 index.html           | 410 ++-----------------------------------------
 privacypolicy.html   |  76 +-------
 reportissue.html     | 100 +----------
 scale.html           | 138 +--------------
 12 files changed, 52 insertions(+), 1262 deletions(-)

diff --git a/about.html b/about.html
index 2007cf0..c2efe67 100644
--- a/about.html
+++ b/about.html
@@ -133,14 +133,8 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+      
+          
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
diff --git a/assets/css/about.css b/assets/css/about.css
index 9c0480c..124d85d 100644
--- a/assets/css/about.css
+++ b/assets/css/about.css
@@ -2392,7 +2392,7 @@ body.about-page.dark-mode li {
             .social-links {
                 justify-content: center;
             }
-        }
+        
 
         @media (max-width: 1024px) {
             .footer-content {
diff --git a/contact.html b/contact.html
index 1108217..c92280e 100644
--- a/contact.html
+++ b/contact.html
@@ -173,37 +173,9 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color: #d18a68;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
+        
+       
+        
 
         .hamburger {
             display: none;
@@ -849,9 +821,6 @@
             <div class="nav-actions">
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode"><i
                         class="fas fa-moon"></i></button>
-                <a href="#" class="login-btn" id="openLoginModal"><i class="fas fa-user"></i>Login</a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;"><i
-                        class="fas fa-sign-out-alt"></i>Logout</a>
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span><span></span><span></span>
diff --git a/convert.html b/convert.html
index d16f772..00f1908 100644
--- a/convert.html
+++ b/convert.html
@@ -496,47 +496,10 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px #402a26;
-            border: 2px solid transparent;
-        }
+        
+        
 
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #624844;
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-        }
-
-        body.dark-mode .login-btn {
-            background: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
+       
 
         .hamburger {
             display: none;
@@ -644,10 +607,6 @@
                 z-index: 1001;
             }
 
-            .login-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-            }
 
             .dark-mode-btn {
                 width: 40px;
@@ -688,10 +647,7 @@
                 gap: 0.3rem;
             }
 
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
+            
 
             .dark-mode-btn {
                 width: 35px;
@@ -768,50 +724,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-
-            background-color: #5C4033;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #cf622f;
-            background-color:#5C4033;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
+        
 
         /* Dark Mode Styles for Content */
         body.dark-mode .input-label {
@@ -888,10 +801,7 @@
                 gap: 0.3rem;
             }
 
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
+            
 
             .dark-mode-btn {
                 width: 35px;
@@ -1441,14 +1351,7 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
@@ -1932,38 +1835,7 @@ <h3 class="footer-title">Support</h3>
         });
 
 
-        // Function to update login state
-        function updateLoginState() {
-            const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
-            const loginBtn = document.getElementById("openLoginModal");
-            const logoutBtn = document.getElementById("logoutBtn");
-
-            if (isLoggedIn) {
-                loginBtn.style.display = "none";
-                logoutBtn.style.display = "flex";
-            } else {
-                loginBtn.style.display = "flex";
-                logoutBtn.style.display = "none";
-            }
-        }
-
-        // Logout functionality
-        const logoutBtn = document.getElementById("logoutBtn");
-        if (logoutBtn) {
-            logoutBtn.addEventListener("click", (e) => {
-                e.preventDefault();
-                localStorage.removeItem("isLoggedIn");
-                localStorage.removeItem("currentUser");
-                updateLoginState();
-                alert("You have been logged out successfully!");
-            });
-        }
-
-        // Check login state on page load
-        document.addEventListener("DOMContentLoaded", () => {
-            updateLoginState();
-        });
-
+        
         // Add some sample data for demo purposes
         document.addEventListener('DOMContentLoaded', function () {
             // Add floating animation to page elements
diff --git a/customize.html b/customize.html
index 5177c67..16ea0aa 100644
--- a/customize.html
+++ b/customize.html
@@ -265,48 +265,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px #402a26;
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #624844;
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-        }
-
-        body.dark-mode .login-btn {
-            background: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
+        
         .hamburger {
             display: none;
             flex-direction: column;
@@ -421,48 +380,6 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color:#5C4033;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #cf622f;
-            background-color:#5C4033;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
 
         .hamburger {
             display: none;
@@ -570,10 +487,7 @@
                 z-index: 1001;
             }
 
-            .login-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-            }
+           
 
             .dark-mode-btn {
                 width: 40px;
@@ -614,10 +528,6 @@
                 gap: 0.3rem;
             }
 
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
 
             .dark-mode-btn {
                 width: 35px;
@@ -1432,14 +1342,6 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
@@ -1837,37 +1739,7 @@ <h3 class="footer-title">Support</h3>
             document.querySelector(`[data-brand="${savedBrand}"]`)?.classList.add('selected');
         }
         
-        // Function to update login state
-        function updateLoginState() {
-            const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
-            const loginBtn = document.getElementById("openLoginModal");
-            const logoutBtn = document.getElementById("logoutBtn");
-            
-            if (isLoggedIn) {
-                loginBtn.style.display = "none";
-                logoutBtn.style.display = "flex";
-            } else {
-                loginBtn.style.display = "flex";
-                logoutBtn.style.display = "none";
-            }
-        }
-
-        // Logout functionality
-        const logoutBtn = document.getElementById("logoutBtn");
-        if (logoutBtn) {
-            logoutBtn.addEventListener("click", (e) => {
-                e.preventDefault();
-                localStorage.removeItem("isLoggedIn");
-                localStorage.removeItem("currentUser");
-                updateLoginState();
-                alert("You have been logged out successfully!");
-            });
-        }
-
-        // Check login state on page load
-        document.addEventListener("DOMContentLoaded", () => {
-            updateLoginState();
-        });
+        
 
         // Initialize page
         document.addEventListener('DOMContentLoaded', () => {
diff --git a/faq.html b/faq.html
index e463db0..8040817 100644
--- a/faq.html
+++ b/faq.html
@@ -243,48 +243,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px #402a26;
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #624844;
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-        }
-
-        body.dark-mode .login-btn {
-            background: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
+        
         .hamburger {
             display: none;
             flex-direction: column;
@@ -398,48 +357,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color: #5C4033;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #cf622f;
-            background-color: #5C4033;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
+        
 
         .hamburger {
             display: none;
@@ -922,10 +840,7 @@
                 z-index: 1001;
             }
 
-            .login-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-            }
+           
 
             .dark-mode-btn {
                 width: 40px;
@@ -966,11 +881,6 @@
                 gap: 0.3rem;
             }
 
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
-
             .dark-mode-btn {
                 width: 35px;
                 height: 35px;
@@ -1091,14 +1001,7 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
diff --git a/feedback.html b/feedback.html
index 38436e4..40bd986 100644
--- a/feedback.html
+++ b/feedback.html
@@ -193,49 +193,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color: #d18a68;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #d18a68;
-            background-color: #d18a68;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
+        
         .hamburger {
             display: none;
             flex-direction: column;
@@ -319,7 +277,7 @@
             margin-bottom: 1rem;
         }
         body.dark-mode .feedback-title{
-            ont-size: 3rem;
+            font-size: 3rem;
             font-weight: 700;
             background: #e0e0e0;
             -webkit-background-clip: text;
@@ -970,14 +928,7 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
@@ -1337,46 +1288,7 @@ <h3 class="footer-title">Support</h3>
             }, 1500);
         });
 
-        // Login functionality (basic implementation)
-        const loginBtn = document.getElementById('openLoginModal');
-        const logoutBtn = document.getElementById('logoutBtn');
-
-        // Check if user is logged in
-        function updateLoginState() {
-            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-            if (isLoggedIn) {
-                loginBtn.style.display = 'none';
-                logoutBtn.style.display = 'flex';
-            } else {
-                loginBtn.style.display = 'flex';
-                logoutBtn.style.display = 'none';
-            }
-        }
-
-        // Simple login (just for demo)
-        loginBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            const username = prompt('Enter username:');
-            if (username) {
-                localStorage.setItem('isLoggedIn', 'true');
-                localStorage.setItem('currentUser', username);
-                updateLoginState();
-                alert(`Welcome, ${username}!`);
-            }
-        });
-
-        // Logout functionality
-        logoutBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            localStorage.removeItem('isLoggedIn');
-            localStorage.removeItem('currentUser');
-            updateLoginState();
-            alert('You have been logged out successfully!');
-        });
-
-        // Initialize login state
-        updateLoginState();
-
+       
         // Auto-fill user name if logged in
         document.addEventListener('DOMContentLoaded', () => {
             const currentUser = localStorage.getItem('currentUser');
diff --git a/helpcenter.html b/helpcenter.html
index 0344105..080676e 100644
--- a/helpcenter.html
+++ b/helpcenter.html
@@ -236,48 +236,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color:#5C4033;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #cf622f;
-            background-color:#5C4033;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
+        
 
         .hamburger {
             display: none;
@@ -362,10 +321,7 @@
                 z-index: 1001;
             }
 
-            .login-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-            }
+            
 
             .dark-mode-btn {
                 width: 40px;
@@ -405,10 +361,7 @@
                 gap: 0.3rem;
             }
 
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
+           
 
             .dark-mode-btn {
                 width: 35px;
@@ -877,14 +830,7 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
diff --git a/index.html b/index.html
index 54b933c..7c949e6 100644
--- a/index.html
+++ b/index.html
@@ -338,81 +338,9 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow:  0 4px 15px  #402a26;
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #624844;
-            background-color:linear-gradient(90deg, #543732, #3d2b28, #341d19);
-        }
-
-        body.dark-mode .login-btn {
-            background: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
-        .signup-btn {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px  #402a26;
-            border: 2px solid transparent;
-        }
-
-        .signup-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #624844;
-            background:linear-gradient(90deg, #543732, #3d2b28, #341d19);
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .signup-btn {
-            background:linear-gradient(90deg, #543732, #3d2b28, #341d19);
-            box-shadow: 0 4px 15px  #402a26;
-        }
-
-        body.dark-mode .signup-btn:hover {
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-            box-shadow: 0 8px 25px #402a26;
-        }
+        
 
+        
         /* Dark mode base */
         body.dark-mode {
         background: #3b3b3b;
@@ -432,28 +360,7 @@
 
         }
 
-        /* Dark mode for login button */
-        body.dark-mode .login-btn {
-            background: #e0e0e0;
-            color: #0d0d0d;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
-        body.dark-mode .login-btn:hover {
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
-        /* Dark mode for signup button */
-        body.dark-mode .signup-btn {
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-            box-shadow: 0 4px 15px #402a26;
-        }
-
-        body.dark-mode .signup-btn:hover {
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-            box-shadow: 0 8px 25px #402a26;
-        }
+        
 
 
         .hamburger {
@@ -639,11 +546,7 @@
                 z-index: 1001;
             }
 
-            .login-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-            }
-
+            
             .dark-mode-btn {
                 width: 40px;
                 height: 40px;
@@ -683,10 +586,7 @@
                 gap: 0.3rem;
             }
 
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
+           
 
             .dark-mode-btn {
                 width: 35px;
@@ -1334,21 +1234,7 @@
   }
 }
 
-        /* Login Modal */
-        #loginModal {
-            display: flex;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(5, 4, 4, 0.715);
-            backdrop-filter: blur(5px);
-            z-index: 2000;
-            align-items: center;
-            justify-content: center;
-        }
-
+        
         .modal-content {
             background: white;
             border-radius: 20px;
@@ -1623,9 +1509,6 @@
 }
 
 /* Hidden by default - remove this line to show the modal */
-#loginModal {
-    display: flex; /* Changed from none to flex for demo */
-}
 
     </style>
 </head>
@@ -1684,14 +1567,7 @@ <h2>Baking Mode On<span class="dots"></span></h2>
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
@@ -1824,111 +1700,7 @@ <h3 class="footer-title">Support</h3>
         </div>
     </footer>
 
-    <div id="loginModal">
-        <div class="modal-content">
-            <button class="close-btn" id="closeLoginModal">&times;</button>
-            
-            <h2 class="form-title">Welcome Back</h2>
-            
-            <div class="form-container">
-                <!-- Login Form -->
-                <form id="loginForm">
-                    <div class="input-group">
-                        <div class="input-wrapper">
-                            <i class="fa-regular fa-user input-icon"></i>
-                            <input 
-                                type="text" 
-                                id="loginUsername" 
-                                class="form-input"
-                                placeholder="Username" 
-                                required
-                            />
-                        </div>
-                    </div>
-                    
-                    <div class="input-group">
-                        <div class="input-wrapper">
-                            <i class="fa-solid fa-lock input-icon"></i>
-                            <input 
-                                type="password" 
-                                id="loginPassword" 
-                                class="form-input"
-                                placeholder="Password" 
-                                required
-                            />
-                            <button type="button" class="password-toggle" onclick="togglePassword('loginPassword')">
-                                <i class="fa-regular fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <button type="submit" class="submit-btn">
-                        Login
-                    </button>
-                </form>
-
-                <!-- Sign-Up Form -->
-                <form id="signUpForm" style="display: none;">
-                    <div class="input-group">
-                        <div class="input-wrapper">
-                            <i class="fa-regular fa-user input-icon"></i>
-                            <input 
-                                type="text" 
-                                id="signUpUsername" 
-                                class="form-input"
-                                placeholder="New Username" 
-                                required
-                            />
-                        </div>
-                    </div>
-                    
-                    <div class="input-group">
-                        <div class="input-wrapper">
-                            <i class="fa-solid fa-lock input-icon"></i>
-                            <input 
-                                type="password" 
-                                id="signUpPassword" 
-                                class="form-input"
-                                placeholder="New Password" 
-                                required
-                            />
-                            <button type="button" class="password-toggle" onclick="togglePassword('signUpPassword')">
-                                <i class="fa-regular fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div class="input-group">
-                        <div class="input-wrapper">
-                            <i class="fa-solid fa-lock-open input-icon"></i>
-                            <input 
-                                type="password" 
-                                id="confirmPassword" 
-                                class="form-input"
-                                placeholder="Confirm Password" 
-                                required
-                            />
-                            <button type="button" class="password-toggle" onclick="togglePassword('confirmPassword')">
-                                <i class="fa-regular fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <!-- Error message for password mismatch in Sign-Up -->
-                    <div id="signUpError" style="color:red; font-size:14px; display:none;"></div>
-
-                    <button type="submit" class="submit-btn signup-btn" style="text-align: center;" >
-                        Sign Up
-                    </button>
-                </form>
-                
-                <div class="toggle-form">
-                    <span id="toggleText">Don't have an account?</span>
-                    <span class="toggle-link" id="toggleForm">Sign Up</span>
-                </div>
-            </div>
-        </div>
-    </div>
+   
     <script>
         // Dark Mode Toggle
         const darkModeToggle = document.getElementById("darkModeToggle");
@@ -2050,172 +1822,10 @@ <h2 class="form-title">Welcome Back</h2>
             });
         });
 
-        // Login/Sign-Up Modal Logic
-        const loginModal = document.getElementById("loginModal");
-        const openLoginModal = document.getElementById("openLoginModal");
-        const closeLoginModal = document.getElementById("closeLoginModal");
-        const loginForm = document.getElementById("loginForm");
-        const signUpForm = document.getElementById("signUpForm");
-        const toggleForm = document.getElementById("toggleForm");
-        const modalTitle = document.getElementById("modalTitle");
-        const formError = document.getElementById("formError");
+        
 
         // Open Modal
-        openLoginModal.addEventListener("click", (e) => {
-            e.preventDefault();
-            loginModal.style.display = "flex";
-            loginForm.style.display = "block";
-            signUpForm.style.display = "none";
-            modalTitle.textContent = "Login";
-            toggleForm.textContent = "Don't have an account? Sign Up";
-            formError.style.display = "none";
-        });
-
-        // Close Modal
-        closeLoginModal.addEventListener("click", () => {
-            loginModal.style.display = "none";
-        });
-
-        /// Toggle between login and signup
-        document.getElementById('toggleForm').addEventListener('click', function() {
-            const loginForm = document.getElementById('loginForm');
-            const signUpForm = document.getElementById('signUpForm');
-            const toggleText = document.getElementById('toggleText');
-            const toggleLink = document.getElementById('toggleForm');
-            const formTitle = document.querySelector('.form-title');
-            
-            if (loginForm.style.display !== 'none') {
-                // Switch to Sign Up
-                loginForm.style.display = 'none';
-                signUpForm.style.display = 'block';
-                toggleText.textContent = 'Already have an account?';
-                toggleLink.textContent = 'Login';
-                formTitle.textContent = 'Create Account';
-            } else {
-                // Switch to Login
-                loginForm.style.display = 'block';
-                signUpForm.style.display = 'none';
-                toggleText.textContent = 'Don\'t have an account?';
-                toggleLink.textContent = 'Sign Up';
-                formTitle.textContent = 'Welcome Back';
-            }
-        });
-
-        // Toggle password visibility
-        function togglePassword(inputId) {
-            const passwordInput = document.getElementById(inputId);
-            const toggleIcon = passwordInput.parentElement.querySelector('.password-toggle i');
-            
-            if (passwordInput.type === 'password') {
-                passwordInput.type = 'text';
-                toggleIcon.className = 'fa-regular fa-eye-slash';
-            } else {
-                passwordInput.type = 'password';
-                toggleIcon.className = 'fa-regular fa-eye';
-            }
-        }
-
-
-        // Handle Login Form Submission
-        loginForm.addEventListener("submit", (e) => {
-            e.preventDefault();
-            const username = document.getElementById("loginUsername").value;
-            const password = document.getElementById("loginPassword").value;
-
-            // Retrieve users from localStorage
-            const users = JSON.parse(localStorage.getItem("users")) || {};
-
-            // Check if the user exists and the password matches
-            if (users[username] && users[username] === password) {
-                alert(`Welcome back, ${username}!`);
-                loginModal.style.display = "none";
-
-                // Set login state
-                localStorage.setItem("isLoggedIn", "true");
-                localStorage.setItem("currentUser", username);
-                updateLoginState();
-            } else {
-                formError.textContent = "Invalid username or password.";
-                formError.style.display = "block";
-            }
-        });
-
-        // Get the signup-specific error element
-        const signUpError = document.getElementById("signUpError");
-
-        // Handle Sign-Up Form Submission
-        signUpForm.addEventListener("submit", (e) => {
-            e.preventDefault();
-            const username = document.getElementById("signUpUsername").value;
-            const password = document.getElementById("signUpPassword").value;
-            const confirmPassword =
-                document.getElementById("confirmPassword").value;
-
-            // Validate passwords match
-            if (password !== confirmPassword) {
-                signUpError.textContent = "Passwords do not match.";
-                signUpError.style.display = "block";
-                return;
-            }   else {
-                signUpError.style.display = "none"; // hide warning if fixed
-            }
-
-
-            // Retrieve users from localStorage
-            const users = JSON.parse(localStorage.getItem("users")) || {};
-
-            // Check if the username already exists
-            if (users[username]) {
-                signUpError.textContent = "Username already exists.";
-                signUpError.style.display = "block";
-            } else {
-                // Save the new user
-                users[username] = password;
-                localStorage.setItem("users", JSON.stringify(users));
-                alert("Sign-Up successful! You can now log in.");
-                loginForm.style.display = "block";
-                signUpForm.style.display = "none";
-                modalTitle.textContent = "Login";
-                toggleForm.textContent = "Don't have an account? Sign Up";
-                signUpError.style.display = "none";
-            }
-        });
-
-        // Function to update login state
-        function updateLoginState() {
-            const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
-            const loginBtn = document.getElementById("openLoginModal");
-            const logoutBtn = document.getElementById("logoutBtn");
-
-            if (isLoggedIn) {
-                loginBtn.style.display = "none";
-                logoutBtn.style.display = "flex";
-            } else {
-                loginBtn.style.display = "flex";
-                logoutBtn.style.display = "none";
-            }
-        }
-
-        // Logout functionality
-        document.getElementById("logoutBtn").addEventListener("click", (e) => {
-            e.preventDefault();
-            localStorage.removeItem("isLoggedIn");
-            localStorage.removeItem("currentUser");
-            updateLoginState();
-            alert("You have been logged out successfully!");
-        });
-
-        // Check login state on page load
-        document.addEventListener("DOMContentLoaded", () => {
-            updateLoginState();
-        });
-
-        // Close Modal on Outside Click
-        window.addEventListener("click", (e) => {
-            if (e.target === loginModal) {
-                loginModal.style.display = "none";
-            }
-        });
+        
 
         document.addEventListener('visibilitychange', function () {
             if (document.visibilityState === 'visible') {
diff --git a/privacypolicy.html b/privacypolicy.html
index 19a40c5..5c4f998 100644
--- a/privacypolicy.html
+++ b/privacypolicy.html
@@ -184,43 +184,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color: #d18a68;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #d18a68;
-            background-color: #d18a68;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-           background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
+        
        
         
 
@@ -843,14 +807,7 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
@@ -1125,33 +1082,8 @@ <h3 class="footer-title">Support</h3>
             }
         });
 
-        // Login/logout state management (placeholder)
-        const loginBtn = document.getElementById("openLoginModal");
-        const logoutBtn = document.getElementById("logoutBtn");
-
-        // Check login state from localStorage
-        const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
-        if (isLoggedIn) {
-            loginBtn.style.display = "none";
-            logoutBtn.style.display = "flex";
-        }
-
-        // Logout functionality
-        logoutBtn.addEventListener("click", (e) => {
-            e.preventDefault();
-            localStorage.removeItem("isLoggedIn");
-            localStorage.removeItem("currentUser");
-            loginBtn.style.display = "flex";
-            logoutBtn.style.display = "none";
-            alert("You have been logged out successfully!");
-        });
-
-        // Login button click (placeholder - would need to implement full modal)
-        loginBtn.addEventListener("click", (e) => {
-            e.preventDefault();
-            // For demo purposes, just redirect to home page
-            window.location.href = "index.html";
-        });
+        
+        
     </script>
 </body>
 </html>
diff --git a/reportissue.html b/reportissue.html
index 7de8d50..1c98713 100644
--- a/reportissue.html
+++ b/reportissue.html
@@ -322,48 +322,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color: #d18a68;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #d18a68;
-            background-color: #d18a68;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
+        
 
         .hamburger {
             display: none;
@@ -1044,14 +1003,7 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
@@ -1314,53 +1266,7 @@ <h3 class="footer-title">Support</h3>
             }, 1500);
         });
 
-        // Login functionality (basic implementation)
-        const loginBtn = document.getElementById('openLoginModal');
-        const logoutBtn = document.getElementById('logoutBtn');
-
-        // Check if user is logged in
-        function updateLoginState() {
-            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-            if (isLoggedIn) {
-                loginBtn.style.display = 'none';
-                logoutBtn.style.display = 'flex';
-            } else {
-                loginBtn.style.display = 'flex';
-                logoutBtn.style.display = 'none';
-            }
-        }
-
-        // Simple login (just for demo)
-        loginBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            const username = prompt('Enter username:');
-            if (username) {
-                localStorage.setItem('isLoggedIn', 'true');
-                localStorage.setItem('currentUser', username);
-                updateLoginState();
-                alert(`Welcome, ${username}!`);
-            }
-        });
-
-        // Logout functionality
-        logoutBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            localStorage.removeItem('isLoggedIn');
-            localStorage.removeItem('currentUser');
-            updateLoginState();
-            alert('You have been logged out successfully!');
-        });
-
-        // Initialize login state
-        updateLoginState();
-
-        // Auto-fill user name if logged in
-        document.addEventListener('DOMContentLoaded', () => {
-            const currentUser = localStorage.getItem('currentUser');
-            if (currentUser) {
-                document.getElementById('userName').value = currentUser;
-            }
-        });
+        
     </script>
 </body>
 
diff --git a/scale.html b/scale.html
index 2a16c4e..a0d5299 100644
--- a/scale.html
+++ b/scale.html
@@ -222,48 +222,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px #402a26;
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px #624844;
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-        }
-
-        body.dark-mode .login-btn {
-            background: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
-
+        
         .hamburger {
             display: none;
             flex-direction: column;
@@ -346,48 +305,7 @@
             color: #1e1e1e;
         }
 
-        .login-btn {
-            background-color: #d18a68;
-            color: white;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
-            border: 2px solid transparent;
-        }
-
-        .login-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
-            background: #d18a68;
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-
-        body.dark-mode .login-btn {
-            background-color: #e0e0e0;
-            color: #0d0d0d;
-            text-decoration: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 25px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: 0 2px 2px #e0e0e0;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .login-btn:hover {
-            transform: translateY(-3px);
-            background: #e0e0e0;
-            box-shadow: 0 2px 2px #e0e0e0;
-        }
+        
 
 
         /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
@@ -458,11 +376,7 @@
                 z-index: 1001;
             }
 
-            .login-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-            }
-
+           
             .dark-mode-btn {
                 width: 40px;
                 height: 40px;
@@ -502,10 +416,7 @@
                 gap: 0.3rem;
             }
 
-            .login-btn {
-                padding: 0.4rem 0.8rem;
-                font-size: 0.8rem;
-            }
+           
 
             .dark-mode-btn {
                 width: 35px;
@@ -1800,14 +1711,7 @@
                 <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
                     <i class="fas fa-moon"></i>
                 </button>
-                <a href="#" class="login-btn" id="openLoginModal">
-                    <i class="fas fa-user"></i>
-                    Login
-                </a>
-                <a href="#" class="login-btn" id="logoutBtn" style="display: none;">
-                    <i class="fas fa-sign-out-alt"></i>
-                    Logout
-                </a>
+                
             </div>
             <div class="hamburger" id="hamburger">
                 <span></span>
@@ -2339,37 +2243,7 @@ <h3 style="color: #4ECDC4; margin-bottom: 0.5rem;">Scaling Factor: ${scale.toFix
         });
 
 
-        // Function to update login state
-        function updateLoginState() {
-            const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
-            const loginBtn = document.getElementById("openLoginModal");
-            const logoutBtn = document.getElementById("logoutBtn");
-
-            if (isLoggedIn) {
-                loginBtn.style.display = "none";
-                logoutBtn.style.display = "flex";
-            } else {
-                loginBtn.style.display = "flex";
-                logoutBtn.style.display = "none";
-            }
-        }
-
-        // Logout functionality
-        const logoutBtn = document.getElementById("logoutBtn");
-        if (logoutBtn) {
-            logoutBtn.addEventListener("click", (e) => {
-                e.preventDefault();
-                localStorage.removeItem("isLoggedIn");
-                localStorage.removeItem("currentUser");
-                updateLoginState();
-                alert("You have been logged out successfully!");
-            });
-        }
-
-        // Check login state on page load
-        document.addEventListener("DOMContentLoaded", () => {
-            updateLoginState();
-        });
+        
 
         // Add some example recipes on page load
         window.addEventListener('load', function () {

From 42150dfd40d1275d28411b3e9baae93d68857d75 Mon Sep 17 00:00:00 2001
From: kalyaniugale <kalyaniugale24@email.com>
Date: Mon, 22 Sep 2025 21:44:11 +0530
Subject: [PATCH 2/2] resolved conflicts

---
 convert.html | 2451 +++++++++++++------------------------------------
 index.html   | 2468 ++++++++++++++------------------------------------
 2 files changed, 1302 insertions(+), 3617 deletions(-)

diff --git a/convert.html b/convert.html
index 00f1908..02ba2a2 100644
--- a/convert.html
+++ b/convert.html
@@ -1,1380 +1,375 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    
-    <!-- Primary Meta Tags -->
-    <title>Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool</title>
-    <link rel="icon" href="Favicon.png" type="image/x-icon" />
-    <meta name="title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
-    <meta name="description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results. Free recipe conversion tool." />
-    <meta name="keywords" content="recipe converter, baking conversion, cups to grams, recipe scaling, AI recipe tool, baking calculator, convert measurements, precise baking" />
-    <meta name="robots" content="index, follow" />
-    <meta name="language" content="English" />
-    <meta name="author" content="Supriya Pandey" />
-    <meta name="theme-color" content="#3e2723" />
-    
-    <!-- Canonical URL -->
-    <link rel="canonical" href="https://bakegenius-ai.vercel.app/convert.html" />
-    
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://bakegenius-ai.vercel.app/convert.html" />
-    <meta property="og:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
-    <meta property="og:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
-    <meta property="og:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta property="og:site_name" content="BakeGenius.ai" />
-    <meta property="og:locale" content="en_US" />
-    
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://bakegenius-ai.vercel.app/convert.html" />
-    <meta property="twitter:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
-    <meta property="twitter:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
-    <meta property="twitter:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
-    
-    <!-- Additional SEO Meta Tags -->
-    <meta name="application-name" content="BakeGenius.ai" />
-    <meta name="apple-mobile-web-app-title" content="BakeGenius.ai" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="msapplication-TileColor" content="#3e2723" />
-    <meta name="msapplication-tap-highlight" content="no" />
-    
-    <!-- Structured Data -->
-    <script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "WebApplication",
-        "name": "BakeGenius.ai Recipe Converter",
-        "description": "AI-powered recipe conversion tool for precise baking measurements",
-        "url": "https://bakegenius-ai.vercel.app/convert.html",
-        "applicationCategory": "FoodApplication",
-        "operatingSystem": "Web Browser",
-        "offers": {
-            "@type": "Offer",
-            "price": "0",
-            "priceCurrency": "USD"
-        },
-        "featureList": [
-            "Recipe conversion",
-            "Cups to grams conversion",
-            "Recipe scaling",
-            "AI-powered precision",
-            "Custom measurements"
-        ]
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- Primary Meta Tags -->
+  <title>Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool</title>
+  <link rel="icon" href="Favicon.png" type="image/x-icon" />
+  <meta name="title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
+  <meta name="description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results. Free recipe conversion tool." />
+  <meta name="keywords" content="recipe converter, baking conversion, cups to grams, recipe scaling, AI recipe tool, baking calculator, convert measurements, precise baking" />
+  <meta name="robots" content="index, follow" />
+  <meta name="language" content="English" />
+  <meta name="author" content="Supriya Pandey" />
+  <meta name="theme-color" content="#3e2723" />
+
+  <!-- Canonical URL -->
+  <link rel="canonical" href="https://bakegenius-ai.vercel.app/convert.html" />
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://bakegenius-ai.vercel.app/convert.html" />
+  <meta property="og:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
+  <meta property="og:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
+  <meta property="og:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:site_name" content="BakeGenius.ai" />
+  <meta property="og:locale" content="en_US" />
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="https://bakegenius-ai.vercel.app/convert.html" />
+  <meta property="twitter:title" content="Convert Recipe - BakeGenius.ai | AI-Powered Recipe Conversion Tool" />
+  <meta property="twitter:description" content="Convert your baking recipes with AI precision. Transform cups to grams, scale recipes, and get exact measurements for perfect baking results." />
+  <meta property="twitter:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
+
+  <!-- Structured Data -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    "name": "BakeGenius.ai Recipe Converter",
+    "description": "AI-powered recipe conversion tool for precise baking measurements",
+    "url": "https://bakegenius-ai.vercel.app/convert.html",
+    "applicationCategory": "FoodApplication",
+    "operatingSystem": "Web Browser",
+    "offers": {"@type":"Offer","price":"0","priceCurrency":"USD"},
+    "featureList": [
+      "Recipe conversion",
+      "Cups to grams conversion",
+      "Recipe scaling",
+      "AI-powered precision",
+      "Custom measurements"
+    ]
+  }
+  </script>
+
+  <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+
+  <style>
+    :root {
+      --candy-red:#ffabab;
+      --sky-blue:#249e96;
+      --sunny-yellow:#fcd124;
+      --soft-pink:#FFB6C1;
+      --mint-green:#9af89a;
+      --lavender:#E6E6FA;
+      --dark-bg:#1a1a1a;
+      --dark-card:#2d2d2d;
+      --dark-text:#e7e3e3;
+      --dark-border:#404040;
+      --white:#FFFFFF;
+      --dark-gray:#1A1A1A;
+      --light-gray:#F8F9FA;
+      --shadow:0 8px 32px rgba(0,0,0,0.1);
+      --glass:rgba(255,255,255,0.15);
     }
-    </script>
-    
-    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        :root {
-            --candy-red: #ffabab;
-            --sky-blue: #249e96;
-            --sunny-yellow: #fcd124;
-            --soft-pink: #FFB6C1;
-            --mint-green: #9af89a;
-            --lavender: #E6E6FA;
-            --dark-bg: #1a1a1a;
-            --dark-card: #2d2d2d;
-            --dark-text: #e7e3e3;
-            --dark-border: #404040;
-            --white: #FFFFFF;
-            --dark-gray: #1A1A1A;
-            --light-gray: #F8F9FA;
-            --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            --glass: rgba(255, 255, 255, 0.15);
-        }
-
-        /* Footer Modern Multi-Column */
-
-        .footer {
-            background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
-            backdrop-filter: blur(15px);
-            position: relative;
-            z-index: 2;
-            border-top: 1px solid rgba(255, 255, 255, 0.3);
-            margin-top: 4rem;
-        }
-
-        body.dark-mode .footer {
-            background: #1e1e1e;
-        }
-
-        .footer-content {
-            max-width: 1500px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: 2fr 1fr 1fr 1fr;
-            gap: 3rem;
-            padding: 3rem 2rem 2rem;
-        }
-
-        .footer-section h3.footer-title {
-            color: #3e2723;
-            font-size: 1.2rem;
-            font-weight: 700;
-            margin-bottom: 1.5rem;
-            position: relative;
-        }
-
-        .footer-section h3.footer-title::after {
-            content: '';
-            position: absolute;
-            bottom: -8px;
-            left: 0;
-            width: 30px;
-            height: 3px;
-            background: #3e2723;
-            border-radius: 2px;
-        }
-
-        body.dark-mode .footer-section h3.footer-title::after {
-            background: #e0e0e0;
-        }
-
-        .footer-logo {
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-            margin-bottom: 1.5rem;
-            font-size: 1.8rem;
-            font-weight: 700;
-            color: #3e2723;
-        }
-
-        .footer-logo-icon {
-            font-size: 2rem;
-        }
-
-        .footer-description {
-            color: #333;
-            line-height: 1.6;
-            margin-bottom: 2rem;
-            font-size: 0.95rem;
-        }
-
-        .footer-links {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .footer-links li {
-            margin-bottom: 0.8rem;
-        }
-
-        .footer-links a {
-            color: #333;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            padding: 0.3rem 0;
-            border-radius: 5px;
-        }
-
-        .footer-links a:hover {
-            color: black;
-            transform: translateX(4px);
-            background: rgba(255, 107, 107, 0.1);
-            padding-left: 0.8rem;
-        }
-
-        .footer-links i {
-            font-size: 0.9rem;
-            width: 16px;
-            opacity: 0.7;
-        }
-
-        .social-links {
-            display: flex;
-            gap: 1rem;
-            margin-top: 1rem;
-        }
-
-        .social-link {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 45px;
-            height: 45px;
-            background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            border-radius: 50%;
-            font-size: 1.2rem;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .social-link:hover {
-            transform: translateY(-3px) scale(1.1);
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-        }
-
-
-
-        .footer-bottom {
-            background: rgba(0, 0, 0, 0.05);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 1.5rem 0;
-        }
-
-        .footer-bottom-content {
-            max-width: 1500px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        .copyright {
-            color: #333;
-            font-size: 0.9rem;
-            margin: 0;
-        }
-
-        .copyright .name {
-            color: #3e2723;
-            font-weight: 600;
-        }
-
-        .copyright a:hover {
-            text-decoration: underline;
-        }
-
-        .footer-badges {
-            display: flex;
-            gap: 0.8rem;
-            flex-wrap: wrap;
-        }
 
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.4rem;
-            padding: 0.4rem 0.8rem;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            color: white;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-
-        .badge:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .badge-green {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        .badge-blue {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        .badge-purple {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        body.dark-mode .badge-blue {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        body.dark-mode .badge-green {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        body.dark-mode .badge-purple {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        @media (max-width: 1024px) {
-            .footer-content {
-                grid-template-columns: 1fr 1fr;
-                gap: 2rem;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .footer-content {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-                text-align: center;
-            }
-
-            .footer-bottom-content {
-                flex-direction: column;
-                text-align: center;
-                gap: 1rem;
-            }
-
-            .footer-badges {
-                justify-content: center;
-            }
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Comic Neue', cursive;
-            background-color: #f5f3f1;
-            min-height: 100vh;
-            color: var(--white);
-            transition: all 0.3s ease;
-        }
-
-        body.dark-mode {
-            background-color: #0d0d0d;
-        }
-
-        /* Navigation */
-        /* ===== STANDARDIZED NAVIGATION BAR ===== */
-        .navbar {
-            background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
-            backdrop-filter: blur(15px);
-            padding: 1rem 2rem;
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: 1000;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        body.dark-mode .navbar {
-            background: #1e1e1e !important;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
-        }
-
-        .nav-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            max-width: 1500px;
-            margin: 0 auto;
-        }
-
-        .logo {
-            font-size: 2rem;
-            font-weight: 600;
-            color: #3e2723;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: "Comic Neue", cursive;
-            min-width: 150px;
-            padding-right: 50px;
-        }
-
-        .logo-icon {
-            font-size: 2rem;
-            transition: transform 0.3s ease;
-        }
-
-        .logo-text {
-            font-weight: 600;
-            letter-spacing: -0.5px;
-        }
-
-        .logo:hover {
-            transform: scale(1.05);
-            color: #3e2723;
-        }
-
-        .logo:hover .logo-icon {
-            transform: rotate(10deg);
-        }
-
-        body.dark-mode .logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .logo:hover {
-            color: #e0e0e0;
-        }
-
-        .nav-links {
-            display: flex;
-            list-style: none;
-            gap: 1.5rem;
-            align-items: center;
-        }
-
-        .nav-links a {
-            text-decoration: none;
-            color: #3e2723;
-            font-weight: 600;
-            font-size: 1.1rem;
-            padding: 0.7rem 1rem;
-            border-radius: 25px;
-            transition: all 0.3s ease;
-            position: relative;
-            background: rgba(255, 255, 255, 0.1);
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .nav-links a {
-            color: #e0e0e0 !important;
-            background: rgba(111, 100, 91, 0.133) !important;
-            border: 2px solid transparent !important;
-        }
+    * { margin:0; padding:0; box-sizing:border-box; }
 
-        .nav-links a:hover {
-            background-color: #f3e0d6;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            border-color: rgba(228, 191, 180, 0.3);
-            color: #3e2723;
-        }
-
-        body.dark-mode .nav-links a:hover {
-            background-color: #0d0d0d !important;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            border-color: #1e1e1e !important;
-            color: #e0e0e0 !important;
-        }
-
-        /* Navigation Actions */
-        .nav-actions {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-
-        .dark-mode-btn {
-            background-color: #3e2723;
-            border: none;
-            color: white;
-            padding: 0.7rem;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1rem;
-            width: 45px;
-            height: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .dark-mode-btn:hover {
-            transform: scale(1.1) rotate(360deg);
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-        }
-
-        body.dark-mode .dark-mode-btn {
-            background-color: #e0e0e0;
-            color: #1e1e1e;
-        }
-
-        
-        
-
-       
-
-        .hamburger {
-            display: none;
-            flex-direction: column;
-            cursor: pointer;
-            padding: 0.5rem;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-
-        .hamburger:hover {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        .hamburger span {
-            width: 25px;
-            height: 3px;
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            margin: 3px 0;
-            transition: 0.3s;
-            border-radius: 2px;
-        }
-
-        body.dark-mode .hamburger span {
-            background: #e0e0e0;
-        }
-
-        .hamburger.active span:nth-child(1) {
-            transform: rotate(-45deg) translate(-5px, 6px);
-        }
-
-        .hamburger.active span:nth-child(2) {
-            opacity: 0;
-        }
-
-        .hamburger.active span:nth-child(3) {
-            transform: rotate(45deg) translate(-5px, -6px);
-        }
-
-        /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
-        @media (max-width: 768px) {
-            .navbar {
-                padding: 0.8rem 1rem;
-            }
-
-            .nav-links {
-                display: flex;
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100vh;
-                background: #1a1a1a;
-                flex-direction: column;
-                justify-content: flex-start;
-                align-items: center;
-                padding-top: 6rem;
-                transition: transform 0.3s ease;
-                transform: translateX(-100%);
-                gap: 0;
-                z-index: 999;
-            }
-
-            body.dark-mode .nav-links {
-                background: #1a1a1a !important;
-            }
-
-            .nav-links.active {
-                transform: translateX(0);
-            }
-
-            .nav-links li {
-                width: 90%;
-                margin: 0;
-                padding: 0;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            body.dark-mode .nav-links li {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            .nav-links a {
-                width: 100%;
-                padding: 1.5rem 2rem;
-                font-size: 1.2rem;
-                margin-bottom: 0;
-                background: #2a2a2a !important;
-                color: #e0e0e0 !important;
-                border-radius: 0;
-                display: flex;
-                align-items: center;
-                gap: 1rem;
-                transition: all 0.3s ease;
-            }
-
-            .nav-links a:hover {
-                background: #3a3a3a !important;
-                color: #ffffff !important;
-            }
-
-            .nav-actions {
-                gap: 0.5rem;
-                position: relative;
-                z-index: 1001;
-            }
-
-
-            .dark-mode-btn {
-                width: 40px;
-                height: 40px;
-                font-size: 0.9rem;
-            }
-
-            .hamburger {
-                display: flex;
-                position: relative;
-                z-index: 1001;
-            }
-
-            .logo {
-                font-size: 1.5rem;
-            }
-
-            .logo-icon {
-                font-size: 1.7rem;
-            }
-        }
-
-        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
-        @media (max-width: 480px) {
-            .navbar {
-                padding: 0.5rem;
-            }
-
-            .logo {
-                font-size: 1.3rem;
-            }
-
-            .logo-icon {
-                font-size: 1.5rem;
-            }
-
-            .nav-actions {
-                gap: 0.3rem;
-            }
-
-            
-
-            .dark-mode-btn {
-                width: 35px;
-                height: 35px;
-                font-size: 0.8rem;
-            }
-        }
-
-        .logo {
-            font-size: 2rem;
-            font-weight: 600;
-            color: #3e2723;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: "Comic Neue", cursive;
-            min-width: 150px;
-            padding-right: 50px;
-        }
-
-        .logo-icon {
-            font-size: 2rem;
-            transition: transform 0.3s ease;
-        }
-
-        .logo-text {
-            font-weight: 600;
-            letter-spacing: -0.5px;
-        }
-
-        .logo:hover {
-            transform: scale(1.05);
-            color: #3e2723;
-        }
-
-        .logo:hover .logo-icon {
-            transform: rotate(10deg);
-        }
-
-        body.dark-mode .logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .logo:hover {
-            color: #e0e0e0;
-        }
-
-        .dark-mode-btn {
-            background-color: #3e2723;
-            border: none;
-            color: white;
-            padding: 0.7rem;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1rem;
-            width: 45px;
-            height: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .dark-mode-btn:hover {
-            transform: scale(1.1) rotate(360deg);
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-        }
-
-        body.dark-mode .dark-mode-btn {
-            background-color: #e0e0e0;
-            color: #1e1e1e;
-        }
-
-        
-
-        /* Dark Mode Styles for Content */
-        body.dark-mode .input-label {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .recipe-input {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        body.dark-mode .unit-toggle button {
-            color: var(--dark-text);
-        }
-
-        body.dark-mode .unit-toggle {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        /*dark mode*/
-
-        body.dark-mode .footer-content {
-            background-color: #1e1e1e;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        body.dark-mode .footer-section h3.footer-title {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-description {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .footer-links a {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-links a:hover {
-            color: #a0a0a0;
-            background: rgba(255, 138, 128, 0.1);
-        }
-
-        body.dark-mode .footer-bottom {
-            background: #1e1e1e;
-        }
-
-        body.dark-mode .copyright {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .copyright .name {
-            color: #ef6154;
-        }
-
-        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
-        @media (max-width: 480px) {
-            .navbar {
-                padding: 0.5rem;
-            }
-
-            .logo {
-                font-size: 1.3rem;
-            }
-
-            .logo-icon {
-                font-size: 1.5rem;
-            }
-
-            .nav-actions {
-                gap: 0.3rem;
-            }
-
-            
-
-            .dark-mode-btn {
-                width: 35px;
-                height: 35px;
-                font-size: 0.8rem;
-            }
-        }
-
-        /* Main Content */
-        main {
-            padding: 6rem 2rem 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .page-header {
-            text-align: center;
-            margin-bottom: 3rem;
-        }
-
-        .page-title {
-            font-size: clamp(2rem, 6vw, 3rem);
-            font-weight: 700;
-            margin-bottom: 1rem;
-            color: #3e2723;
-            animation: bounce 2s ease-in-out infinite;
-        }
-
-        body.dark-mode .page-title {
-            color: #e0e0e0 !important;
-        }
-
-        .page-subtitle {
-            font-size: 1.2rem;
-            opacity: 0.9;
-            margin-bottom: 2rem;
-            color: #6b6767;
-        }
-
-        body.dark-mode .page-subtitle {
-            color: #e0e0e0 !important;
-        }
-
-        @keyframes bounce {
-
-            0%,
-            20%,
-            50%,
-            80%,
-            100% {
-                transform: translateY(0);
-            }
-
-            40% {
-                transform: translateY(-10px);
-            }
-
-            60% {
-                transform: translateY(-5px);
-            }
-        }
-
-        .converter-container {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 2rem;
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        .input-section {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            padding: 2rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .input-group {
-            margin-bottom: 1.5rem;
-        }
-
-        .input-label {
-            display: block;
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            color: #3e2723;
-
-        }
-
-        .recipe-input {
-            width: 100%;
-            min-height: 200px;
-            padding: 1rem;
-            border: none;
-            border-radius: 15px;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            color: black !important;
-            font-family: 'Comic Neue', cursive;
-            font-size: 1rem;
-            resize: vertical;
-            border: 2px solid #6b6767;
-            transition: all 0.3s ease;
-        }
-
-        .recipe-input:focus {
-            outline: none;
-            border-color: #3e2723;
-            box-shadow: 0 0 2px rgba(255, 165, 2, 0.3);
-        }
-
-        body.dark-mode .recipe-input:focus {
-            outline: none;
-            border-color: #0D0D0D;
-            box-shadow: 0 0 2px #0d0d0d;
-        }
-
-        .recipe-input::placeholder {
-
-
-            color: #000;
-            /* color: rgba(255, 255, 255, 0.7);*/
-        }
-
-        /* Animated Background Elements */
-        .floating-elements {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 1;
-        }
-
-        .floating-cupcake {
-            position: absolute;
-            font-size: 2rem;
-            animation: float 6s ease-in-out infinite;
-        }
-
-        .floating-cupcake:nth-child(1) {
-            top: 10%;
-            left: 10%;
-            animation-delay: 0s;
-        }
-
-        .floating-cupcake:nth-child(2) {
-            top: 20%;
-            right: 15%;
-            animation-delay: 2s;
-        }
-
-        .floating-cupcake:nth-child(3) {
-            bottom: 20%;
-            left: 20%;
-            animation-delay: 4s;
-        }
-
-        .floating-cupcake:nth-child(4) {
-            bottom: 30%;
-            right: 10%;
-            animation-delay: 1s;
-        }
-
-        @keyframes float {
-
-            0%,
-            100% {
-                transform: translateY(0px) rotate(0deg);
-            }
-
-            50% {
-                transform: translateY(-20px) rotate(5deg);
-            }
-
-
-        }
-
-        .file-upload {
-            display: none;
-        }
-
-        .file-upload-label {
-            display: inline-block;
-            padding: 1rem 2rem;
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            border-radius: 25px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 600;
-            margin-right: 1rem;
-        }
-
-        body.dark-mode .file-upload-label {
-            background: rgba(220, 121, 63, 0.893);
-            color: #e0e0e0;
-        }
-
-        .file-upload-label:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow);
-        }
-
-        .convert-button {
-            width: 100%;
-            padding: 1.5rem;
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            border: none;
-            border-radius: 25px;
-            font-size: 1.3rem;
-            font-weight: 700;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            margin-top: 1rem;
-        }
-
-        body.dark-mode .convert-button {
-            background: rgba(220, 121, 63, 0.893);
-            color: #e0e0e0;
-        }
-
-        .convert-button:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
-        }
-
-        .convert-button:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .loading-spinner {
-            display: none;
-            width: 20px;
-            height: 20px;
-            border: 2px solid transparent;
-            border-top: 2px solid var(--white);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-right: 10px;
-        }
-
-        /* Dual Scroll Buttons */
-        .scroll-btn {
-            position: fixed;
-            right: 2.5rem;
-            z-index: 2000;
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            color: #fff;
-            border: none;
-            border-radius: 50%;
-            width: 56px;
-            height: 56px;
-            font-size: 2rem;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-            cursor: pointer;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.4s, transform 0.2s;
-        }
-
-        .scroll-btn.show {
-            opacity: 1;
-            pointer-events: auto;
-            transform: scale(1.08);
-        }
-
-        #backToTop:hover {
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            transform: scale(1.15);
-            background: linear-gradient(45deg, #5d4037, #a4766a);
-        }
-
-        /* Positioning individually */
-        #scrollTopBtn {
-            bottom: 6.5rem;
-        }
-
-        /* Above bottom button */
-        #scrollBottomBtn {
-            bottom: 2.5rem;
-        }
-
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
-        .results-section {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            padding: 2rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            display: none;
-        }
-
-        .results-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-        }
-
-        .results-title {
-            font-size: 1.5rem;
-            font-weight: 700;
-        }
-
-        .unit-toggle {
-            display: flex;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 25px;
-            padding: 0.2rem;
-        }
-
-        .unit-toggle button {
-            padding: 0.5rem 1rem;
-            border: none;
-            background: transparent;
-            color: #333;
-            border-radius: 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-family: 'Comic Neue', cursive;
-            font-weight: 600;
-        }
-
-        .unit-toggle button.active {
-            background: var(--sunny-yellow);
-            color: var(--dark-gray);
-        }
-
-        .results-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 1rem;
-        }
-
-        .results-table th,
-        .results-table td {
-            padding: 1rem;
-            text-align: left;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .results-table th {
-            background: rgba(255, 255, 255, 0.1);
-            font-weight: 700;
-            color: var(--sunny-yellow);
-        }
-
-        .ingredient-row {
-            transition: all 0.3s ease;
-        }
-
-        .ingredient-row:hover {
-            background: rgba(255, 255, 255, 0.05);
-        }
-
-        .ingredient-icon {
-            font-size: 1.5rem;
-            margin-right: 0.5rem;
-        }
+    body {
+      font-family: 'Comic Neue', cursive;
+      background-color:#f5f3f1;
+      min-height:100vh;
+      color:#1a1a1a;
+      transition:all .3s ease;
+    }
+    body.dark-mode { background-color:#0d0d0d; color:#e7e3e3; }
+
+    /* ===== NAVBAR ===== */
+    .navbar {
+      background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+      backdrop-filter: blur(15px);
+      padding: 1rem 2rem;
+      position: fixed; top: 0; width: 100%; z-index: 1000;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+      border-bottom: 1px solid rgba(255,255,255,0.2);
+      transition: all .3s ease;
+    }
+    body.dark-mode .navbar { background:#1e1e1e !important; border-bottom:1px solid rgba(255,255,255,0.1) !important; }
+
+    .nav-container { display:flex; justify-content:space-between; align-items:center; max-width:1500px; margin:0 auto; }
+    .logo { font-size:2rem; font-weight:600; color:#3e2723; text-decoration:none; display:flex; align-items:center; gap:.5rem; min-width:150px; padding-right:50px; }
+    .logo-icon { font-size:2rem; transition: transform .3s ease; }
+    .logo:hover { transform: scale(1.05); }
+    .logo:hover .logo-icon { transform: rotate(10deg); }
+    body.dark-mode .logo { color:#e0e0e0; }
+
+    .nav-links { display:flex; list-style:none; gap:1.5rem; align-items:center; }
+    .nav-links a {
+      text-decoration:none; color:#3e2723; font-weight:600; font-size:1.1rem;
+      padding:.7rem 1rem; border-radius:25px; transition:all .3s ease;
+      position:relative; background:rgba(255,255,255,0.1); border:2px solid transparent;
+    }
+    .nav-links a:hover { background:#f3e0d6; transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,0.2); border-color:rgba(228,191,180,0.3); }
+    body.dark-mode .nav-links a { color:#e0e0e0 !important; background:rgba(111,100,91,0.133) !important; }
+
+    .nav-actions { display:flex; align-items:center; gap:1rem; }
+    .dark-mode-btn {
+      background-color:#3e2723; border:none; color:white; padding:.7rem; border-radius:50%;
+      cursor:pointer; transition:all .3s ease; font-size:1rem; width:45px; height:45px;
+      display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.2);
+    }
+    .dark-mode-btn:hover { transform: scale(1.1) rotate(360deg); }
+    body.dark-mode .dark-mode-btn { background-color:#e0e0e0; color:#1e1e1e; }
+
+    .hamburger { display:none; flex-direction:column; cursor:pointer; padding:.5rem; border-radius:8px; transition:all .3s ease; }
+    .hamburger:hover { background: rgba(255,255,255,0.1); }
+    .hamburger span { width:25px; height:3px; background:linear-gradient(45deg,#a4766a,#5d4037); margin:3px 0; transition:.3s; border-radius:2px; }
+    body.dark-mode .hamburger span { background:#e0e0e0; }
+    .hamburger.active span:nth-child(1){ transform:rotate(-45deg) translate(-5px, 6px); }
+    .hamburger.active span:nth-child(2){ opacity:0; }
+    .hamburger.active span:nth-child(3){ transform:rotate(45deg) translate(-5px, -6px); }
+
+    /* Mobile nav */
+    @media (max-width:768px) {
+      .navbar { padding:.8rem 1rem; }
+      .nav-links{
+        display:flex; position:fixed; top:0; left:0; width:100%; height:100vh; background:#1a1a1a;
+        flex-direction:column; justify-content:flex-start; align-items:center; padding-top:6rem;
+        transition:transform .3s ease; transform:translateX(-100%); gap:0; z-index:999;
+      }
+      .nav-links.active { transform:translateX(0); }
+      .nav-links li { width:90%; border-bottom:1px solid rgba(255,255,255,0.1); }
+      .nav-links a { width:100%; padding:1.5rem 2rem; font-size:1.2rem; background:#2a2a2a !important; color:#e0e0e0 !important; border-radius:0; display:flex; gap:1rem; }
+      .nav-links a:hover { background:#3a3a3a !important; }
+      .hamburger { display:flex; position:relative; z-index:1001; }
+      .logo { font-size:1.5rem; }
+      .logo-icon { font-size:1.7rem; }
+    }
+    @media (max-width:480px) {
+      .navbar { padding:.5rem; }
+      .logo { font-size:1.3rem; }
+      .logo-icon { font-size:1.5rem; }
+      .nav-actions { gap:.3rem; }
+      .dark-mode-btn { width:35px; height:35px; font-size:.8rem; }
+    }
 
-        .tooltip {
-            position: relative;
-            cursor: help;
-        }
+    /* ===== MAIN ===== */
+    main { padding:6rem 2rem 2rem; max-width:1200px; margin:0 auto; }
+    .page-header { text-align:center; margin-bottom:3rem; }
+    .page-title { font-size:clamp(2rem, 6vw, 3rem); font-weight:700; margin-bottom:1rem; color:#3e2723; animation:bounce 2s ease-in-out infinite; }
+    body.dark-mode .page-title{ color:#e0e0e0 !important; }
+    .page-subtitle { font-size:1.2rem; color:#6b6767; opacity:.9; margin-bottom:2rem; }
+    body.dark-mode .page-subtitle{ color:#e0e0e0 !important; }
+
+    @keyframes bounce {
+      0%,20%,50%,80%,100% { transform:translateY(0);}
+      40% { transform:translateY(-10px);}
+      60% { transform:translateY(-5px);}
+    }
 
-        .tooltip::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            bottom: 125%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: var(--dark-gray);
-            color: var(--white);
-            padding: 0.5rem;
-            border-radius: 8px;
-            font-size: 0.8rem;
-            white-space: nowrap;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s;
-            z-index: 1001;
-        }
+    .converter-container { display:grid; grid-template-columns:1fr; gap:2rem; max-width:800px; margin:0 auto; }
 
-        .tooltip:hover::after {
-            opacity: 1;
-        }
+    .input-section,
+    .results-section {
+      background: rgba(255,255,255,0.1);
+      backdrop-filter: blur(20px);
+      border-radius: 20px;
+      padding: 2rem;
+      border: 1px solid rgba(255,255,255,0.2);
+    }
+    .results-section { display:none; }
 
-        .warning-popup {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(255, 71, 87, 0.95);
-            backdrop-filter: blur(20px);
-            padding: 2rem;
-            border-radius: 20px;
-            border: 2px solid var(--candy-red);
-            z-index: 1002;
-            display: none;
-            max-width: 400px;
-            text-align: center;
-        }
+    .input-group { margin-bottom:1.5rem; }
+    .input-label { display:block; font-size:1.1rem; font-weight:600; margin-bottom:.5rem; color:#3e2723; }
+    body.dark-mode .input-label { color:#e0e0e0; }
 
-        .warning-popup h3 {
-            margin-bottom: 1rem;
-            font-size: 1.3rem;
-        }
+    .recipe-input {
+      width:100%; min-height:200px; padding:1rem; border:none; border-radius:15px;
+      background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
+      color:#000 !important; font-family:'Comic Neue', cursive; font-size:1rem; resize:vertical;
+      border:2px solid #6b6767; transition:all .3s ease;
+    }
+    .recipe-input:focus { outline:none; border-color:#3e2723; box-shadow:0 0 2px rgba(255,165,2,0.3); }
+    body.dark-mode .recipe-input { background: rgba(255,255,255,0.08); }
+    body.dark-mode .recipe-input:focus { border-color:#0d0d0d; box-shadow:0 0 2px #0d0d0d; }
+
+    .file-upload { display:none; }
+    .file-upload-label {
+      display:inline-block; padding:1rem 2rem; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723);
+      color:white; border-radius:25px; cursor:pointer; transition:all .3s ease; font-weight:600; margin-right:1rem;
+    }
+    .file-upload-label:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
+    body.dark-mode .file-upload-label { background: rgba(220,121,63,0.893); color:#e0e0e0; }
 
-        .warning-popup button {
-            padding: 0.8rem 1.5rem;
-            background: var(--white);
-            color: var(--candy-red);
-            border: none;
-            border-radius: 15px;
-            font-weight: 600;
-            cursor: pointer;
-            margin: 0.5rem;
-            transition: all 0.3s ease;
-        }
+    .convert-button {
+      width:100%; padding:1.5rem; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723);
+      color:white; border:none; border-radius:25px; font-size:1.3rem; font-weight:700; cursor:pointer;
+      transition:all .3s ease; position:relative; overflow:hidden; margin-top:1rem;
+    }
+    .convert-button:hover { transform: translateY(-3px); box-shadow:0 15px 40px rgba(0,0,0,0.2); }
+    .convert-button:disabled { opacity:.6; cursor:not-allowed; transform:none; }
+    body.dark-mode .convert-button { background: rgba(220,121,63,0.893); color:#e0e0e0; }
 
-        .warning-popup button:hover {
-            transform: translateY(-2px);
-        }
+    .loading-spinner{
+      display:none; width:20px; height:20px; border:2px solid transparent; border-top:2px solid #fff;
+      border-radius:50%; animation:spin 1s linear infinite; margin-right:10px;
+    }
+    @keyframes spin { to{ transform:rotate(360deg);} }
+
+    .results-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
+    .results-title { font-size:1.5rem; font-weight:700; }
+    .unit-toggle { display:flex; background:rgba(255,255,255,0.1); border-radius:25px; padding:.2rem; }
+    .unit-toggle button {
+      padding:.5rem 1rem; border:none; background:transparent; color:#333; border-radius:20px; cursor:pointer;
+      transition:all .3s ease; font-family:'Comic Neue', cursive; font-weight:600;
+    }
+    .unit-toggle button.active { background: var(--sunny-yellow); color: var(--dark-gray); }
 
-        .overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(5px);
-            z-index: 1001;
-            display: none;
-        }
+    .results-table { width:100%; border-collapse:collapse; margin-top:1rem; }
+    .results-table th, .results-table td { padding:1rem; text-align:left; border-bottom:1px solid rgba(0,0,0,0.06); }
+    .results-table th { background:rgba(255,255,255,0.1); font-weight:700; color:#3e2723; }
+    body.dark-mode .results-table th { color:var(--sunny-yellow); border-bottom:1px solid rgba(255,255,255,0.1); }
+    body.dark-mode .results-table td { border-bottom:1px solid rgba(255,255,255,0.06); }
 
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            main {
-                padding: 5rem 1rem 2rem;
-            }
-
-            .results-table {
-                font-size: 0.9rem;
-            }
-
-            .results-table th,
-            .results-table td {
-                padding: 0.5rem;
-            }
-
-            .file-upload-label {
-                display: block;
-                text-align: center;
-                margin-bottom: 1rem;
-                margin-right: 0;
-            }
-        }
+    .ingredient-row { transition: all .3s ease; }
+    .ingredient-row:hover { background: rgba(0,0,0,0.03); }
+    body.dark-mode .ingredient-row:hover { background: rgba(255,255,255,0.05); }
 
-        @media (max-width: 480px) {
-            nav {
-                padding: 1rem;
-            }
+    .ingredient-icon { font-size:1.5rem; margin-right:.5rem; }
 
-            .input-section,
-            .results-section {
-                padding: 1.5rem;
-            }
+    .tooltip { position:relative; cursor:help; }
+    .tooltip::after {
+      content: attr(data-tooltip); position:absolute; bottom:125%; left:50%; transform:translateX(-50%);
+      background: var(--dark-gray); color: var(--white); padding:.5rem; border-radius:8px; font-size:.8rem; white-space:nowrap;
+      opacity:0; pointer-events:none; transition: opacity .3s; z-index:1001;
+    }
+    .tooltip:hover::after { opacity:1; }
+
+    /* Warning popup */
+    .warning-popup {
+      position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
+      background:rgba(255,71,87,0.95); backdrop-filter: blur(20px);
+      padding:2rem; border-radius:20px; border:2px solid var(--candy-red); z-index:1002; display:none; max-width:400px; text-align:center;
+      color:#fff;
+    }
+    .warning-popup h3 { margin-bottom:1rem; font-size:1.3rem; }
+    .warning-popup button {
+      padding:.8rem 1.5rem; background:#fff; color:var(--candy-red); border:none; border-radius:15px; font-weight:600; cursor:pointer; margin:.5rem; transition:all .3s ease;
+    }
+    .warning-popup button:hover { transform: translateY(-2px); }
 
-            .warning-popup {
-                margin: 1rem;
-                max-width: calc(100% - 2rem);
-            }
-        }
+    .overlay {
+      position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index:1001; display:none;
+    }
 
-    </style>
+    /* Floating emojis */
+    .floating-elements { position:fixed; inset:0; pointer-events:none; z-index:1; }
+    .floating-cupcake { position:absolute; font-size:2rem; animation: float 6s ease-in-out infinite; }
+    .floating-cupcake:nth-child(1){ top:10%; left:10%; animation-delay:0s;}
+    .floating-cupcake:nth-child(2){ top:20%; right:15%; animation-delay:2s;}
+    .floating-cupcake:nth-child(3){ bottom:20%; left:20%; animation-delay:4s;}
+    .floating-cupcake:nth-child(4){ bottom:30%; right:10%; animation-delay:1s;}
+    @keyframes float { 0%,100% { transform:translateY(0) rotate(0deg);} 50% { transform:translateY(-20px) rotate(5deg);} }
+
+    /* Back to Top button */
+    #backToTop {
+      position: fixed; right: 2.5rem; bottom: 2.5rem; z-index: 2000;
+      background: linear-gradient(45deg, #a4766a, #5d4037); color: #fff; border: none; border-radius: 50%;
+      width: 56px; height: 56px; font-size: 2rem; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+      cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s, transform .2s;
+    }
+    #backToTop.show { opacity:1; pointer-events:auto; transform: scale(1.08); }
+    #backToTop:hover { transform: scale(1.15); }
+
+    /* ===== FOOTER ===== */
+    .footer { background: radial-gradient(circle at center, #e9b4b6, #e5c5b3); backdrop-filter: blur(15px); position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.3); margin-top:4rem; }
+    body.dark-mode .footer { background:#1e1e1e; }
+    .footer-content { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:3rem 2rem 2rem; }
+    .footer-section h3.footer-title { color:#3e2723; font-size:1.2rem; font-weight:700; margin-bottom:1.5rem; position:relative; }
+    .footer-section h3.footer-title::after { content:''; position:absolute; bottom:-8px; left:0; width:30px; height:3px; background:#3e2723; border-radius:2px; }
+    body.dark-mode .footer-section h3.footer-title::after { background:#e0e0e0; }
+    .footer-logo { display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; color:#3e2723;}
+    .footer-logo-icon { font-size:2rem; }
+    .footer-description { color:#333; line-height:1.6; margin-bottom:2rem; font-size:.95rem; }
+    .footer-links { list-style:none; padding:0; margin:0; }
+    .footer-links li { margin-bottom:.8rem; }
+    .footer-links a { color:#333; text-decoration:none; display:flex; align-items:center; gap:.8rem; font-weight:500; transition:all .3s ease; padding:.3rem 0; border-radius:5px; }
+    .footer-links a:hover { color:black; transform:translateX(4px); background:rgba(255,107,107,0.1); padding-left:.8rem; }
+    .footer-links i { font-size:.9rem; width:16px; opacity:.7; }
+    .social-links { display:flex; gap:1rem; margin-top:1rem; }
+    .social-link { display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723); color:white; text-decoration:none; border-radius:50%; font-size:1.2rem; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
+    .social-link:hover { transform:translateY(-3px) scale(1.1); box-shadow:0 8px 25px rgba(0,0,0,0.3); }
+
+    .footer-bottom { background:rgba(0,0,0,0.05); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0; }
+    .footer-bottom-content { max-width:1500px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
+    .copyright { color:#333; font-size:.9rem; margin:0; }
+    .copyright .name { color:#3e2723; font-weight:600; }
+
+    @media (max-width:1024px){
+      .footer-content{ grid-template-columns:1fr 1fr; gap:2rem; }
+    }
+    @media (max-width:768px){
+      .footer-content{ grid-template-columns:1fr; gap:2rem; text-align:center; }
+      .footer-bottom-content{ flex-direction:column; text-align:center; gap:1rem; }
+      .social-links{ justify-content:center; }
+    }
+  </style>
 </head>
 
 <body>
-    <div class="floating-elements">
-        <div class="floating-cupcake">🧁</div>
-        <div class="floating-cupcake">🍰</div>
-        <div class="floating-cupcake">🥧</div>
-        <div class="floating-cupcake">🍪</div>
+  <div class="floating-elements" aria-hidden="true">
+    <div class="floating-cupcake">🧁</div>
+    <div class="floating-cupcake">🍰</div>
+    <div class="floating-cupcake">🥧</div>
+    <div class="floating-cupcake">🍪</div>
+  </div>
+
+  <!-- NAV -->
+  <nav class="navbar">
+    <div class="nav-container">
+      <a href="index.html" class="logo" aria-label="BakeGenius.ai home">
+        <span class="logo-icon">🍰</span>
+        <span class="logo-text">BakeGenius.ai</span>
+      </a>
+
+      <ul class="nav-links" id="navLinks">
+        <li><a href="convert.html"><i class="fas fa-exchange-alt" style="margin-right:8px;"></i>Convert Recipe</a></li>
+        <li><a href="customize.html"><i class="fas fa-cog" style="margin-right:8px;"></i>Customize</a></li>
+        <li><a href="scale.html"><i class="fas fa-balance-scale" style="margin-right:8px;"></i>Scale Recipes</a></li>
+        <li><a href="about.html"><i class="fas fa-info-circle" style="margin-right:8px;"></i>About</a></li>
+        <li><a href="faq.html"><i class="fas fa-question-circle" style="margin-right:8px;"></i>FAQs</a></li>
+      </ul>
+
+      <div class="nav-actions">
+        <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode" aria-label="Toggle dark mode">
+          <i class="fas fa-moon" aria-hidden="true"></i>
+        </button>
+      </div>
+
+      <div class="hamburger" id="hamburger" aria-label="Toggle navigation" aria-expanded="false" role="button" tabindex="0">
+        <span></span><span></span><span></span>
+      </div>
     </div>
-    <!-- Navigation -->
-    <nav class="navbar">
-        <div class="nav-container">
-            <a href="index.html" class="logo">
-                <span class="logo-icon">🍰</span>
-                <span class="logo-text">BakeGenius.ai</span>
-            </a>
-
-            <ul class="nav-links" id="navLinks">
-                
-                <li>
-                    <a href="convert.html">
-                        <i class="fas fa-exchange-alt" style="margin-right:8px;"></i>
-                        Convert Recipe
-                    </a>
-                </li>
-                <li>
-                    <a href="customize.html">
-                        <i class="fas fa-cog" style="margin-right:8px;"></i>
-                        Customize
-                    </a>
-                </li>
-                <li>
-                    <a href="scale.html">
-                        <i class="fas fa-balance-scale" style="margin-right:8px;"></i>
-                        Scale Recipes
-                    </a>
-                </li>
-                <li>
-                    <a href="about.html">
-                        <i class="fas fa-info-circle" style="margin-right:8px;"></i>
-                        About
-                    </a>
-                </li>
-                  <li>
-                    <a href="faq.html">
-                        <i class="fas fa-question-circle" style="margin-right:8px;"></i>
-                        FAQs
-                    </a>
-                </li>
-            </ul>
-            <div class="nav-actions">
-                <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
-                    <i class="fas fa-moon"></i>
-                </button>
-                
-            </div>
-            <div class="hamburger" id="hamburger">
-                <span></span>
-                <span></span>
-                <span></span>
-            </div>
-        </div>
-    </nav>
+  </nav>
 
+  <!-- MAIN -->
+  <main>
+    <div class="page-header">
+      <h1 class="page-title">🍪 Recipe Converter</h1>
+      <p class="page-subtitle">Transform your recipes into precise gram measurements with AI magic ✨</p>
+    </div>
 
-    <!-- Main Content -->
-    <main>
-        <div class="page-header">
-            <h1 class="page-title"> 🍪Recipe Converter</h1>
-            <p class="page-subtitle">Transform your recipes into precise gram measurements with AI magic✨</p>
-        </div>
-
-        <div class="converter-container">
-            <!-- Input Section -->
-            <div class="input-section">
-                <div class="input-group">
-                    <label for="recipeInput" class="input-label">📝 Paste your recipe here:</label>
-                    <textarea id="recipeInput" class="recipe-input" placeholder="Example:
+    <div class="converter-container">
+      <div class="input-section">
+        <div class="input-group">
+          <label for="recipeInput" class="input-label">📝 Paste your recipe here:</label>
+          <textarea id="recipeInput" class="recipe-input" placeholder="Example:
 2 cups all-purpose flour
 1 cup packed brown sugar
 1/2 cup melted butter
@@ -1382,268 +377,201 @@ <h1 class="page-title"> 🍪Recipe Converter</h1>
 1 tsp vanilla extract
 1/2 tsp baking powder
 1/4 tsp salt"></textarea>
-                </div>
-
-                <div class="input-group">
-                    <label for="fileUpload" class="file-upload-label">
-                        📁 Or upload a recipe file
-                    </label>
-                    <input type="file" id="fileUpload" class="file-upload" accept=".txt,.doc,.docx"
-                        onchange="handleFileUpload(event)">
-                </div>
-
-                <button class="convert-button" onclick="convertRecipe()">
-                    <div class="loading-spinner" id="loadingSpinner"></div>
-                    <span id="buttonText">Magically Convert ✨</span>
-                </button>
-            </div>
-
-            <!-- Results Section -->
-            <div class="results-section" id="resultsSection">
-                <div class="results-header">
-                    <h2 class="results-title">🎯 Conversion Results</h2>
-                    <div class="unit-toggle">
-                        <button class="active" onclick="toggleUnits('metric')">Metric (g)</button>
-                        <button onclick="toggleUnits('imperial')">Imperial</button>
-                    </div>
-                </div>
-
-                <table class="results-table" id="resultsTable">
-                    <thead>
-                        <tr>
-                            <th>Ingredient</th>
-                            <th>Original</th>
-                            <th>Grams</th>
-                            <th>Notes</th>
-                        </tr>
-                    </thead>
-                    <tbody id="resultsBody">
-                        <!-- Results will be populated here -->
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </main>
-
-    <!-- Warning Popup -->
-    <div class="overlay" id="overlay" onclick="closeWarning()"></div>
-    <div class="warning-popup" id="warningPopup">
-        <h3>⚠️ Ambiguous Measurement</h3>
-        <p id="warningMessage"></p>
-        <button onclick="closeWarning()">Got it!</button>
-    </div>
-    <!-- Back to Top Button -->
-    <button id="backToTop" title="Back to Top">⬆</button>
-    <!-- footer startes here -->
-
-    <footer class="footer">
-        <div class="footer-content">
-            <div class="footer-section footer-brand">
-                <div class="footer-logo">
-                    <span class="footer-logo-icon">🍰</span>
-                    <span class="footer-logo-text">BakeGenius.ai</span>
-                </div>
-                <p class="footer-description">
-                    Transform your baking with AI-powered recipe conversions. Making baking accessible, precise, and
-                    delightful for everyone.
-                </p>
-                <div class="social-links">
-                    <a href="https://www.linkedin.com/in/supriyapandey595/" class="social-link linkedin" target="_blank"
-                        rel="noopener" title="LinkedIn">
-                        <i class="fab fa-linkedin-in"></i>
-                    </a>
-                    <a href="https://github.com/supriya46788/BakeGenuis-AI" class="social-link github" target="_blank"
-                        rel="noopener" title="GitHub">
-                        <i class="fab fa-github"></i>
-                    </a>
-                    <a href="mailto:supriyadpandey502@gmail.com" class="social-link email" target="_blank"
-                        rel="noopener" title="Email">
-                        <i class="fas fa-envelope"></i>
-                    </a>
-                </div>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Quick Links</h3>
-                <ul class="footer-links">
-                    <li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
-                    <li><a href="convert.html"><i class="fas fa-exchange-alt"></i>Convert Recipe</a></li>
-                    <li><a href="customize.html"><i class="fas fa-cog"></i>Customize</a></li>
-                    <li><a href="scale.html"><i class="fas fa-balance-scale"></i>Scale Recipes</a></li>
-                    <li><a href="about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Features</h3>
-                <ul class="footer-links">
-                    <li><a href="#"><i class="fas fa-calculator"></i>Unit Conversion</a></li>
-                    <li><a href="#"><i class="fas fa-chart-line"></i>Nutritional Analysis</a></li>
-                    <li><a href="#"><i class="fas fa-balance-scale"></i>Recipe Scaling</a></li>
-                    <li><a href="#"><i class="fas fa-magic"></i>AI Optimization</a></li>
-                    <li><a href="#"><i class="fas fa-mobile-alt"></i>Mobile Friendly</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Support</h3>
-                <ul class="footer-links">
-                    <li><a href="contact.html"><i class="fas fa-question-circle"></i>Contact Us</a></li>
-                    <li><a href="feedback.html"><i class="fas fa-comment"></i>Feedback</a></li>
-                    <li><a href="faq.html"><i class="fas fa-info-circle"></i>FAQ</a></li>
-                    <li><a href="privacypolicy.html"><i class="fas fa-shield-alt"></i>Privacy Policy</a></li>
-                    <li><a href="toc.html"><i class="fas fa-file-contract"></i>Terms of Service</a></li>
-                </ul>
-            </div>
         </div>
 
-        <div class="footer-bottom">
-            <div class="footer-bottom-content">
-                <p class="copyright">
-                    © 2025 BakeGenius.ai. Made with <span style="color:#FF6B6B;">❤️</span> by <span class="name">Supriya
-                        Pandey</span>
-                </p>
-                <div class="footer-badges">
-                    <span class="badge badge-green"><i class="fas fa-heart"></i> Open Source</span>
-                    <span class="badge badge-blue"><i class="fas fa-leaf"></i> Eco Friendly</span>
-                    <span class="badge badge-purple"><i class="fas fa-robot"></i> AI Powered</span>
-                </div>
-            </div>
+        <div class="input-group">
+          <label for="fileUpload" class="file-upload-label">📁 Or upload a recipe file</label>
+          <input type="file" id="fileUpload" class="file-upload" accept=".txt,.doc,.docx" onchange="handleFileUpload(event)">
         </div>
-    </footer>
-
-    <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById('darkModeToggle');
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector('i');
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        if (currentTheme === 'dark') {
-            body.classList.add('dark-mode');
-            darkModeIcon.classList.remove('fa-moon');
-            darkModeIcon.classList.add('fa-sun');
-        }
-
-        darkModeToggle.addEventListener('click', () => {
-            body.classList.toggle('dark-mode');
-
-            // Update icon
-            if (body.classList.contains('dark-mode')) {
-                darkModeIcon.classList.remove('fa-moon');
-                darkModeIcon.classList.add('fa-sun');
-                localStorage.setItem('theme', 'dark');
-            } else {
-                darkModeIcon.classList.remove('fa-sun');
-                darkModeIcon.classList.add('fa-moon');
-                localStorage.setItem('theme', 'light');
-            }
-        });
-
-        // Mobile Navigation Toggle
-        const hamburger = document.getElementById('hamburger');
-        const navLinks = document.getElementById('navLinks');
 
-        hamburger.addEventListener('click', () => {
-            navLinks.classList.toggle('active');
-            hamburger.classList.toggle('active');
-        });
-
-        // Close mobile menu when clicking on a link
-        const navItems = document.querySelectorAll('.nav-links a');
-        navItems.forEach(item => {
-            item.addEventListener('click', () => {
-                navLinks.classList.remove('active');
-                hamburger.classList.remove('active');
-            });
-        });
-
-        // Close mobile menu when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!hamburger.contains(e.target) && !navLinks.contains(e.target)) {
-                navLinks.classList.remove('active');
-                hamburger.classList.remove('active');
-            }
-        });
+        <button class="convert-button" onclick="convertRecipe()">
+          <div class="loading-spinner" id="loadingSpinner"></div>
+          <span id="buttonText">Magically Convert ✨</span>
+        </button>
+      </div>
+
+      <div class="results-section" id="resultsSection">
+        <div class="results-header">
+          <h2 class="results-title">🎯 Conversion Results</h2>
+          <div class="unit-toggle">
+            <button class="active" onclick="toggleUnits('metric')">Metric (g)</button>
+            <button onclick="toggleUnits('imperial')">Imperial</button>
+          </div>
+        </div>
 
-        // Recipe Conversion Logic
-        const GEMINI_API_KEY = 'API_KEY';
-        const GEMINI_API_URL = 'API_URL';
-
-        let currentUnit = 'metric';
-        let convertedData = [];
-
-        // Ingredient to emoji mapping
-        const ingredientEmojis = {
-            'flour': '🌾',
-            'sugar': '🍯',
-            'butter': '🧈',
-            'egg': '🥚',
-            'milk': '🥛',
-            'vanilla': '🌿',
-            'baking powder': '⚡',
-            'salt': '🧂',
-            'chocolate': '🍫',
-            'cocoa': '🍫',
-            'oil': '🫒',
-            'honey': '🍯',
-            'cream': '🥛',
-            'cheese': '🧀',
-            'nuts': '🥜',
-            'fruit': '🍓',
-            'lemon': '🍋',
-            'orange': '🍊',
-            'cinnamon': '🌿',
-            'default': '🥄'
-        };
-
-        function toggleMobileMenu() {
-            const navLinks = document.getElementById('navLinks');
-            navLinks.classList.toggle('active');
-        }
+        <table class="results-table" id="resultsTable">
+          <thead>
+            <tr>
+              <th>Ingredient</th>
+              <th>Original</th>
+              <th>Grams</th>
+              <th>Notes</th>
+            </tr>
+          </thead>
+          <tbody id="resultsBody"></tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+
+  <!-- Warning Popup -->
+  <div class="overlay" id="overlay" onclick="closeWarning()"></div>
+  <div class="warning-popup" id="warningPopup" role="alertdialog" aria-modal="true" aria-labelledby="warnTitle">
+    <h3 id="warnTitle">⚠️ Ambiguous Measurement</h3>
+    <p id="warningMessage"></p>
+    <button onclick="closeWarning()">Got it!</button>
+  </div>
+
+  <!-- Back to Top Button -->
+  <button id="backToTop" title="Back to Top" aria-label="Back to top">⬆</button>
+
+  <!-- FOOTER -->
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="footer-section footer-brand">
+        <div class="footer-logo">
+          <span class="footer-logo-icon">🍰</span>
+          <span class="footer-logo-text">BakeGenius.ai</span>
+        </div>
+        <p class="footer-description">
+          Transform your baking with AI-powered recipe conversions. Making baking accessible, precise, and delightful for everyone.
+        </p>
+        <div class="social-links">
+          <a href="https://www.linkedin.com/in/supriyapandey595/" class="social-link linkedin" target="_blank" rel="noopener" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+          <a href="https://github.com/supriya46788/BakeGenuis-AI" class="social-link github" target="_blank" rel="noopener" title="GitHub"><i class="fab fa-github"></i></a>
+          <a href="mailto:supriyadpandey502@gmail.com" class="social-link email" target="_blank" rel="noopener" title="Email"><i class="fas fa-envelope"></i></a>
+        </div>
+      </div>
+
+      <div class="footer-section">
+        <h3 class="footer-title">Quick Links</h3>
+        <ul class="footer-links">
+          <li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
+          <li><a href="convert.html"><i class="fas fa-exchange-alt"></i>Convert Recipe</a></li>
+          <li><a href="customize.html"><i class="fas fa-cog"></i>Customize</a></li>
+          <li><a href="scale.html"><i class="fas fa-balance-scale"></i>Scale Recipes</a></li>
+          <li><a href="about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h3 class="footer-title">Features</h3>
+        <ul class="footer-links">
+          <li><a href="#"><i class="fas fa-calculator"></i>Unit Conversion</a></li>
+          <li><a href="#"><i class="fas fa-chart-line"></i>Nutritional Analysis</a></li>
+          <li><a href="#"><i class="fas fa-balance-scale"></i>Recipe Scaling</a></li>
+          <li><a href="#"><i class="fas fa-magic"></i>AI Optimization</a></li>
+          <li><a href="#"><i class="fas fa-mobile-alt"></i>Mobile Friendly</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h3 class="footer-title">Support</h3>
+        <ul class="footer-links">
+          <li><a href="contact.html"><i class="fas fa-question-circle"></i>Contact Us</a></li>
+          <li><a href="feedback.html"><i class="fas fa-comment"></i>Feedback</a></li>
+          <li><a href="faq.html"><i class="fas fa-info-circle"></i>FAQ</a></li>
+          <li><a href="privacypolicy.html"><i class="fas fa-shield-alt"></i>Privacy Policy</a></li>
+          <li><a href="toc.html"><i class="fas fa-file-contract"></i>Terms of Service</a></li>
+        </ul>
+      </div>
+    </div>
 
-        function handleFileUpload(event) {
-            const file = event.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function (e) {
-                    document.getElementById('recipeInput').value = e.target.result;
-                };
-                reader.readAsText(file);
-            }
-        }
+    <div class="footer-bottom">
+      <div class="footer-bottom-content">
+        <p class="copyright">
+          © 2025 BakeGenius.ai. Made with <span style="color:#FF6B6B;">❤️</span> by <span class="name">Supriya Pandey</span>
+        </p>
+        <div class="footer-badges">
+          <span class="badge badge-green"><i class="fas fa-heart"></i> Open Source</span>
+          <span class="badge badge-blue"><i class="fas fa-leaf"></i> Eco Friendly</span>
+          <span class="badge badge-purple"><i class="fas fa-robot"></i> AI Powered</span>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    // Dark Mode Toggle
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    const body = document.body;
+    const darkModeIcon = darkModeToggle.querySelector('i');
+
+    const currentTheme = localStorage.getItem('theme') || 'light';
+    if (currentTheme === 'dark') {
+      body.classList.add('dark-mode');
+      darkModeIcon.classList.replace('fa-moon','fa-sun');
+    }
 
-        function getIngredientEmoji(ingredient) {
-            const lower = ingredient.toLowerCase();
-            for (const [key, emoji] of Object.entries(ingredientEmojis)) {
-                if (lower.includes(key)) {
-                    return emoji;
-                }
-            }
-            return ingredientEmojis.default;
-        }
+    darkModeToggle.addEventListener('click', () => {
+      body.classList.toggle('dark-mode');
+      if (body.classList.contains('dark-mode')) {
+        darkModeIcon.classList.replace('fa-moon','fa-sun');
+        localStorage.setItem('theme','dark');
+      } else {
+        darkModeIcon.classList.replace('fa-sun','fa-moon');
+        localStorage.setItem('theme','light');
+      }
+    });
+
+    // Mobile nav
+    const hamburger = document.getElementById('hamburger');
+    const navLinks = document.getElementById('navLinks');
+    const toggleNav = () => {
+      navLinks.classList.toggle('active');
+      hamburger.classList.toggle('active');
+      const expanded = hamburger.getAttribute('aria-expanded') === 'true';
+      hamburger.setAttribute('aria-expanded', (!expanded).toString());
+    };
+    hamburger.addEventListener('click', (e) => { e.stopPropagation(); toggleNav(); });
+    hamburger.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleNav(); }});
+    document.querySelectorAll('.nav-links a').forEach(a => a.addEventListener('click', () => {
+      navLinks.classList.remove('active'); hamburger.classList.remove('active'); hamburger.setAttribute('aria-expanded','false');
+    }));
+    document.addEventListener('click', (e) => {
+      if (navLinks.classList.contains('active') && !hamburger.contains(e.target) && !navLinks.contains(e.target)) {
+        navLinks.classList.remove('active'); hamburger.classList.remove('active'); hamburger.setAttribute('aria-expanded','false');
+      }
+    });
+
+    // File upload
+    function handleFileUpload(event){
+      const file = event.target.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (e) => { document.getElementById('recipeInput').value = e.target.result; };
+      reader.readAsText(file);
+    }
+    window.handleFileUpload = handleFileUpload;
+
+    // Ingredient emojis
+    const ingredientEmojis = {
+      'flour':'🌾','sugar':'🍯','butter':'🧈','egg':'🥚','milk':'🥛','vanilla':'🌿','baking powder':'⚡','salt':'🧂',
+      'chocolate':'🍫','cocoa':'🍫','oil':'🫒','honey':'🍯','cream':'🥛','cheese':'🧀','nuts':'🥜','fruit':'🍓',
+      'lemon':'🍋','orange':'🍊','cinnamon':'🌿','default':'🥄'
+    };
+    function getIngredientEmoji(ing){
+      const lower = ing.toLowerCase();
+      for (const [key, emoji] of Object.entries(ingredientEmojis)) if (lower.includes(key)) return emoji;
+      return ingredientEmojis.default;
+    }
 
-        async function convertRecipe() {
-            const recipeText = document.getElementById('recipeInput').value.trim();
-
-            if (!recipeText) {
-                showWarning('Please enter a recipe to convert!');
-                return;
-            }
-
-            setLoading(true);
-
-            try {
-                const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        contents: [{
-                            parts: [{
-                                text: `Convert this recipe to precise gram measurements. For each ingredient, provide:
+    // Convert logic (wire up to your backend)
+    const GEMINI_API_KEY = 'API_KEY';
+    const GEMINI_API_URL = 'API_URL';
+    let currentUnit = 'metric';
+    let convertedData = [];
+
+    async function convertRecipe(){
+      const recipeText = document.getElementById('recipeInput').value.trim();
+      if (!recipeText){ showWarning('Please enter a recipe to convert!'); return; }
+      setLoading(true);
+      try{
+        const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`,{
+          method:'POST', headers:{'Content-Type':'application/json'},
+          body: JSON.stringify({
+            contents:[{ parts:[{ text:
+`Convert this recipe to precise gram measurements. For each ingredient, provide:
 1. Normalized ingredient name
 2. Original measurement
 3. Gram equivalent
@@ -1652,213 +580,126 @@ <h3 class="footer-title">Support</h3>
 Please format the response as JSON with this structure:
 {
   "ingredients": [
-    {
-      "ingredient": "All-purpose flour",
-      "original": "2 cups",
-      "grams": 240,
-      "notes": "Sifted measurement"
-    }
+    {"ingredient":"All-purpose flour","original":"2 cups","grams":240,"notes":"Sifted measurement"}
   ],
   "warnings": ["Any ambiguous measurements that need clarification"]
 }
 
 Recipe to convert:
-${recipeText}`
-                            }]
-                        }]
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error('API request failed');
-                }
-
-                const data = await response.json();
-                const aiResponse = data.candidates[0].content.parts[0].text;
-
-                // Parse the AI response
-                try {
-                    const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
-                    if (jsonMatch) {
-                        const parsedData = JSON.parse(jsonMatch[0]);
-                        convertedData = parsedData.ingredients || [];
-                        displayResults(convertedData);
-
-                        // Show warnings if any
-                        if (parsedData.warnings && parsedData.warnings.length > 0) {
-                            showWarning(parsedData.warnings.join('\n'));
-                        }
-                    } else {
-                        throw new Error('Could not parse AI response');
-                    }
-                } catch (parseError) {
-                    console.error('Parse error:', parseError);
-                    // Fallback: create results from plain text
-                    convertedData = parseTextResponse(aiResponse);
-                    displayResults(convertedData);
-                }
-
-            } catch (error) {
-                console.error('Conversion error:', error);
-                showWarning('Sorry, there was an error converting your recipe. Please try again.');
-            } finally {
-                setLoading(false);
-            }
-        }
-
-        function parseTextResponse(text) {
-            // Simple fallback parser for plain text responses
-            const lines = text.split('\n').filter(line => line.trim());
-            const ingredients = [];
-
-            lines.forEach(line => {
-                if (line.includes('cup') || line.includes('tbsp') || line.includes('tsp') || line.includes('pound') || line.includes('oz')) {
-                    const parts = line.split(/[:;-]/);
-                    if (parts.length >= 2) {
-                        ingredients.push({
-                            ingredient: parts[0].trim(),
-                            original: parts[1].trim(),
-                            grams: Math.round(Math.random() * 200 + 50), // Placeholder
-                            notes: 'Estimated conversion'
-                        });
-                    }
-                }
-            });
-
-            return ingredients;
-        }
-
-        function displayResults(ingredients) {
-            const resultsSection = document.getElementById('resultsSection');
-            const resultsBody = document.getElementById('resultsBody');
-
-            resultsBody.innerHTML = '';
-
-            ingredients.forEach(item => {
-                const row = document.createElement('tr');
-                row.className = 'ingredient-row';
-
-                const emoji = getIngredientEmoji(item.ingredient);
-
-                row.innerHTML = `
-                    <td>
-                        <span class="ingredient-icon">${emoji}</span>
-                        ${item.ingredient}
-                    </td>
-                    <td>${item.original}</td>
-                    <td class="tooltip" data-tooltip="${item.notes || 'Standard conversion'}">
-                        <strong>${item.grams}g</strong>
-                    </td>
-                    <td><small>${item.notes || 'Standard'}</small></td>
-                `;
-
-                resultsBody.appendChild(row);
-            });
-
-            resultsSection.style.display = 'block';
-            resultsSection.scrollIntoView({ behavior: 'smooth' });
-        }
-
-        function toggleUnits(unit) {
-            currentUnit = unit;
-
-            // Update active button
-            document.querySelectorAll('.unit-toggle button').forEach(btn => {
-                btn.classList.remove('active');
+${recipeText}` }]}]
+          })
+        });
+        if (!response.ok) throw new Error('API request failed');
+        const data = await response.json();
+        const aiResponse = data?.candidates?.[0]?.content?.parts?.[0]?.text ?? '';
+
+        try{
+          const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+          if (!jsonMatch) throw new Error('No JSON found');
+          const parsed = JSON.parse(jsonMatch[0]);
+          convertedData = parsed.ingredients || [];
+          displayResults(convertedData);
+          if (parsed.warnings?.length) showWarning(parsed.warnings.join('\n'));
+        }catch{
+          convertedData = parseTextResponse(aiResponse);
+          displayResults(convertedData);
+        }
+      }catch(err){
+        console.error(err);
+        showWarning('Sorry, there was an error converting your recipe. Please try again.');
+      }finally{
+        setLoading(false);
+      }
+    }
+    window.convertRecipe = convertRecipe;
+
+    function parseTextResponse(text){
+      const lines = text.split('\n').filter(Boolean);
+      const ingredients = [];
+      lines.forEach(line=>{
+        if (/(cup|tbsp|tsp|pound|oz)/i.test(line)){
+          const parts = line.split(/[:;-]/);
+          if (parts.length>=2){
+            ingredients.push({
+              ingredient: parts[0].trim(),
+              original: parts[1].trim(),
+              grams: Math.round(Math.random()*200+50),
+              notes: 'Estimated conversion'
             });
-            event.target.classList.add('active');
-
-            // Update display (for now, just refresh the current data)
-            if (convertedData.length > 0) {
-                displayResults(convertedData);
-            }
-        }
-
-        function setLoading(isLoading) {
-            const button = document.querySelector('.convert-button');
-            const spinner = document.getElementById('loadingSpinner');
-            const buttonText = document.getElementById('buttonText');
-
-            if (isLoading) {
-                button.disabled = true;
-                spinner.style.display = 'inline-block';
-                buttonText.textContent = 'Converting...';
-            } else {
-                button.disabled = false;
-                spinner.style.display = 'none';
-                buttonText.textContent = 'Magically Convert ✨';
-            }
-        }
-
-        function showWarning(message) {
-            const overlay = document.getElementById('overlay');
-            const popup = document.getElementById('warningPopup');
-            const messageEl = document.getElementById('warningMessage');
-
-            messageEl.textContent = message;
-            overlay.style.display = 'block';
-            popup.style.display = 'block';
+          }
         }
+      });
+      return ingredients;
+    }
 
-        function closeWarning() {
-            const overlay = document.getElementById('overlay');
-            const popup = document.getElementById('warningPopup');
-
-            overlay.style.display = 'none';
-            popup.style.display = 'none';
-        }
-
-        // Dual Scroll Buttons
-        const scrollTopBtn = document.getElementById('scrollTopBtn');
-        const scrollBottomBtn = document.getElementById('scrollBottomBtn');
-
-        window.addEventListener('scroll', () => {
-            if (window.scrollY > 300) {
-                scrollTopBtn.classList.add('show');
-            } else {
-                scrollTopBtn.classList.remove('show');
-            }
-
-            if (window.innerHeight + window.scrollY < document.body.offsetHeight - 300) {
-                scrollBottomBtn.classList.add('show');
-            } else {
-                scrollBottomBtn.classList.remove('show');
-            }
-        });
-
-        scrollTopBtn.addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-
-        scrollBottomBtn.addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-
+    function displayResults(items){
+      const resultsSection = document.getElementById('resultsSection');
+      const resultsBody = document.getElementById('resultsBody');
+      resultsBody.innerHTML = '';
+      items.forEach(item=>{
+        const row = document.createElement('tr');
+        row.className='ingredient-row';
+        const emoji = getIngredientEmoji(item.ingredient);
+        row.innerHTML = `
+          <td><span class="ingredient-icon">${emoji}</span>${item.ingredient}</td>
+          <td>${item.original}</td>
+          <td class="tooltip" data-tooltip="${item.notes || 'Standard conversion'}"><strong>${item.grams}g</strong></td>
+          <td><small>${item.notes || 'Standard'}</small></td>`;
+        resultsBody.appendChild(row);
+      });
+      resultsSection.style.display='block';
+      resultsSection.scrollIntoView({behavior:'smooth'});
+    }
 
-        
-        // Add some sample data for demo purposes
-        document.addEventListener('DOMContentLoaded', function () {
-            // Add floating animation to page elements
-            const animateElements = document.querySelectorAll('.input-section, .results-section');
-            animateElements.forEach((el, index) => {
-                el.style.animation = `fadeInUp 0.6s ease forwards ${index * 0.2}s`;
-                el.style.opacity = '0';
-                el.style.transform = 'translateY(30px)';
-            });
-        });
+    function toggleUnits(unit){
+      currentUnit = unit;
+      document.querySelectorAll('.unit-toggle button').forEach(b=>b.classList.remove('active'));
+      event.target.classList.add('active'); // uses click event
+      if (convertedData.length) displayResults(convertedData);
+    }
+    window.toggleUnits = toggleUnits;
+
+    function setLoading(isLoading){
+      const button = document.querySelector('.convert-button');
+      const spinner = document.getElementById('loadingSpinner');
+      const buttonText = document.getElementById('buttonText');
+      if (isLoading){ button.disabled=true; spinner.style.display='inline-block'; buttonText.textContent='Converting...'; }
+      else { button.disabled=false; spinner.style.display='none'; buttonText.textContent='Magically Convert ✨'; }
+    }
 
-        // Add fadeInUp animation
-        const style = document.createElement('style');
-        style.textContent = `
-            @keyframes fadeInUp {
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-        `;
-        document.head.appendChild(style);
-    </script>
+    function showWarning(message){
+      const overlay = document.getElementById('overlay');
+      const popup = document.getElementById('warningPopup');
+      const messageEl = document.getElementById('warningMessage');
+      messageEl.textContent = message;
+      overlay.style.display='block';
+      popup.style.display='block';
+    }
+    function closeWarning(){
+      document.getElementById('overlay').style.display='none';
+      document.getElementById('warningPopup').style.display='none';
+    }
+    window.closeWarning = closeWarning;
+
+    // Back to top behavior
+    const backToTopBtn = document.getElementById('backToTop');
+    window.addEventListener('scroll', ()=>{
+      backToTopBtn.classList.toggle('show', window.scrollY > 300);
+    });
+    backToTopBtn.addEventListener('click', ()=> window.scrollTo({top:0, behavior:'smooth'}));
+
+    // Entry animations
+    document.addEventListener('DOMContentLoaded', ()=>{
+      const animateEls = document.querySelectorAll('.input-section, .results-section');
+      animateEls.forEach((el,i)=>{
+        el.style.animation = `fadeInUp .6s ease forwards ${i*0.2}s`;
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(30px)';
+      });
+      const style = document.createElement('style');
+      style.textContent = `@keyframes fadeInUp{to{opacity:1; transform:translateY(0);}}`;
+      document.head.appendChild(style);
+    });
+  </script>
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 7c949e6..a139652 100644
--- a/index.html
+++ b/index.html
@@ -1,1850 +1,694 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    
-    <!-- Primary Meta Tags -->
-    <title>BakeGenius.ai - AI-Powered Baking Conversions | Perfect Baking Every Time</title>
-    <!-- Comprehensive Favicon System -->
-    <!-- Standard favicon -->
-    <link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="48x48" href="favicon/favicon-48x48.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="favicon/favicon-192x192.png">
-    <link rel="icon" type="image/png" sizes="512x512" href="favicon/favicon-512x512.png">
-    
-    <!-- Apple Touch Icons -->
-    <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-touch-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-touch-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-touch-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-touch-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon-180x180.png">
-    
-    <!-- Windows Tiles -->
-    <meta name="msapplication-TileColor" content="#3e2723">
-    <meta name="msapplication-TileImage" content="favicon/mstile-144x144.png">
-    <meta name="msapplication-config" content="favicon/browserconfig.xml">
-    
-    <!-- PWA Manifest -->
-    <link rel="manifest" href="favicon/site.webmanifest">
-    
-    <!-- Additional mobile optimization -->
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <meta name="apple-mobile-web-app-title" content="BakeGenius.ai">
-    <meta name="title" content="BakeGenius.ai - AI-Powered Baking Conversions | Perfect Baking Every Time" />
-    <meta name="description" content="Transform your baking with AI-powered recipe conversions. Convert cups to grams, scale recipes, and get precise measurements for perfect baking results every time. Free baking conversion tool." />
-    <meta name="keywords" content="baking conversion, recipe converter, cups to grams, baking calculator, AI baking, recipe scaling, baking measurements, cooking conversion, baking tools, precise baking" />
-    <meta name="robots" content="index, follow" />
-    <meta name="language" content="English" />
-    <meta name="author" content="Supriya Pandey" />
-    <meta name="theme-color" content="#3e2723" />
-    
-    <!-- Canonical URL -->
-    <link rel="canonical" href="https://bakegenius-ai.vercel.app/" />
-    
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://bakegenius-ai.vercel.app/" />
-    <meta property="og:title" content="BakeGenius.ai - AI-Powered Baking Conversions" />
-    <meta property="og:description" content="Transform your baking with AI-powered recipe conversions. Convert cups to grams, scale recipes, and get precise measurements for perfect baking results every time." />
-    <meta property="og:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta property="og:site_name" content="BakeGenius.ai" />
-    <meta property="og:locale" content="en_US" />
-    
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://bakegenius-ai.vercel.app/" />
-    <meta property="twitter:title" content="BakeGenius.ai - AI-Powered Baking Conversions" />
-    <meta property="twitter:description" content="Transform your baking with AI-powered recipe conversions. Convert cups to grams, scale recipes, and get precise measurements for perfect baking results every time." />
-    <meta property="twitter:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
-    
-    <!-- Additional SEO Meta Tags -->
-    <meta name="application-name" content="BakeGenius.ai" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="msapplication-tap-highlight" content="no" />
-    
-    <!-- Structured Data -->
-    <script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "WebApplication",
-        "name": "BakeGenius.ai",
-        "description": "AI-powered baking conversion tool that transforms recipe measurements from cups to grams with precision",
-        "url": "https://bakegenius-ai.vercel.app/",
-        "applicationCategory": "FoodApplication",
-        "operatingSystem": "Web Browser",
-        "offers": {
-            "@type": "Offer",
-            "price": "0",
-            "priceCurrency": "USD"
-        },
-        "creator": {
-            "@type": "Person",
-            "name": "Supriya Pandey",
-            "email": "supriyadpandey502@gmail.com"
-        },
-        "featureList": [
-            "AI-powered recipe conversion",
-            "Cups to grams conversion",
-            "Recipe scaling",
-            "Precise baking measurements",
-            "Custom preferences"
-        ]
-    }
-    </script>
-    
-    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --candy-red: #ff6b6b;
-            --sky-blue: #4ecdc4;
-            --sunny-yellow: #ffd93d;
-            --soft-pink: #ffb6c1;
-            --mint-green: #98fb98;
-            --lavender: #e6e6fa;
-            --dark-bg: #1a1a1a;
-            --dark-card: #2d2d2d;
-            --dark-text: #ffffff;
-            --dark-border: #404040;
-        }
-
-        body {
-            font-family: "Comic Neue", cursive;
-            overflow-x: hidden;
-            background-color: #f5f3f1;
-            min-height: 100vh;
-            position: relative;
-            transition: all 0.3s ease;
-        }
-
-        body.dark-mode {
-            background-color: #0d0d0d;
-        }
-
-        @keyframes wobble {
-            0% {
-                transform: translateX(0%);
-            }
-
-            15% {
-                transform: translateX(-25px) rotate(-5deg);
-            }
-
-            30% {
-                transform: translateX(20px) rotate(3deg);
-            }
-
-            45% {
-                transform: translateX(-15px) rotate(-3deg);
-            }
-
-            60% {
-                transform: translateX(10px) rotate(2deg);
-            }
-
-            75% {
-                transform: translateX(-5px) rotate(-1deg);
-            }
-
-            100% {
-                transform: translateX(0%);
-            }
-        }
-
-        @keyframes shimmer {
-            0% {
-                background-position: -1000px 0;
-            }
-
-            100% {
-                background-position: 1000px 0;
-            }
-        }
-
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-            }
-
-            50% {
-                transform: scale(1.05);
-            }
-
-            100% {
-                transform: scale(1);
-            }
-        }
-
-        /* ===== STANDARDIZED NAVIGATION BAR ===== */
-        .navbar {
-            background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
-            backdrop-filter: blur(15px);
-            padding: 1rem 2rem;
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: 1000;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        body.dark-mode .navbar {
-            background: #1e1e1e !important;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
-        }
-
-        .nav-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            max-width: 1500px;
-            margin: 0 auto;
-        }
-
-        .logo {
-            font-size: 2rem;
-            font-weight: 600;
-            color: #3e2723;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: "Comic Neue", cursive;
-            min-width: 150px;
-            padding-right: 50px;
-        }
-
-        .logo-icon {
-            font-size: 2rem;
-            transition: transform 0.3s ease;
-        }
-
-        .logo-text {
-            font-weight: 600;
-            letter-spacing: -0.5px;
-        }
-
-        .logo:hover {
-            transform: scale(1.05);
-            color: #3e2723;
-        }
-
-        .logo:hover .logo-icon {
-            transform: rotate(10deg);
-        }
-
-        body.dark-mode .logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .logo:hover {
-            color: #e0e0e0;
-        }
-
-        .nav-links {
-            display: flex;
-            list-style: none;
-            gap: 1.5rem;
-            align-items: center;
-        }
-
-        .nav-links a {
-            text-decoration: none;
-            color: #3e2723;
-            font-weight: 600;
-            font-size: 1.1rem;
-            padding: 0.7rem 1rem;
-            border-radius: 25px;
-            transition: all 0.3s ease;
-            position: relative;
-            background: rgba(255, 255, 255, 0.1);
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .nav-links a {
-            color: #e0e0e0 !important;
-            background: rgba(111, 100, 91, 0.133) !important;
-            border: 2px solid transparent !important;
-        }
-
-        .nav-links a:hover {
-            background-color: #f3e0d6;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            border-color: rgba(228, 191, 180, 0.3);
-            color: #3e2723;
-        }
-
-        body.dark-mode .nav-links a:hover {
-            background-color: #0d0d0d !important;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            border-color: #1e1e1e !important;
-            color: #e0e0e0 !important;
-        }
-
-        /* Navigation Actions */
-        .nav-actions {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-
-        .dark-mode-btn {
-            background-color: #3e2723;
-            border: none;
-            color: white;
-            padding: 0.7rem;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1rem;
-            width: 45px;
-            height: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .dark-mode-btn:hover {
-            transform: scale(1.1) rotate(360deg);
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-        }
-
-        body.dark-mode .dark-mode-btn {
-            background-color: #e0e0e0;
-            color: #1e1e1e;
-        }
-
-        
-
-        
-        /* Dark mode base */
-        body.dark-mode {
-        background: #3b3b3b;
-        color: #ffffff;
-        }
-
-        /* Dark mode for modal */
-        body.dark-mode .modal-content {
-            background: #1e1e1e;
-            color: #ffffff;
-        }
-
-        /* Dark mode for inputs */
-        body.dark-mode input {
-            background: #fefcfce6;
-            color: #ffffff;
-
-        }
-
-        
-
-
-        .hamburger {
-            display: none;
-            flex-direction: column;
-            cursor: pointer;
-            padding: 0.5rem;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-
-        .hamburger:hover {
-            background: rgba(255, 255, 255, 0.1);
-        }
-
-        .hamburger span {
-            width: 25px;
-            height: 3px;
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            margin: 3px 0;
-            transition: 0.3s;
-            border-radius: 2px;
-        }
-
-        body.dark-mode .hamburger span {
-            background: #e0e0e0;
-        }
-
-        .hamburger.active span:nth-child(1) {
-            transform: rotate(-45deg) translate(-5px, 6px);
-        }
-
-        .hamburger.active span:nth-child(2) {
-            opacity: 0;
-        }
-
-        .hamburger.active span:nth-child(3) {
-            transform: rotate(45deg) translate(-5px, -6px);
-        }
-
-        /* Back to Top Button Styles */
-        #backToTop {
-            position: fixed;
-            bottom: 2.5rem;
-            right: 2.5rem;
-            z-index: 2000;
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            color: #fff;
-            border: none;
-            border-radius: 50%;
-            width: 56px;
-            height: 56px;
-            font-size: 2rem;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-            cursor: pointer;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.4s, transform 0.2s;
-        }
-
-        body.dark-mode #backToTop {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        #backToTop.show {
-            opacity: 1;
-            pointer-events: auto;
-            transform: scale(1.08);
-        }
-
-        #backToTop:hover {
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            transform: scale(1.15);
-        }
-
-        /* Back to Top to Bottom Button Styles */
-        #Toptoback {
-            position: fixed;
-            bottom: 2.5rem;
-            right: 2.5rem;
-            z-index: 2000;
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            color: #fff;
-            border: none;
-            border-radius: 50%;
-            width: 56px;
-            height: 56px;
-            font-size: 2rem;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-            cursor: pointer;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.4s, transform 0.2s;
-        }
-
-        body.dark-mode #Toptoback {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        #Toptoback.show {
-            opacity: 1;
-            pointer-events: auto;
-            transform: translateY(-10px) scale(1.08);
-        }
-
-        #Toptoback:hover {
-            background: linear-gradient(45deg, #a4766a, #5d4037);
-            transform: scale(1.15);
-        }
-
-        body.dark-mode #Toptoback:hover {
-            background: #e0e0e0;
-            transform: scale(1.15);
-        }
-
-        /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
-        @media (max-width: 768px) {
-            .navbar {
-                padding: 0.8rem 1rem;
-            }
-
-            .nav-links {
-                display: flex;
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100vh;
-                background: #1a1a1a;
-                flex-direction: column;
-                justify-content: flex-start;
-                align-items: center;
-                padding-top: 6rem;
-                transition: transform 0.3s ease;
-                transform: translateX(-100%);
-                gap: 0;
-                z-index: 999;
-            }
-
-            body.dark-mode .nav-links {
-                background: #1a1a1a !important;
-            }
-
-            .nav-links.active {
-                transform: translateX(0);
-            }
-
-            .nav-links li {
-                width: 90%;
-                margin: 0;
-                padding: 0;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            body.dark-mode .nav-links li {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            .nav-links a {
-                width: 100%;
-                padding: 1.5rem 2rem;
-                font-size: 1.2rem;
-                margin-bottom: 0;
-                background: #2a2a2a !important;
-                color: #e0e0e0 !important;
-                border-radius: 0;
-                display: flex;
-                align-items: center;
-                gap: 1rem;
-                transition: all 0.3s ease;
-            }
-
-            .nav-links a:hover {
-                background: #3a3a3a !important;
-                color: #ffffff !important;
-            }
-
-            .nav-actions {
-                gap: 0.5rem;
-                position: relative;
-                z-index: 1001;
-            }
-
-            
-            .dark-mode-btn {
-                width: 40px;
-                height: 40px;
-                font-size: 0.9rem;
-            }
-
-            .hamburger {
-                display: flex;
-                position: relative;
-                z-index: 1001;
-            }
-
-            .logo {
-                font-size: 1.5rem;
-            }
-
-            .logo-icon {
-                font-size: 1.7rem;
-            }
-        }
-
-        /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
-        @media (max-width: 480px) {
-            .navbar {
-                padding: 0.5rem;
-            }
-
-            .logo {
-                font-size: 1.3rem;
-            }
-
-            .logo-icon {
-                font-size: 1.5rem;
-            }
-
-            .nav-actions {
-                gap: 0.3rem;
-            }
-
-           
-
-            .dark-mode-btn {
-                width: 35px;
-                height: 35px;
-                font-size: 0.8rem;
-            }
-        }
-
-        /* Add this new media query block */
-        @media (min-width: 769px) and (max-width: 1024px) {
-            .nav-links {
-                flex-grow: 1;
-                /* Allows links to take up available space */
-                justify-content: space-around;
-                /* Distributes links evenly */
-            }
-
-            .nav-links a {
-                padding: 0.5rem 0.8rem;
-                /* Reduces padding for a tighter fit */
-            }
-
-            .nav-actions {
-                gap: 0.8rem;
-                /* Reduces space between buttons */
-            }
-        }
-
-        /* Main Content */
-        .main-content {
-            margin-top: 100px;
-            transition: all 0.3s ease;
-            padding: 2rem;
-            position: relative;
-            z-index: 2;
-            min-height: calc(100vh - 200px);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-        }
-
-        .hero-section {
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(15px);
-            padding: 3rem;
-            border-radius: 30px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
-            max-width: 800px;
-            margin: 0 auto;
-            position: relative;
-            overflow: hidden;
-            transition: all 0.3s ease;
-        }
-
-        body.dark-mode .hero-section {
-            background: #1e1e1e;
-            box-shadow: 0 2px 2px #1e1e1e;
-        }
-
-        .hero-section::before {
-            content: "";
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            animation: shimmer 3s linear infinite;
-        }
-
-        .hero-title {
-            font-size: 3.5rem;
-            font-weight: 700;
-            background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 1rem;
-        }
-
-        body.dark-mode .hero-title {
-            font-size: 3.5rem;
-            font-weight: 700;
-            background: #e0e0e0;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 1rem;
-        }
-
-        .hero-subtitle {
-            font-size: 1.3rem;
-            color: #333;
-            margin-bottom: 2rem;
-            font-weight: 400;
-            line-height: 1.6;
-            transition: color 0.3s ease;
-        }
-
-        body.dark-mode .hero-subtitle {
-            color: #e0e0e0 !important;
-        }
-
-        .cta-button {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            font-size: 1.2rem;
-            font-weight: 700;
-            padding: 1rem 2.5rem;
-            border: none;
-            border-radius: 50px;
-            cursor: pointer;
-            text-decoration: none;
-            display: inline-block;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        .cta-button:hover {
-            transform: translateY(-5px) scale(1.05);
-            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.6);
-        }
-
-        body.dark-mode .cta-button {
-            background: rgba(220, 121, 63, 0.893);
-            color: #e0e0e0;
-            font-size: 1.2rem;
-            font-weight: 700;
-            padding: 1rem 2.5rem;
-            border: none;
-            border-radius: 50px;
-            cursor: pointer;
-            text-decoration: none;
-            display: inline-block;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 2px 2px rgba(220, 121, 63, 0.893);
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        .cta-button::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg,
-                    transparent,
-                    rgba(255, 255, 255, 0.3),
-                    transparent);
-            transition: left 0.5s;
-        }
-
-        .cta-button:hover::before {
-            left: 100%;
-        }
-
-        /* Decorative Elements */
-        .baking-icons {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-        }
-
-        .baking-icon {
-            position: absolute;
-            font-size: 3rem;
-            color: var(--candy-red);
-            opacity: 0.3;
-            animation: wobble 4s ease-in-out infinite;
-        }
-
-        .icon-1 {
-            top: 10%;
-            left: 10%;
-            animation-delay: 0s;
-        }
-
-        .icon-2 {
-            top: 20%;
-            right: 15%;
-            animation-delay: 1s;
-        }
-
-        .icon-3 {
-            bottom: 30%;
-            left: 20%;
-            animation-delay: 2s;
-        }
-
-        .icon-4 {
-            bottom: 20%;
-            right: 10%;
-            animation-delay: 3s;
-        }
-
-        /* Features Preview */
-        .features-preview {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 2rem;
-            margin-top: 4rem;
-            max-width: 1000px;
-        }
-
-        .feature-card {
-            background: rgba(255, 255, 255, 0.8);
-            backdrop-filter: blur(10px);
-            padding: 2rem;
-            border-radius: 20px;
-            text-align: center;
-            transition: all 0.3s ease;
-            border: 2px solid transparent;
-        }
-
-        body.dark-mode .feature-card {
-            background-color: #1e1e1e;
-        }
-
-        .feature-card:hover {
-            transform: translateY(-5px);
-            border-color: #1e1e1e;
-            box-shadow: 0 15px 40px #1e1e1e;
-        }
-
-        .feature-icon {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-            display: block;
-        }
-
-        .feature-card:nth-child(1) .feature-icon {
-            color: var(--candy-red);
-        }
-
-        .feature-card:nth-child(2) .feature-icon {
-            color: var(--sky-blue);
-        }
-
-        .feature-card:nth-child(3) .feature-icon {
-            color: var(--sunny-yellow);
-        }
-
-        .feature-title {
-            font-size: 1.3rem;
-            font-weight: 700;
-            margin-bottom: 0.5rem;
-            color: #333;
-        }
-
-        body.dark-mode .feature-title {
-            color: #e0e0e0 !important;
-        }
-
-        .feature-desc {
-            color: #333;
-            line-height: 1.5;
-        }
-
-        body.dark-mode .feature-desc {
-            color: #e0e0e0 !important;
-        }
-
-
-
-        .footer {
-            background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
-            backdrop-filter: blur(15px);
-            position: relative;
-            z-index: 2;
-            border-top: 1px solid rgba(255, 255, 255, 0.3);
-            margin-top: 4rem;
-        }
-
-
-        body.dark-mode .footer {
-            background: #1e1e1e;
-        }
-
-        .footer-content {
-            max-width: 1500px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: 2fr 1fr 1fr 1fr;
-            gap: 3rem;
-            padding: 3rem 2rem 2rem;
-        }
-
-        .footer-section h3.footer-title {
-            color: #3e2723;
-            font-size: 1.2rem;
-            font-weight: 700;
-            margin-bottom: 1.5rem;
-            position: relative;
-        }
-
-        .footer-section h3.footer-title::after {
-            content: '';
-            position: absolute;
-            bottom: -8px;
-            left: 0;
-            width: 30px;
-            height: 3px;
-            background: #3e2723;
-            border-radius: 2px;
-        }
-
-        body.dark-mode .footer-section h3.footer-title::after {
-            background: #e0e0e0;
-        }
-
-        .footer-logo {
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-            margin-bottom: 1.5rem;
-            font-size: 1.8rem;
-            font-weight: 700;
-            color: #3e2723;
-        }
-
-        .footer-logo-icon {
-            font-size: 2rem;
-        }
-
-        .footer-description {
-            color: #333;
-            line-height: 1.6;
-            margin-bottom: 2rem;
-            font-size: 0.95rem;
-        }
-
-        .footer-links {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .footer-links li {
-            margin-bottom: 0.8rem;
-        }
-
-        .footer-links a {
-            color: #333;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            padding: 0.3rem 0;
-            border-radius: 5px;
-        }
-
-        .footer-links a:hover {
-            color: black;
-            transform: translateX(4px);
-            background: rgba(255, 107, 107, 0.1);
-            padding-left: 0.8rem;
-        }
-
-        .footer-links i {
-            font-size: 0.9rem;
-            width: 16px;
-            opacity: 0.7;
-        }
-
-        .social-links {
-            display: flex;
-            gap: 1rem;
-            margin-top: 1rem;
-        }
-
-        .social-link {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 45px;
-            height: 45px;
-            background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            text-decoration: none;
-            border-radius: 50%;
-            font-size: 1.2rem;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .social-link:hover {
-            transform: translateY(-3px) scale(1.1);
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-        }
-
-
-        .footer-bottom {
-            background: rgba(0, 0, 0, 0.05);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 1.5rem 0;
-        }
-
-        .footer-bottom-content {
-            max-width: 1500px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        .copyright {
-            color: #333;
-            font-size: 0.9rem;
-            margin: 0;
-        }
-
-        .copyright .name {
-            color: #3e2723;
-            font-weight: 600;
-        }
-
-        .footer-badges {
-            display: flex;
-            gap: 0.8rem;
-            flex-wrap: wrap;
-        }
-
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.4rem;
-            padding: 0.4rem 0.8rem;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            color: white;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-
-        .badge:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .badge-green {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        .badge-blue {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        .badge-purple {
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-        }
-
-        body.dark-mode .badge-blue {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        body.dark-mode .badge-green {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-        body.dark-mode .badge-purple {
-            background: #e0e0e0;
-            color: #0d0d0d;
-        }
-
-
-        @media (max-width: 1024px) {
-            .footer-content {
-                grid-template-columns: 1fr 1fr;
-                gap: 2rem;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .footer-content {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-                text-align: center;
-            }
-
-            .footer-bottom-content {
-                flex-direction: column;
-                text-align: center;
-                gap: 1rem;
-            }
-
-            .footer-badges {
-                justify-content: center;
-            }
-        }
-
-        @media (max-width: 768px) {
-            /* ensure hamburger only appears under mobile media queries */
-            /* removed stray desktop display override */
-
-            .hero-title {
-                font-size: 2.5rem;
-            }
-
-            .hero-section {
-                padding: 2rem;
-                margin: 1rem;
-            }
-
-            .features-preview {
-                grid-template-columns: 1fr;
-                margin-top: 2rem;
-            }
-
-            .footer-content {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-                padding: 2rem 1rem 1rem;
-                text-align: center;
-            }
-
-            .footer-section h3.footer-title::after {
-                left: 50%;
-                transform: translateX(-50%);
-            }
-
-            .footer-bottom-content {
-                flex-direction: column;
-                text-align: center;
-                gap: 1rem;
-            }
-
-            .footer-badges {
-                justify-content: center;
-            }
-
-            .social-links {
-                justify-content: center;
-            }
-        }
-
-        @media (max-width: 1024px) {
-            .footer-content {
-                grid-template-columns: 1fr 1fr;
-                gap: 2.5rem;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .hero-title {
-                font-size: 2rem;
-            }
-
-            .hero-subtitle {
-                font-size: 1.1rem;
-            }
-
-            .cta-button {
-                font-size: 1rem;
-                padding: 0.8rem 2rem;
-            }
-        }
-
-        /*dark mode*/
-
-        body.dark-mode .footer-content {
-            background-color: #1e1e1e;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        body.dark-mode .footer-section h3.footer-title {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-logo {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-description {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .footer-links a {
-            color: #e0e0e0;
-        }
-
-        body.dark-mode .footer-links a:hover {
-            color: #a0a0a0;
-            background: rgba(255, 138, 128, 0.1);
-        }
-
-        body.dark-mode .footer-bottom {
-            background: #1e1e1e;
-        }
-
-        body.dark-mode .copyright {
-            color: #a0a0a0;
-        }
-
-        body.dark-mode .copyright .name {
-            color: #ef6154;
-        }
-/* 📱 Mobile Responsive Tweaks */
-@media (max-width: 768px) {
-  .footer-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
-    gap: 20px;
-  }
-
-  .footer-bottom-content {
-    flex-direction: column;
-    text-align: center;
-    gap: 10px;
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>BakeGenius.ai - AI-Powered Baking Conversions | Perfect Baking Every Time</title>
+
+  <!-- Favicons -->
+  <link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="48x48" href="favicon/favicon-48x48.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="favicon/favicon-192x192.png">
+  <link rel="icon" type="image/png" sizes="512x512" href="favicon/favicon-512x512.png">
+
+  <!-- Apple Touch Icons -->
+  <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon-180x180.png">
+
+  <!-- Windows Tiles -->
+  <meta name="msapplication-TileColor" content="#3e2723">
+  <meta name="msapplication-TileImage" content="favicon/mstile-144x144.png">
+  <link rel="manifest" href="favicon/site.webmanifest">
+  <meta name="msapplication-config" content="favicon/browserconfig.xml">
+
+  <!-- PWA/mobile -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="BakeGenius.ai">
+  <meta name="theme-color" content="#3e2723" />
+
+  <!-- SEO -->
+  <link rel="canonical" href="https://bakegenius-ai.vercel.app/" />
+  <meta name="title" content="BakeGenius.ai - AI-Powered Baking Conversions | Perfect Baking Every Time" />
+  <meta name="description" content="Transform your baking with AI-powered recipe conversions. Convert cups to grams, scale recipes, and get precise measurements for perfect baking results every time. Free baking conversion tool." />
+  <meta name="keywords" content="baking conversion, recipe converter, cups to grams, baking calculator, AI baking, recipe scaling, baking measurements, cooking conversion, baking tools, precise baking" />
+  <meta name="robots" content="index, follow" />
+  <meta name="language" content="English" />
+  <meta name="author" content="Supriya Pandey" />
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://bakegenius-ai.vercel.app/" />
+  <meta property="og:title" content="BakeGenius.ai - AI-Powered Baking Conversions" />
+  <meta property="og:description" content="Transform your baking with AI-powered recipe conversions. Convert cups to grams, scale recipes, and get precise measurements for perfect baking results every time." />
+  <meta property="og:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:site_name" content="BakeGenius.ai" />
+  <meta property="og:locale" content="en_US" />
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="https://bakegenius-ai.vercel.app/" />
+  <meta property="twitter:title" content="BakeGenius.ai - AI-Powered Baking Conversions" />
+  <meta property="twitter:description" content="Transform your baking with AI-powered recipe conversions. Convert cups to grams, scale recipes, and get precise measurements for perfect baking results every time." />
+  <meta property="twitter:image" content="https://bakegenius-ai.vercel.app/og-image.png" />
+
+  <!-- Structured Data -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    "name": "BakeGenius.ai",
+    "description": "AI-powered baking conversion tool that transforms recipe measurements from cups to grams with precision",
+    "url": "https://bakegenius-ai.vercel.app/",
+    "applicationCategory": "FoodApplication",
+    "operatingSystem": "Web Browser",
+    "offers": {"@type":"Offer","price":"0","priceCurrency":"USD"},
+    "creator": {"@type":"Person","name":"Supriya Pandey","email":"supriyadpandey502@gmail.com"},
+    "featureList": ["AI-powered recipe conversion","Cups to grams conversion","Recipe scaling","Precise baking measurements","Custom preferences"]
   }
+  </script>
+
+  <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+
+  <style>
+    * { margin:0; padding:0; box-sizing:border-box; }
+
+    :root{
+      --candy-red:#ff6b6b;
+      --sky-blue:#4ecdc4;
+      --sunny-yellow:#ffd93d;
+      --soft-pink:#ffb6c1;
+      --mint-green:#98fb98;
+      --lavender:#e6e6fa;
+      --dark-bg:#1a1a1a;
+      --dark-card:#2d2d2d;
+      --dark-text:#ffffff;
+      --dark-border:#404040;
+      /* added vars that were referenced */
+      --border-color:#e6e6e6;
+      --text-light:#666666;
+      --text-dark:#1a1a1a;
+      --shadow-medium:0 10px 30px rgba(0,0,0,.12);
+    }
+    /* 1) Hero title (light) */
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+  -webkit-background-clip: text;
+  background-clip: text;              /* <-- added */
+  -webkit-text-fill-color: transparent;
+  /* (optional) color: transparent; */
+  margin-bottom: 1rem;
 }
 
-@media (max-width: 500px) {
-  .footer-content {
-    grid-template-columns: 1fr; /* stack sections on mobile */
-    text-align: center;
-  }
-
-  .footer-logo {
-    justify-content: center;
-  }
-
-  .social-links {
-    justify-content: center;
-  }
-
-  .footer-badges {
-    justify-content: center;
-  }
+/* 2) Hero title (dark) */
+body.dark-mode .hero-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  background: #e0e0e0;
+  -webkit-background-clip: text;
+  background-clip: text;              /* <-- added */
+  -webkit-text-fill-color: transparent;
+  /* (optional) color: transparent; */
+  margin-bottom: 1rem;
 }
 
-        
-        .modal-content {
-            background: white;
-            border-radius: 20px;
-            max-width: 550px;
-            width: 90%;
-            padding: 2.5rem 2rem;
-            box-shadow: var(--shadow-medium);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .modal-content::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            
-        }
-
-        .close-btn {
-            position: absolute;
-            top: 15px;
-            right: 20px;
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            cursor: pointer;
-            color: var(--text-light);
-            width: 35px;
-            height: 35px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .close-btn:hover {
-            background: rgba(255, 107, 107, 0.1);
-            color: var(--candy-red);
-        }
-
-        .form-title {
-            text-align: center;
-            margin-bottom: 2rem;
-            font-size: 2rem;
-            font-weight: 600;
-            color: var(--text-dark);
-            background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        body.dark-mode .form-title {
-            text-align: center;
-            margin-bottom: 2rem;
-            font-size: 2rem;
-            font-weight: 600;
-            color: var(--text-dark);
-            background: #e0e0e0;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .form-container {
-            background: #c9c6c68a;
-            padding: 2rem;
-            border-radius: 16px;
-            border: 2px solid transparent;
-        }
-
-        .form-container:focus-within {
-            box-shadow: 0 3px 0 0 rgba(90, 89, 89, 0.392);
-        }
-
-        .input-group {
-            position: relative;
-            margin-bottom: 1.5rem;
-        }
-
-        .input-wrapper {
-            display: flex;
-            align-items: center;
-            background: white;
-            border: 2px solid var(--border-color);
-            border-radius: 12px;
-            padding: 0.8rem 1rem;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .input-wrapper:focus-within {
-            border-color: var(--sky-blue);
-            box-shadow: 0 0 0 3px rgba(2, 162, 151, 0.1);
-            transform: translateY(-1px);
-        }
-
-        .input-wrapper::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 0;
-            height: 100%;
-            background: linear-gradient(90deg, rgba(78, 205, 196, 0.05), rgba(255, 107, 107, 0.05));
-            transition: width 0.3s ease;
-            z-index: 1;
-        }
-
-        .input-wrapper:focus-within::before {
-            width: 100%;
-        }
-
-        .input-icon {
-            margin-right: 12px;
-            font-size: 1.1rem;
-            color: var(--text-light);
-            transition: color 0.3s ease;
-            z-index: 2;
-            position: relative;
-        }
-
-        .input-wrapper:focus-within .input-icon {
-            color: var(--sky-blue);
-        }
-
-        .form-input {
-            width: 100%;
-            border: none;
-            outline: none;
-            font-size: 1rem;
-            color: var(--text-dark);
-            background: transparent;
-            z-index: 2;
-            position: relative;
-        }
-
-        .form-input::placeholder {
-            color: #3f3f3f;
-            
-        }
-
-        .form-input:focus::placeholder {
-            opacity: 0.7;
-            transform: translateY(-2px);
-            transition: all 0.1s ease;
-        }
-
-        .submit-btn {
-            width: 100%;
-            background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-            color: white;
-            font-weight: 600;
-            border: none;
-            border-radius: 12px;
-            padding: 1rem;
-            font-size: 1.1rem;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            text-align: center;
-            letter-spacing: 1px;
-        }
-
-        .submit-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-            transition: left 0.5s;
-        }
-
-        .submit-btn:hover {
-            background: linear-gradient(90deg, #543732, #3d2b28, #341d19);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px #402a26;
-        }
-
-        .submit-btn:hover::before {
-            left: 100%;
-        }
-
-        .submit-btn:active {
-            transform: translateY(0);
-        }
-
-        .toggle-form {
-            text-align: center;
-            margin-top: 1.5rem;
-            color: var(--text-light);
-        }
+/* 3) Form title (light) — if this block exists in your CSS */
+.form-title {
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+  -webkit-background-clip: text;
+  background-clip: text;              /* <-- added */
+  -webkit-text-fill-color: transparent;
+  /* (optional) color: transparent; */
+}
 
-        .toggle-link {
-            color: #734e47;
-            font-weight: 600;
-            cursor: pointer;
-            text-decoration: none;
-            position: relative;
-            transition: color 0.3s ease;
-        }
+/* 4) Form title (dark) — if this block exists in your CSS */
+body.dark-mode .form-title {
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 2rem;
+  font-weight: 600;
+  background: #e0e0e0;
+  -webkit-background-clip: text;
+  background-clip: text;              /* <-- added */
+  -webkit-text-fill-color: transparent;
+  /* (optional) color: transparent; */
+}
 
-        .toggle-link::after {
-            content: '';
-            position: absolute;
-            bottom: -2px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: #734e47;
-            transition: width 0.3s ease;
-        }
+    body{
+      font-family:"Comic Neue", cursive;
+      overflow-x:hidden;
+      background-color:#f5f3f1;
+      min-height:100vh;
+      position:relative;
+      transition:all .3s ease;
+      color:#1a1a1a;
+    }
+    body.dark-mode{
+      background:#0d0d0d;
+      color:#ffffff;
+    }
 
-        .toggle-link:hover {
-            color: #835951;
-        }
+    @keyframes wobble{
+      0%{transform:translateX(0)}
+      15%{transform:translateX(-25px) rotate(-5deg)}
+      30%{transform:translateX(20px) rotate(3deg)}
+      45%{transform:translateX(-15px) rotate(-3deg)}
+      60%{transform:translateX(10px) rotate(2deg)}
+      75%{transform:translateX(-5px) rotate(-1deg)}
+      100%{transform:translateX(0)}
+    }
+    @keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
+    @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
+    @keyframes spin{to{transform:rotate(360deg)}}
+
+    /* Loading screen */
+    #loading-screen{
+      position:fixed; inset:0;
+      background:rgba(255,255,255,0.95);
+      display:flex; align-items:center; justify-content:center;
+      z-index:2000;
+      transition:opacity .3s ease, visibility .3s ease;
+    }
+    #loading-screen.hidden{opacity:0; visibility:hidden}
+    #loading-screen .loader{display:flex; flex-direction:column; align-items:center; gap:.75rem; color:#3e2723; font-weight:700}
+    #loading-screen .fa-spinner{font-size:2rem; animation:spin 1s linear infinite}
+
+    /* Nav */
+    .navbar{
+      background:radial-gradient(circle at center,#e5c5b3,#e9b4b6);
+      backdrop-filter:blur(15px);
+      padding:1rem 2rem;
+      position:fixed; top:0; width:100%; z-index:1000;
+      box-shadow:0 8px 32px rgba(0,0,0,0.1);
+      border-bottom:1px solid rgba(255,255,255,0.2);
+      transition:all .3s ease;
+    }
+    body.dark-mode .navbar{background:#1e1e1e !important; border-bottom:1px solid rgba(255,255,255,0.1) !important}
+
+    .nav-container{display:flex; justify-content:space-between; align-items:center; max-width:1500px; margin:0 auto}
+    .logo{font-size:2rem; font-weight:600; color:#3e2723; text-decoration:none; transition:all .3s ease; display:flex; align-items:center; gap:.5rem; min-width:150px; padding-right:50px}
+    .logo-icon{font-size:2rem; transition:transform .3s ease}
+    .logo:hover{transform:scale(1.05); color:#3e2723}
+    .logo:hover .logo-icon{transform:rotate(10deg)}
+    body.dark-mode .logo{color:#e0e0e0}
+    body.dark-mode .logo:hover{color:#e0e0e0}
+
+    .nav-links{display:flex; list-style:none; gap:1.5rem; align-items:center}
+    .nav-links a{
+      text-decoration:none; color:#3e2723; font-weight:600; font-size:1.1rem;
+      padding:.7rem 1rem; border-radius:25px; transition:all .3s ease;
+      position:relative; background:rgba(255,255,255,0.1); border:2px solid transparent;
+    }
+    body.dark-mode .nav-links a{color:#e0e0e0 !important; background:rgba(111,100,91,0.133) !important}
+    .nav-links a:hover{
+      background-color:#f3e0d6; transform:translateY(-2px);
+      box-shadow:0 4px 15px rgba(0,0,0,0.2);
+      border-color:rgba(228,191,180,0.3); color:#3e2723;
+    }
+    body.dark-mode .nav-links a:hover{background-color:#0d0d0d !important; border-color:#1e1e1e !important; color:#e0e0e0 !important}
 
-.toggle-link:hover::after {
-    width: 100%;
-    background: #835951;
+    .nav-actions{display:flex; align-items:center; gap:1rem}
+    .dark-mode-btn{
+      background-color:#3e2723; border:none; color:white; padding:.7rem; border-radius:50%;
+      cursor:pointer; transition:all .3s ease; font-size:1rem; width:45px; height:45px;
+      display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.2);
+    }
+    .dark-mode-btn:hover{transform:scale(1.1) rotate(360deg); box-shadow:0 6px 20px rgba(0,0,0,0.3)}
+    body.dark-mode .dark-mode-btn{background-color:#e0e0e0; color:#1e1e1e}
+
+    .hamburger{display:none; flex-direction:column; cursor:pointer; padding:.5rem; border-radius:8px; transition:all .3s ease}
+    .hamburger:hover{background:rgba(255,255,255,0.1)}
+    .hamburger span{width:25px; height:3px; background:linear-gradient(45deg,#a4766a,#5d4037); margin:3px 0; transition:.3s; border-radius:2px}
+    body.dark-mode .hamburger span{background:#e0e0e0}
+    .hamburger.active span:nth-child(1){transform:rotate(-45deg) translate(-5px,6px)}
+    .hamburger.active span:nth-child(2){opacity:0}
+    .hamburger.active span:nth-child(3){transform:rotate(45deg) translate(-5px,-6px)}
+
+    /* Buttons: back-to-top/bottom */
+    #backToTop, #Toptoback{
+      position:fixed; bottom:2.5rem; right:2.5rem; z-index:2000;
+      background:linear-gradient(45deg,#a4766a,#5d4037); color:#fff; border:none; border-radius:50%;
+      width:56px; height:56px; font-size:2rem; box-shadow:0 8px 24px rgba(0,0,0,0.18);
+      cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s, transform .2s;
+    }
+    body.dark-mode #backToTop, body.dark-mode #Toptoback{background:#e0e0e0; color:#0d0d0d}
+    #backToTop.show{opacity:1; pointer-events:auto; transform:scale(1.08)}
+    #backToTop:hover{transform:scale(1.15)}
+    #Toptoback{right:6.5rem}
+    #Toptoback.show{opacity:1; pointer-events:auto; transform:translateY(-10px) scale(1.08)}
+    #Toptoback:hover{transform:scale(1.15)}
+
+    /* Main */
+    .main-content{margin-top:100px; transition:all .3s ease; padding:2rem; position:relative; z-index:2; min-height:calc(100vh - 200px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
+    .hero-section{
+      background:rgba(255,255,255,0.9); backdrop-filter:blur(15px);
+      padding:3rem; border-radius:30px; box-shadow:0 20px 60px rgba(0,0,0,0.1);
+      max-width:800px; margin:0 auto; position:relative; overflow:hidden; transition:all .3s ease;
+    }
+    body.dark-mode .hero-section{background:#1e1e1e; box-shadow:0 2px 2px #1e1e1e}
+    .hero-section::before{content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; animation:shimmer 3s linear infinite}
+    .hero-title{
+      font-size:3.5rem; font-weight:700;
+      background:linear-gradient(90deg,#3e2723,#4d312b,#3e2723);
+      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem;
+    }
+    body.dark-mode .hero-title{background:#e0e0e0; -webkit-background-clip:text; background-clip: text;-webkit-text-fill-color:transparent}
+    .hero-subtitle{font-size:1.3rem; color:#333; margin-bottom:2rem; font-weight:400; line-height:1.6; transition:color .3s ease}
+    body.dark-mode .hero-subtitle{color:#e0e0e0 !important}
+
+    .cta-button{
+      background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723);
+      color:white; font-size:1.2rem; font-weight:700; padding:1rem 2.5rem; border:none; border-radius:50px; cursor:pointer;
+      text-decoration:none; display:inline-block; transition:all .3s ease; position:relative; overflow:hidden;
+      box-shadow:0 10px 30px rgba(255,107,107,0.4); animation:pulse 2s ease-in-out infinite;
+    }
+    .cta-button:hover{transform:translateY(-5px) scale(1.05); box-shadow:0 15px 40px rgba(255,107,107,0.6)}
+    .cta-button::before{content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); transition:left .5s}
+    .cta-button:hover::before{left:100%}
+
+    /* Features */
+    .features-preview{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:4rem; max-width:1000px}
+    .feature-card{background:rgba(255,255,255,0.8); backdrop-filter:blur(10px); padding:2rem; border-radius:20px; text-align:center; transition:all .3s ease; border:2px solid transparent}
+    body.dark-mode .feature-card{background-color:#1e1e1e}
+    .feature-card:hover{transform:translateY(-5px); border-color:#1e1e1e; box-shadow:0 15px 40px #1e1e1e}
+    .feature-icon{font-size:3rem; margin-bottom:1rem; display:block}
+    .feature-card:nth-child(1) .feature-icon{color:var(--candy-red)}
+    .feature-card:nth-child(2) .feature-icon{color:var(--sky-blue)}
+    .feature-card:nth-child(3) .feature-icon{color:var(--sunny-yellow)}
+    .feature-title{font-size:1.3rem; font-weight:700; margin-bottom:.5rem; color:#333}
+    body.dark-mode .feature-title{color:#e0e0e0 !important}
+    .feature-desc{color:#333; line-height:1.5}
+    body.dark-mode .feature-desc{color:#e0e0e0 !important}
+
+    /* Footer */
+    .footer{background:radial-gradient(circle at center,#e9b4b6,#e5c5b3); backdrop-filter:blur(15px); position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.3); margin-top:4rem}
+    body.dark-mode .footer{background:#1e1e1e}
+    .footer-content{max-width:1500px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:3rem 2rem 2rem}
+    .footer-section h3.footer-title{color:#3e2723; font-size:1.2rem; font-weight:700; margin-bottom:1.5rem; position:relative}
+    .footer-section h3.footer-title::after{content:""; position:absolute; bottom:-8px; left:0; width:30px; height:3px; background:#3e2723; border-radius:2px}
+    body.dark-mode .footer-section h3.footer-title::after{background:#e0e0e0}
+    .footer-logo{display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; color:#3e2723}
+    .footer-logo-icon{font-size:2rem}
+    .footer-description{color:#333; line-height:1.6; margin-bottom:2rem; font-size:.95rem}
+    .footer-links{list-style:none; padding:0; margin:0}
+    .footer-links li{margin-bottom:.8rem}
+    .footer-links a{color:#333; text-decoration:none; display:flex; align-items:center; gap:.8rem; font-weight:500; transition:all .3s ease; padding:.3rem 0; border-radius:5px}
+    .footer-links a:hover{color:black; transform:translateX(4px); background:rgba(255,107,107,0.1); padding-left:.8rem}
+    .footer-links i{font-size:.9rem; width:16px; opacity:.7}
+    .social-links{display:flex; gap:1rem; margin-top:1rem}
+    .social-link{display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723); color:white; text-decoration:none; border-radius:50%; font-size:1.2rem; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2)}
+    .social-link:hover{transform:translateY(-3px) scale(1.1); box-shadow:0 8px 25px rgba(0,0,0,0.3)}
+    .footer-bottom{background:rgba(0,0,0,0.05); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0}
+    .footer-bottom-content{max-width:1500px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem}
+    .copyright{color:#333; font-size:.9rem; margin:0}
+    .copyright .name{color:#3e2723; font-weight:600}
+    .footer-badges{display:flex; gap:.8rem; flex-wrap:wrap}
+    .badge{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600; color:white; text-decoration:none; transition:all .3s ease}
+    .badge:hover{transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,0.2)}
+    .badge-green,.badge-blue,.badge-purple{background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723)}
+    body.dark-mode .footer-content{background-color:#1e1e1e; border-top:1px solid rgba(255,255,255,0.1)}
+    body.dark-mode .footer-section h3.footer-title{color:#e0e0e0}
+    body.dark-mode .footer-logo{color:#e0e0e0}
+    body.dark-mode .footer-description{color:#a0a0a0}
+    body.dark-mode .footer-links a{color:#e0e0e0}
+    body.dark-mode .footer-links a:hover{color:#a0a0a0; background:rgba(255,138,128,0.1)}
+    body.dark-mode .footer-bottom{background:#1e1e1e}
+    body.dark-mode .copyright{color:#a0a0a0}
+    body.dark-mode .copyright .name{color:#ef6154}
+
+    /* Inputs in dark mode (sane defaults even if forms appear later) */
+    body.dark-mode input{background:#2a2a2a; color:#ffffff; border-color:#404040}
+
+    /* Responsive */
+    @media (max-width:768px){
+      .navbar{padding:.8rem 1rem}
+      .nav-links{
+        display:flex; position:fixed; top:0; left:0; width:100%; height:100vh; background:#1a1a1a;
+        flex-direction:column; justify-content:flex-start; align-items:center; padding-top:6rem;
+        transition:transform .3s ease; transform:translateX(-100%); gap:0; z-index:999;
+      }
+      body.dark-mode .nav-links{background:#1a1a1a !important}
+      .nav-links.active{transform:translateX(0)}
+      .nav-links li{width:90%; border-bottom:1px solid rgba(255,255,255,0.1)}
+      .nav-links a{width:100%; padding:1.5rem 2rem; font-size:1.2rem; margin-bottom:0; background:#2a2a2a !important; color:#e0e0e0 !important; border-radius:0; display:flex; align-items:center; gap:1rem}
+      .nav-links a:hover{background:#3a3a3a !important; color:#ffffff !important}
+      .nav-actions{gap:.5rem; z-index:1001}
+      .dark-mode-btn{width:40px; height:40px; font-size:.9rem}
+      .hamburger{display:flex; position:relative; z-index:1001}
+
+      .logo{font-size:1.5rem}
+      .logo-icon{font-size:1.7rem}
+    /* Hero title (light) */
+.hero-title{
+  font-size: 3.5rem;
+  font-weight: 700;
+  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+  -webkit-background-clip: text;
+  background-clip: text;             /* ✅ standard property */
+  -webkit-text-fill-color: transparent;
+  color: transparent;                /* ✅ improves cross-browser */
+  margin-bottom: 1rem;
 }
 
-/* Show/Hide Password */
-.password-toggle {
-    background: none;
-    border: none;
-    color: var(--text-light);
-    cursor: pointer;
-    font-size: 1rem;
-    margin-left: 8px;
-    transition: color 0.3s ease;
-    z-index: 2;
-    position: relative;
+/* Hero title (dark) */
+body.dark-mode .hero-title{
+  font-size: 3.5rem;
+  font-weight: 700;
+  background: #e0e0e0;
+  -webkit-background-clip: text;
+  background-clip: text;             /* ✅ standard property */
+  -webkit-text-fill-color: transparent;
+  color: transparent;                /* ✅ improves cross-browser */
+  margin-bottom: 1rem;
 }
 
-.password-toggle:hover {
-    color: var(--sky-blue);
+/* Form title (if you still use it anywhere) */
+.form-title{
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+  -webkit-background-clip: text;
+  background-clip: text;             /* ✅ standard property */
+  -webkit-text-fill-color: transparent;
+  color: transparent;                /* ✅ improves cross-browser */
 }
 
-.signup-btn {
-    background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-    text-align: center !important;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+/* Form title in dark mode (if applicable) */
+body.dark-mode .form-title{
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 2rem;
+  font-weight: 600;
+  background: #e0e0e0;
+  -webkit-background-clip: text;
+  background-clip: text;             /* ✅ standard property */
+  -webkit-text-fill-color: transparent;
+  color: transparent;                /* ✅ improves cross-browser */
 }
 
-.signup-btn:hover {
-    background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
-    box-shadow: 0 4px 15px #402a26;
-}
+      .hero-title{font-size:2.5rem}
+      .hero-section{padding:2rem; margin:1rem}
+      .features-preview{grid-template-columns:1fr; margin-top:2rem}
 
-/* Responsive */
-@media (max-width: 480px) {
-    .modal-content {
-        padding: 2rem 1.5rem;
-        margin: 1rem;
+      .footer-content{grid-template-columns:1fr; gap:2rem; text-align:center; padding:2rem 1rem 1rem}
+      .footer-section h3.footer-title::after{left:50%; transform:translateX(-50%)}
+      .footer-bottom-content{flex-direction:column; text-align:center; gap:1rem}
+      .footer-badges{justify-content:center}
+      .social-links{justify-content:center}
     }
 
-    .form-container {
-        padding: 1.5rem;
+    /* Tablet footer grid */
+    @media (max-width:1024px){
+      .footer-content{grid-template-columns:1fr 1fr; gap:2rem}
     }
 
-    .form-title {
-        font-size: 1.7rem;
+    /* Tablet nav tweaks */
+    @media (min-width:769px) and (max-width:1024px){
+      .nav-links{flex-grow:1; justify-content:space-around}
+      .nav-links a{padding:.5rem .8rem}
+      .nav-actions{gap:.8rem}
     }
-}
 
-/* Hidden by default - remove this line to show the modal */
+    @media (max-width:500px){
+      .footer-content{grid-template-columns:1fr; text-align:center}
+      .footer-logo{justify-content:center}
+      .social-links{justify-content:center}
+      .footer-badges{justify-content:center}
+    }
 
-    </style>
+    @media (max-width:480px){
+      .hero-title{font-size:2rem}
+      .hero-subtitle{font-size:1.1rem}
+      .cta-button{font-size:1rem; padding:.8rem 2rem}
+    }
+  </style>
 </head>
 
 <body>
-    <!-- Loading Screen -->
-    <div id="loading-screen">
-        <div class="loader">
-            <i class="fa-solid fa-spinner"></i>
-            <h2>Baking Mode On<span class="dots"></span></h2>
-        </div>
+  <!-- Loading Screen -->
+  <div id="loading-screen" aria-live="polite">
+    <div class="loader">
+      <i class="fa-solid fa-spinner" aria-hidden="true"></i>
+      <h2>Baking Mode On<span class="dots"></span></h2>
     </div>
-    <!-- Navigation -->
-    <nav class="navbar">
-        <div class="nav-container">
-            <a href="index.html" class="logo">
-                <span class="logo-icon">🍰</span>
-                <span class="logo-text">BakeGenius.ai</span>
-            </a>
-
-            <ul class="nav-links" id="navLinks">
-                
-                <li>
-                    <a href="convert.html">
-                        <i class="fas fa-exchange-alt" style="margin-right:8px;"></i>
-                        Convert Recipe
-                    </a>
-                </li>
-                <li>
-                    <a href="customize.html">
-                        <i class="fas fa-cog" style="margin-right:8px;"></i>
-                        Customize
-                    </a>
-                </li>
-                <li>
-                    <a href="scale.html">
-                        <i class="fas fa-balance-scale" style="margin-right:8px;"></i>
-                        Scale Recipes
-                    </a>
-                </li>
-                <li>
-                    <a href="about.html">
-                        <i class="fas fa-info-circle" style="margin-right:8px;"></i>
-                        About
-                    </a>
-                </li>
-                <li>
-                    <a href="faq.html">
-                        <i class="fas fa-question-circle" style="margin-right:8px;"></i>
-                        FAQs
-                    </a>
-                </li>
-                
-            </ul>
-            <div class="nav-actions">
-                <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode">
-                    <i class="fas fa-moon"></i>
-                </button>
-                
-            </div>
-            <div class="hamburger" id="hamburger">
-                <span></span>
-                <span></span>
-                <span></span>
-            </div>
+  </div>
+
+  <!-- Navigation -->
+  <nav class="navbar">
+    <div class="nav-container">
+      <a href="index.html" class="logo" aria-label="BakeGenius.ai home">
+        <span class="logo-icon">🍰</span>
+        <span class="logo-text">BakeGenius.ai</span>
+      </a>
+
+      <ul class="nav-links" id="navLinks">
+        <li><a href="convert.html"><i class="fas fa-exchange-alt" style="margin-right:8px;"></i>Convert Recipe</a></li>
+        <li><a href="customize.html"><i class="fas fa-cog" style="margin-right:8px;"></i>Customize</a></li>
+        <li><a href="scale.html"><i class="fas fa-balance-scale" style="margin-right:8px;"></i>Scale Recipes</a></li>
+        <li><a href="about.html"><i class="fas fa-info-circle" style="margin-right:8px;"></i>About</a></li>
+        <li><a href="faq.html"><i class="fas fa-question-circle" style="margin-right:8px;"></i>FAQs</a></li>
+      </ul>
+
+      <div class="nav-actions">
+        <button id="darkModeToggle" class="dark-mode-btn" title="Toggle Dark Mode" aria-label="Toggle dark mode">
+          <i class="fas fa-moon" aria-hidden="true"></i>
+        </button>
+      </div>
+
+      <div class="hamburger" id="hamburger" aria-label="Toggle navigation" aria-expanded="false" role="button" tabindex="0">
+        <span></span><span></span><span></span>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Main Content -->
+  <main class="main-content">
+    <section class="hero-section">
+      <h1 class="hero-title">Welcome to BakeGenius.ai</h1>
+      <p class="hero-subtitle">
+        From spoon to scale — get exact gram conversions with AI magic ✨<br />
+        Transform vague recipe measurements into precise, consistent results every time!
+      </p>
+      <a href="convert.html" class="cta-button">Start Converting Now 🚀</a>
+    </section>
+
+    <section class="features-preview">
+      <div class="feature-card">
+        <i class="fas fa-magic feature-icon" aria-hidden="true"></i>
+        <h3 class="feature-title">AI-Powered Precision</h3>
+        <p class="feature-desc">Advanced AI converts "cups" and "spoons" into exact gram measurements for perfect baking every time.</p>
+      </div>
+      <div class="feature-card">
+        <i class="fas fa-balance-scale feature-icon" aria-hidden="true"></i>
+        <h3 class="feature-title">Smart Recipe Scaling</h3>
+        <p class="feature-desc">Effortlessly scale recipes up or down while maintaining perfect ratios and adjusting rising agents intelligently.</p>
+      </div>
+      <div class="feature-card">
+        <i class="fas fa-cogs feature-icon" aria-hidden="true"></i>
+        <h3 class="feature-title">Custom Preferences</h3>
+        <p class="feature-desc">Personalize conversions based on your preferred brands and ingredient specifications for consistent results.</p>
+      </div>
+    </section>
+  </main>
+
+  <!-- Scroll buttons -->
+  <button id="backToTop" title="Back to Top" aria-label="Back to top">⬆</button>
+  <button id="Toptoback" title="Top To Back" aria-label="Scroll to bottom">⬇</button>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="footer-section footer-brand">
+        <div class="footer-logo">
+          <span class="footer-logo-icon">🍰</span>
+          <span class="footer-logo-text">BakeGenius.ai</span>
         </div>
-    </nav>
-
-    <!-- Main Content -->
-    <main class="main-content">
-        <!-- Hero Section -->
-        <section class="hero-section">
-            <h1 class="hero-title">Welcome to BakeGenius.ai</h1>
-            <p class="hero-subtitle">
-                From spoon to scale — get exact gram conversions with AI magic ✨<br />
-                Transform vague recipe measurements into precise, consistent results
-                every time!
-            </p>
-            <a href="convert.html" class="cta-button">Start Converting Now 🚀</a>
-        </section>
-
-        <!-- Features Preview -->
-        <section class="features-preview">
-            <div class="feature-card">
-                <i class="fas fa-magic feature-icon"></i>
-                <h3 class="feature-title">AI-Powered Precision</h3>
-                <p class="feature-desc">
-                    Advanced AI converts "cups" and "spoons" into exact gram
-                    measurements for perfect baking every time.
-                </p>
-            </div>
-            <div class="feature-card">
-                <i class="fas fa-balance-scale feature-icon"></i>
-                <h3 class="feature-title">Smart Recipe Scaling</h3>
-                <p class="feature-desc">
-                    Effortlessly scale recipes up or down while maintaining perfect
-                    ratios and adjusting rising agents intelligently.
-                </p>
-            </div>
-            <div class="feature-card">
-                <i class="fas fa-cogs feature-icon"></i>
-                <h3 class="feature-title">Custom Preferences</h3>
-                <p class="feature-desc">
-                    Personalize conversions based on your preferred brands and
-                    ingredient specifications for consistent results.
-                </p>
-            </div>
-        </section>
-    </main>
-    <!-- Back to Top Button -->
-    <button id="backToTop" title="Back to Top">⬆</button>
-    <!-- Top to Bottom Button -->
-    <button id="Toptoback" title="Top To Back">⬇</button>
-
-    <!-- footer startes here -->
-    <footer class="footer">
-        <div class="footer-content">
-            <div class="footer-section footer-brand">
-                <div class="footer-logo">
-                    <span class="footer-logo-icon">🍰</span>
-                    <span class="footer-logo-text">BakeGenius.ai</span>
-                </div>
-                <p class="footer-description">
-                    Transform your baking with AI-powered recipe conversions. Making baking accessible, precise, and
-                    delightful for everyone.
-                </p>
-                <div class="social-links">
-                    <a href="https://www.linkedin.com/in/supriyapandey595/" class="social-link linkedin" target="_blank"
-                        rel="noopener" title="LinkedIn">
-                        <i class="fab fa-linkedin-in"></i>
-                    </a>
-                    <a href="https://github.com/supriya46788/BakeGenuis-AI" class="social-link github" target="_blank"
-                        rel="noopener" title="GitHub">
-                        <i class="fab fa-github"></i>
-                    </a>
-                    <a href="mailto:supriyadpandey502@gmail.com" class="social-link email" target="_blank"
-                        rel="noopener" title="Email">
-                        <i class="fas fa-envelope"></i>
-                    </a>
-                </div>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Quick Links</h3>
-                <ul class="footer-links">
-                    <li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
-                    <li><a href="convert.html"><i class="fas fa-exchange-alt"></i>Convert Recipe</a></li>
-                    <li><a href="customize.html"><i class="fas fa-cog"></i>Customize</a></li>
-                    <li><a href="scale.html"><i class="fas fa-balance-scale"></i>Scale Recipes</a></li>
-                    <li><a href="about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Features</h3>
-                <ul class="footer-links">
-                    <li><a href="javascript:void(0)"><i class="fas fa-calculator"></i>Unit Conversion</a></li>
-                    <li><a href="javascript:void(0)"><i class="fas fa-chart-line"></i>Nutritional Analysis</a></li>
-                    <li><a href="javascript:void(0)"><i class="fas fa-balance-scale"></i>Recipe Scaling</a></li>
-                    <li><a href="javascript:void(0)"><i class="fas fa-magic"></i>AI Optimization</a></li>
-                    <li><a href="javascript:void(0)"><i class="fas fa-mobile-alt"></i>Mobile Friendly</a></li>
-                </ul>
-            </div>
-
-            <div class="footer-section">
-                <h3 class="footer-title">Support</h3>
-                <ul class="footer-links">
-                    <li><a href="contact.html"><i class="fas fa-question-circle"></i>Contact Us</a></li>
-                    <li><a href="feedback.html"><i class="fas fa-comment"></i>Feedback</a></li>
-                    <li><a href="faq.html"><i class="fas fa-info-circle"></i>FAQ</a></li>
-                    <li><a href="privacypolicy.html"><i class="fas fa-shield-alt"></i>Privacy Policy</a></li>
-                    <li><a href="toc.html"><i class="fas fa-file-contract"></i>Terms of Service</a></li>
-                </ul>
-            </div>
+        <p class="footer-description">
+          Transform your baking with AI-powered recipe conversions. Making baking accessible, precise, and delightful for everyone.
+        </p>
+        <div class="social-links">
+          <a href="https://www.linkedin.com/in/supriyapandey595/" class="social-link linkedin" target="_blank" rel="noopener" title="LinkedIn">
+            <i class="fab fa-linkedin-in" aria-hidden="true"></i>
+          </a>
+          <a href="https://github.com/supriya46788/BakeGenuis-AI" class="social-link github" target="_blank" rel="noopener" title="GitHub">
+            <i class="fab fa-github" aria-hidden="true"></i>
+          </a>
+          <a href="mailto:supriyadpandey502@gmail.com" class="social-link email" target="_blank" rel="noopener" title="Email">
+            <i class="fas fa-envelope" aria-hidden="true"></i>
+          </a>
         </div>
+      </div>
+
+      <div class="footer-section">
+        <h3 class="footer-title">Quick Links</h3>
+        <ul class="footer-links">
+          <li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
+          <li><a href="convert.html"><i class="fas fa-exchange-alt"></i>Convert Recipe</a></li>
+          <li><a href="customize.html"><i class="fas fa-cog"></i>Customize</a></li>
+          <li><a href="scale.html"><i class="fas fa-balance-scale"></i>Scale Recipes</a></li>
+          <li><a href="about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h3 class="footer-title">Features</h3>
+        <ul class="footer-links">
+          <li><a href="javascript:void(0)"><i class="fas fa-calculator"></i>Unit Conversion</a></li>
+          <li><a href="javascript:void(0)"><i class="fas fa-chart-line"></i>Nutritional Analysis</a></li>
+          <li><a href="javascript:void(0)"><i class="fas fa-balance-scale"></i>Recipe Scaling</a></li>
+          <li><a href="javascript:void(0)"><i class="fas fa-magic"></i>AI Optimization</a></li>
+          <li><a href="javascript:void(0)"><i class="fas fa-mobile-alt"></i>Mobile Friendly</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h3 class="footer-title">Support</h3>
+        <ul class="footer-links">
+          <li><a href="contact.html"><i class="fas fa-question-circle"></i>Contact Us</a></li>
+          <li><a href="feedback.html"><i class="fas fa-comment"></i>Feedback</a></li>
+          <li><a href="faq.html"><i class="fas fa-info-circle"></i>FAQ</a></li>
+          <li><a href="privacypolicy.html"><i class="fas fa-shield-alt"></i>Privacy Policy</a></li>
+          <li><a href="toc.html"><i class="fas fa-file-contract"></i>Terms of Service</a></li>
+        </ul>
+      </div>
+    </div>
 
-        <div class="footer-bottom">
-            <div class="footer-bottom-content">
-                <p class="copyright">
-                    © 2025 BakeGenius.ai. Made with <span style="color:#FF6B6B;">❤️</span> by <span class="name">Supriya
-                        Pandey</span>
-                </p>
-                <div class="footer-badges">
-                    <span class="badge badge-green"><i class="fas fa-heart"></i> Open Source</span>
-                    <span class="badge badge-blue"><i class="fas fa-leaf"></i> Eco Friendly</span>
-                    <span class="badge badge-purple"><i class="fas fa-robot"></i> AI Powered</span>
-                </div>
-            </div>
+    <div class="footer-bottom">
+      <div class="footer-bottom-content">
+        <p class="copyright">
+          © 2025 BakeGenius.ai. Made with <span style="color:#FF6B6B;">❤️</span> by <span class="name">Supriya Pandey</span>
+        </p>
+        <div class="footer-badges">
+          <span class="badge badge-green"><i class="fas fa-heart"></i> Open Source</span>
+          <span class="badge badge-blue"><i class="fas fa-leaf"></i> Eco Friendly</span>
+          <span class="badge badge-purple"><i class="fas fa-robot"></i> AI Powered</span>
         </div>
-    </footer>
-
-   
-    <script>
-        // Dark Mode Toggle
-        const darkModeToggle = document.getElementById("darkModeToggle");
-        const body = document.body;
-        const darkModeIcon = darkModeToggle.querySelector("i");
-
-        // Check for saved theme preference or default to light mode
-        const currentTheme = localStorage.getItem("theme") || "light";
-        if (currentTheme === "dark") {
-            body.classList.add("dark-mode");
-            darkModeIcon.classList.remove("fa-moon");
-            darkModeIcon.classList.add("fa-sun");
-        }
-
-        darkModeToggle.addEventListener("click", () => {
-            body.classList.toggle("dark-mode");
-
-            // Update icon
-            if (body.classList.contains("dark-mode")) {
-                darkModeIcon.classList.remove("fa-moon");
-                darkModeIcon.classList.add("fa-sun");
-                localStorage.setItem("theme", "dark");
-            } else {
-                darkModeIcon.classList.remove("fa-sun");
-                darkModeIcon.classList.add("fa-moon");
-                localStorage.setItem("theme", "light");
-            }
-        });
-
-        // Mobile Navigation Toggle
-        const hamburger = document.getElementById("hamburger");
-        const navLinks = document.getElementById("navLinks");
-
-        hamburger.addEventListener("click", (e) => {
-            e.stopPropagation();
-            navLinks.classList.toggle("active");
-            hamburger.classList.toggle("active");
-        });
-
-        // Close mobile menu when clicking on a link
-        const navItems = document.querySelectorAll(".nav-links a");
-        navItems.forEach((item) => {
-            item.addEventListener("click", () => {
-                navLinks.classList.remove("active");
-                hamburger.classList.remove("active");
-            });
-        });
-
-        // Close mobile menu when clicking outside (only if menu is open)
-        document.addEventListener("click", (e) => {
-            if (
-                navLinks.classList.contains("active") &&
-                !hamburger.contains(e.target) &&
-                !navLinks.contains(e.target)
-            ) {
-                navLinks.classList.remove("active");
-                hamburger.classList.remove("active");
-            }
-        });
-
-        // Smooth scroll for CTA button
-        const ctaButton = document.querySelector(".cta-button");
-        ctaButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            // Add a fun animation on click
-            ctaButton.style.animation = "bounce 0.5s ease-in-out";
-            setTimeout(() => {
-                ctaButton.style.animation = "pulse 2s ease-in-out infinite";
-                // Navigate to convert page (in real app)
-                window.location.href = "convert.html";
-            }, 500);
-        });
-
-        // Back to Top Button Logic
-        const backToTopBtn = document.getElementById("backToTop");
-        window.addEventListener("scroll", () => {
-            if (window.scrollY > 300) {
-                backToTopBtn.classList.add("show");
-            } else {
-                backToTopBtn.classList.remove("show");
-            }
-        });
-        backToTopBtn.addEventListener("click", () => {
-            window.scrollTo({ top: 0, behavior: "smooth" });
-        });
-
-        //Top to Bottom Button Logic
-        const ToptobackBtn = document.getElementById("Toptoback");
-        window.addEventListener("scroll", () => {
-            if (window.scrollY < 100) {
-                ToptobackBtn.classList.add("show");
-            } else {
-                ToptobackBtn.classList.remove("show");
-            }
-        });
-        ToptobackBtn.addEventListener("click", () => {
-            window.scrollTo({ top: 10000, behavior: "smooth" });
-        });
-
-        // Parallax effect for decorative icons
-        window.addEventListener("scroll", () => {
-            const scrolled = window.pageYOffset;
-            const parallax = scrolled * 0.5;
-
-            document.querySelectorAll(".baking-icon").forEach((icon, index) => {
-                icon.style.transform = `translateY(${parallax * (index + 1) * 0.1
-                    }px) rotate(${parallax * 0.05}deg)`;
-            });
-        });
-
-        // Add sparkle effect on hover for feature cards
-        document.querySelectorAll(".feature-card").forEach((card) => {
-            card.addEventListener("mouseenter", () => {
-                card.style.boxShadow = "0 20px 60px rgba(0, 0, 0, 0.15)";
-            });
-
-            card.addEventListener("mouseleave", () => {
-                card.style.boxShadow = "none";
-            });
-        });
-
-        
-
-        // Open Modal
-        
-
-        document.addEventListener('visibilitychange', function () {
-            if (document.visibilityState === 'visible') {
-                document.title = 'BakeGenius.ai - Perfect Baking Every Time!';
-            } else {
-                document.title = 'Come back to Website';
-            }
-        });
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    // Dark Mode Toggle
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const body = document.body;
+    const darkModeIcon = darkModeToggle.querySelector("i");
+
+    const currentTheme = localStorage.getItem("theme") || "light";
+    if (currentTheme === "dark") {
+      body.classList.add("dark-mode");
+      darkModeIcon.classList.replace("fa-moon","fa-sun");
+    }
 
-        document.addEventListener("DOMContentLoaded", function () {
-            const loadingScreen = document.getElementById("loading-screen");
-        
-            // Set a timeout to hide the loading screen
-            setTimeout(() => {
-                loadingScreen.classList.add("hidden");
-            }, 7000); // 7000ms = 7 seconds (adjust as needed)
-        });
-    </script>
+    darkModeToggle.addEventListener("click", () => {
+      body.classList.toggle("dark-mode");
+      if (body.classList.contains("dark-mode")) {
+        darkModeIcon.classList.replace("fa-moon","fa-sun");
+        localStorage.setItem("theme","dark");
+      } else {
+        darkModeIcon.classList.replace("fa-sun","fa-moon");
+        localStorage.setItem("theme","light");
+      }
+    });
+
+    // Mobile Navigation Toggle
+    const hamburger = document.getElementById("hamburger");
+    const navLinks = document.getElementById("navLinks");
+    const toggleNav = () => {
+      navLinks.classList.toggle("active");
+      hamburger.classList.toggle("active");
+      const expanded = hamburger.getAttribute("aria-expanded") === "true";
+      hamburger.setAttribute("aria-expanded", (!expanded).toString());
+    };
+    hamburger.addEventListener("click", (e) => { e.stopPropagation(); toggleNav(); });
+    hamburger.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleNav(); } });
+    document.querySelectorAll(".nav-links a").forEach((item) => {
+      item.addEventListener("click", () => {
+        navLinks.classList.remove("active");
+        hamburger.classList.remove("active");
+        hamburger.setAttribute("aria-expanded","false");
+      });
+    });
+    document.addEventListener("click", (e) => {
+      if (navLinks.classList.contains("active") && !hamburger.contains(e.target) && !navLinks.contains(e.target)) {
+        navLinks.classList.remove("active");
+        hamburger.classList.remove("active");
+        hamburger.setAttribute("aria-expanded","false");
+      }
+    });
+
+    // CTA button animation + nav
+    const ctaButton = document.querySelector(".cta-button");
+    ctaButton.addEventListener("click", (e) => {
+      e.preventDefault();
+      ctaButton.style.animation = "bounce 0.5s ease-in-out";
+      setTimeout(() => {
+        ctaButton.style.animation = "pulse 2s ease-in-out infinite";
+        window.location.href = "convert.html";
+      }, 500);
+    });
+
+    // Scroll buttons logic
+    const backToTopBtn = document.getElementById("backToTop");
+    const ToptobackBtn = document.getElementById("Toptoback");
+    window.addEventListener("scroll", () => {
+      backToTopBtn.classList.toggle("show", window.scrollY > 300);
+      ToptobackBtn.classList.toggle("show", window.scrollY < 100);
+    });
+    backToTopBtn.addEventListener("click", () => window.scrollTo({ top: 0, behavior: "smooth" }));
+    ToptobackBtn.addEventListener("click", () => window.scrollTo({ top: 10000, behavior: "smooth" }));
+
+    // Decorative parallax (safe if icons exist)
+    window.addEventListener("scroll", () => {
+      const scrolled = window.pageYOffset;
+      const parallax = scrolled * 0.5;
+      document.querySelectorAll(".baking-icon").forEach((icon, index) => {
+        icon.style.transform = `translateY(${parallax * (index + 1) * 0.1}px) rotate(${parallax * 0.05}deg)`;
+      });
+    });
+
+    // Feature hover sparkle
+    document.querySelectorAll(".feature-card").forEach((card) => {
+      card.addEventListener("mouseenter", () => { card.style.boxShadow = "0 20px 60px rgba(0,0,0,0.15)"; });
+      card.addEventListener("mouseleave", () => { card.style.boxShadow = "none"; });
+    });
+
+    // Tab title change
+    document.addEventListener("visibilitychange", function () {
+      document.title = document.visibilityState === "visible"
+        ? "BakeGenius.ai - Perfect Baking Every Time!"
+        : "Come back to Website";
+    });
+
+    // Hide loading screen
+    document.addEventListener("DOMContentLoaded", function () {
+      const loadingScreen = document.getElementById("loading-screen");
+      setTimeout(() => { loadingScreen.classList.add("hidden"); }, 1500);
+    });
+  </script>
 </body>
-
-
-</html>
\ No newline at end of file
+</html>