diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..f673a71 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
\ No newline at end of file
diff --git a/Carbo-footprint.css b/Carbo-footprint.css
index 33a123c..1065960 100644
--- a/Carbo-footprint.css
+++ b/Carbo-footprint.css
@@ -1,31 +1,168 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #EDF6F9;
-    color: #333;
-    text-align: center;
-    padding: 20px;
+/* Reset some default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Progress Bar */
+#progress-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 9px;
+    z-index: 99990;
+}
+
+#progress-bar {
+    height: 9px;
+    width: 0;
+    background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%);
+    box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
+/* Header and Navigation */
+header {
+    background-color: #00796b;
+    color: white;
+    padding: 15px;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  header h1 {
+    font-size: 1.5rem;
+    margin: 0;
+    color: white;
+  }
+  
+  nav ul {
+    list-style-type: none;
+    display: flex;
+  }
+  
+  nav ul li {
+    margin-left: 20px;
+  }
+  
+  nav ul li a {
+    color: white;
+    transition: color 0.3s;
+  }
+  
+  nav ul li a:hover {
+    color: #e0f7fa;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 7px;
+  }
+  
+  .nav-controls {
+    display: flex;
+    align-items: center;
+  }
+  
+  #theme-toggle, #menu-toggle {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    margin-left: 15px;
+  }
+  
+  #menu-toggle {
+    display: none;
+  }
+  
+/* Dark Mode Styles */
+body.dark-mode {
+    background-color: #333;
+    color: white;
+}
+
+body.dark-mode header {
+    background-color: #00796b;
+}
+
+body.dark-mode .button a {
+    color: #ddd;
+}
+
+body.dark-mode #progress-container {
+    background-color: #444;
+}
+
+body.dark-mode #progress-bar {
+    background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%);
+}
+.dark-mode label{
+    color: black;
 }
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .nav-menu {
+        display: none; /* Hide nav menu on smaller screens */
+    }
 
-.container {
-    max-width: 600px;
-    margin: auto;
+    #menu-toggle {
+        display: block; /* Show menu toggle button */
+    }
+}
+
+
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh; /* Makes sure the content is vertically centered */
+    background-color: #EDF6F9; /* Light background for the main section */
     padding: 20px;
+}
+main .container {
+    width: 100%; /* Ensures the container takes full width but stays within max-width */
+    max-width: 600px; /* Keeps the layout consistent */
+    background-color: #FFDDD2; /* Matches the container's background */
     border: 1px solid #006D77;
     border-radius: 10px;
-    background-color: #FFDDD2;
+    padding: 20px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #006D77;
 }
 
 label {
     display: block;
     margin: 10px 0 5px;
+    font-weight: bold;
 }
 
 input {
     width: 100%;
-    padding: 8px;
+    padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #006D77;
     border-radius: 5px;
+    transition: border-color 0.3s;
+}
+
+input:focus {
+    border-color: #004c54;
+    outline: none;
 }
 
 button {
@@ -35,13 +172,122 @@ button {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
 }
 
 button:hover {
     background-color: #004c54;
+    transform: scale(1.05);
 }
 
 .result, .tips {
     margin-top: 20px;
     font-weight: bold;
+    background-color: #FFF;
+    border: 1px solid #006D77;
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+
+.nav-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.social-media {
+    display: flex;
+    justify-content: center;
+    gap: 15px; /* Space between the icons */
+    margin-top: 20px;
+}
+
+.social-media a {
+    display: inline-block;
+    font-size: 2rem;
+    color: #6366F1; /* Adjust this to match your site's theme */
+    transition: color 0.3s ease;
 }
+.social-media a:hover {
+    color: #4f50c4; /* Darker color on hover */
+}
+
+.social-media box-icon {
+    width: 40px; /* Adjust the size as per your requirement */
+    height: 40px;
+}
+
+@media (max-width: 768px) {
+    header {
+        flex-wrap: wrap;
+    }
+  
+    nav {
+        order: 3;
+        width: 100%;
+        margin-top: 15px;
+    }
+  
+    nav ul {
+        flex-direction: column;
+        display: none;
+    }
+  
+    nav ul.show {
+        display: flex;
+    }
+  
+    nav ul li {
+        margin: 10px 0;
+    }
+  
+    #menu-toggle {
+        display: block;
+    }
+}
+
+#footer {
+    background-color: #00796b;
+    color: white;
+    text-align: center;
+    padding: 20px;
+  }
+  
+  #newsletter-form {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin: 20px 0;
+  }
+  
+  #newsletter-form input {
+    padding: 10px;
+    border: 1px solid #e0f7fa;
+    border-radius: 5px;
+  }
+  
+  #newsletter-form button {
+    background-color: #26a69a;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+  }
+  
+  #newsletter-form button:hover {
+    background-color: #004d40;
+    transform: scale(1.05);
+  }
+  
+  .social-media {
+    margin: 20px 0;
+  }
+  
+  .social-media a {
+    color: white;
+    margin: 0 10px;
+  }
\ No newline at end of file
diff --git a/assets/6824802.jpg b/assets/6824802.jpg
new file mode 100644
index 0000000..2f56139
Binary files /dev/null and b/assets/6824802.jpg differ
diff --git a/assets/6881999.jpg b/assets/6881999.jpg
new file mode 100644
index 0000000..a777a71
Binary files /dev/null and b/assets/6881999.jpg differ
diff --git a/assets/arrangement-cooked-fish-leftovers-recycle-symbol.jpg b/assets/arrangement-cooked-fish-leftovers-recycle-symbol.jpg
new file mode 100644
index 0000000..95e11d4
Binary files /dev/null and b/assets/arrangement-cooked-fish-leftovers-recycle-symbol.jpg differ
diff --git a/assets/front-view-recycling-basket-grass-with-trash.jpg b/assets/front-view-recycling-basket-grass-with-trash.jpg
new file mode 100644
index 0000000..f582404
Binary files /dev/null and b/assets/front-view-recycling-basket-grass-with-trash.jpg differ
diff --git a/assets/rb_2148298503.png b/assets/rb_2148298503.png
new file mode 100644
index 0000000..e31f005
Binary files /dev/null and b/assets/rb_2148298503.png differ
diff --git a/assets/rb_8795.png b/assets/rb_8795.png
new file mode 100644
index 0000000..5a007ef
Binary files /dev/null and b/assets/rb_8795.png differ
diff --git a/bot.jpg b/bot.jpg
new file mode 100644
index 0000000..c26c1e8
Binary files /dev/null and b/bot.jpg differ
diff --git a/carbon-footprint.html b/carbon-footprint.html
index e49216c..bbe143e 100644
--- a/carbon-footprint.html
+++ b/carbon-footprint.html
@@ -4,9 +4,36 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Carbon Footprint Calculator</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="Carbo-footprint.css">
 </head>
 <body>
+
+    <!-- Progress Bar -->
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+    </div>
+
+    <!-- Navbar section -->
+    <header>
+        <a href="index.html"><h1>Waste Management</h1></a>
+        <nav>
+            <ul id="nav-menu">
+                <li><a href="#upload">Upload</a></li>
+                <li><a href="#features">Features</a></li>
+                <li><a href="#feedback">Feedback</a></li>
+                <li><a href="#about">About US</a></li>
+                <li><a href="register.html">Sign up</a></li>
+                <li><a href="#footer">Contact</a></li>
+            </ul>
+        </nav>
+        <div class="nav-controls">
+            <button id="theme-toggle" aria-label="Toggle dark mode">🌓</button>
+            <button id="menu-toggle" aria-label="Toggle menu">☰</button>
+        </div>
+    </header>
+
+
+    <main>
     <div class="container">
         <h1>Carbon Footprint Calculator</h1>
         <form id="footprintForm">
@@ -21,8 +48,104 @@ <h1>Carbon Footprint Calculator</h1>
 
         <div id="result" class="result"></div>
         <div id="tips" class="tips"></div>
+    
     </div>
