diff --git a/Waste_Classification/Waste_Classification_data/Harzardous/pngtree-shattered-light-bulb-bright-power-broken-photo-picture-image_4909190_png.rf.d0110a95e348ee9996561ef220e29313.jpg b/Waste_Classification/Waste_Classification_data/Harzardous/pngtree-shattered-light-bulb-bright-power-broken-photo-picture-image_4909190_png.rf.d0110a95e348ee9996561ef220e29313.jpg deleted file mode 100644 index b9180d9..0000000 Binary files a/Waste_Classification/Waste_Classification_data/Harzardous/pngtree-shattered-light-bulb-bright-power-broken-photo-picture-image_4909190_png.rf.d0110a95e348ee9996561ef220e29313.jpg and /dev/null differ diff --git a/index.html b/index.html index 93d86a7..d71288f 100644 --- a/index.html +++ b/index.html @@ -1,183 +1,183 @@ - - - - - - Waste Management - - - - - - -
- - - - -
- -
-
-

Manage Your Waste Effectively

-

Join us in making a cleaner, greener planet.

- Explore Features -
-
- - -
-
-

Upload Image

- - -
- - -

-
-
-
-

Upload Your Files Here


- -
-
- -
-
-
- - -
-

Classification

-

-
- -
-

Disposal Information

-

-
- - -
-

Our Features

-
-

Real-time Monitoring

-

Track your waste management activities in real-time.

-
-
-

Eco-Friendly Tips

-
Do you know only 9% of plastic ever produced has been recycled?
-

- Be Eco-savvy by embracing simple, comprehensive, and quick solutions from the comfort of your home. - Contribute in managing the overwhelming burden of waste generation. Get personalized tips to manage waste sustainably and - be the change you want to see in the world!. -

- I'm in! - -
-
-

Community Engagement

-

Join community efforts to promote waste management.

-
-
-
-

Frequently Asked Questions (FAQs)

- -
-

What is the difference between biodegradable and non-biodegradable waste?

-

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.

-
- -
-

How can I reduce household waste?

-

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.

-
- -
-

What should I do with hazardous waste?

-

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.

-
- -
-

Can all plastics be recycled?

-

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.

-
- -
-

How do I start composting at home?

-

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.

-
- -
-

Why is it important to sort waste?

-

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.

-
-
- - - - - -
- -
-

Our Commitment to Sustainability

-

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.

-
- - - - - + + + + + + Waste Management + + + + + + +
+ + + + +
+ +
+
+

Manage Your Waste Effectively

+

Join us in making a cleaner, greener planet.

+ Explore Features +
+
+ + +
+
+

Upload Image

+ + +
+ + +

+
+
+
+

Upload Your Files Here


+ +
+
+ +
+
+
+ + +
+

Classification

+

+
+ +
+

Disposal Information

+

+
+ + +
+

Our Features

+
+

Real-time Monitoring

+

Track your waste management activities in real-time.

+
+
+

Eco-Friendly Tips

+
Do you know only 9% of plastic ever produced has been recycled?
+

+ Be Eco-savvy by embracing simple, comprehensive, and quick solutions from the comfort of your home. + Contribute in managing the overwhelming burden of waste generation. Get personalized tips to manage waste sustainably and + be the change you want to see in the world!. +

+ I'm in! + +
+
+

Community Engagement

+

Join community efforts to promote waste management.

+
+
+
+

Frequently Asked Questions (FAQs)

+ +
+

What is the difference between biodegradable and non-biodegradable waste?

+

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.

+
+ +
+

How can I reduce household waste?

+

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.

+
+ +
+

What should I do with hazardous waste?

+

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.

+
+ +
+

Can all plastics be recycled?

+

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.

+
+ +
+

How do I start composting at home?

+

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.

+
+ +
+

Why is it important to sort waste?

+

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.

+
+
+ + + + + +
+ +
+

Our Commitment to Sustainability

+

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.

+
+ +
+

Stay Connected

+
+ + + +
+ + +

© 2024 Waste Management. All rights reserved.

