diff --git a/index.html b/index.html
index 8117287..0586c5e 100644
--- a/index.html
+++ b/index.html
@@ -19,17 +19,13 @@
 
     <!-- Progress Bar -->
 
-
+    <!-- part 1 start-->
     <div id="progress-container">
         <div id="progress-bar"></div>
     </div>
     <header>
 
 
-        <a href="index.html">
-            <h1>Waste Management</h1>
-        </a>
-
         <a href="index.html">
             <h1>Waste Management</h1>
         </a>
@@ -93,12 +89,13 @@ <h2>Upload Your Files</h2>
         <h2>Waste Classification</h2>
         <p id="classification-result">Your classification result will appear here.</p>
     </section>
+    <!-- part 2 start-->
 
     <section class="disposal">
         <h2>Disposal Information</h2>
         <p id="disposal-information">Disposal information will be displayed here.</p>
     </section>
-    <div>
+    <div class="Categories">
         <h2>Waste Categories</h2>
         <div class="card-container">
             <div class="card">
@@ -106,6 +103,8 @@ <h2>Waste Categories</h2>
                     <div class="card-front">
                         <img src="./assets/arrangement-cooked-fish-leftovers-recycle-symbol.jpg"
                             alt="Biodegradable Waste">
+                        <h3>Biodegradable Waste</h3>
+                        <p>Items like fruit peels, vegetable scraps, and paper. These decompose naturally over time, enriching the soil and reducing waste.</p>                            
                         <span>Biodegradable Waste</span>
                     </div>
 
@@ -378,79 +377,78 @@ <h3>Biodegradable Waste</h3>
                             decompose over time.</p>
                     </div>
             </div>
-        </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>
-
-
-            </main>
-
-
-
-            <footer id="footer">
-                <h2>Stay Connected</h2>
-                <form id="newsletter-form">
-                    <input type="email" placeholder="Your Email" required>
-                    <span id="newsletter-error-message" style="color: red;"></span>
-                    <!-- Error message for newsletter -->
-                    <button type="submit">Subscribe</button>
-                </form>
-                <div class="social-media">
-                    <a href="#">Facebook</a>
-                    <a href="#">Twitter</a>
-                    <a href="#">Instagram</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>
-
-                    <a href="#">
-                        <box-icon type="logo" name="facebook"></box-icon>
-                    </a>
-                    <a href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
-                            <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" />
-                        </svg>
-                    </a>
-
-                    <a href="#">
-                        <box-icon type="logo" name="instagram"></box-icon>
-                    </a>
+            <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>
-
-                <p>&copy; 2024 Waste Management. All rights reserved.</p>
-                <button id="BacktoTop">
-                    <div class="circle1">
-                        <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
-                            fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-                            <path
-                                d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z">
-                            </path>
-                        </svg>
+    
+    
+                </main>
+    
+    
+    
+                <footer id="footer">
+                    <h2>Stay Connected</h2>
+                    <form id="newsletter-form">
+                        <input type="email" placeholder="Your Email" required>
+                        <span id="newsletter-error-message" style="color: red;"></span>
+                        <!-- Error message for newsletter -->
+                        <button type="submit">Subscribe</button>
+                    </form>
+                    <div class="social-media">
+                        <a href="#">Facebook</a>
+                        <a href="#">Twitter</a>
+                        <a href="#">Instagram</a>
                     </div>
-                </button>
-            </footer>
-
-
-            <p>&copy; 2024 Waste Management. All rights reserved.</p>
-            </footer>
-
+                    <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>
+    
+                        <a href="#">
+                            <box-icon type="logo" name="facebook"></box-icon>
+                        </a>
+                        <a href="#">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
+                                <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" />
+                            </svg>
+                        </a>
+    
+                        <a href="#">
+                            <box-icon type="logo" name="instagram"></box-icon>
+                        </a>
+                    </div>
+    
+                    <p>&copy; 2024 Waste Management. All rights reserved.</p>
+                    <button id="BacktoTop">
+                        <div class="circle1">
+                            <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
+                                fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+                                <path
+                                    d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z">
+                                </path>
+                            </svg>
+                        </div>
+                    </button>
+                </footer>
+    
+    
+                <p>&copy; 2024 Waste Management. All rights reserved.</p>
+                </footer>
+    
+            </div>
         </div>
     </div>
     </div>
@@ -488,6 +486,9 @@ <h3>Community Engagement</h3>
             </div>
         </div>
     </section>
+
+    <!-- part 3 start -->
+
     <section class="faqisection">
         <section class="faqs" id="faqs">
             <div>
@@ -701,6 +702,10 @@ <h4>Responsibility</h4>
         </div><a class="link" href="">
         </a>
     </div>
+
+    <!-- part 4 start -->
+
+
     <footer id="footer">
         <h2>Stay Connected</h2>
         <form id="newsletter-form" name="newsletter-form">
diff --git a/styles.css b/styles.css
index c9734b2..55c8347 100644
--- a/styles.css
+++ b/styles.css
@@ -1,2652 +1,310 @@
-/* Reset and Base Styles */
+/* General Reset */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: Arial, sans-serif;
 }
 
 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;