+</main>
+    <footer id="footer">
+        <h2>Stay Connected</h2>
+        <form id="newsletter-form">
+            <input type="email" placeholder="Your Email" required>
+            <button type="submit">Subscribe</button>
+        </form>
+        <div class="social-media">
+            <a href="#">
+                <box-icon type="logo" name="facebook"></box-icon>
+            </a>
+            <a href="#">
+                <box-icon type="logo" name="twitter"></box-icon>
+            </a>
+            <a href="#">
+                <box-icon type="logo" name="instagram"></box-icon>
+            </a>
+        </div>
+        <div class="community-message">
+            <h3>Our Commitment to Sustainability</h3>
+            <p>At Waste Management, we are dedicated to building a greener future. Through our community recycling programs and sustainability initiatives, we strive to reduce waste and protect the environment for generations to come. Join us in our mission to create a cleaner, healthier planet.</p>
+        </div>
+        <br>
+        <p>&copy; 2024 Waste Management. All rights reserved.</p>
+    </footer>
+
+
+    <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+    const menuToggle = document.getElementById('menu-toggle');
+    const navMenu = document.getElementById('nav-menu');
+    const themeToggle = document.getElementById('theme-toggle');
+    const body = document.body;
+
+    // Menu toggle functionality
+    if (menuToggle && navMenu) {
+        menuToggle.addEventListener('click', () => {
+            navMenu.classList.toggle('show');
+        });
+    }
+
+    // Theme toggle functionality
+    if (themeToggle) {
+        themeToggle.addEventListener('click', () => {
+            body.classList.toggle('dark-mode');
+            themeToggle.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌓';
+        });
+    }
+    });
+
+    document.getElementById('footprintForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    // Get input values
+    const wasteAmount = parseFloat(document.getElementById('wasteAmount').value);
+    const recycledAmount = parseFloat(document.getElementById('recycledAmount').value);
+
+    // Validate inputs
+    if (isNaN(wasteAmount) || isNaN(recycledAmount)) {
+        alert("Please enter valid numbers.");
+        return;
+    }
+
+    // Calculate carbon footprint
+    const netWaste = wasteAmount - recycledAmount;
+    const carbonFootprint = netWaste * 0.5; // Example factor
+
+    // Display results
+    const resultDiv = document.getElementById('result');
+    resultDiv.innerHTML = `Your estimated carbon footprint is <strong>${carbonFootprint.toFixed(2)} kg CO2</strong> per week.`;
+
+    // Provide tips based on the result
+    let tips = '';
+    if (carbonFootprint < 10) {
+        tips = 'Great job! Keep reducing waste and recycling more.';
+    } else if (carbonFootprint >= 10 && carbonFootprint < 20) {
+        tips = 'You are doing well, but there’s room for improvement. Try to recycle more!';
+    } else {
+        tips = 'Consider reducing your waste and increasing your recycling efforts to lower your carbon footprint.';
+    }
+    
+    const tipsDiv = document.getElementById('tips');
+    tipsDiv.innerHTML = `<strong>Tips:</strong> ${tips}`;
+});
+
+const progressBar = document.getElementById('progress-bar');
+    if (progressBar) {
+        window.addEventListener('scroll', () => {
+            const windowHeight = window.innerHeight;
+            const documentHeight = document.documentElement.scrollHeight;
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100;
 
-    <script src="script.js"></script>
+            progressBar.style.width = scrollPercentage + '%';
+        });
+    }
+</script>
 </body>
 </html>
diff --git a/chatbot.gif b/chatbot.gif
new file mode 100644
index 0000000..9772cf9
Binary files /dev/null and b/chatbot.gif differ
diff --git a/chatbot.html b/chatbot.html
new file mode 100644
index 0000000..ab60264
--- /dev/null
+++ b/chatbot.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Waste Management-Chat Bot</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link href="Style.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
+  </head>
+  <body class="bg-[#1B63AC] flex items-center justify-center min-h-screen">
+    <div id="Loader"></div>
+    <div
+      class="flex flex-col items-center justify-center w-full max-w-xl space-y-4"
+    >
+      <div class="w-full flex justify-center">
+        <img
+          src="bot.jpg"
+          alt="Chat Bot"
+          class="h-42 w-42 object-cover"
+        />
+      </div>
+
+      <div class="chat-container w-full bg-white p-4 rounded-lg shadow-md">
+        <div id="output-field" class="text-center text-lg font-semibold mb-3">
+          How can I help you today?
+        </div>
+        <div
+          id="output-container"
+          class="mb-3 overflow-auto"
+          style="max-height: 300px"
+        ></div>
+        <div class="input-group mb-3">
+          <div id="image-preview-container" class="input-group-prepend mr-1">
+            <span
+              id="image-preview"
+              class="flex items-center"
+              style="display: none"
+            >
+              <img src="" alt="Image preview" class="h-10 mr-2" />
+              <button
+                type="button"
+                id="clear-image"
+                class="close text-red-600 text-2xl leading-none"
+                aria-label="Close"
+              >
+                &times;
+              </button>
+            </span>
+          </div>
+          <input
+            type="text"
+            id="prompt-input"
+            class="form-control flex-1"
+            placeholder="Type your prompt here..."
+            aria-label="Message input"
+          />
+          <button
+            class="input-group-text bg-gray-200"
+            id="inputGroupFileAddon"
+            onclick="document.getElementById('image-input').click();"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="25"
+              height="25"
+              fill="currentColor"
+              class="bi bi-image"
+              viewBox="0 0 16 16"
+            >
+              <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
+              <path
+                d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"
+              />
+            </svg>
+          </button>
+          <input type="file" id="image-input" accept="image/*" class="hidden" />
+          <button id="generate-btn" class="btn btn-primary">Send</button>
+        </div>
+      </div>
+    </div>
+
+    <style>
+      .chat-container {
+        width: 100%;
+        max-width: 500px;
+      }
+
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        background-color: #42c553; /* Optional: to visualize the centering */
+      }
+    </style>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "@google/generative-ai": "https://esm.run/@google/generative-ai"
+        }
+      }
+    </script>
+
+    <script type="module">
+      import {
+        GoogleGenerativeAI,
+        HarmBlockThreshold,
+        HarmCategory,
+      } from "@google/generative-ai";
+
+      const API_KEY = "AIzaSyBF265bY6o63VuPypal-5w0-b7sr0N_O3A"; // Replace with your gemini-api actual API key
+      const genAI = new GoogleGenerativeAI(API_KEY);
+      let chat;
+
+      const safetySettings = [
+        {
+          category: HarmCategory.HARM_CATEGORY_HARASSMENT,
+          threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
+        },
+      ];
+
+      async function fileToGenerativePart(file) {
+        return new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64Data = reader.result.split(",")[1];
+            resolve({ inlineData: { data: base64Data, mimeType: file.type } });
+          };
+          reader.readAsDataURL(file);
+        });
+      }
+
+      async function sendMessage(prompt, imageParts = []) {
+        let model;
+        let result;
+        clearGreeting(); // Clear the greeting after sending the message
+
+        if (imageParts.length > 0) {
+          model = genAI.getGenerativeModel({
+            model: "gemini-pro-vision",
+            safetySettings,
+          });
+        } else {
+          if (!chat) {
+            chat = await genAI
+              .getGenerativeModel({ model: "gemini-pro", safetySettings })
+              .startChat({
+                history: [],
+                generationConfig: {
+                  maxOutputTokens: 4000, // maxOutputTokens Limit around 4096
+                },
+              });
+          }
+          model = chat;
+        }
+
+        try {
+          if (imageParts.length > 0) {
+            result = await model.generateContent([prompt, ...imageParts]);
+          } else {
+            result = await model.sendMessage(prompt);
+          }
+
+          const response = await result.response;
+          if (response) {
+            const text = await response.text();
+            displayMessage(text, "ai");
+          } else {
+            // This block handles a null response, suggesting blocked content
+            displayMessage(
+              "This content is not safe for display based on current settings.",
+              "ai"
+            );
+          }
+        } catch (error) {
+          console.error("Error during message generation:", error);
+          displayMessage(
+            "This content is not safe for display based on current settings. or an internal error.",
+            "ai"
+          );
+        }
+        clearInputs();
+      }
+
+      function displayMessage(message, sender) {
+        const outputContainer = document.getElementById("output-container");
+        const msgDiv = document.createElement("div");
+        msgDiv.classList.add(
+          "chat-message",
+          sender === "user" ? "user-message" : "ai-message"
+        );
+
+        if (sender === "ai") {
+          // Show loading animation for AI messages
+          msgDiv.innerHTML =
+            '<div class="loading">' +
+            '<div class="loading-dot"></div>' +
+            '<div class="loading-dot"></div>' +
+            '<div class="loading-dot"></div>' +
+            "</div>";
+          outputContainer.appendChild(msgDiv);
+
+          // Simulate processing delay
+          setTimeout(() => {
+            // Clear loading animation
+            msgDiv.innerHTML = "";
+
+            if (message.startsWith("```") && message.endsWith("```")) {
+              // Code block handling
+              const codeContent = message.substring(3, message.length - 3);
+              const escapedCode = codeContent
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;");
+              msgDiv.innerHTML = `<pre><code class="hljs">${escapedCode}</code></pre>`;
+              window.hljs.highlightBlock(msgDiv.querySelector("code"));
+
+              // Add Copy button
+              const copyButton = document.createElement("button");
+              copyButton.innerText = "Copy code";
+              copyButton.onclick = function () {
+                navigator.clipboard.writeText(codeContent).then(
+                  () => {
+                    // Change text to show confirmation instead of using alert
+                    copyButton.innerText = "Copied!";
+                    // Optional: revert the button text back to "Copy code" after 2 seconds
+                    setTimeout(() => {
+                      copyButton.innerText = "Copy code";
+                    }, 2000);
+                  },
+                  (err) => {
+                    console.error("Failed to copy text: ", err);
+                  }
+                );
+              };
+
+              msgDiv.appendChild(copyButton);
+            } else {
+              // For regular messages
+              msgDiv.innerHTML = marked.parse(message);
+            }
+
+            // Scroll the output container to the bottom to ensure the latest message is visible
+            outputContainer.scrollTop = outputContainer.scrollHeight;
+          }, 1500); // Adjust the delay as needed
+        } else {
+          // User messages are displayed immediately without the loading animation
+          msgDiv.innerHTML =
+            message.startsWith("```") && message.endsWith("```")
+              ? `<pre><code class="hljs">${message.substring(
+                  3,
+                  message.length - 3
+                )}</code></pre>`
+              : marked.parse(message);
+
+          // If it's a code block, enable syntax highlighting and add a copy button
+          if (message.startsWith("```") && message.endsWith("```")) {
+            const codeBlock = msgDiv.querySelector("pre code");
+            window.hljs.highlightBlock(codeBlock);
+            const copyButton = document.createElement("button");
+            copyButton.innerText = "Copy code";
+            copyButton.onclick = function () {
+              navigator.clipboard.writeText(codeBlock.textContent).then(
+                () => {
+                  alert("Code copied to clipboard!");
+                },
+                (err) => {
+                  alert("Failed to copy text: ", err);
+                }
+              );
+            };
+            msgDiv.appendChild(copyButton);
+          }
+
+          outputContainer.appendChild(msgDiv);
+        }
+
+        // Ensure the latest message is visible
+        outputContainer.scrollTop = outputContainer.scrollHeight;
+      }
+
+      function clearInputs() {
+        document.getElementById("prompt-input").value = "";
+        document.getElementById("image-input").value = "";
+        clearImagePreview();
+      }
+
+      document
+        .getElementById("generate-btn")
+        .addEventListener("click", async () => {
+          const prompt = document.getElementById("prompt-input").value;
+          const files = document.getElementById("image-input").files;
+          const imageParts = await Promise.all(
+            [...files].map(fileToGenerativePart)
+          );
+          if (prompt.trim() !== "") {
+            displayMessage(prompt, "user");
+            await sendMessage(prompt, imageParts);
+          }
+        });
+
+      function clearGreeting() {
+        const outputField = document.getElementById("output-field");
+        if (outputField) {
+          outputField.style.display = "none"; // Hide the field completely
+        }
+      }
+
+      document
+        .getElementById("image-input")
+        .addEventListener("change", function (event) {
+          const [file] = event.target.files;
+          if (file) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+              const previewContainer = document.getElementById("image-preview");
+              const previewImage =
+                previewContainer.getElementsByTagName("img")[0];
+              previewImage.src = e.target.result;
+              previewContainer.style.display = "flex";
+            };
+            reader.readAsDataURL(file);
+          }
+        });
+
+      document
+        .getElementById("clear-image")
+        .addEventListener("click", function () {
+          // Clear the preview
+          const previewContainer = document.getElementById("image-preview");
+          const previewImage = previewContainer.getElementsByTagName("img")[0];
+          previewImage.src = "";
+          previewContainer.style.display = "none";
+          // Clear the file input
+          document.getElementById("image-input").value = "";
+        });
+
+      function clearImagePreview() {
+        const previewContainer = document.getElementById("image-preview");
+        if (previewContainer) {
+          const previewImage = previewContainer.getElementsByTagName("img")[0];
+          previewImage.src = "";
+          previewContainer.style.display = "none";
+        }
+      }
+    </script>
+    <script>
+      var loader = document.getElementById("Loader");
+      window.addEventListener("load", function () {
+        loader.style.display = "none";
+      });
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
index b5c1a80..be9dbc4 100644
--- a/index.html
+++ b/index.html
@@ -1,457 +1,424 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Waste Management</title>
     <link rel="icon" href="./assets/logo.png" />
     <link rel="stylesheet" href="styles.css" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&amp;display=swap"
