BlueTrans

Running

App Files Files Community

Nish304 commited on Oct 24, 2025

Commit

8c78f48

verified ·

1 Parent(s): dd75d28

make enviromental websiete my company name is IEED

Browse files

Files changed (8) hide show

README.md +9 -5
about.html +93 -0
components/footer.js +132 -0
components/navbar.js +95 -0
index.html +76 -19
script.js +39 -0
solutions.html +140 -0
style.css +36 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Ecosphere Guardians
-emoji: 😻
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: EcoSphere Guardians 🌍
+colorFrom: green
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

about.html ADDED Viewed

	@@ -0,0 +1,93 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - IEED EcoSphere Guardians</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-teal-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-16">
+        <div class="max-w-5xl mx-auto">
+            <div class="text-center mb-16">
+                <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-teal-500">
+                    About IEED
+                </h1>
+                <p class="text-xl text-gray-700 max-w-3xl mx-auto">
+                    Leading the charge in environmental innovation and sustainable development.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-12 items-center mb-16">
+                <div>
+                    <img src="http://static.photos/nature/640x360/42" alt="Our Mission" class="rounded-2xl shadow-xl w-full">
+                </div>
+                <div>
+                    <h2 class="text-3xl font-bold text-green-700 mb-6">Our Mission</h2>
+                    <p class="text-gray-700 mb-4">
+                        At IEED, we're dedicated to developing innovative environmental solutions that balance economic growth with ecological preservation.
+                    </p>
+                    <p class="text-gray-700">
+                        Our team of experts works across disciplines to create sustainable technologies and practices that can be implemented globally.
+                    </p>
+                </div>
+            </div>
+            <div class="grid md:grid-cols-2 gap-12 items-center mb-16 md:flex-row-reverse">
+                <div class="md:order-last">
+                    <img src="http://static.photos/technology/640x360/57" alt="Our Vision" class="rounded-2xl shadow-xl w-full">
+                </div>
+                <div>
+                    <h2 class="text-3xl font-bold text-teal-600 mb-6">Our Vision</h2>
+                    <p class="text-gray-700 mb-4">
+                        We envision a world where human progress and environmental stewardship go hand in hand, creating thriving ecosystems alongside thriving communities.
+                    </p>
+                    <p class="text-gray-700">
+                        Through research, education, and implementation, we're working to make this vision a reality.
+                    </p>
+                </div>
+            </div>
+            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg">
+                <h2 class="text-3xl font-bold text-center mb-8 text-green-700">Our Core Values</h2>
+                <div class="grid md:grid-cols-3 gap-8">
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="shield" class="text-green-600"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2 text-green-600">Sustainability</h3>
+                        <p class="text-gray-700">Commitment to solutions that meet present needs without compromising future generations.</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="zap" class="text-blue-600"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2 text-blue-600">Innovation</h3>
+                        <p class="text-gray-700">Pushing boundaries to develop cutting-edge environmental technologies.</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="users" class="text-teal-600"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2 text-teal-600">Community</h3>
+                        <p class="text-gray-700">Collaborating with local populations to create culturally appropriate solutions.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,132 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: rgba(255, 255, 255, 0.8);
+          backdrop-filter: blur(10px);
+          color: #4a5568;
+          padding: 3rem 2rem;
+          text-align: center;
+          margin-top: 4rem;
+          border-top: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+          text-align: left;
+        }
+        .footer-column h3 {
+          font-size: 1.2rem;
+          font-weight: 700;
+          margin-bottom: 1.5rem;
+          background: linear-gradient(to right, #9a6bff, #ff6b9a);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+        .footer-links {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-links li {
+          margin-bottom: 0.75rem;
+        }
+        .footer-links a {
+          color: #4a5568;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        .footer-links a:hover {
+          color: #9a6bff;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          justify-content: center;
+          margin-top: 2rem;
+        }
+        .social-links a {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: linear-gradient(to right, #9a6bff, #ff6b9a);
+          color: white;
+          transition: transform 0.3s ease;
+        }
+        .social-links a:hover {
+          transform: translateY(-5px);
+        }
+        .copyright {
+          margin-top: 3rem;
+          padding-top: 1.5rem;
+          border-top: 1px solid rgba(0, 0, 0, 0.1);
+          font-size: 0.9rem;
+        }
+        @media (max-width: 768px) {
+          .footer-content {
+            grid-template-columns: 1fr;
+            text-align: center;
+          }
+          .social-links {
+            justify-content: center;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-column">
+            <h3>IEED: EcoSphere Guardians</h3>
+            <p>Committed to environmental excellence since 2023.</p>
+</div>
+          <div class="footer-column">
+            <h3>Quick Links</h3>
+            <ul class="footer-links">
+              <li><a href="/">Home</a></li>
+              <li><a href="/about.html">About</a></li>
+              <li><a href="/solutions.html">Our Solutions</a></li>
+              <li><a href="/projects.html">Global Projects</a></li>
+<li><a href="/contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-column">
+            <h3>Connect With Us</h3>
+            <div class="social-links">
+              <a href="#"><i data-feather="twitter"></i></a>
+              <a href="#"><i data-feather="instagram"></i></a>
+              <a href="#"><i data-feather="facebook"></i></a>
+              <a href="#"><i data-feather="github"></i></a>
+            </div>
+          </div>
+        </div>
+        <div class="copyright">
+          &copy; 2023 Rainbow Unicorn Express. All rights reserved. Made with <i data-feather="heart" class="inline" style="width: 14px; height: 14px; color: #ff6b9a;"></i> and magic.
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,95 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(255, 255, 255, 0.8);
+          backdrop-filter: blur(10px);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+          position: relative;
+          z-index: 100;
+        }
+        .logo {
+          font-weight: 800;
+          font-size: 1.5rem;
+          background: linear-gradient(to right, #9a6bff, #ff6b9a);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        ul {
+          display: flex;
+          gap: 2rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: #4a5568;
+          text-decoration: none;
+          font-weight: 600;
+          position: relative;
+          padding: 0.5rem 0;
+          transition: all 0.3s ease;
+        }
+        a:hover {
+          color: #9a6bff;
+        }
+        a::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(to right, #9a6bff, #ff6b9a);
+          transition: width 0.3s ease;
+        }
+        a:hover::after {
+          width: 100%;
+        }
+        @media (max-width: 768px) {
+          nav {
+            flex-direction: column;
+            gap: 1rem;
+          }
+          ul {
+            flex-direction: column;
+            gap: 0.5rem;
+            text-align: center;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">
+          <i data-feather="globe"></i>
+          IEED: EcoSphere Guardians
+</div>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About</a></li>
+          <li><a href="/solutions.html">Solutions</a></li>
+          <li><a href="/projects.html">Projects</a></li>
+<li><a href="/contact.html">Contact</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,76 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IEED - EcoSphere Guardians</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-teal-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-12">
+        <div id="vanta-bg" class="absolute top-0 left-0 w-full h-full z-0"></div>
+        <div class="relative z-10 max-w-4xl mx-auto text-center">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-green-600 via-blue-500 to-teal-400">
+                IEED: EcoSphere Guardians
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-700 mb-10">
+                Pioneering sustainable solutions for a greener tomorrow
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
+                    <i data-feather="leaf" class="w-12 h-12 text-green-500 mb-4 mx-auto"></i>
+                    <h3 class="text-2xl font-bold text-green-600 mb-3">Sustainability</h3>
+                    <p class="text-gray-600">Innovative approaches to environmental conservation and restoration.</p>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
+                    <i data-feather="droplet" class="w-12 h-12 text-blue-500 mb-4 mx-auto"></i>
+                    <h3 class="text-2xl font-bold text-blue-600 mb-3">Water Solutions</h3>
+                    <p class="text-gray-600">Cutting-edge technologies for clean water access worldwide.</p>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all">
+                    <i data-feather="sun" class="w-12 h-12 text-teal-500 mb-4 mx-auto"></i>
+                    <h3 class="text-2xl font-bold text-teal-600 mb-3">Renewable Energy</h3>
+                    <p class="text-gray-600">Harnessing nature's power for sustainable energy solutions.</p>
+                </div>
+            </div>
+            <a href="/contact.html" class="inline-block mt-12 px-8 py-4 rounded-full bg-gradient-to-r from-green-600 to-teal-500 text-white font-bold text-xl hover:shadow-lg hover:scale-105 transition-all transform">
+                Join Our Mission
+            </a>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3a7a5f,
+            backgroundColor: 0xf1f8f5,
+            points: 10.00,
+            maxDistance: 20.00
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,39 @@

+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', () => {
+    // Add any interactive elements here
+    const buttons = document.querySelectorAll('button');
+    buttons.forEach(button => {
+        button.addEventListener('mouseenter', () => {
+            button.classList.add('glow');
+        });
+        button.addEventListener('mouseleave', () => {
+            button.classList.remove('glow');
+        });
+    });
+    // Rainbow text effect for h1
+    const rainbowText = document.querySelector('h1');
+    if (rainbowText) {
+        rainbowText.innerHTML = rainbowText.textContent.split('').map((char, i) =>
+            `<span style="animation: rainbow 8s linear infinite ${i * 0.1}s;">${char}</span>`
+        ).join('');
+    }
+});
+// Add rainbow animation to style dynamically
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes rainbow {
+        0% { color: #ff0000; }
+        14% { color: #ff7f00; }
+        28% { color: #ffff00; }
+        42% { color: #00ff00; }
+        57% { color: #0000ff; }
+        71% { color: #4b0082; }
+        85% { color: #9400d3; }
+        100% { color: #ff0000; }
+    }
+`;
+document.head.appendChild(style);

solutions.html ADDED Viewed

	@@ -0,0 +1,140 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solutions - IEED EcoSphere Guardians</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-teal-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-16">
+        <div class="max-w-5xl mx-auto">
+            <div class="text-center mb-16">
+                <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-teal-500">
+                    Our Solutions
+                </h1>
+                <p class="text-xl text-gray-700 max-w-3xl mx-auto">
+                    Innovative approaches to the world's most pressing environmental challenges.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8 mb-16">
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
+                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="wind" class="text-green-600"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-4 text-green-700">Renewable Energy Systems</h2>
+                    <p class="text-gray-700 mb-4">
+                        Custom-designed solar, wind, and hybrid energy solutions tailored to local conditions and needs.
+                    </p>
+                    <ul class="space-y-2 text-gray-700">
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Micro-grid implementations</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Energy storage solutions</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Community energy programs</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
+                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="droplet" class="text-blue-600"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-4 text-blue-700">Water Purification</h2>
+                    <p class="text-gray-700 mb-4">
+                        Advanced filtration and purification systems for clean water access in any environment.
+                    </p>
+                    <ul class="space-y-2 text-gray-700">
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-blue-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Portable purification units</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-blue-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Wastewater treatment</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-blue-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Rainwater harvesting systems</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
+                    <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="tree" class="text-teal-600"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-4 text-teal-700">Reforestation</h2>
+                    <p class="text-gray-700 mb-4">
+                        Comprehensive ecosystem restoration using native species and innovative planting techniques.
+                    </p>
+                    <ul class="space-y-2 text-gray-700">
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-teal-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Drone-assisted seed planting</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-teal-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Community forestry programs</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-teal-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Carbon offset initiatives</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all">
+                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="cpu" class="text-green-600"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-4 text-green-700">Smart Agriculture</h2>
+                    <p class="text-gray-700 mb-4">
+                        IoT-enabled farming solutions that maximize yield while minimizing environmental impact.
+                    </p>
+                    <ul class="space-y-2 text-gray-700">
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Precision irrigation systems</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Soil health monitoring</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-2 mt-1 w-4 h-4"></i>
+                            <span>Organic pest management</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="/contact.html" class="inline-block px-8 py-4 rounded-full bg-gradient-to-r from-green-600 to-teal-500 text-white font-bold text-xl hover:shadow-lg hover:scale-105 transition-all transform">
+                    Request More Information
+                </a>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,28 +1,45 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom animations */
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-15px); }
+    100% { transform: translateY(0px); }
 }
+.floating {
+    animation: float 6s ease-in-out infinite;
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, #3a7a5f, #4a9c8a);
+border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(to bottom, #2a6a4f, #3a8c7a);
 }
+/* Smooth transitions */
+html {
+    scroll-behavior: smooth;
 }
+/* Custom glow effect */
+.glow {
+    filter: drop-shadow(0 0 8px currentColor);
+}
+/* Responsive typography */
+@media (max-width: 640px) {
+    html {
+        font-size: 14px;
+    }
+}