+  background-color: #f4f4f4;
+  color: #333;
 }
 
 /* Progress Bar */
 #progress-container {
+  width: 100%;
+  background-color: #e0e0e0;
+  height: 5px;
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 9px;
-  z-index: 99990;
+  z-index: 1000;
 }
 
 #progress-bar {
-  height: 9px;
+  height: 5px;
+  background-color: #4caf50;
   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;
+  transition: width 0.3s ease;
 }
 
-/* Header and Navigation */
+/* Header */
 header {
-  background-color: #00796b;
-  color: white;
-  padding: 15px;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  background-color: #333;
+  color: #fff;
 }
 
 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;
+  color: #4caf50;
+  margin-left: 10px;
 }
 
-nav ul li a:hover {
-  color: #e0f7fa;
-  background-color: rgba(255, 255, 255, 0.2);
-  border-radius: 7px;
+header a {
+  text-decoration: none;
+  color: inherit;
 }
 
 .nav-controls {
   display: flex;
   align-items: center;
+  gap: 1rem;
 }
 
-#theme-toggle, #menu-toggle {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 1.5rem;
+#theme-toggle,
+#menu-toggle {
   cursor: pointer;
-  margin-left: 15px;
+  font-size: 1.2rem;
+  color: #fff;
 }
 
-#menu-toggle {
-  display: none;
+/* Navbar Buttons */
+nav .btn-nav {
+  display: flex;
+  gap: 0.5rem;
 }
 