-      rel="stylesheet"
-    />
+
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&amp;display=swap" rel="stylesheet" />
     <!-- CSS CDN For Smooth Scrolling -->
     <link rel="stylesheet" href="https://unpkg.com/lenis@1.1.14/dist/lenis.css">
     <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
-  </head>
-  <body>
 </head>
- 
+
 <body>
-<!-- Progress Bar -->
     <div id="progress-container">
-      <div id="progress-bar"></div>
+        <div id="progress-bar"></div>
     </div>
     <header>
-      <a href="index.html"> <h1>Waste Management</h1></a>
-      <nav>
-        <div class="btn-nav">
-          <button class="button"><a href="#upload">Upload</a></button>
-          <button class="button"><a href="#features">Features</a></button>
-          <button class="button"><a href="#feedback">Feedback</a></button>
-          <button class="button"><a href="#about">About Me</a></button>
-          <button class="button"><a href="register.html">Sign up</a></button>
-          <button class="button"><a href="#footer">Contact</a></button>
-          <div class="checkbox-con">
-            <input id="checkbox" type="checkbox" />
-          </div>
-        <a href="index.html"><h1>Waste Management</h1></a>
+        <a href="index.html">
+            <h1>Waste Management</h1>
+        </a>
         <nav>
-
             <div class="btn-nav">
-
                 <button class="button"> <a href="#upload">Upload</a></button>
                 <button class="button"><a href="#features">Features</a></button>
-
                 <button class="button"><a href="#feedback">Feedback</a></button>
-
                 <button class="button"><a href="#about">About Me</a></button>
-
                 <button class="button"><a href="register.html">Sign up</a></button>
-
                 <button class="button"><a href="#footer">Contact</a></button>
-
-                <!-- <div class="checkbox-con">
-                    <input id="checkbox" type="checkbox">
-                </div> -->
-
             </div>
-
-
+        </nav>
         </nav>
         <div class="nav-controls">
-            <button id="theme-toggle" aria-label="Toggle dark mode">🌓</button>
+            <div id="theme-toggle" aria-label="Toggle darok mde">🌓</div>
             <button id="menu-toggle" aria-label="Toggle menu">☰</button>
         </div>
-      </nav>
-      <div class="nav-controls">
-        <button id="theme-toggle" aria-label="Toggle dark mode">🌓</button>
-        <button id="menu-toggle" aria-label="Toggle menu">☰</button>
-      </div>
     </header>
     <section class="hero">
-      <div class="hero-content">
-        <h2>Efficient Waste Management</h2>
-        <p>Join our mission for a cleaner, greener planet.</p>
-        <a href="#features" class="hero-btn">Discover Features</a>
-      </div>
+        <div class="hero-content">
+            <div class="hero-text">
+                <h2>Efficient Waste Management</h2>
+                <p>Join our mission for a cleaner, greener planet. We strive to minimize waste through effective
+                    recycling, composting, and sustainable practices.</p>
+                <p>Together, we can reduce the environmental impact and create a more sustainable future for generations
+                    to come. Let’s make the world a better place by reducing our carbon footprint and managing waste
+                    efficiently.</p>
+                <a href="#features" class="hero-btn">Discover Features</a>
+            </div>
+            <div class="hero-img">
+                <img src="./assets/rb_8795.png" alt="Waste Management Image">
+            </div>
+        </div>
     </section>
-    <br />
-    <main>
-      <section class="upload" id="upload">
-        <div class="upload-container">
-          <div class="upload-text">
-            <h2>Upload Your Files</h2>
-            <label for="image-input" class="custom-file-upload"
-              ><input type="file" id="image-input" accept="image/*" hidden="" />
-              <span>Select Image</span></label
-            >
-          </div>
-          <div class="upload-submit">
-            <button id="upload-button">Submit</button>
-          </div>
+    <section class="upload" id="upload">
+        <div class="upload-card">
+            <div class="upload-container">
+                <div class="upload-img">
+                    <img src="./assets/rb_2148298503.png" alt="Upload Preview">
+                </div>
+                <div class="upload-text">
+                    <h2>Upload Your Files</h2>
+                    <label for="image-input" class="custom-file-upload">
+                        <input type="file" id="image-input" accept="image/*" hidden />
+                        <span>Select Image</span>
+                    </label>
+                </div>
+                <div class="upload-submit">
+                    <button id="upload-button">Submit</button>
+                </div>
+            </div>
         </div>
-      </section>
-      <section class="classification-info" id="classification-info">
-          <section class="classification">
-            <h2>Waste Classification</h2>
-            <p id="classification-result"></p>
-          </section>
-          <section class="disposal">
-            <h2>Disposal Information</h2>
-            <p id="disposal-information"></p>
-          </section>
+    </section>
+    <section class="classification">
+        <h2>Waste Classification</h2>
+        <p id="classification-result">Your classification result will appear here.</p>
+    </section>
+
+    <section class="disposal">
+        <h2>Disposal Information</h2>
+        <p id="disposal-information">Disposal information will be displayed here.</p>
+    </section>
+    <div>
         <h2>Waste Categories</h2>
         <div class="card-container">
-          <div class="card">
-            <div class="card-inner">
-              <div class="card-front">
-                <span>Biodegradable Waste</span>
-              </div>
-              <div class="card-back">
-                <h3>Biodegradable Waste</h3>
-                <p>
-                  Includes food remains and garden waste. These can be composted
-                  to create manure and naturally decompose over time.
-                </p>
-              </div>
+            <div class="card">
+                <div class="card-inner">
+                    <div class="card-front">
+                        <img src="./assets/arrangement-cooked-fish-leftovers-recycle-symbol.jpg"
+                            alt="Biodegradable Waste">
+                        <span>Biodegradable Waste</span>
+                    </div>
+                    <div class="card-back">
+                        <h3>Biodegradable Waste</h3>
+                        <p>Includes food remains and garden waste. These can be composted to create manure and naturally
+                            decompose over time.</p>
+                    </div>
+                </div>
             </div>
-          </div>
-          <div class="card">
-            <div class="card-inner">
-              <div class="card-front">
-                <span>Non-Biodegradable Waste</span>
-              </div>
-              <div class="card-back">
-                <h3>Non-Biodegradable Waste</h3>
-                <p>
-                  Items like old newspapers, broken glass, and plastics. These
-                  do not decompose and are major pollutants, but can be recycled
-                  and reused.
-                </p>
-              </div>
+
+            <div class="card">
+                <div class="card-inner">
+                    <div class="card-front">
+                        <img src="./assets/front-view-recycling-basket-grass-with-trash.jpg"
+                            alt="Non-Biodegradable Waste">
+                        <span>Non-Biodegradable Waste</span>
+                    </div>
+                    <div class="card-back">
+                        <h3>Non-Biodegradable Waste</h3>
+                        <p>Items like old newspapers, broken glass, and plastics. These do not decompose and are major
+                            pollutants, but can be recycled and reused.</p>
+                    </div>
+                </div>
             </div>
