Issue: Content Overflow in Responsive Layout #233 (#244)

<!-- Thank you for sending a pull request ❤️ -->

Issue: Content Overflow in Responsive Layout 

Closes: #233

This pull request addresses the content overflow issues within the
responsive layout of the waste management section. It ensures that all
elements are displayed correctly across various screen sizes without any
misalignment or overflow, enhancing the user experience and maintaining
design integrity.

-Fixed Card Overflow: Adjusted CSS properties to ensure that the waste
classification cards do not overflow their container on smaller screens.

-Responsive Design: Implemented media queries to ensure the layout
adjusts fluidly between different device sizes, improving accessibility
on mobile devices.

-Consistent Spacing: Enhanced padding and margin settings to provide a
consistent look and feel across different components, ensuring visual
harmony and readability.

-Improved Flexbox Utilization: Updated the card container to leverage
flexbox properties for better alignment and wrapping behavior, making
the layout more robust against varying content lengths.



_Please check the boxes that apply_

- [x] Bugfix (non-breaking change that fixes an issue)
- [] New feature (non-breaking change that adds functionality)
- [] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [] Documentation update (Documentation content changed)
- [ ] Other (please describe):

## Checklist

_Please check the boxes that apply_

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] My changes do not break the current system and pass all existing
test cases
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules



https://github.com/user-attachments/assets/0475b9d1-5db9-4961-9fa8-6019327df437

Please assign this issue to me as I would like to work on fixing it.
also add the label GSSoC 2024 Extd relaevant and lvl.

<!-- We're looking forward to merging your contribution!! -->

styles.css

@@ -343,68 +343,98 @@ main {
   justify-content: center;
   margin-bottom: 5px;
 }
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+  margin: 0;
+  padding: 20px;
+}
+
+.classification-info {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  /* background-color: #58e178; */
+  border-radius: 10px;
+  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
+}
 
 .classification-info h2 {
   text-align: center;
+  margin-bottom: 20px;
+  color: #333;
 }
 
 .card-container {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-around;
-  margin: 20px 0;
+  gap: 20px; 
 }
 
 .card {
-  width: 45%;
+  position: relative;
+  width: 400px; 
   height: 300px;
-  perspective: 1000px;
-  margin: 10px;
+  perspective: 1000px; 
 }
 
 .card-inner {
   position: relative;
   width: 100%;
   height: 100%;
+  transform-style: preserve-3d; 
   transition: transform 0.6s;
-  transform-style: preserve-3d;
+}
+
+.card:hover .card-inner {
+  transform: rotateY(180deg); 
 }
 
 .card-front,
 .card-back {
   position: absolute;
   width: 100%;
   height: 100%;
-  backface-visibility: hidden;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  backface-visibility: hidden; 
+  display: flex;
   align-items: center;
-  font-size: 1.2em;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  padding: 10px;
-  box-sizing: border-box;
+  justify-content: center;
+  border: 2px solid #ddd; 
+  border-radius: 10px;
+  background-color: #99e4ab; 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
 }
 
 .card-front {
-  background-color: #a5d6a7;
-  color: black;
+  color: #333;
+  font-size: 30px;
+}
+@media (max-width:500px) {
+  .card-front {
+    color: #333;
+    font-size: 20px;
+  }
+
 }
 
 .card-back {
-  background-color: #f9f9f9;
-  color: #333;
-  transform: rotateY(180deg);
-  padding: 10px;
-  text-align: center;
-  justify-content: space-evenly;
-  flex-direction: column;
+  transform: rotateY(180deg); 
+  padding: 10px; 
+  color: #444;
 }
 
-.card:hover .card-inner {
-  transform: rotateY(180deg);
+.card-back h3 {
+  margin: 10px 0;
 }
 
+.card-back p {
+  text-align: justify; 
+}
+
+
 .features h2 {
   text-align: center;
   width: 100%;