+
+ + + diff --git a/script.js b/script.js index 85068e7..e4a189f 100644 --- a/script.js +++ b/script.js @@ -1,99 +1,99 @@ -const imageInput = document.getElementById('image-input'); -const uploadButton = document.getElementById('upload-button'); -const classificationResult = document.getElementById('classification-result'); -const disposalInformation = document.getElementById('disposal-information'); - -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)); -}); - -// FAQ functionality -const faqItems = document.querySelectorAll('.faq-item h3'); - -faqItems.forEach(item => { - item.addEventListener('click', function() { - const parent = this.parentElement; - parent.classList.toggle('active'); - }); -}); - -// Optional: Check the initial mode on page load -if (localStorage.getItem('dark-mode') === 'enabled') { - enableDarkMode(); -} - -// Feedback form validation -const feedbackForm = document.getElementById('feedback-form'); -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'); -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 +const imageInput = document.getElementById('image-input'); +const uploadButton = document.getElementById('upload-button'); +const classificationResult = document.getElementById('classification-result'); +const disposalInformation = document.getElementById('disposal-information'); + +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)); +}); + +// FAQ functionality +const faqItems = document.querySelectorAll('.faq-item h3'); + +faqItems.forEach(item => { + item.addEventListener('click', function() { + const parent = this.parentElement; + parent.classList.toggle('active'); + }); +}); + +// Optional: Check the initial mode on page load +if (localStorage.getItem('dark-mode') === 'enabled') { + enableDarkMode(); +} + +// Feedback form validation +const feedbackForm = document.getElementById('feedback-form'); +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'); +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 diff --git a/styles.css b/styles.css index 4823e2b..d8f11b0 100644 --- a/styles.css +++ b/styles.css @@ -1,1199 +1,1203 @@ -/* Progress Bar Container */ -#progress-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 9px; - z-index: 99990; -} - -/* Progress Bar Styling */ -#progress-bar { - height: 53%; - width: 0; - background: linear-gradient( - 90deg, - rgb(38, 166, 154) 0%, - rgb(102, 187, 106) 50%, - rgb(76, 175, 80) 100% - ); /* Light theme with teal/green */ - 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; -} - -/* Dark Mode Progress Bar */ -.dark-mode #progress-bar { - background: linear-gradient( - 90deg, - rgb(0, 204, 204) 0%, - rgb(153, 255, 255) 50%, - rgb(0, 150, 150) 100% - ); /* Dark mode */ - box-shadow: 0 0 4px rgba(0, 204, 204, 0.7), 0 0 10px #009696b3; -} - -body { - font-family: "Poppins", sans-serif; - margin: 0; - padding: 0; - background-color: #e0f7fa; /* Light blue background */ -} - -header { - - background-color: #00796b; /* Teal color */ - color: white; - padding: 20px; - display: flex; - text-align: center; - justify-content: space-between; - position: fixed; - top: 0; - width: 100%; - z-index: 1000; - - background-color: #00796b; /* Teal color */ - color: white; - padding: 20px; - display: flex; - text-align: center; - justify-content: space-between; - position: sticky; - top: 0; - z-index: 999; - position: fixed; - top: 0; - width: 100%; - z-index: 1000; - -} - -nav { - margin: auto; - margin-right: 0; -} - -nav ul { - list-style-type: none; - padding: 0; -} - -nav ul li { - display: inline; - margin: 0 15px; -} - -nav ul li a { - color: white; - text-decoration: none; -} - -.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; - color: white; - padding: 80px 20px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 55vh; -} - -.hero h2 { - - font-size: 2.5rem; - margin-bottom: 20px; - -/* Ecoblog Page */ -.hero-contain { - text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); - - font-size: 2.5rem; - margin-bottom: 20px; - text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); - -} - -.hero p { - font-size: 1.2rem; - margin-bottom: 30px; - max-width: 600px; -} - -.hero-btn { - background-color: #26a69a; - color: white; - padding: 12px 24px; - text-decoration: none; - border-radius: 25px; - font-size: 1.1rem; - transition: background-color 0.3s ease; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); -} - -.hero-btn:hover { - background-color: #004d40; -} - -@media (max-width: 768px) { - - .hero h2 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - } - - .hero-btn { - padding: 10px 20px; - font-size: 1rem; - } -} - -@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 h2 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - } - - .hero-btn { - padding: 10px 20px; - font-size: 1rem; - } -} - -@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; - } - -} - -main { - padding: 20px; -} - -.upload, -.classification, -.disposal, -.feedback { - - margin-bottom: 30px; - - margin-bottom: 30px; - -} - -/* Styling for the 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; - display: flex; - flex-direction: column; - gap: 20px; - - 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; - display: flex; - flex-direction: column; - gap: 20px; - -} - -/* Container to hold the two rows */ -.upload-container { - display: flex; - flex-direction: column; - align-items: center; /* Center items horizontally */ - gap: 15px; -} - -/* Text section styling */ -.upload-text h2 { - font-size: 1.6em; - color: #333; - margin: 0; -} - -/* Custom file input styling */ -.custom-file-upload { - background-color: #44bf49; - color: white; - padding: 9px; /* Adjusted for better height control */ - height: 50px; /* Set specific height */ - width: 95%; /* Set width to 60% */ - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; - display: flex; /* Allows centering of text */ - align-items: center; /* Center vertically */ - justify-content: center; /* Center horizontally */ - margin-top: 10px; -} - -/* Hidden input field */ -.custom-file-upload input { - display: none; -} - -/* Hover effect for file upload button */ -.custom-file-upload:hover { - background-color: #3a873d; -} - -/* Submit button styling */ -.upload-submit #upload-button { - - background-color: #007bff; - color: white; - height: 40px; /* Set specific height */ - padding: 10px 20px; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; - width: 100%; - - background-color: #007bff; - color: white; - height: 40px; /* Set specific height */ - /*width: 95%; */ - padding: 10px 20px; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; - width: 100%; - -} - -/* Hover effect for submit button */ -.upload-submit #upload-button:hover { - background-color: #0056b3; -} - -.features { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-bottom: 5px; -} - -.features h2 { - text-align: center; - width: 100%; -} - -.feature-card { - background-color: #a5d6a7; /* Light green */ - padding: 20px; - margin: 10px; - border-radius: 8px; - transition: transform 0.2s; - display: inline-block; - width: calc(33% - 20px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.feature-card:hover { - transform: scale(1.05); - cursor: pointer; -} - -.faqs { - padding: 25px; - border-radius: 10px; - margin: 20px auto; - max-width: 900px; -} - -.faqs h2 { - text-align: center; - font-size: 2em; - margin-bottom: 20px; - color: black; -} - -.faq-item { - margin-bottom: 20px; -} - -.faq-item h3 { - - font-size: 1.4em; - color: #000000; - cursor: pointer; - margin: 0; - padding: 10px; - background-color: #a5d6a7; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - color: rgb(53, 53, 53); - border-radius: 5px; - - font-size: 1.4em; - color: #000000; - cursor: pointer; - margin: 0; - padding: 10px; - background-color: #a5d6a7; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - color: rgb(53, 53, 53); - border-radius: 5px; - -} - -.faq-item p { - font-size: 1em; - color: #555; - padding: 10px; - background-color: white; - border: 1px solid #a5d6a7; - border-radius: 5px; - display: none; /* Hide the answer initially */ -} - -.faq-item.active p { - - display: block; /* Show the answer when the question is clicked */ -} - -/* Eco-tips-features */ -/* Button */ -#eco-friendly { - padding: 2rem; - text-align: center; - border-radius: 8px; - margin: 2rem auto; - max-width: 800px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} - -#eco-friendly #eco-tips { - display: inline-block; - padding: 10px 20px; - font-size: 1.1rem; - background-color: #4caf50; - color: white; - text-decoration: none; - border-radius: 5px; - transition: background-color 0.3s ease; - - display: block; /* Show the answer when the question is clicked */ -} - -/*eco-tips-features*/ -/*button*/ -#eco-friendly { - padding: 2rem; - text-align: center; - border-radius: 8px; - margin: 2rem auto; - max-width: 800px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} -#eco-friendly #eco-tips { - display: inline-block; - padding: 10px 20px; - font-size: 1.1rem; - background-color: #4caf50; - color: white; - text-decoration: none; - border-radius: 5px; - transition: background-color 0.3s ease; -} - -#eco-friendly #eco-tips:hover { - background: none; - background-image: linear-gradient(to right, #006d77, #edf6f9); - animation: pulsate 1s ease-in-out; - -} - -#eco-friendly #eco-tips:hover { - background: none; - background-image: linear-gradient(to right, #006D77, #EDF6F9); - animation: pulsate 1s ease-in-out; -} - -.eco-friendly-content h3 { - font-size: 2rem; - color: #2e7d32; - margin-bottom: 1rem; -} - -blockquote { - font-size: 1.25rem; - font-style: italic; - color: #333; - background-color: #c8e6c9; - padding: 1rem; - border-left: 4px solid #43a047; - margin-bottom: 1.5rem; - border-radius: 5px; -} - -#fact-highlight { - font-weight: bold; - color: #e53935; -} - -.highlight { - font-weight: bold; - color: #2e7d32; -} - -.eco-friendly-content p { - font-size: 1.1rem; - color: #555; - line-height: 1.6; - margin-bottom: 2rem; -} - - -.main { - display: flex; - align-items: center; - justify-content: space-between; - padding: 40px; - background-color: #EDF6F9; - border-radius: 10px; - max-width: 1200px; - margin: 20px auto; -} - -.hero-text { - flex: 1; - margin-right: 20px; -} - -.hero-text h3 { - font-size: 2.5rem; - font-weight: 700; - color: #006D77; - margin-bottom: 10px; - text-transform: uppercase; -} - -.hero-text p { - font-size: 1.2rem; - line-height: 1.6; -} - -.hero-image { - flex: 1; - text-align: right; -} - -.hero-image img { - max-width: 100%; - height: auto; - border-radius: 10px; -} - -#eco-tips-container { - 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; -} - -.eco-tips-header { - background-color: #EDF6F9; - padding: 2rem; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - text-align: center; - margin: 2rem auto; - max-width: 800px; - font-family: 'Arial', sans-serif; -} - -.eco-tips-header h3 { - color: #006D77; - font-size: 2.2rem; - margin-bottom: 1rem; - font-weight: 700; -} - -.eco-tips-header p { - font-size: 1.1rem; - color: #333; - line-height: 1.5; -} - -/*Ecoblog Page*/ -.hero-container { - display: flex; - align-items: center; - justify-content: space-between; - padding: 40px; - background-color: #edf6f9; - border-radius: 10px; - max-width: 1200px; - margin: 20px auto; -} - -.hero-text { - flex: 1; - margin-right: 20px; -} - -.hero-text h3 { - font-size: 2.5rem; - font-weight: 700; - color: #006d77; - margin-bottom: 10px; - text-transform: uppercase; -} - -.hero-text p { - font-size: 1.2rem; - line-height: 1.6; -} - -.hero-image { - flex: 1; - text-align: right; -} - -.hero-image img { - max-width: 100%; - height: auto; - border-radius: 10px; -} - -#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; -} - -.eco-tips-header { - background-color: #edf6f9; - padding: 2rem; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - text-align: center; - margin: 2rem auto; - max-width: 800px; - font-family: "Arial", sans-serif; -} - -.eco-tips-header h3 { - color: #006d77; - font-size: 2.2rem; - margin-bottom: 1rem; - font-weight: 700; -} - -.eco-tips-header p { - color: #333; - font-size: 1.2rem; - margin-bottom: 1rem; - line-height: 1.6; -} - -.eco-tips-header p span { - color: #83c5be; - font-weight: bold; -} - -.eco-tips-header em { - color: #e29578; - font-size: 1.1rem; - font-style: normal; - display: block; - margin-top: 1.5rem; - background-color: #006d77; - padding: 0.5rem 1rem; - border-radius: 5px; - font-weight: 600; -} - -#eco-tips-container { - padding: 2rem; - background-color: #edf6f9; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - max-width: 1200px; - margin: 3.4rem auto; - position: relative; -} - -.slider-control { - background: none; - border: none; - font-size: 2rem; - color: #006d77; - cursor: pointer; - transition: color 0.3s ease; - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 1; -} - -#prev-slide { - left: 10px; -} - -#next-slide { - right: 10px; -} - -/* Eco Tips Slider Content */ -.eco-tips-slider { - display: flex; - align-items: center; - position: relative; - overflow: hidden; -} - -.eco-tips-content { - display: flex; - transition: transform 0.5s ease-in-out; - width: 100%; -} - -.eco-tip { - min-width: 100%; - padding: 2rem; - box-sizing: border-box; - /* background-color: #FFDDD2; */ - border-radius: 10px; - text-align: center; - /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */ -} - -.eco-tip h3 { - color: #006d77; - font-size: 1.8rem; - margin-bottom: 1rem; -} - -.eco-tip p { - color: #333; - font-size: 1.1rem; - margin-bottom: 1.5rem; -} - -feature/your-new-feature .eco-tip img, -.eco-tip video { - max-width: 90%; - border-radius: 8px; - margin-top: 1rem; -} - -.fa-chevron-left, -.fa-chevron-right { - font-size: 2rem; - color: #e29578; - cursor: pointer; - transition: color 0.3s ease; -} - -.fa-chevron-left:hover, -.fa-chevron-right:hover { - color: #006d77; -} - -/*Eco-blog-cards*/ -.eco-blogs { - margin: 5rem 2.4rem 2.4rem 5rem; - padding: 2.4rem; -} -.blogs-section-title { - text-align: center; - font-size: 2.5rem; - - color: #006d77; - font-weight: 600; -} - -.eco-blogs-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; - padding-top: 4.4rem; - margin: 3.1rem; - max-width: 1200px; - margin: 20px auto; - border-top: 4px solid #006d77; - border-top-left-radius: 24px; - border-top-right-radius: 24px; -} - -.eco-blogs-card { - border-radius: 10px; - border: 2px solid #83c5be; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.eco-blogs-card:hover { - transform: translateY(-10px); - box-shadow: 0 24px 15px #006d77; - cursor: pointer; - background-color: #006d77; -} -.card-header { - height: 200px; - background-size: cover; - background-position: center; -} -.card-content { - padding: 20px; - text-align: left; -} - -.card-content h4 { - font-size: 1.5rem; - margin-bottom: 15px; - color: #333; -} - -.card-content p { - font-size: 1rem; - line-height: 1.5; - color: #666; - color: #83c5be; - margin-bottom: 20px; -} - -.read-more { - text-decoration: none; - color: #28a745; - font-weight: bold; - border-bottom: 2px solid transparent; - transition: border-bottom 0.3s ease; -} - -.read-more:hover { - border-bottom: 2px solid #28a745; -} - -/* Responsive media query */ -@media (max-width: 768px) { - .hero-container { - flex-direction: column; - text-align: center; - } - - .hero-text { - margin: 0; - } - - .hero-image { - margin-top: 20px; - } - .eco-friendly-tips { - padding: 1.5rem; - } - - .eco-friendly-content h3 { - font-size: 1.75rem; - } - - blockquote { - font-size: 1.1rem; - } - - .eco-friendly-content p { - font-size: 1rem; - } - - .cta-button { - padding: 8px 16px; - font-size: 1rem; - } - - .eco-tips-header { - padding: 1.5rem; - } - - .eco-tips-header h3 { - font-size: 1.8rem; - } - - .eco-tips-header p { - font-size: 1rem; - } - - .eco-tips-header em { - font-size: 1rem; - } - .eco-tip h3 { - font-size: 1.5rem; - } - .eco-tip p { - font-size: 1rem; - } - - .slider-control { - font-size: 1.8rem; - } - - .card-header { - height: 150px; - } - - .card-content h4 { - font-size: 1.3rem; - } - - .card-content p { - font-size: 0.9rem; - } - .eco-tip h3 { - font-size: 1.5rem; - } - - .eco-tip p { - font-size: 0.9rem; - } - - .fa-chevron-left, - .fa-chevron-right { - font-size: 1.5rem; - } -} - -@media (max-width: 480px) { - .eco-tips-header { - padding: 1rem; - } - .eco-tip h3 { - font-size: 1.3rem; - } - .eco-tip p { - font-size: 0.9rem; - } - - .slider-control { - font-size: 1.5rem; - } - - .eco-tips-header h3 { - font-size: 1.5rem; - } - - .eco-tips-header p { - font-size: 0.9rem; - } - - .eco-tips-header em { - font-size: 0.9rem; - } - .card-header { - height: 120px; - } - - .card-content h4 { - font-size: 1.1rem; - } - - .card-content p { - font-size: 0.85rem; - } -} - -/*End of ECO-FRIENDLY TIPS Styling*/ - -main .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; - color: white; - 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 */ -} - -#footer { - background-color: #00796b; - color: white; - text-align: center; - padding: 20px; - border-radius: 0.2rem; -} - -#newsletter-form input { - margin: 10px 0; - padding: 10px; - border: 1px solid #fff; - border-radius: 5px; -} - -.social-media { - display: flex; - flex-direction: row; - justify-content: center; /* Align items in the center horizontally */ - margin: 10px 0; -} - -.social-media a { - display: grid; - place-items: center; - position: relative; /* Positioning context for the pseudo-element */ - margin: 0 10px; /* Spacing between icons */ - fill: #fff; - margin: 0 10px; - text-decoration: none; - padding: 10px 0px; -} - -.social-media a box-icon { - height: 2rem; - width: 2rem; - position: relative; /* Allows stacking above the pseudo-element */ - z-index: 1; /* Bring the icon above the background */ - transition: color 0.3s ease-in-out; -} - -.social-media a::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 40px; - height: 40px; - background-color: transparent; - border-radius: 50%; - transform: translate(-50%, -50%); - transition: background-color 0.3s ease-in-out; - z-index: 0; -} - -.social-media a:hover::after { - background-color: #004d40; -} -.social-media a:hover { - scale: 1.01; - transition: all 0.3s ease-in-out; -} - - -.signup { - background-color: #f9f9f9; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - margin: 20px 0; -} - -.signup h2 { - color: #007b5f; - text-align: center; -} - -.signup form { - display: flex; - flex-direction: column; -} - -.signup input { - padding: 10px; - margin: 10px 0; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 16px; -} - -.signup input:focus { - border-color: #007b5f; - outline: none; -} - -.signup button { - background-color: #007b5f; - color: white; - padding: 10px; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 16px; -} - -.signup button:hover { - background-color: #005f46; - transition: background-color 0.3s ease; -} - -#newsletter-form { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; -} -#newsletter-form input{ - border: 1.2px solid #e0f7fa; - border-radius: 5px; -} - -#newsletter-form input:focus { - outline: none; -} - -#newsletter-form button:hover { - background-color: #004d40; /* Darker teal on hover */ - transform: scale(1.05); /* Slight zoom effect on hover */ - cursor: pointer; -} - -#newsletter-form button { - border: 1px solid #005f46; /* Adjust border color */ - border-radius: 0.3rem; - overflow: hidden; - position: relative; - background-color: #26a69a; - color: white; - font-size: 16px; - letter-spacing: 1px; - transition: all 170ms linear; - height: 2.3rem; - padding: 10px; -} - -#newsletter-form button span { - z-index: 20; -} - -#newsletter-form button:after { - background: #fff; - content: ""; - height: 155px; - left: -75px; - opacity: 0.2; - position: absolute; - top: -50px; - transform: rotate(35deg); - transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); - width: 50px; - z-index: -10; -} - -#newsletter-form button:hover:after { - left: 120%; - transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1); -} - -.logo { - position: absolute; - left: 83px; - font-size: 35px; - color: #ffffff; - font-weight: bold; - img { - position: absolute; - top: -15px; - left: -77px; - width: 80px; - height: 80px; - } -} - +/* Progress Bar Container */ +#progress-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 9px; + z-index: 99990; +} + +/* Progress Bar Styling */ +#progress-bar { + height: 53%; + width: 0; + background: linear-gradient( + 90deg, + rgb(38, 166, 154) 0%, + rgb(102, 187, 106) 50%, + rgb(76, 175, 80) 100% + ); /* Light theme with teal/green */ + 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; +} + +/* Dark Mode Progress Bar */ +.dark-mode #progress-bar { + background: linear-gradient( + 90deg, + rgb(0, 204, 204) 0%, + rgb(153, 255, 255) 50%, + rgb(0, 150, 150) 100% + ); /* Dark mode */ + box-shadow: 0 0 4px rgba(0, 204, 204, 0.7), 0 0 10px #009696b3; +} + +body { + background-color: #f5f5dc; /* Soft beige background */ + color: #003366; /* Dark blue text */ + font-family: 'Arial', sans-serif; + font-size: 18px; + line-height: 1.6; /* Comfortable line height for readability */ +} + +/* Basic reset for padding and margins */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Styling the nav and its contents */ +nav { + background-color: #333; /* Dark background for the nav */ + padding: 10px 0; + text-align: center; /* Centers the navigation items */ +} + +nav ul { + list-style-type: none; /* Removes bullets from the list */ + margin: 0; + padding: 0; +} + +nav ul li { + display: inline-block; /* Makes the list horizontal */ + margin-right: 20px; /* Adds space between items */ +} + +nav ul li:last-child { + margin-right: 0; /* Removes margin on the last item */ +} + +nav ul li a { + color: white; /* White text */ + text-decoration: none; /* Removes the underline */ + font-size: 16px; /* Sets font size */ + font-family: Arial, sans-serif; /* Sets a clean font */ + padding: 10px 20px; /* Adds padding inside links */ + transition: background-color 0.3s ease; /* Smooth hover effect */ +} + +nav ul li a:hover { + background-color: #575757; /* Darker background on hover */ + border-radius: 5px; /* Rounded corners on hover */ +} + +/* Media query for smaller screens */ +@media (max-width: 768px) { + nav ul li { + display: block; /* Makes the list vertical on small screens */ + margin: 10px 0; + } +} + + +.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; + color: white; + padding: 80px 20px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 55vh; +} + +.hero h2 { + + font-size: 2.5rem; + margin-bottom: 20px; + +/* Ecoblog Page */ +.hero-contain { + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); + + font-size: 2.5rem; + margin-bottom: 20px; + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); + +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 30px; + max-width: 600px; +} + +.hero-btn { + background-color: #26a69a; + color: white; + padding: 12px 24px; + text-decoration: none; + border-radius: 25px; + font-size: 1.1rem; + transition: background-color 0.3s ease; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +.hero-btn:hover { + background-color: #004d40; +} + +@media (max-width: 768px) { + + .hero h2 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .hero-btn { + padding: 10px 20px; + font-size: 1rem; + } +} + +@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 h2 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .hero-btn { + padding: 10px 20px; + font-size: 1rem; + } +} + +@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; + } + +} + +main { + padding: 20px; +} + +.upload, +.classification, +.disposal, +.feedback { + + margin-bottom: 30px; + + margin-bottom: 30px; + +} + +/* Styling for the 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; + display: flex; + flex-direction: column; + gap: 20px; + + 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; + display: flex; + flex-direction: column; + gap: 20px; + +} + +/* Container to hold the two rows */ +.upload-container { + display: flex; + flex-direction: column; + align-items: center; /* Center items horizontally */ + gap: 15px; +} + +/* Text section styling */ +.upload-text h2 { + font-size: 1.6em; + color: #333; + margin: 0; +} + +/* Custom file input styling */ +.custom-file-upload { + background-color: #44bf49; + color: white; + padding: 9px; /* Adjusted for better height control */ + height: 50px; /* Set specific height */ + width: 95%; /* Set width to 60% */ + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + display: flex; /* Allows centering of text */ + align-items: center; /* Center vertically */ + justify-content: center; /* Center horizontally */ + margin-top: 10px; +} + +/* Hidden input field */ +.custom-file-upload input { + display: none; +} + +/* Hover effect for file upload button */ +.custom-file-upload:hover { + background-color: #3a873d; +} + +/* Submit button styling */ +.upload-submit #upload-button { + + background-color: #007bff; + color: white; + height: 40px; /* Set specific height */ + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + width: 100%; + + background-color: #007bff; + color: white; + height: 40px; /* Set specific height */ + /*width: 95%; */ + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + width: 100%; + +} + +/* Hover effect for submit button */ +.upload-submit #upload-button:hover { + background-color: #0056b3; +} + +.features { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 5px; +} + +.features h2 { + text-align: center; + width: 100%; +} + +.feature-card { + background-color: #a5d6a7; /* Light green */ + padding: 20px; + margin: 10px; + border-radius: 8px; + transition: transform 0.2s; + display: inline-block; + width: calc(33% - 20px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.feature-card:hover { + transform: scale(1.05); + cursor: pointer; +} + +.faqs { + padding: 25px; + border-radius: 10px; + margin: 20px auto; + max-width: 900px; +} + +.faqs h2 { + text-align: center; + font-size: 2em; + margin-bottom: 20px; + color: black; +} + +.faq-item { + margin-bottom: 20px; +} + +.faq-item h3 { + + font-size: 1.4em; + color: #000000; + cursor: pointer; + margin: 0; + padding: 10px; + background-color: #a5d6a7; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + color: rgb(53, 53, 53); + border-radius: 5px; + + font-size: 1.4em; + color: #000000; + cursor: pointer; + margin: 0; + padding: 10px; + background-color: #a5d6a7; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + color: rgb(53, 53, 53); + border-radius: 5px; + +} + +.faq-item p { + font-size: 1em; + color: #555; + padding: 10px; + background-color: white; + border: 1px solid #a5d6a7; + border-radius: 5px; + display: none; /* Hide the answer initially */ +} + +.faq-item.active p { + + display: block; /* Show the answer when the question is clicked */ +} + +/* Eco-tips-features */ +/* Button */ +#eco-friendly { + padding: 2rem; + text-align: center; + border-radius: 8px; + margin: 2rem auto; + max-width: 800px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +#eco-friendly #eco-tips { + display: inline-block; + padding: 10px 20px; + font-size: 1.1rem; + background-color: #4caf50; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; + + display: block; /* Show the answer when the question is clicked */ +} + +/*eco-tips-features*/ +/*button*/ +#eco-friendly { + padding: 2rem; + text-align: center; + border-radius: 8px; + margin: 2rem auto; + max-width: 800px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} +#eco-friendly #eco-tips { + display: inline-block; + padding: 10px 20px; + font-size: 1.1rem; + background-color: #4caf50; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +#eco-friendly #eco-tips:hover { + background: none; + background-image: linear-gradient(to right, #006d77, #edf6f9); + animation: pulsate 1s ease-in-out; + +} + +#eco-friendly #eco-tips:hover { + background: none; + background-image: linear-gradient(to right, #006D77, #EDF6F9); + animation: pulsate 1s ease-in-out; +} + +.eco-friendly-content h3 { + font-size: 2rem; + color: #2e7d32; + margin-bottom: 1rem; +} + +blockquote { + font-size: 1.25rem; + font-style: italic; + color: #333; + background-color: #c8e6c9; + padding: 1rem; + border-left: 4px solid #43a047; + margin-bottom: 1.5rem; + border-radius: 5px; +} + +#fact-highlight { + font-weight: bold; + color: #e53935; +} + +.highlight { + font-weight: bold; + color: #2e7d32; +} + +.eco-friendly-content p { + font-size: 1.1rem; + color: #555; + line-height: 1.6; + margin-bottom: 2rem; +} + + +.main { + display: flex; + align-items: center; + justify-content: space-between; + padding: 40px; + background-color: #EDF6F9; + border-radius: 10px; + max-width: 1200px; + margin: 20px auto; +} + +.hero-text { + flex: 1; + margin-right: 20px; +} + +.hero-text h3 { + font-size: 2.5rem; + font-weight: 700; + color: #006D77; + margin-bottom: 10px; + text-transform: uppercase; +} + +.hero-text p { + font-size: 1.2rem; + line-height: 1.6; +} + +.hero-image { + flex: 1; + text-align: right; +} + +.hero-image img { + max-width: 100%; + height: auto; + border-radius: 10px; +} + +#eco-tips-container { + 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; +} + +.eco-tips-header { + background-color: #EDF6F9; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + text-align: center; + margin: 2rem auto; + max-width: 800px; + font-family: 'Arial', sans-serif; +} + +.eco-tips-header h3 { + color: #006D77; + font-size: 2.2rem; + margin-bottom: 1rem; + font-weight: 700; +} + +.eco-tips-header p { + font-size: 1.1rem; + color: #333; + line-height: 1.5; +} + +/*Ecoblog Page*/ +.hero-container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 40px; + background-color: #edf6f9; + border-radius: 10px; + max-width: 1200px; + margin: 20px auto; +} + +.hero-text { + flex: 1; + margin-right: 20px; +} + +.hero-text h3 { + font-size: 2.5rem; + font-weight: 700; + color: #006d77; + margin-bottom: 10px; + text-transform: uppercase; +} + +.hero-text p { + font-size: 1.2rem; + line-height: 1.6; +} + +.hero-image { + flex: 1; + text-align: right; +} + +.hero-image img { + max-width: 100%; + height: auto; + border-radius: 10px; +} + +#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; +} + +.eco-tips-header { + background-color: #edf6f9; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + text-align: center; + margin: 2rem auto; + max-width: 800px; + font-family: "Arial", sans-serif; +} + +.eco-tips-header h3 { + color: #006d77; + font-size: 2.2rem; + margin-bottom: 1rem; + font-weight: 700; +} + +.eco-tips-header p { + color: #333; + font-size: 1.2rem; + margin-bottom: 1rem; + line-height: 1.6; +} + +.eco-tips-header p span { + color: #83c5be; + font-weight: bold; +} + +.eco-tips-header em { + color: #e29578; + font-size: 1.1rem; + font-style: normal; + display: block; + margin-top: 1.5rem; + background-color: #006d77; + padding: 0.5rem 1rem; + border-radius: 5px; + font-weight: 600; +} + +#eco-tips-container { + padding: 2rem; + background-color: #edf6f9; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + max-width: 1200px; + margin: 3.4rem auto; + position: relative; +} + +.slider-control { + background: none; + border: none; + font-size: 2rem; + color: #006d77; + cursor: pointer; + transition: color 0.3s ease; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 1; +} + +#prev-slide { + left: 10px; +} + +#next-slide { + right: 10px; +} + +/* Eco Tips Slider Content */ +.eco-tips-slider { + display: flex; + align-items: center; + position: relative; + overflow: hidden; +} + +.eco-tips-content { + display: flex; + transition: transform 0.5s ease-in-out; + width: 100%; +} + +.eco-tip { + min-width: 100%; + padding: 2rem; + box-sizing: border-box; + /* background-color: #FFDDD2; */ + border-radius: 10px; + text-align: center; + /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */ +} + +.eco-tip h3 { + color: #006d77; + font-size: 1.8rem; + margin-bottom: 1rem; +} + +.eco-tip p { + color: #333; + font-size: 1.1rem; + margin-bottom: 1.5rem; +} + +feature/your-new-feature .eco-tip img, +.eco-tip video { + max-width: 90%; + border-radius: 8px; + margin-top: 1rem; +} + +.fa-chevron-left, +.fa-chevron-right { + font-size: 2rem; + color: #e29578; + cursor: pointer; + transition: color 0.3s ease; +} + +.fa-chevron-left:hover, +.fa-chevron-right:hover { + color: #006d77; +} + +/*Eco-blog-cards*/ +.eco-blogs { + margin: 5rem 2.4rem 2.4rem 5rem; + padding: 2.4rem; +} +.blogs-section-title { + text-align: center; + font-size: 2.5rem; + + color: #006d77; + font-weight: 600; +} + +.eco-blogs-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + padding-top: 4.4rem; + margin: 3.1rem; + max-width: 1200px; + margin: 20px auto; + border-top: 4px solid #006d77; + border-top-left-radius: 24px; + border-top-right-radius: 24px; +} + +.eco-blogs-card { + border-radius: 10px; + border: 2px solid #83c5be; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.eco-blogs-card:hover { + transform: translateY(-10px); + box-shadow: 0 24px 15px #006d77; + cursor: pointer; + background-color: #006d77; +} +.card-header { + height: 200px; + background-size: cover; + background-position: center; +} +.card-content { + padding: 20px; + text-align: left; +} + +.card-content h4 { + font-size: 1.5rem; + margin-bottom: 15px; + color: #333; +} + +.card-content p { + font-size: 1rem; + line-height: 1.5; + color: #666; + color: #83c5be; + margin-bottom: 20px; +} + +.read-more { + text-decoration: none; + color: #28a745; + font-weight: bold; + border-bottom: 2px solid transparent; + transition: border-bottom 0.3s ease; +} + +.read-more:hover { + border-bottom: 2px solid #28a745; +} + +/* Responsive media query */ +@media (max-width: 768px) { + .hero-container { + flex-direction: column; + text-align: center; + } + + .hero-text { + margin: 0; + } + + .hero-image { + margin-top: 20px; + } + .eco-friendly-tips { + padding: 1.5rem; + } + + .eco-friendly-content h3 { + font-size: 1.75rem; + } + + blockquote { + font-size: 1.1rem; + } + + .eco-friendly-content p { + font-size: 1rem; + } + + .cta-button { + padding: 8px 16px; + font-size: 1rem; + } + + .eco-tips-header { + padding: 1.5rem; + } + + .eco-tips-header h3 { + font-size: 1.8rem; + } + + .eco-tips-header p { + font-size: 1rem; + } + + .eco-tips-header em { + font-size: 1rem; + } + .eco-tip h3 { + font-size: 1.5rem; + } + .eco-tip p { + font-size: 1rem; + } + + .slider-control { + font-size: 1.8rem; + } + + .card-header { + height: 150px; + } + + .card-content h4 { + font-size: 1.3rem; + } + + .card-content p { + font-size: 0.9rem; + } + .eco-tip h3 { + font-size: 1.5rem; + } + + .eco-tip p { + font-size: 0.9rem; + } + + .fa-chevron-left, + .fa-chevron-right { + font-size: 1.5rem; + } +} + +@media (max-width: 480px) { + .eco-tips-header { + padding: 1rem; + } + .eco-tip h3 { + font-size: 1.3rem; + } + .eco-tip p { + font-size: 0.9rem; + } + + .slider-control { + font-size: 1.5rem; + } + + .eco-tips-header h3 { + font-size: 1.5rem; + } + + .eco-tips-header p { + font-size: 0.9rem; + } + + .eco-tips-header em { + font-size: 0.9rem; + } + .card-header { + height: 120px; + } + + .card-content h4 { + font-size: 1.1rem; + } + + .card-content p { + font-size: 0.85rem; + } +} + +/*End of ECO-FRIENDLY TIPS Styling*/ + +main .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; + color: white; + 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 */ +} + +#footer { + background-color: #00796b; + color: white; + text-align: center; + padding: 20px; + border-radius: 0.2rem; +} + +#newsletter-form input { + margin: 10px 0; + padding: 10px; + border: 1px solid #fff; + border-radius: 5px; +} + +.social-media { + display: flex; + flex-direction: row; + justify-content: center; /* Align items in the center horizontally */ + margin: 10px 0; +} + +.social-media a { + display: grid; + place-items: center; + position: relative; /* Positioning context for the pseudo-element */ + margin: 0 10px; /* Spacing between icons */ + fill: #fff; + margin: 0 10px; + text-decoration: none; + padding: 10px 0px; +} + +.social-media a box-icon { + height: 2rem; + width: 2rem; + position: relative; /* Allows stacking above the pseudo-element */ + z-index: 1; /* Bring the icon above the background */ + transition: color 0.3s ease-in-out; +} + +.social-media a::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 40px; + height: 40px; + background-color: transparent; + border-radius: 50%; + transform: translate(-50%, -50%); + transition: background-color 0.3s ease-in-out; + z-index: 0; +} + +.social-media a:hover::after { + background-color: #004d40; +} +.social-media a:hover { + scale: 1.01; + transition: all 0.3s ease-in-out; +} + + +.signup { + background-color: #f9f9f9; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + margin: 20px 0; +} + +.signup h2 { + color: #007b5f; + text-align: center; +} + +.signup form { + display: flex; + flex-direction: column; +} + +.signup input { + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; +} + +.signup input:focus { + border-color: #007b5f; + outline: none; +} + +.signup button { + background-color: #007b5f; + color: white; + padding: 10px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; +} + +.signup button:hover { + background-color: #005f46; + transition: background-color 0.3s ease; +} + +#newsletter-form { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; +} +#newsletter-form input{ + border: 1.2px solid #e0f7fa; + border-radius: 5px; +} + +#newsletter-form input:focus { + outline: none; +} + +#newsletter-form button:hover { + background-color: #004d40; /* Darker teal on hover */ + transform: scale(1.05); /* Slight zoom effect on hover */ + cursor: pointer; +} + +#newsletter-form button { + border: 1px solid #005f46; /* Adjust border color */ + border-radius: 0.3rem; + overflow: hidden; + position: relative; + background-color: #26a69a; + color: white; + font-size: 16px; + letter-spacing: 1px; + transition: all 170ms linear; + height: 2.3rem; + padding: 10px; +} + +#newsletter-form button span { + z-index: 20; +} + +#newsletter-form button:after { + background: #fff; + content: ""; + height: 155px; + left: -75px; + opacity: 0.2; + position: absolute; + top: -50px; + transform: rotate(35deg); + transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); + width: 50px; + z-index: -10; +} + +#newsletter-form button:hover:after { + left: 120%; + transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1); +} + +.logo { + position: absolute; + left: 83px; + font-size: 35px; + color: #ffffff; + font-weight: bold; + img { + position: absolute; + top: -15px; + left: -77px; + width: 80px; + height: 80px; + } +} +