-          </div>
-          <section class="features" id="features">
-            <h2>Discover Our Features</h2>
-            <div class="features-container"></div>
-          </section>
-          <section class="features" id="features">
+        </div>
+    </div>
+    <section class="features" id="features">
+        <h2>Discover Our Features</h2>
+        <div class="features-container">
             <div class="feature-card" id="eco-friendly">
-              <div class="icon"></div>
-              <h3>Eco-Friendly Tips</h3>
-              <blockquote id="eco-fact">
-                Did you know
-                <span id="fact-highlight"
-                  >only 9% of all plastic ever produced has been recycled?</span
-                >
-              </blockquote>
-              <p>
-                Make a difference by embracing eco-friendly practices from home.
-                Learn tips to help manage waste efficiently and reduce your
-                environmental impact.
-              </p>
-              <a href="ecotips.html" class="cta-button">Get Tips!</a>
+                <div class="icon"></div>
+                <h3>Eco-Friendly Tips</h3>
+                <blockquote id="eco-fact">
+                    Did you know
+                    <span id="fact-highlight">only 9% of all plastic ever produced has been recycled?</span>
+                </blockquote>
+                <p>
+                    Make a difference by embracing eco-friendly practices from home. Learn tips to help manage waste
+                    efficiently and reduce your environmental impact.
+                </p>
+                <a href="ecotips.html" class="cta-button">Get Tips!</a>
             </div>
-            <div>
-              <div class="feature-card1">
+
+            <div class="feature-card">
                 <div class="icon"></div>
                 <h3>Real-time Monitoring</h3>
                 <p>
-                  Keep track of your waste management activities instantly, with
-                  up-to-the-minute updates.
+                    Keep track of your waste management activities instantly, with up-to-the-minute updates.
                 </p>
-              </div>
-              <div class="feature-card">
+            </div>
+
+            <div class="feature-card">
                 <h3>Community Engagement</h3>
                 <p>
-                  Join community efforts to promote effective waste management.
+                    Join community efforts to promote effective waste management.
                 </p>
                 <a href="community.html" class="hero-btn">Join Community</a>
-              </div>
-              <section class="faqs" id="faqs">
-                <section class="faqs" id="faqs">
-                  <h2>Frequently Asked Questions (FAQs)</h2>
-                  <div class="faq-item">
-                    <h3>
-                      What is the difference between biodegradable and
-                      non-biodegradable waste?
-                    </h3>
-                    <p>
-                      Biodegradable waste refers to organic materials such as
-                      food scraps and garden waste that decompose naturally over
-                      time. Non-biodegradable waste includes plastics, metals,
-                      and other materials that do not decompose easily and
-                      require recycling or special disposal methods.
-                    </p>
-                  </div>
-                  <div class="faq-item">
-                    <h3>How can I reduce household waste?</h3>
-                    <p>
-                      You can reduce waste by buying reusable products,
-                      composting organic waste, recycling materials like plastic
-                      and paper, and avoiding single-use items. Participating in
-                      community waste reduction programs is also helpful.
-                    </p>
-                  </div>
-                  <div class="faq-item">
-                    <h3>What should I do with hazardous waste?</h3>
-                    <p>
-                      Hazardous waste, such as batteries, chemicals, and
-                      electronic waste, should be taken to designated disposal
-                      sites or collection events. Do not dispose of them in
-                      regular household trash as they can be harmful to the
-                      environment.
-                    </p>
-                  </div>
-                  <div class="faq-item">
-                    <h3>Can all plastics be recycled?</h3>
-                    <p>
-                      No, not all plastics are recyclable. Look for recycling
-                      symbols with numbers on plastic products. Most recycling
-                      centers accept plastics marked with numbers 1 and 2, but
-                      it's important to check with your local center for
-                      specific guidelines.
-                    </p>
-                  </div>
-                  <div class="faq-item">
-                    <h3>How do I start composting at home?</h3>
-                    <p>
-                      To start composting, collect food scraps like fruit peels,
-                      vegetable leftovers, and coffee grounds. Combine them with
-                      yard waste like leaves and grass clippings in a compost
-                      bin. Turn the compost regularly to ensure proper aeration
-                      and decomposition.
-                    </p>
-                  </div>
-                  <div class="faq-item">
-                    <h3>Why is it important to sort waste?</h3>
-                    <p>
-                      Sorting waste ensures that recyclable materials like
-                      paper, glass, and plastics are properly processed,
-                      reducing the amount of waste sent to landfills. Proper
-                      sorting helps reduce pollution, conserve resources, and
-                      protect the environment.
-                    </p>
-                  </div>
-                </section>
-                <section class="feedback" id="feedback">
-                  <h2>Your Feedback</h2>
-                  <form id="feedback-form" name="feedback-form">
-                    <input type="text" placeholder="Your Name" required="" />
-                    <textarea
-                      placeholder="Your Feedback"
-                      required=""
-                    ></textarea>
-                    <button type="submit">Submit</button>
-                  </form>
-                </section>
-                <section id="about" class="about-us">
-                  <div class="about-container">
-                    <div class="about-heading">
-                      <h2>About Us</h2>
-                    </div>
-                    <div class="about-text">
-                      <p>
-                        <strong>At Waste Management</strong>, we are passionate
-                        about creating a sustainable future through effective
-                        waste disposal solutions. Our goal is to not only reduce
-                        environmental pollution but also
-                        <strong>educate communities</strong> and empower
-                        individuals with sustainable waste practices.
-                      </p>
-                      <p>
-                        By leveraging our
-                        <strong
-                          >state-of-the-art waste classification system</strong
-                        >
-                        and encouraging community engagement, we aim to inspire
-                        everyone to adopt eco-friendly habits. Together, we can
-                        make a significant impact in reducing waste, promoting
-                        recycling, and preserving the environment for future
-                        generations.
-                      </p>
-                    </div>
-                    <div class="about-image">
-                      <img
-                        src="./assets/about-us.jpg"
-                        alt="Waste Management team working towards sustainability"
-                      />
-                    </div>
-                    <div class="mission-container">
-                      <h3>Our Mission</h3>
-                      <div class="mission-box">
-                        <div class="mission-item">
-                          <img
-                            src="./assets/recycling-bin_532768.png"
-                            alt="Reduce Waste"
-                          />
-                          <h4>Reduce Waste</h4>
-                          <p>
-                            Minimize waste generation through innovative
-                            technologies and education.
-                          </p>
-                        </div>
-                        <div class="mission-item">
-                          <img
-                            src="./assets/aluminum_4381614.png"
-                            alt="Promote Recycling"
-                          />
-                          <h4>Promote Recycling</h4>
-                          <p>
-                            Encourage responsible disposal and recycling
-                            practices in every community.
-                          </p>
-                        </div>
-                        <div class="mission-item">
-                          <img
-                            src="./assets/solidarity_16825525.png"
-                            alt="Empower Communities"
-                          />
-                          <h4>Empower Communities</h4>
-                          <p>
-                            Equip individuals with knowledge and tools for
-                            sustainable living.
-                          </p>
-                        </div>
-                        <div class="mission-item">
-                          <img
-                            src="./assets/exterior-cleaning_17073146.png"
-                            alt="Build a Cleaner Future"
-                          />
-                          <h4>Build a Cleaner Future</h4>
-                          <p>Protect the environment for future generations.</p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-                <section>
-                  <div class="values-container">
-                    <h3>Our Core Values</h3>
-                    <div class="values-cards">
-                      <div class="value-card">
-                        <h4>Innovation</h4>
-                        <p>
-                          We believe in continually evolving our waste
-                          management practices with cutting-edge technologies to
-                          improve efficiency and reduce our environmental
-                          footprint.
-                        </p>
-                      </div>
-                      <div class="value-card">
-                        <h4>Sustainability</h4>
-                        <p>
-                          Environmental sustainability is at the heart of
-                          everything we do. We prioritize reducing waste,
-                          reusing materials, and promoting recycling initiatives
-                          globally.
-                        </p>
-                      </div>
-                      <div class="value-card">
-                        <h4>Community</h4>
-                        <p>
-                          Collaboration is key. By working together with
-                          communities, we aim to foster eco-consciousness and
-                          sustainable living across the globe.
-                        </p>
-                      </div>
-                      <div class="value-card">
-                        <h4>Responsibility</h4>
-                        <p>
-                          We are committed to acting with integrity and
-                          accountability, ensuring that our practices positively
-                          impact both the environment and society.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-                <div class="container">
-                  <div class="form_area">
-                    <p class="title">SIGN UP</p>
-                    <form action="">
-                      <div class="form_group">
-                        <label class="sub_title" for="name">Name</label>
-                        <input
-                          placeholder="Enter your full name"
-                          class="form_style"
-                          type="text"
-                        />
-                      </div>
-                      <div class="form_group">
-                        <label class="sub_title" for="email">Email</label>
-                        <input
-                          placeholder="Enter your email"
-                          id="email"
-                          class="form_style"
-                          type="email"
-                        />
-                      </div>
-                      <div class="form_group">
-                        <label class="sub_title" for="password">Password</label>
-                        <input
-                          placeholder="Enter your password"
-                          id="password"
-                          class="form_style"
-                          type="password"
-                        />
-                      </div>
-                      <div>
-                        <button class="btn">SIGN UP</button>
-                        <p>
-                          Have an Account?
-                          <a class="link" href="">Login Here!</a>
-                        </p>
-                        <a class="link" href=""></a>
-                      </div>
-                      <a class="link" href=""></a>
-                    </form>
-                  </div>
-                  <a class="link" href=""></a>
-                </div>
-              </section>
             </div>