-/* Hero Section */
-.hero {
-  width: 100vw;
-  height: 90vh;
- 
-  color: white;
-  text-align: center;
-  padding: 80px 20px;
+.button {
+  background-color: #4caf50;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
 }
 
-.hero h2 {
-  font-size: 2.5rem;
-  margin-bottom: 20px;
+.button a {
+  color: #fff;
+  text-decoration: none;
 }
 
-.hero p {
-  font-size: 1.2rem;
-  margin-bottom: 30px;
+.button:hover {
+  background-color: #388e3c;
 }
 
-.hero-btn {
-  display: inline-block;
-  background-color: #26a69a;
-  color: white;
-  padding: 12px 24px;
-  border-radius: 25px;
-  font-size: 1.1rem;
-  transition: background-color 0.3s;
+/* Hero Section */
+.hero {
+  background: linear-gradient(135deg, #4caf50, #81c784);
+  color: #fff;
+  padding: 3rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-top: 50px;
 }
 
-.hero-btn:hover {
-  background-color: #004d40;
+.hero-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem;
 }
 
-@media (max-width: 768px) {
-  .hero h2 {
-    font-size: 2rem;
-  }
-
-  .hero p {
-    font-size: 1rem;
-    margin-top: 100px;
-  }
+.hero-text {
+  max-width: 600px;
 }
 
-nav ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  justify-content: center;
+.hero-text h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
 }
 
-nav ul li {
-  margin: 0 15px;
+.hero-text p {
+  margin-bottom: 1rem;
+  font-size: 1.1rem;
 }
 
-nav ul li a {
+.hero-btn {
+  display: inline-block;
+  background-color: #388e3c;
+  padding: 0.75rem 1.5rem;
+  color: #fff;
+  border-radius: 5px;
   text-decoration: none;
-  color: #c8e6c9;
+  transition: background-color 0.3s ease;
 }
 
-.hero-btn {
-  padding: 10px 20px;
-  font-size: 1rem;
+.hero-btn:hover {
+  background-color: #2e7d32;
 }
 
-
-@media (max-width: 480px) {
-  .hero {
-    padding: 60px 15px;
-  }
-
-  .hero h2 {
-    font-size: 1.8rem;
-  }
-
-  .hero p {
-    font-size: 0.9rem;
-  }
-
-  .hero-btn {
-    padding: 8px 18px;
-    font-size: 0.9rem;
-  }
+.hero-img img {
+  width: 400px;
+  border-radius: 8px;
 }
 
-main {
-  padding: 20px;
+/* Upload Section */
+.upload {
+  background-color: #ffffff;
+  padding: 2rem;
+  margin: 2rem 0;
+  text-align: center;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.upload,
-.classification,
-.disposal,
-.feedback {
-  margin-bottom: 30px;
+.upload-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
 }
 
-/* Styling for the upload section */
-/* Upload Section */
-.upload {
-  background-color: #f5f9ff;
-  padding: 20px;
-  border-radius: 10px;
-  text-align: center;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  max-width: 400px;
-  margin: 0 auto 30px;
+.upload-img img {
+  width: 150px;
+  height: auto;
+  border-radius: 8px;
+  margin-bottom: 1rem;
 }
 
 .custom-file-upload {
   display: inline-block;
-  background-color: #44bf49;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 5px;
   cursor: pointer;
-  transition: background-color 0.3s;
-  margin-top: 10px;
+  padding: 0.2rem 1rem;
+  color: #333;
+  border: 1px solid #4caf50;
+  border-radius: 5px;
+  background-color: #f1f1f1;
+  transition: background-color 0.3s ease;
+  margin-bottom: 1.5rem;
 }
 
 .custom-file-upload:hover {
-  background-color: #3a873d;
+  background-color: #e0e0e0;
 }
 
 #upload-button {
-  background-color: #007bff;
+  background-color: #4caf50;
   color: white;
-  padding: 10px 20px;
   border: none;
+  padding: 0.5rem 1rem;
   border-radius: 5px;
-  font-size: 16px;
   cursor: pointer;
-  transition: background-color 0.3s;
-  margin-top: 10px;
+  transition: background-color 0.3s ease;
 }
 
 #upload-button:hover {
-  background-color: #0056b3;
-}
-
-.classification-info {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
+  background-color: #388e3c;
 }
 
-.classification-info h2 {
+/* Waste Classification Section */
+.classification {
+  padding: 2rem;
   text-align: center;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.features {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 5px;
-}
-
-/* Card Section */
-
-.card-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  gap: 20px;
-}
-
-.card {
-  position: relative;
-  width: 400px;
-  height: 300px;
-  perspective: 1000px;
+  background-color: #f9f9f9;
+  margin-top: 2rem;
+  border-top: 3px solid #4caf50;
 }
 
-.card-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transform-style: preserve-3d;
-  transition: transform 0.6s;
+.classification h2 {
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
 }
 
-.card:hover .card-inner {
-  transform: rotateY(180deg);
+.classification #classification-result {
+  font-size: 1rem;
+  color: #666;
 }
 
-.card-front,
-.card-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  border: 2px solid #ddd;
-  border-radius: 10px;
-  background-color: #99e4ab;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+/* Responsive Design */
+@media (max-width: 768px) {
+  .hero-content {
+      flex-direction: column;
+      align-items: center;
+  }
 
-.card-front {
-  color: #333;
-  font-size: 30px;
-}
+  .hero-img img {
+      width: 100%;
+      max-width: 300px;
+  }
 
-.card-back {
-  transform: rotateY(180deg);
-  padding: 10px;
-  color: #444;
-  display: flex; /* Add this */
-  flex-direction: column; /* Add this */
-  align-items: center; /* Center horizontally */
-  justify-content: center; /* Center vertically */
-  text-align: center; /* Center text */
-}
+  nav .btn-nav {
+      flex-wrap: wrap;
+      justify-content: center;
+  }
 
-.card-back h3 {
-  margin: 10px 0;
+  header h1 {
+      font-size: 1.2rem;
+  }
 }
-
-.card-back p {
-  text-align: justify;
+/* General Styling */
+section {
+  padding: 20px;
+  margin: 20px 0;
+  background-color: #f8f8f8;
+  border-radius: 8px;
 }
 
-/* FAQs Section */
-.faqs {
-  margin-bottom: 30px;
+h2, h3, h4 {
+  color: #333;
 }
 
-.faqs h2 {
-  font-size: 2rem;
+.Categories h2 {
+  font-size: 2em;
+  margin-bottom: 15px;
   text-align: center;
-  font-family: 'Poppins', sans-serif;
-  color: black;
-}
-
-.faq-item {
-  background-color: #a5d6a7;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  overflow: hidden;
-}
-
-.faq-item h3 {
-  padding: 15px;
-  cursor: pointer;
-  margin: 0;
-}
-
-.faq-item p {
-  padding: 15px;
-  background-color: white;
-  border: 1px solid #a5d6a7;
-  display: none;
 }
 
-/* Mission */
-.mission-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 50px 20px;
-  text-align: center;
+/* Disposal Information Section */
+.disposal {
+  background-color: #e3f2fd;
+  border-left: 5px solid #2196f3;
+  padding-left: 20px;
 }
 
-.mission-container h3 {
-  font-size: 2.5rem;
-  color: #333;
-  margin-bottom: 40px;
-  font-family: 'Poppins', sans-serif;
+#disposal-information {
+  font-size: 1.1em;
+  color: #555;
 }
 
-/* Mission Box (Container for Items) */
-.mission-box {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+/* Waste Categories Section */
+.card-container {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
   gap: 20px;
 }
 
-/* Individual Mission Items (Card Style) */
-.mission-item {
+.card {
+  width: 300px;
+  height: 400px;
   background-color: #fff;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  text-align: left;
-}
-
-.mission-item img {
-  width: 100%;
-  height: auto;
   border-radius: 8px;
-  margin-bottom: 15px;
-}
-
-/* Hover Effect for Mission Items */
-.mission-item:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.mission-item h4 {
-  font-size: 1.5rem;
-  color: #3b82f6;
-  margin-bottom: 10px;
-  font-family: 'Poppins', sans-serif;
-}
-
-.mission-item p {
-  font-size: 1rem;
-  color: black;
-  line-height: 1.6;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .mission-box {
-    grid-template-columns: 1fr;
-  }
-}
-
-
-/* Sign Up Section */
-/* Container Styling */
-.signup {
-  background-color: #ffffff;
-  padding: 30px;
-  border-radius: 10px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  max-width: 400px;
-  margin: 0 auto;
-  font-family: Arial, sans-serif;
-}
-
-/* Title Styling */
-.signup .title {
-  font-size: 1.8em;
-  font-weight: 600;
-  color: #333;
-  text-align: center;
-  margin-bottom: 25px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.3s ease;
 }
 
-/* Form Group Styling */
-.form_group {
-  margin-bottom: 20px;
+.card:hover {
+  transform: scale(1.05);
 }
 
-/* Label Styling */
-.sub_title {
-  font-size: 1em;
-  color: #333;
-  margin-bottom: 5px;
-  display: block;
+.card-inner {
+  position: relative;
+  height: 100%;
 }
 
-/* Input Styling */
-.form_style {
+.card-front img {
   width: 100%;
-  padding: 12px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  transition: border-color 0.3s;
-  font-size: 1em;
-}
-
-.form_style:focus {
-  border-color: #007b5f;
-  outline: none;
-  box-shadow: 0 0 8px rgba(0, 123, 95, 0.2);
+  height: 100%;
+  object-fit: cover;
 }
 
-/* Button Styling */
-.btn {
-  width: 100%;
-  padding: 12px;
-  font-size: 1em;
+.card-front span {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  font-size: 1.2em;
   font-weight: bold;
   color: white;
-  background-color: #007b5f;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.1s;
-}
-
-.btn:hover {
-  background-color: #005f46;
-}
-
-.btn:active {
-  transform: scale(0.98);
-}
-
-/* Link Styling */
-.link {
-  color: #007b5f;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.link:hover {
-  text-decoration: underline;
-}
-
-/* Text under button */
-.form_action p {
-  text-align: center;
-  font-size: 0.9em;
-  margin-top: 15px;
-}
-
-/* Responsive Styling */
-@media (max-width: 500px) {
-  .signup {
-    padding: 20px;
-    max-width: 90%;
-    margin: 0 auto;
-  }
-
-  .signup .title {
-    font-size: 1.6em;
-  }
-
-  .btn, .form_style {
-    font-size: 0.95em;
-  }
-}
-
-/*About Us  */
-.about-us {
-  max-width: 800px; /* Limit the width */
-  margin: 0 auto; /* Center the section */
-  padding: 20px;
-  text-align: center;
-}
-
-/* About Us Heading */
-.about-us h2 {
-  font-size: 2rem;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-/* About Us Text */
-.about-us p {
-  font-size: 1.2rem; /* Increased font size */
-  line-height: 1.6;
-  color: #555;
-  margin-bottom: 20px;
-}
-
-/* About Us Image */
-.about-image img {
-  width: 100%; /* Responsive image */
-  height: auto;
-  margin-top: 20px;
-  border-radius: 8px; /* Optional: Rounded corners */
-}
-
-
-.values-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 50px 20px;
-  text-align: center;
-}
-
-/* Section Heading */
-.values-container h3 {
-  font-size: 2.5rem;
-  color: #333;
-  margin-bottom: 40px;
-  font-family: 'Poppins', sans-serif;
-}
-
-/* Values Cards Container */
-.values-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-}
-
-/* Card View Style for Individual Value Cards */
-.value-card {
-  background-color: white;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  text-align: left;
-}
-
-/* Hover effect for cards */
-.value-card:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.value-card h4 {
-  font-size: 1.5rem;
-  color: #3b82f6;
-  margin-bottom: 10px;
-  font-family: 'Poppins', sans-serif;
-}
-
-.value-card p {
-  font-size: 1rem;
-  color: #666;
-  line-height: 1.6;
-}
-/* feature section */
-
-/* General styling for the section */
-.features {
-  padding: 60px 20px;
-  background-color: #f9f9f9;
-  text-align: center;
-}
-
-.features h2 {
-  font-size: 36px;
-  margin-bottom: 40px;
-  color: #333;
-}
-
-/* Container for feature cards */
-.features-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px; /* Adds space between each card */
-}
-.feature-card{
-  background-color: #28a745;
-}
-/* Styling for each feature card */
-.feature-card, .feature-card1 {
-  background-color: #f4f4f4; /* Background color for the cards */
-  padding: 20px;
-  border-radius: 8px;
-  width: 80%; /* Make the cards take up 80% of the container width */
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adding shadow for card effect */
-  text-align: center;
-}
-.feature-card:hover, .feature-card1:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-/* Styling for icons inside feature cards */
-.feature-card .icon, .feature-card1 .icon {
-  font-size: 50px;
-  color: #4CAF50;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-.feature-card .icon i, .feature-card1 .icon i {
-  font-size: inherit;
-}
-
-/* Heading for each card */
-.feature-card h2, .feature-card1 h3 {
-  font-size: 24px;
-  color: #45a049;
-  margin-bottom: 10px;
-}
-
-/* Paragraph styling */
-.feature-card p, .feature-card1 p {
-  font-size: 16px;
-  color: black;
-  line-height: 1.6;
-}
-
-/* Blockquote styling */
-.feature-card blockquote {
-  font-size: 16px;
-  color: #555;
-  background-color: #f0f8e8;
-  padding: 10px;
-  border-left: 4px solid #007bff;
-  margin-bottom: 15px;
-}
-
-#fact-highlight {
-  font-weight: bold;
-  color: red;
-}
-
-/* Call-to-action button */
-.cta-button {
-  display: inline-block;
-  padding: 10px 20px;
-  background-color: #0056b3;
-  color: #fff;
-  text-decoration: none;
-  border-radius: 5px;
-  margin-top: 15px;
-}
-
-.cta-button:hover {
-  background-color: #45a049;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .features-container {
-      flex-direction: column;
-      align-items: center;
-  }
-
-  .feature-card, .feature-card1 {
-      width: 100%;
-      max-width: 100%; /* Full-width for smaller screens */
-  }
-
-  .features h2 {
-      font-size: 28px;
-  }
-
-  .feature-card h2, .feature-card1 h3 {
-      font-size: 20px;
-  }
-
-  .cta-button {
-      font-size: 14px;
-      padding: 8px 16px;
-  }
-}
-
-@media (min-width: 769px) and (max-width: 1024px) {
-  .feature-card, .feature-card1 {
-      max-width: 45%; /* Slightly narrower for medium screens */
-  }
-}
-
-
-body.dark-mode {
-  background-color: #1f1f1f;
-  color: #ffffff; /* Default text color */
-}
-
-/* Header styling */
-.dark-mode header {
-  background-color: #00796b; 
-}
-
-/* Feature cards */
-.dark-mode .feature-card,
-.dark-mode .feature-card1 {
-  border-color: #fff; /* Card border color */
-}
-
-/* Feedback and signup sections */
-.dark-mode .feedback,
-.dark-mode .signup {
-  background-color: #fff; /* Feedback and signup background */
-}
-
-/* Footer styling */
-.dark-mode #footer {
-  background-color: #1c1c1c; /* Footer background color */
-}
-
-/* Headings */
-.dark-mode h1 {
-  color: #fff; /* H1 color */
-}
-.dark-mode .feedback h2{
-  color: #00796b;
-}
-.dark-mode h2{
-  color: #fff; /* H2 color */
-}
-.dark-mode .features h2{
-  color: #28a745;
-}
-
-.dark-mode h3 {
-  color: #fff; /* H3 color */
-}
-.dark-mode .feature-card1 h3{
-  color:#004d40;
-}
-
-.dark-mode h4 {
-  color: #3b82f6; /* H4 color */
-}
-.dark-mode .signup h2{
-  color:#007b5f;
-}
-.dark-mode h5 {
-  color: #66ff66; /* H5 color */
-}
-
-.dark-mode h6 {
-  color: #cccccc; /* H6 color */
-}
-
-/* Paragraphs */
-.dark-mode p {
-  color: black; 
-}
-.dark-mode .about-us p{
-  color: white;
-}
-
-/* Additional element styles for dark mode */
-.dark-mode a {
-  color: #fff; /* Link color */
-}
-
-.dark-mode .hero {
-  background-color: white; /* Hero section background */
-}
-
-.dark-mode .mission-item h4 {
-  color: #00bcd4; /* Mission item headings */
-}
-.dark-mode .mission-item p{
-  color: black;
-}
-.dark-mode .community-message p{
-  color: #fff;
-}
-.dark-mode .upload-text h2{
-  color:black;
-}
-.dark-mode .hero-text h3{
-  color: #004d40;
-}
-
-/* Footer */
-#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;
-}
-/* Responsive Design */
-@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;
-  }
-
-  .hero h2 {
-      font-size: 2rem;
-  }
-
-  .feature-card,
-  .feature-card1 {
-      width: 100%;
-  }
-
-  .card {
-      width: 100%;
-  }
-
-  
-   /* Slider container */
-   .feature-slider {
-    position: relative;
-    overflow: hidden;
-    max-width: 1000px;
-    margin: 0 auto;
-}
-
-/* Feature Cards Wrapper */
-.slider-wrapper {
-    display: flex;
-    transition: transform 0.5s ease;
-    width: 300%;
-}
-
-/* Individual Feature Card */
-.feature-card {
-    flex: 1 0 100%;
-    padding: 2rem;
-    text-align: center;
-    background-color: #EDF6F9;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    margin: 2rem;
-    transition: background-color 0.3s ease;
-}
-
-/* Feature card specific styles */
-.feature-card h3 {
-    font-size: 2rem;
-    margin-bottom: 1rem;
-    color: #006D77;
-}
-
-.feature-card p, blockquote {
-    font-size: 1.1rem;
-    color: #555;
-    line-height: 1.6;
-}
-
-blockquote {
-    background-color: #C8E6C9;
-    padding: 1rem;
-    border-left: 4px solid #43A047;
-    border-radius: 5px;
-    margin: 1.5rem 0;
-}
-
-#fact-highlight {
-    font-weight: bold;
-    color: #E53935;
-}
-
-.highlight {
-    color: #2e7d32;
-    font-weight: bold;
-}
-
-/* Call-to-action button */
-.cta-button {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: #4CAF50;
-    color: white;
-    text-decoration: none;
-    border-radius: 5px;
-    font-size: 1.1rem;
-    transition: background-color 0.3s ease;
-}
-
-.cta-button:hover {
-    background-image: linear-gradient(to right, #006D77, #EDF6F9);
-}
-
-/* Slider navigation buttons */
-.slider-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    border: none;
-    padding: 1rem;
-    cursor: pointer;
-    z-index: 10;
-    font-size: 1.5rem;
-}
-
-.slider-btn.left {
-    left: 10px;
-}
-
-.slider-btn.right {
-    right: 10px;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .feature-card {
-        padding: 1rem;
-        margin: 1rem;
-    }
-
-    .cta-button {
-        padding: 8px 16px;
-        font-size: 1rem;
-    }
-
-    h3 {
-        font-size: 1.5rem;
-    }
-}
-  
-  /*MISSION SECTION*/
-  .mission-box {
-      grid-template-columns: 1fr;
-  }
-
-  #newsletter-form {
-      flex-direction: column;
-  }
-
-  #newsletter-form input,
-  #newsletter-form button {
-      width: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  .hero h2 {
-      font-size: 1.5rem;
-  }
-
-  .custom-file-upload,
-  #upload-button {
-      width: 100%;
-  }
-}
-
-
-/* ecotips.html */
-/* Hero Section */
-.hero-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background-color: #f5f5f5; /* Light grey background */
-  padding: 40px 20px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.hero-text {
-  font-size: 2.5em;
-  color: #2c3e50; /* Dark grey text */
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-.hero-image {
-  max-width: 100%;
-  height: auto; /* Responsive image with full width */
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-}
-
-/* Eco Tips Slider */
-/* .eco-tips-slider {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  margin: 40px 0;
-  background-color: #f4f4f4;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-} */
-/* Header Styling */
-.eco-tips-header{
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-}
-.eco-tips-header h3 {
-  color: #388e3c;
-  font-size: 28px;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.eco-tips-header p {
-  color: #555;
-  font-size: 16px;
-  line-height: 1.6;
-  margin-bottom: 10px;
-  text-align: justify;
-}
-
-.eco-tips-header p span {
-  font-weight: bold;
-  color: #2e7d32;
-}
-
-.eco-tips-header em {
-  display: block;
-  margin-top: 15px;
-  font-style: italic;
-  font-size: 14px;
-  color: #9e9e9e;
-  text-align: center;
-}
-
-/* Hover effect for entire container */
-#eco-tips-container:hover {
-  border-color: #4caf50;
-  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
-}
-
-/* Media Queries for Responsiveness */
-@media (max-width: 600px) {
-  #eco-tips-container {
-      padding: 15px;
-  }
-  
-  .eco-tips-header h3 {
-      font-size: 24px;
-  }
-
-  .eco-tips-header p {
-      font-size: 14px;
-  }
-}
-
-.eco-tips-container {
-  max-width: 1200px;
-  margin: 40px auto;
-  padding: 0 20px;
-}
-
-.eco-tips-slider {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f4f4f4;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  position: relative;
-}
-
-.slider-control {
-  background-color: #27ae60;
-  color: white;
-  border: none;
-  width: 40px;
-  height: 40px;
-  font-size: 1.2em;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  z-index: 2;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-}
-
-.slider-control:hover {
-  background-color: #1e8449;
-}
-
-#prev-slide {
-  left: 10px;
-}
-
-#next-slide {
-  right: 10px;
-}
-
-.eco-tips-content {
-  display: flex;
-  overflow-x: hidden;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  width: 100%;
-}
-
-.eco-tip {
-  flex: 0 0 100%;
-  max-width: 100%;
-  scroll-snap-align: start;
-  padding: 40px;
-  background-color: white;
-  border-radius: 10px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  text-align: center;
-}
-
-.eco-tip h3 {
-  color: #27ae60;
-  font-size: 1.5em;
-  margin-bottom: 10px;
-}
-
-.eco-tip p {
-  font-size: 1em;
-  margin-bottom: 15px;
-  line-height: 1.6;
-}
-
-.eco-tip img,
-.eco-tip video {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  object-fit: cover;
-  max-height: 300px;
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  .eco-tip {
-      flex: 0 0 50%;
-      max-width: 50%;
-  }
-}
-
-@media (min-width: 1024px) {
-  .eco-tip {
-      flex: 0 0 33.333%;
-      max-width: 33.333%;
-  }
-}
-
-
-
-#BacktoTop {
-  display: block;
-  /* Ensure the button is part of the layout */
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  width: 55px;
-  height: 55px;
-  background-color: #004d40;
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
-  text-align: center;
-  line-height: 50px;
-  font-size: 24px;
-  z-index: 1000;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 1.5s, visibility 1.5s, box-shadow 0.3s ease;
-  box-shadow: 0 0 0 2px #FFF, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2);
-  /* Adjusted outer rings */
-  overflow: hidden;
-}
-
-.circle1 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#BacktoTop:hover {
-  background-color: #008c85;
-  /* Darker shade on hover */
-  transform: scale(1.1);
-  /* Slight zoom effect on hover */
-}
-
-#BacktoTop svg {
-  fill: #b4a933;
-  transition: fill 0.3s ease-in-out;
-}
-
-#BacktoTop:hover svg {
-  fill: #ffd700;
-}
-
-
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.toggle-button {
-  background-color: #26a69a;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.dark-mode header {
-  background-color: #1f1f1f;
-  /* Darker header */
-}
-
-.dark-mode .hero {
-  background: linear-gradient(rgba(0, 77, 64, 0.7), rgba(0, 77, 64, 0.8)), url('https://images.unsplash.com/photo-1628638428099-48fc6fdb98c2?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
-}
-
-.dark-mode .feature-card {
-  background-color: #00796b;
-  /* Card color in dark mode */
-}
-
-.dark-mode .feedback {
-  background-color: #1f1f1f;
-  /* Feedback section background */
-}
-
-.dark-mode .feedback button {
-  background-color: #1c1c1c;
-  /* Dark mode button color (matches dark header) */
-  color: #ffffff;
-  /* Light text color for contrast */
-}
-
-#newsletter-form input:focus {
-  outline: none;
-}
-
-.moon-icon {
-  font-size: 30px;
-  /* Adjust size of the moon icon */
-  margin-right: 8px;
-  /* Match the header color */
-  color: white;
-  /* Set the icon color to white for contrast */
-  border-radius: 50%;
-  /* Optional: add rounded corners */
-  padding: 5px;
-  /* Optional: add some padding */
-}
-
-body.dark-mode {
-  background-color: #1f1f1f;
-  /* Consistent dark background */
-  color: white;
-  /* Light text color */
-}
-
-#dark-mode-toggle {
-  background-color: #00796b;
-  /* Match the navbar color */
-  color: white;
-  /* White text for contrast */
-
-  border: none;
-
-
-@media (max-width: 767px) {
-  .slider-control {
-      width: 15px;
-      height: 25px;
-      font-size: 0.8em;
-  }
-
-  #prev-slide {
-      left: 2px;
-      width: 25px;
-      height: 30px; 
-  }
-
-  #next-slide {
-      right: 5px;
-      width: 25px;
-      height: 30px;
-  }
-
-  .eco-tip {
-      padding: 20px 40px;
-  }
-  .eco-tip h3 {
-      font-size: 1.2em;
-  }
-
-  .eco-tip p {
-      font-size: 0.9em;
-  }
-}
-/* Eco Blogs Section */
-.eco-blogs {
-  padding: 40px 20px;
-  background-color: #f9f9f9;
-}
-
-.blogs-section-title {
-  text-align: center;
-  color: #2c3e50;
-  font-size: 2.5em;
-  margin-bottom: 30px;
-  font-weight: bold;
-}
-
-.eco-blogs-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-}
-
-.eco-blogs-card {
-  background-color: white;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  transition: transform 0.3s ease;
-}
-
-.eco-blogs-card:hover {
-  transform: translateY(-10px);
-}
-
-.card-header {
-  height: 200px;
-  background-size: cover;
-  background-position: center;
-}
-
-.card-content {
-  padding: 20px;
-  text-align: center;
-}
-
-.card-content h4 {
-  font-size: 1.5em;
-  color: #27ae60;
-  margin-bottom: 15px;
-}
-
-.card-content p {
-  font-size: 1em;
-  color: #2c3e50;
-  margin-bottom: 20px;
-}
-
-.read-more {
-  text-decoration: none;
-  color: white;
-  background-color: #27ae60;
-  padding: 10px 20px;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
-}
-
-.read-more:hover {
-  background-color: #1e8449;
-}
-
-/* Responsive Design */
-
-/* Medium Screens (Tablets) */
-@media (max-width: 768px) {
-  .slider-control {
-      font-size: 1.2em;
-  }
-
-  .eco-tip {
-      min-width: 200px;
-      max-width: 200px;
-  }
-
-  .eco-blogs-container {
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  }
-
-  .card-header {
-      height: 150px;
-  }
-}
-
-/* Small Screens (Mobile) */
-@media (max-width: 480px) {
-  .eco-tips-slider {
-      flex-direction: column;
-      padding: 10px;
-  }
-
-  .eco-tips-content {
-      margin: 0;
-  }
-
-  .slider-control {
-      margin-bottom: 15px;
-      width: 100%;
-      text-align: center;
-  }
-
-  .eco-tip {
-      min-width: 100%;
-      max-width: 100%;
-      margin-bottom: 15px;
-  }
-
-  .blogs-section-title {
-      font-size: 2em;
-  }
-
-  .eco-blogs-container {
-      grid-template-columns: 1fr;
-  }
-
-  .card-content h4 {
-      font-size: 1.2em;
-  }
-
-  .card-content p {
-      font-size: 0.9em;
-  }
-
-  .read-more {
-      font-size: 0.9em;
-  }
-}
-
-.eco-tips-container {
-  background-color: #e9f7ef; /* Light green background */
-  padding: 30px;
-  margin: 40px 0;
-  border-radius: 10px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Box shadow */
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.eco-tips-header {
-  font-size: 2em;
-  color: #27ae60; /* Green color for header */
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.eco-tips {
-  list-style: none;
-  padding: 0;
-}
-
-.eco-tips li {
-  background-color: white;
-  padding: 15px;
-  margin-bottom: 10px;
-  border-left: 4px solid #27ae60; /* Green border on the left */
-  border-radius: 6px;
-  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;
-}
-
-/* CSS for transparent navbar buttons */
-.btn-nav {
-  display: flex;
-  gap: 10px;
-}
-
-.button {
-  background-color: transparent;
-  padding: 10px 20px;
-  border: none; /* No border */
-  font-family: 'Poppins', sans-serif; /* Modern font */
-  font-size: 16px;
-  font-weight: bold; /* Bold font */
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: all 0.3s ease; /* Smooth transition */
-}
-
-.button a {
-  text-decoration: none;
-  color: #fff; /* White text color by default */
-  font-weight: bold;
-  transition: color 0.3s ease; /* Smooth transition for color */
-}
-
-.button:hover {
-  transform: scale(1.1); /* Scale the button slightly on hover */
-}
-
-.button a:hover {
-  color: #adff2f; /* Light yellow-green text color on hover */
-}
-
-/* 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;
-}
-
-
-body.dark-mode #dark-mode-toggle {
-  background-color: #1c1c1c;
-  /* Dark mode button color */
-  color: white;
-  /* Keep text white */
-}
-
-.social-media a:hover {
-  scale: 1.01;
-  transition: all 0.3s ease-in-out;
-}
-
-.btn-nav{
-  display: flex;
-  gap: 20px;
-}
-.btn-nav a{
-  color: wheat;
-}
-/* From Uiverse.io by nikk7007 */ 
-.button {
-  --color: #00A97F;
-  padding: 0.8em 1.7em;
-  background-color: transparent;
-  border-radius: .3em;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  transition: .5s;
-  font-weight: 400;
-  font-size: 17px;
-  border: 1px solid;
-  font-family: inherit;
-  text-transform: uppercase;
-  color: var(--color);
-  z-index: 1;
- }
- 
- .button::before, .button::after {
-  content: '';
-  display: block;
-  width: 50px;
-  height: 50px;
-  transform: translate(-50%, -50%);
-  position: absolute;
-  border-radius: 50%;
-  z-index: -1;
-  background-color: var(--color);
-  transition: 1s ease;
- }
- 
- .button::before {
-  top: -1em;
-  left: -1em;
- }
- 
- .button::after {
-  left: calc(100% + 1em);
-  top: calc(100% + 1em);
- }
- 
- .button:hover::before, .button:hover::after {
-  height: 410px;
-  width: 410px;
- }
- 
- .button:hover {
-  color: rgb(10, 25, 30);
- }
- 
- .button:active {
-  filter: brightness(.8);
- }
- 
-.checkbox-con {
-  margin: 10px;
-  display: flex;
-  align-items: center;
-  color: white;
- }
- 
- .checkbox-con input[type="checkbox"] {
-  appearance: none;
-  width: 48px;
-  height: 27px;
-  border: 2px solid #ff0000;
-  border-radius: 20px;
-  background: #f1e1e1;
-  position: relative;
-  box-sizing: border-box;
- }
- 
- .checkbox-con input[type="checkbox"]::before {
-  content: "";
-  width: 14px;
-  height: 14px;
-  background: rgba(234, 7, 7, 0.5);
-  border: 2px solid #ea0707;
-  border-radius: 50%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate(13%, 15%);
-  transition: all 0.3s ease-in-out;
- }
- 
- .checkbox-con input[type="checkbox"]::after {
-  content: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55021 5.84315L17.1568 16.4498L16.4497 17.1569L5.84311 6.55026L6.55021 5.84315Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1567 6.55021L6.55012 17.1568L5.84302 16.4497L16.4496 5.84311L17.1567 6.55021Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3C/svg%3E");
-  position: absolute;
-  top: 0;
-  left: 20px;
- }
- 
- .checkbox-con input[type="checkbox"]:checked {
-  border: 2px solid #02c202;
-  background: #e2f1e1;
- }
- 
- .checkbox-con input[type="checkbox"]:checked::before {
-  background: rgba(2, 194, 2, 0.5);
-  border: 2px solid #02c202;
-  transform: translate(133%, 13%);
-  transition: all 0.3s ease-in-out;
- }
- 
- .checkbox-con input[type="checkbox"]:checked::after {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8185 0.114533C15.0314 0.290403 15.0614 0.605559 14.8855 0.818454L5.00187 12.5L0.113036 6.81663C-0.0618274 6.60291 -0.0303263 6.2879 0.183396 6.11304C0.397119 5.93817 0.71213 5.96967 0.886994 6.18339L5.00187 11L14.1145 0.181573C14.2904 -0.0313222 14.6056 -0.0613371 14.8185 0.114533Z' fill='%2302C202' fill-opacity='0.9'/%3E%3C/svg%3E");
-  position: absolute;
-  top: 5px;
-  left: 5px;
- }
- 
- .checkbox-con label {
-  margin-left: 10px;
-  cursor: pointer;
-  user-select: none;
- }
- 
-
-.btn-nav #checkbox:hover {
-  transform: scale(1.7);
-}
-
-
-.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;
+  padding: 5px 10px;
 }