-          </section>
         </div>
-      </section>
-    </main>
-    <footer id="footer">
-      <h2>Stay Connected</h2>
-      <form id="newsletter-form" name="newsletter-form">
-        <input type="email" placeholder="Your Email" required="" />
-        <button type="submit">Subscribe</button>
-      </form>
-      <div class="social-media">
-        <a href="#">Facebook</a> <a href="#">Twitter</a>
-        <a href="#">Instagram</a>
+    </section>
+<section class="faqisection">
+    <section class="faqs" id="faqs">
+        <div>
+            <h2>Frequently Asked Questions (FAQs)</h2>
+        <div class="faq-item">
+            <h3>
+                What is the difference between biodegradable and
+                non-biodegradable waste?
+            </h3>
+            <p>
+                Biodegradable waste refers to organic materials such as
+                food scraps and garden waste that decompose naturally over
+                time. Non-biodegradable waste includes plastics, metals,
+                and other materials that do not decompose easily and
+                require recycling or special disposal methods.
+            </p>
+        </div>
+        <div class="faq-item">
+            <h3>How can I reduce household waste?</h3>
+            <p>
+                You can reduce waste by buying reusable products,
+                composting organic waste, recycling materials like plastic
+                and paper, and avoiding single-use items. Participating in
+                community waste reduction programs is also helpful.
+            </p>
+        </div>
+        <div class="faq-item">
+            <h3>What should I do with hazardous waste?</h3>
+            <p>
+                Hazardous waste, such as batteries, chemicals, and
+                electronic waste, should be taken to designated disposal
+                sites or collection events. Do not dispose of them in
+                regular household trash as they can be harmful to the
+                environment.
+            </p>
+        </div>
+        <div class="faq-item">
+            <h3>Can all plastics be recycled?</h3>
+            <p>
+                No, not all plastics are recyclable. Look for recycling
+                symbols with numbers on plastic products. Most recycling
+                centers accept plastics marked with numbers 1 and 2, but
+                it's important to check with your local center for
+                specific guidelines.
+            </p>
+        </div>
+        <div class="faq-item">
+            <h3>How do I start composting at home?</h3>
+            <p>
+                To start composting, collect food scraps like fruit peels,
+                vegetable leftovers, and coffee grounds. Combine them with
+                yard waste like leaves and grass clippings in a compost
+                bin. Turn the compost regularly to ensure proper aeration
+                and decomposition.
+            </p>
+        </div>
+        <div class="faq-item">
+            <h3>Why is it important to sort waste?</h3>
+            <p>
+                Sorting waste ensures that recyclable materials like
+                paper, glass, and plastics are properly processed,
+                reducing the amount of waste sent to landfills. Proper
+                sorting helps reduce pollution, conserve resources, and
+                protect the environment.
+            </p>
+        </div>
+
+        </div>
+        
+    </section>
+</section>
+<section class="feedback" id="feedback">
+    <h2>Your Feedback</h2>
+    <form id="feedback-form" name="feedback-form">
+      <input type="text" placeholder="Your Name" required="" />
+      <textarea
+        placeholder="Your Feedback"
+        required=""
+      ></textarea>
+      <button type="submit">Submit</button>
+    </form>
+  </section>
+
+
+  <section class="about-container">
+    <div class="about-heading">
+        <h2>About Us</h2>
       </div>
-      <div class="community-message">
-        <h3>Our Commitment to Sustainability</h3>
+      <div class="about-text">
         <p>
-          At Waste Management, we are dedicated to building a greener future.
-          Through our community recycling programs and sustainability
-          initiatives, we strive to reduce waste and protect the environment for
-          generations to come. Join us in our mission to create a cleaner,
-          healthier planet.
+          <strong>At Waste Management</strong>, we are passionate
+          about creating a sustainable future through effective
+          waste disposal solutions. Our goal is to not only reduce
+          environmental pollution but also
+          <strong>educate communities</strong> and empower
+          individuals with sustainable waste practices.
         </p>
-        <a href="#"></a>
-        <a href="#"
-          ><svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewbox="0 0 512 512"
-            width="24"
-            height="24"
+        <p>
+          By leveraging our
+          <strong
+            >state-of-the-art waste classification system</strong
           >
-            <path
-              d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
-            ></path></svg
-        ></a>
-        <a href="#"></a>
+          and encouraging community engagement, we aim to inspire
+          everyone to adopt eco-friendly habits. Together, we can
+          make a significant impact in reducing waste, promoting
+          recycling, and preserving the environment for future
+          generations.
+        </p>
+      </div>
+      <div class="about-image">
+        <img
+          src="./assets/about-us.jpg"
+          alt="Waste Management team working towards sustainability"
+        />
+      </div>
+  </section>
+  <section>
+    <div class="mission-container">
+        <h3>Our Mission</h3>
+        <div class="mission-box">
+          <div class="mission-item">
+            <img
+              src="./assets/recycling-bin_532768.png"
+              alt="Reduce Waste"
+            />
+            <h4>Reduce Waste</h4>
+            <p>
+              Minimize waste generation through innovative
+              technologies and education.
+            </p>
+          </div>
+          <div class="mission-item">
+            <img
+              src="./assets/aluminum_4381614.png"
+              alt="Promote Recycling"
+            />
+            <h4>Promote Recycling</h4>
+            <p>
+              Encourage responsible disposal and recycling
+              practices in every community.
+            </p>
+          </div>
+          <div class="mission-item">
+            <img
+              src="./assets/solidarity_16825525.png"
+              alt="Empower Communities"
+            />
+            <h4>Empower Communities</h4>
+            <p>
+              Equip individuals with knowledge and tools for
+              sustainable living.
+            </p>
+          </div>
+          <div class="mission-item">
+            <img
+              src="./assets/exterior-cleaning_17073146.png"
+              alt="Build a Cleaner Future"
+            />
+            <h4>Build a Cleaner Future</h4>
+            <p>Protect the environment for future generations.</p>
+          </div>
+        </div>
       </div>
-      <p>© 2024 Waste Management. All rights reserved.</p>
-    </footer>
+  </section>
+  <section>
+    <div class="values-container">
+      <h3>Our Core Values</h3>
+      <div class="values-cards">
+        <div class="value-card">
+          <h4>Innovation</h4>
+          <p>
+            We believe in continually evolving our waste
+            management practices with cutting-edge technologies to
+            improve efficiency and reduce our environmental
+            footprint.
+          </p>
+        </div>
+        <div class="value-card">
+          <h4>Sustainability</h4>
+          <p>
+            Environmental sustainability is at the heart of
+            everything we do. We prioritize reducing waste,
+            reusing materials, and promoting recycling initiatives
+            globally.
+          </p>
+        </div>
+        <div class="value-card">
+          <h4>Community</h4>
+          <p>
+            Collaboration is key. By working together with
+            communities, we aim to foster eco-consciousness and
+            sustainable living across the globe.
+          </p>
+        </div>
+        <div class="value-card">
+          <h4>Responsibility</h4>
+          <p>
+            We are committed to acting with integrity and
+            accountability, ensuring that our practices positively
+            impact both the environment and society.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+  
+<div class="container">
+    <div class="form_area">
+        <p class="title">SIGN UP</p>
+        <form action="">
+            <div class="form_group">
+                <label class="sub_title" for="name">Name</label>
+                <input placeholder="Enter your full name" class="form_style" type="text">
+            </div>
+            <div class="form_group">
+                <label class="sub_title" for="email">Email</label>
+                <input placeholder="Enter your email" id="email" class="form_style" type="email">
+            </div>
+            <div class="form_group">
+                <label class="sub_title" for="password">Password</label>
+                <input placeholder="Enter your password" id="password" class="form_style" type="password">
+            </div>
+            <div>
+                <button class="btn">SIGN UP</button>
+                <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
+            </a></div><a class="link" href="">
+        
+    </a></form></div><a class="link" href="">
+</a></div>
+<footer id="footer">
+    <h2>Stay Connected</h2>
+    <form id="newsletter-form" name="newsletter-form">
+      <input type="email" placeholder="Your Email" required />
+      <button type="submit">Subscribe</button>
+    </form>
+  
+    <!-- Social Media Section -->
+    <div class="social-media">
+      <a href="#">Facebook</a>
+      <a href="#">Twitter</a>
+      <a href="#">Instagram</a>
+    </div>
+  
+    <!-- Community Message Section -->
+    <div class="community-message">
+      <h3>Our Commitment to Sustainability</h3>
+      <p>
+        At Waste Management, we are dedicated to building a greener future.
+        Through our community recycling programs and sustainability initiatives,
+        we strive to reduce waste and protect the environment for generations to
+        come. Join us in our mission to create a cleaner, healthier planet.
+      </p>
+    </div>
+    
+    <!-- Footer Links -->
+    <div class="footer-links">
+      <a href="#upload">Upload Waste</a>
+      <a href="#features">Features</a>
+      <a href="#feedback">Feedback</a>
+      <a href="#about">About Us</a>
+    </div>
+  
+    <!-- Copyright -->
+    <div class="footer-bottom">
+      <p>&copy; 2024 Waste Management. All rights reserved.</p>
+    </div>
+  </footer>
+  
     <script src="https://unpkg.com/lenis@1.1.14/dist/lenis.min.js"></script>
     <script src="script.js"></script>
-  </body>
+</body>
 </html>
\ No newline at end of file
diff --git a/register.html b/register.html
index 313901f..4be42d9 100644
--- a/register.html
+++ b/register.html
@@ -6,6 +6,7 @@
     <title>Waste Management</title>
     <link rel="icon" href="./assets/logo.png">
     <link rel="stylesheet" href="styles.css">
+  
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
 
@@ -129,35 +130,31 @@
         </nav>
     </header>
     <main>
-        
+     
       <div class="container">
-        <div class="form_area">
-            <p class="title">SIGN UP</p>
-            <form action="">
-                <div class="form_group">
-                    <label class="sub_title" for="name">Name</label>
-                    <input placeholder="Enter your full name" class="form_style" type="text">
-                </div>
-                <div class="form_group">
-                    <label class="sub_title" for="email">Email</label>
-                    <input placeholder="Enter your email" id="email" class="form_style" type="email">
-                </div>
-                <div class="form_group">
-                    <label class="sub_title" for="password">Password</label>
-                    <input placeholder="Enter your password" id="password" class="form_style"
-                        type="password">
-                </div>
-                <div>
-                    <button class="btn">SIGN UP</button>
-                    <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
-                    </a>
-                </div><a class="link" href="">
-
-                </a>
-            </form>
-        </div><a class="link" href="">
-        </a>
-    </div>
+          <div class="form_area">
+              <p class="title">SIGN UP</p>
+              <form action="">
+                  <div class="form_group">
+                      <label class="sub_title" for="name">Name</label>
+                      <input placeholder="Enter your full name" class="form_style" type="text">
+                  </div>
+                  <div class="form_group">
+                      <label class="sub_title" for="email">Email</label>
+                      <input placeholder="Enter your email" id="email" class="form_style" type="email">
+                  </div>
+                  <div class="form_group">
+                      <label class="sub_title" for="password">Password</label>
+                      <input placeholder="Enter your password" id="password" class="form_style" type="password">
+                  </div>
+                  <div>
+                      <button class="btn">SIGN UP</button>
+                      <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
+                  </a></div><a class="link" href="">
+              
+          </a></form></div><a class="link" href="">
+      </a></div>
+      
     </main>
     
       
diff --git a/script.js b/script.js
index 9739159..06c28bc 100644
--- a/script.js
+++ b/script.js
@@ -159,12 +159,247 @@ document.addEventListener('DOMContentLoaded', () => {
 
 // Ecotips.html
 document.addEventListener('DOMContentLoaded', () => {
+
+    
+    lenis.on('scroll', (e) => {
+      console.log(e);
+    });
+    
+    function raf(time) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+    
+    requestAnimationFrame(raf);
+    }
+    smoothScrolling();
+    function validateSignup() {
+        const fullName = document.querySelector('input[name="fullName"]').value;
+        const email = document.querySelector('input[name="email"]').value;
+        const password1 = document.querySelector('input[name="password1"]').value;
+        const password2 = document.querySelector('input[name="password2"]').value;
+        const errorMessage = document.getElementById('error-message');
+    
+        // Clear previous error message
+        errorMessage.innerText = '';
+    
+        // Check if fields are empty
+        if (!fullName || !email || !password1 || !password2) {
+            errorMessage.innerText = 'Please fill all the details.';
+            return false; // Prevent form submission
+        }
+    
+        // Password validation: at least 8 characters, one uppercase, one lowercase, and one special character
+        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/;
+        if (!passwordRegex.test(password1)) {
+            errorMessage.innerText = 'Password must be at least 8 characters long, including uppercase, lowercase, and special characters.';
+            return false; // Prevent form submission
+        }
+    
+        // Check if passwords match
+        if (password1 !== password2) {
+            errorMessage.innerText = 'Passwords do not match.';
+            return false; // Prevent form submission
+        }
+    
+        return true; // Allow form submission
+    }
+    
+    function validateLogin() {
+        const email = document.querySelector('input[name="email"]').value;
+        const password1 = document.querySelector('input[name="password1"]').value;
+        const errorMessage = document.getElementById('error-message');
+    
+        // Clear previous error message
+        errorMessage.innerText = '';
+    
+        // Check if fields are empty
+        if (!email || !password1) {
+            errorMessage.innerText = 'Please fill all the details.';
+            return false; // Prevent form submission
+        }
+    
+        return true; // Allow form submission
+    }
+    
+    document.addEventListener('DOMContentLoaded', (event) => {
+        const menuToggle = document.getElementById('menu-toggle');
+        const navMenu = document.getElementById('nav-menu');
+        const themeToggle = document.getElementById('theme-toggle');
+        const body = document.body;
+    
+        // Menu toggle functionality
+        if (menuToggle && navMenu) {
+            menuToggle.addEventListener('click', () => {
+                navMenu.classList.toggle('show');
+            });
+        }
+    
+        // Theme toggle functionality
+        if (themeToggle) {
+            themeToggle.addEventListener('click', () => {
+                body.classList.toggle('dark-mode');
+                themeToggle.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌓';
+            });
+        }
+    
+        // FAQ toggle functionality
+        const faqItems = document.querySelectorAll('.faq-item');
+        faqItems.forEach(item => {
+            const question = item.querySelector('h3');
+            const answer = item.querySelector('p');
+    
+            if (question && answer) {
+                // Initially hide the answer
+                answer.style.display = 'none';
+    
+                question.addEventListener('click', () => {
+                    answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
+                });
+            }
+        });
+    
+        // Progress bar functionality
+        const progressBar = document.getElementById('progress-bar');
+        if (progressBar) {
+            window.addEventListener('scroll', () => {
+                const windowHeight = window.innerHeight;
+                const documentHeight = document.documentElement.scrollHeight;
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100;
+    
+                progressBar.style.width = scrollPercentage + '%';
+            });
+        }
+    
+        // Image upload functionality
+        const imageInput = document.getElementById('image-input');
+        const uploadButton = document.getElementById('upload-button');
+        const classificationResult = document.getElementById('classification-result');
+        const disposalInformation = document.getElementById('disposal-information');
+    
+        if (uploadButton) {
+            uploadButton.addEventListener('click', () => {
+                const image = imageInput.files[0];
+                const formData = new FormData();
+                formData.append('image', image);
+    
+                fetch('/classify', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    classificationResult.textContent = data.classification;
+                    disposalInformation.textContent = data.disposalInformation;
+                })
+                .catch(error => console.error(error));
+            });
+        }
+    
+        // Feedback form validation
+        const feedbackForm = document.getElementById('feedback-form');
+        if (feedbackForm) {
+            const feedbackName = feedbackForm.querySelector('input[type="text"]');
+            const feedbackEmail = feedbackForm.querySelector('input[type="email"]');
+            const feedbackMessage = feedbackForm.querySelector('textarea');
+    
+            feedbackForm.addEventListener('submit', (event) => {
+                event.preventDefault(); // Prevent the form from submitting
+    
+                const name = feedbackName.value.trim();
+                const email = feedbackEmail.value.trim();
+                const message = feedbackMessage.value.trim();
+                let valid = true;
+    
+                // Clear previous error messages
+                feedbackName.setCustomValidity('');
+                feedbackEmail.setCustomValidity('');
+    
+                // Name validation
+                if (name.length < 2) {
+                    feedbackName.setCustomValidity('Name must be at least 2 characters long.');
+                    valid = false;
+                }
+    
+                // Email validation
+                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailPattern.test(email)) {
+                    feedbackEmail.setCustomValidity('Please enter a valid email address.');
+                    valid = false;
+                }
+    
+                // Message validation
+                if (message.length < 10) {
+                    alert('Message must be at least 10 characters long.');
+                    valid = false;
+                }
+    
+                if (valid) {
+                    alert('Feedback submitted successfully!');
+                    feedbackForm.reset(); // Reset the form after successful submission
+                } else {
+                    feedbackName.reportValidity();
+                    feedbackEmail.reportValidity();
+                }
+            });
+        }
+    
+        // Newsletter form validation
+        const newsletterForm = document.getElementById('newsletter-form');
+        if (newsletterForm) {
+            const newsletterEmail = newsletterForm.querySelector('input[type="email"]');
+            const newsletterErrorMessage = document.getElementById('newsletter-error-message');
+    
+            newsletterForm.addEventListener('submit', (event) => {
+                event.preventDefault(); // Prevent the form from submitting
+    
+                const email = newsletterEmail.value.trim();
+                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    
+                // Clear previous error message
+                newsletterErrorMessage.textContent = '';
+    
+                if (!emailPattern.test(email)) {
+                    newsletterErrorMessage.textContent = 'Please enter a valid email address.';
+                } else {
+                    alert('Subscribed successfully!');
+                    newsletterForm.reset();
+                }
+            });
+        }
+    
+        // Attach form validation to respective forms
+        const signupForm = document.getElementById('form1');
+        if (signupForm) {
+            signupForm.addEventListener('submit', (event) => {
+                if (!validateSignup()) {
+                    event.preventDefault(); // Prevent form submission
+                }
+            });
+        }
+    
+        const loginForm = document.getElementById('form2');
+        if (loginForm) {
+            loginForm.addEventListener('submit', (event) => {
+                if (!validateLogin()) {
+                    event.preventDefault(); // Prevent form submission
+                }
+            });
+        }
+    });
+    
+    
+    
+    //Ecotips.html
+    
     const tipsSlider = document.querySelector('.eco-tips-content');
     const slides = document.querySelectorAll('.eco-tip');
     const prevSlide = document.getElementById('prev-slide');
     const nextSlide = document.getElementById('next-slide');
     let currentIndex = 0;
 
+
     const updateSlider = () => {
         const slideWidth = slides[0].clientWidth;
         tipsSlider.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
@@ -184,4 +419,53 @@ document.addEventListener('DOMContentLoaded', () => {
 
     window.addEventListener('resize', updateSlider);
     window.addEventListener('load', updateSlider);
-});
\ No newline at end of file
+});
+
+    
+    // Function to update the slider's position
+    const updateSlider = () => {
+      const slideWidth = slides[0].clientWidth; // Calculate the width of a single slide
+      tipsSlider.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
+    };
+    
+    // Set the transition for smooth sliding
+    tipsSlider.style.transition = 'transform 0.3s ease-in-out';
+    
+    // Handle next slide button click
+    nextSlide.addEventListener('click', () => {
+      if (currentIndex < slides.length - 1) {
+        currentIndex++;
+      } else {
+        currentIndex = 0; // Loop back to the first slide
+      }
+      updateSlider();
+    });
+    
+    // Handle previous slide button click
+    prevSlide.addEventListener('click', () => {
+      if (currentIndex > 0) {
+        currentIndex--;
+      } else {
+        currentIndex = slides.length - 1; // Loop back to the last slide
+      }
+      updateSlider();
+    });
+    
+    // Update slider position on window resize to ensure it adapts to the new slide width
+    window.addEventListener('resize', () => {
+      updateSlider();
+    });
+    
+    // Make sure the slider position is correct when the page loads
+    window.addEventListener('load', updateSlider);
+    
+    
+    const themeToggle = document.getElementById('theme-toggle');
+    const body = document.body;
+    
+    themeToggle.addEventListener('click', () => {
+        body.classList.toggle('dark-mode');
+    });
+    
+    
+   
diff --git a/scroll.js b/scroll.js
new file mode 100644
index 0000000..d57478f
--- /dev/null
+++ b/scroll.js
@@ -0,0 +1,19 @@
+// Get the button element
+const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+
+// Show the button when scrolled down 200px
+window.onscroll = function() {
+  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
+    scrollToTopBtn.style.display = "block";
+  } else {
+    scrollToTopBtn.style.display = "none";
+  }
+};
+
+// Smooth scroll to the top when the button is clicked
+scrollToTopBtn.addEventListener('click', function() {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth' 
+  });
+});
diff --git a/styles.css b/styles.css
index 7fddd89..abe2b2b 100644
--- a/styles.css
+++ b/styles.css
@@ -95,7 +95,9 @@ nav ul li a:hover {
 
 /* Hero Section */
 .hero {
-  background: linear-gradient(rgba(0, 77, 64, 0.7), rgba(0, 77, 64, 0.8)), url('./assets/header.jpg') center/cover no-repeat;
+  width: 100vw;
+  height: 90vh;
+ 
   color: white;
   text-align: center;
   padding: 80px 20px;
@@ -402,68 +404,35 @@ nav ul li a:hover {
   margin-top: 20px;
   border-radius: 8px; /* Optional: Rounded corners */
 }
-/* feedback */
-.feedback {
-  margin-bottom: 30px;
-  background-color: #ffffff;
-  /* White background for better contrast */
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  max-width: 500px;
-  margin: 0 auto;
-}
-
-.feedback h2 {
-  text-align: center;
-  color: #00796b;
-  /* Consistent color with the theme */
-  margin-bottom: 20px;
-}
-
-.feedback form {
-  display: flex;
-  flex-direction: column;
-}
-
-.feedback input,
-.feedback textarea {
-  margin: 10px 0;
-  padding: 12px;
-  border: 1px solid #00796b;
-  border-radius: 5px;
-  font-size: 16px;
-  background-color: #e0f7fa;
-  /* Matches the background theme */
-}
 
-.feedback textarea {
-  min-height: 100px;
-  /* Larger space for feedback text */
-}
 
-.feedback button {
-  background-color: #00796b;
-  /* Light mode button color (same as header) */
-  color: white;
-  /* Text color for contrast */
-  padding: 12px;
-  border: none;
-  border-radius: 5px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+  #eco-tips-container {
+    /* position: relative; */
+    overflow: hidden;
+    padding: 2rem;
+    width: 100%;
+    max-width: 1200px;
+    margin: 5.2rem auto;
+    border-top: 4px solid #006D77;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
+  }
+.highlight {
+    font-weight: bold;
+    color:#004d40;
 }
+.eco-tips-header {
+  background-color: #EDF6F9;
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
-.feedback button:hover {
-  background-color: #004d40;
-  /* Darker teal on hover */
-}
 
 .values-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 50px 20px;
+
   text-align: center;
 }
 
@@ -1238,3 +1207,915 @@ body.dark-mode {
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Light shadow */
   font-size: 1.2em;
 }
+
+
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background-color: #e0f7fa;
+  color: #333;
+  line-height: 1.6;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Progress Bar */
+#progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 9px;
+  z-index: 99990;
+}
+
+#progress-bar {
+  height: 9px;
+  width: 0;
+  background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%);
+  box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7);
+  transition: width 0.09s ease-in-out;
+  border-radius: 10px;
+}
+
+/* Header and Navigation */
+header {
+  background-color: #00796b;
+  color: white;
+  padding: 15px;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header h1 {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+nav ul {
+  list-style-type: none;
+  display: flex;
+}
+
+nav ul li {
+  margin-left: 20px;
+}
+
+nav ul li a {
+  color: white;
+  transition: color 0.3s;
+}
+
+nav ul li a:hover {
+  color: #e0f7fa;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 7px;
+}
+
+.nav-controls {
+  display: flex;
+  align-items: center;
+}
+
+#theme-toggle, #menu-toggle {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+  margin-left: 15px;
+}
+
+#menu-toggle {
+  display: none;
+}
+
+/* From Uiverse.io by uiverse-astronaut */ 
+button {
+  background: #94fb1f;
+  font-family: inherit;
+  padding: 0.6em 1.3em;
+  font-weight: 900;
+  font-size: 18px;
+  border: 3px solid black;
+  border-radius: 0.4em;
+  box-shadow: 0.1em 0.1em;
+}
+
+button:hover {
+  transform: translate(-0.05em, -0.05em);
+  box-shadow: 0.15em 0.15em;
+}
+
+button:active {
+  transform: translate(0.05em, 0.05em);
+  box-shadow: 0.05em 0.05em;
+}
+
+/* General styling */
+.hero {
+ 
+ 
+  color: white;
+  text-align: center;
+  padding: 80px 20px;
+}
+.hero h2 {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+}
+
+.hero p {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+}
+
+.hero-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  gap: 20px;
+}
+
+.hero-text {
+  flex: 1;
+}
+
+.hero-img {
+  flex: 1;
+}
+
+.hero-img img {
+  width: 100%;
+  max-width: 900px;
+  border-radius: 8px;
+}
+
+/* Hero button styling */
+.hero-btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #4CAF50; /* Button color */
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+}
+
+.hero-btn:hover {
+  background-color: #45a049;
+}
+
+/* Responsive styling */
+@media screen and (max-width: 768px) {
+  .hero-content {
+    flex-direction: column-reverse; /* Stack content and image */
+    text-align: center;
+  }
+
+  .hero-img {
+    margin-bottom: 20px;
+  }
+
+  .hero-text h2 {
+    font-size: 24px;
+  }
+
+  .hero-btn {
+    padding: 12px 24px;
+  }
+}
+
+/* General Styling for Upload Card */
+.upload-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  width: 350px;
+  margin: 20px auto;
+}
+
+.upload-container {
+  text-align: center;
+}
+
+.upload-img img {
+  width: 100%;
+  max-width: 500px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+}
+
+.upload-text h2 {
+  font-size: 22px;
+  margin-bottom: 10px;
+}
+
+.custom-file-upload {
+  display: inline-block;
+  padding: 10px 20px;
+  color: white;
+  background-color: #007bff;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.custom-file-upload:hover {
+  background-color: #0056b3;
+}
+
+.custom-file-upload span {
+  font-size: 16px;
+}
+
+.upload-submit button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.upload-submit button:hover {
+  background-color: #218838;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 480px) {
+  .upload-card {
+    max-width: 100%;
+    padding: 15px;
+  }
+  
+  .upload-img img {
+    max-width: 150px;
+  }
+}
+
+/* General Section Styling */
+section h2 {
+  font-size: 24px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.classification p, .disposal p {
+  text-align: center;
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+
+/* General Section Styling */
+h2 {
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+/* Card Container Styling */
+.card-container {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  padding: 20px;
+}
+
+.card {
+  width: 450px;
+  height: 450px;
+  perspective: 1000px; /* 3D perspective for the card flipping effect */
+}
+
+.card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.card:hover .card-inner {
+  transform: rotateY(180deg); /* Flip card on hover */
+}
+
+.card-front, .card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  overflow: hidden;
+  padding: 20px;
+}
+
+.card-front {
+  background-color: #4CAF50; /* Front side background */
+  color: white;
+}
+
+.card-front img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Image will cover the entire card size */
+  border-radius: 10px 10px 0 0;
+}
+
+.card-front span {
+  position: absolute;
+  bottom: 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 10px;
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  border-radius: 0 0 10px 10px;
+}
+
+.card-back {
+  background-color: #fff;
+  color: #333;
+  transform: rotateY(180deg);
+}
+
+.card-back h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.card-back p {
+  font-size: 14px;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+  .card-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card {
+    width: 100%;
+    max-width: 300px;
+    margin-bottom: 20px;
+  }
+}
+
+/* General Section Styling */
+.features {
+  padding: 40px 20px;
+  background-color: #f5f5f5;
+  text-align: center;
+}
+
+.features h2 {
+  font-size: 28px;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.features-container {
+  display: flex;
+  justify-content: space-around;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.feature-card {
+  background-color: white;
+  border-radius: 10px;
+  padding: 20px;
+  width: 700px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: left;
+}
+
+.feature-card h3 {
+  font-size: 22px;
+  margin-bottom: 10px;
+  color: #4CAF50;
+}
+
+.feature-card p {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+.feature-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.feature-card .cta-button, .feature-card .hero-btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  text-decoration: none;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+}
+
+.feature-card .cta-button:hover, .feature-card .hero-btn:hover {
+  background-color: #388E3C;
+}
+
+/* Styling for icons - Placeholder for now */
+.icon {
+  width: 50px;
+  height: 50px;
+  background-color: #4CAF50;
+  border-radius: 50%;
+  margin-bottom: 15px;
+}
+
+/* Blockquote for eco-fact */
+blockquote {
+  font-style: italic;
+  margin-bottom: 10px;
+  color: #777;
+}
+
+#fact-highlight {
+  font-weight: bold;
+  color: #333;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .features-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .feature-card {
+    width: 100%;
+    max-width: 350px;
+  }
+}
+/* FAQ Section */
+.faqisection{
+  padding: 60px 20px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f9f9f9;
+  text-align: left;
+
+}
+.faqs {
+padding: 60px 20px;
+width: 50%;
+height: 100%;
+display: flex;
+flex-direction: column;
+justify-content: center;
+background-color: #f9f9f9;
+text-align: left;
+}
+
+.faqs h2 {
+text-align: center;
+font-size: 28px;
+margin-bottom: 30px;
+color: #333;
+}
+
+/* FAQ Items Styling */
+.faq-item {
+margin-bottom: 20px;
+border-bottom: 1px solid #ddd;
+padding: 10px 0;
+cursor: pointer;
+}
+
+.faq-item h3 {
+font-size: 20px;
+color: #4CAF50;
+margin-bottom: 10px;
+position: relative;
+transition: color 0.3s ease;
+}
+
+.faq-item h3::after {
+content: '\002B'; /* Plus sign icon */
+font-size: 24px;
+position: absolute;
+right: 0;
+top: 0;
+transition: transform 0.3s ease;
+}
+
+.faq-item.active h3::after {
+content: '\2212'; /* Minus sign icon */
+}
+
+.faq-item p {
+font-size: 16px;
+color: #555;
+line-height: 1.6;
+max-height: 0;
+overflow: hidden;
+transition: max-height 0.3s ease;
+}
+
+/* FAQ Item Expanded */
+.faq-item.active p {
+max-height: 500px;
+}
+
+/* FAQ Hover Effect */
+.faq-item:hover h3 {
+color: #388E3C;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+.faqs h2 {
+  font-size: 24px;
+}
+
+.faq-item h3 {
+  font-size: 18px;
+}
+
+.faq-item p {
+  font-size: 14px;
+}
+}
+/* FAQ Section */
+.faqs {
+  padding: 40px 20px;
+  background-color: #f9f9f9;
+  text-align: left;
+}
+
+.faqs h2 {
+  text-align: center;
+  font-size: 28px;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+/* FAQ Items Styling */
+.faq-item {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #ddd;
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.faq-item h3 {
+  font-size: 20px;
+  color: #4CAF50;
+  margin-bottom: 10px;
+  position: relative;
+  transition: color 0.3s ease;
+}
+
+.faq-item h3::after {
+  content: '\002B'; /* Plus sign icon */
+  font-size: 24px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: transform 0.3s ease;
+}
+
+.faq-item.active h3::after {
+  content: '\2212'; /* Minus sign icon */
+}
+
+.faq-item p {
+  font-size: 16px;
+  color: #555;
+  line-height: 1.6;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+/* FAQ Item Expanded */
+.faq-item.active p {
+  max-height: 500px;
+}
+
+/* FAQ Hover Effect */
+.faq-item:hover h3 {
+  color: #388E3C;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .faqs h2 {
+    font-size: 24px;
+  }
+
+  .faq-item h3 {
+    font-size: 18px;
+  }
+
+  .faq-item p {
+    font-size: 14px;
+  }
+}
+
+/* feedback */
+.feedback {
+  margin-top: 30px;
+  background-color: #ffffff;
+  /* White background for better contrast */
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.feedback h2 {
+  text-align: center;
+  color: #00796b;
+  /* Consistent color with the theme */
+  margin-bottom: 20px;
+}
+
+.feedback form {
+  display: flex;
+  flex-direction: column;
+}
+
+.feedback input,
+.feedback textarea {
+  margin: 10px 0;
+  padding: 12px;
+  border: 1px solid #00796b;
+  border-radius: 5px;
+  font-size: 16px;
+  background-color: #e0f7fa;
+  /* Matches the background theme */
+}
+
+.feedback textarea {
+  min-height: 100px;
+  /* Larger space for feedback text */
+}
+
+.feedback button {
+  background-color: #00796b;
+  /* Light mode button color (same as header) */
+  color: white;
+  /* Text color for contrast */
+  padding: 12px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.feedback button:hover {
+  background-color: #004d40;
+  /* Darker teal on hover */
+}
+
+/* About Us Section */
+.about-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 20px;
+  background-color: #f4f4f4;
+}
+
+.about-heading h2 {
+  font-size: 28px;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+/* About Text Styling */
+.about-text {
+  max-width: 800px; /* Restrict max width for readability */
+  margin-bottom: 20px;
+  text-align: center; /* Center align text */
+}
+
+.about-text p {
+  font-size: 16px;
+  color: #555;
+  line-height: 1.6;
+  margin-bottom: 15px; /* Space between paragraphs */
+}
+
+/* About Image Styling */
+.about-image {
+  width: 100%;
+  max-width: 600px; /* Restrict max width for images */
+  margin: 0 auto; /* Center the image */
+}
+
+.about-image img {
+  width: 100%; /* Make image responsive */
+  height: auto; /* Maintain aspect ratio */
+  border-radius: 8px; /* Rounded corners for the image */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .about-heading h2 {
+      font-size: 24px;
+  }
+
+  .about-text p {
+      font-size: 14px; /* Smaller font size on mobile */
+  }
+}
+/* Mission Section */
+section {
+  padding: 40px 20px;
+  background-color: #f9f9f9; /* Light background for contrast */
+}
+
+.mission-container {
+  max-width: 1200px; /* Restrict max width for content */
+  margin: 0 auto; /* Center align the container */
+  text-align: center; /* Center align the text */
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  /* align-items: center; */
+}
+
+.mission-container h3 {
+  font-size: 28px;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+/* Mission Box Styling */
+.mission-box {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
+  gap: 20px; /* Space between grid items */
+}
+
+.mission-item {
+  background-color: #fff; /* White background for items */
+  border-radius: 8px; /* Rounded corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+  padding: 20px; /* Inner spacing */
+  transition: transform 0.3s; /* Animation on hover */
+}
+
+.mission-item:hover {
+  transform: translateY(-5px); /* Lift effect on hover */
+}
+
+.mission-item img {
+  width: 60px; /* Fixed width for icons */
+  height: auto; /* Maintain aspect ratio */
+  margin-bottom: 10px; /* Space between image and text */
+}
+
+.mission-item h4 {
+  font-size: 20px;
+  color: #333;
+  margin: 10px 0; /* Space around the heading */
+}
+
+.mission-item p {
+  font-size: 14px;
+  color: #555; /* Dark gray for better readability */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .mission-container h3 {
+      font-size: 24px; /* Smaller heading size on mobile */
+  }
+
+  .mission-item h4 {
+      font-size: 18px; /* Smaller subheading on mobile */
+  }
+
+  .mission-item p {
+      font-size: 12px; /* Smaller paragraph size on mobile */
+  }
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.form_area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #EDDCD9;
+  height: auto;
+  width: auto;
+  border: 2px solid #264143;
+  border-radius: 20px;
+  box-shadow: 3px 4px 0px 1px #E99F4C;
+}
+
+.title {
+  color: #264143;
+  font-weight: 900;
+  font-size: 1.5em;
+  margin-top: 20px;
+}
+
+.sub_title {
+  font-weight: 600;
+  margin: 5px 0;
+}
+
+.form_group {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  margin: 10px;
+}
+
+.form_style {
+  outline: none;
+  border: 2px solid #264143;
+  box-shadow: 3px 4px 0px 1px #E99F4C;
+  width: 490px;
+  padding: 12px 10px;
+  border-radius: 4px;
+  font-size: 15px;
+}
+
+.form_style:focus, .btn:focus {
+  transform: translateY(4px);
+  box-shadow: 1px 2px 0px 0px #E99F4C;
+}
+
+.btn {
+  padding: 15px;
+  margin: 25px 0px;
+  width: 290px;
+  font-size: 15px;
+  background: #DE5499;
+  border-radius: 10px;
+  font-weight: 800;
+  box-shadow: 3px 3px 0px 0px #E99F4C;
+}
+
+.btn:hover {
+  opacity: .9;
+}
+
+.link {
+  font-weight: 800;
+  color: #264143;
+  padding: 5px;
+}