Upload 19 files

about-us.css

@@ -0,0 +1,265 @@
+/* Navigation Styles */
+.nav-link-about {
+    position: relative;
+}
+
+.nav-link-about::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(to right, #3b82f6, #4f46e5);
+    transition: width 0.3s ease;
+}
+
+.nav-link-about:hover::after {
+    width: 100%;
+}
+
+/* Add top margin to account for fixed navbar */
+body {
+    /* padding-top: 1rem; */ /* Removed to standardize with other pages */
+}
+
+/* Team Card Styles */
+.team-card {
+    perspective: 1000px;
+    height: 300px;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+.team-card:hover {
+    transform: translateY(-10px);
+}
+
+.team-card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    border-radius: 1rem;
+    background-color: white;
+}
+
+.team-card-front {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    border-radius: 1rem;
+}
+
+.team-avatar {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* Member Details Modal */
+.member-detail-avatar {
+    overflow: hidden;
+}
+
+.member-gradient {
+    transition: all 0.3s ease;
+}
+
+#memberDetails {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+#memberDetails.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+#memberDetails .relative {
+    transform: scale(0.9);
+    opacity: 0;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+#memberDetails.active .relative {
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Animation for team cards */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.team-card {
+    opacity: 0;
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+/* Department section styling */
+.team-card:nth-child(1) { animation-delay: 0.1s; }
+.team-card:nth-child(2) { animation-delay: 0.2s; }
+.team-card:nth-child(3) { animation-delay: 0.3s; }
+.team-card:nth-child(4) { animation-delay: 0.4s; }
+.team-card:nth-child(5) { animation-delay: 0.5s; }
+.team-card:nth-child(6) { animation-delay: 0.6s; }
+.team-card:nth-child(7) { animation-delay: 0.7s; }
+.team-card:nth-child(8) { animation-delay: 0.8s; }
+.team-card:nth-child(9) { animation-delay: 0.9s; }
+
+/* Department section styling */
+.department-section {
+    padding: 3rem 0;
+    border-radius: 1rem;
+    margin-bottom: 3rem;
+}
+
+/* Department tabs styling */
+.department-tabs {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2rem;
+    background: linear-gradient(to right, #f0f4ff, #e6eeff);
+}
+
+.department-tab {
+    padding: 1rem 2rem;
+    font-weight: 600;
+    color: #6b7280;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.3s ease;
+    flex: 1;
+    text-align: center;
+    border-bottom: 3px solid transparent;
+}
+
+.department-tab.active {
+    color: #3b82f6;
+    background-color: rgba(255, 255, 255, 0.7);
+    border-bottom: 3px solid #3b82f6;
+}
+
+.department-tab:hover:not(.active) {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.department-section {
+    display: none;
+    animation: fadeIn 0.5s ease forwards;
+    margin-bottom: 3rem;
+}
+
+.department-section.active {
+    display: block;
+}
+
+/* Department section styling */
+.founders-section {
+    background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(79, 70, 229, 0.05));
+    border-left: 4px solid #3b82f6;
+}
+
+.leaders-section {
+    background: linear-gradient(to right, rgba(245, 158, 11, 0.05), rgba(249, 115, 22, 0.05));
+    border-left: 4px solid #f59e0b;
+}
+
+.smm-section {
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.05), rgba(79, 70, 229, 0.05));
+    border-left: 4px solid #8b5cf6;
+}
+
+.department-heading {
+    position: relative;
+    display: inline-block;
+    padding-bottom: 0.5rem;
+}
+
+.department-heading::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 25%;
+    width: 50%;
+    height: 3px;
+    border-radius: 2px;
+}
+
+.founders-heading::after {
+    background: linear-gradient(to right, #3b82f6, #4f46e5);
+}
+
+.leaders-heading::after {
+    background: linear-gradient(to right, #f59e0b, #f97316);
+}
+
+.smm-heading::after {
+    background: linear-gradient(to right, #8b5cf6, #4f46e5);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Enhanced navbar styling */
+#mainNav {
+    border-radius: 1rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+    margin-top: 1rem;
+    width: 95%;
+    left: 2.5%;
+    right: 2.5%;
+    background-color: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.3s ease;
+}
+
+#mainNav.scrolled {
+    background-color: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+/* Team card animation delays */
+.team-card:nth-child(1) { animation-delay: 0.1s; }
+.team-card:nth-child(2) { animation-delay: 0.2s; }
+.team-card:nth-child(3) { animation-delay: 0.3s; }
+.team-card:nth-child(4) { animation-delay: 0.4s; }
+.team-card:nth-child(5) { animation-delay: 0.5s; }
+.team-card:nth-child(6) { animation-delay: 0.6s; }
+.team-card:nth-child(7) { animation-delay: 0.7s; }
+.team-card:nth-child(8) { animation-delay: 0.8s; }
+.team-card:nth-child(9) { animation-delay: 0.9s; }

about-us.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us - Econovation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./about-us.css">
+    <link rel="stylesheet" href="creative.css">
+    <base href="./">
+</head>
+<body class="min-h-screen flex flex-col animated-gradient-bg">
+    <!-- Navigation bar removed -->
+
+    <!-- Main Content with top padding to account for fixed navbar -->
+    <div class="container mx-auto px-4 py-12 mt-16">
+        <h1 class="text-4xl md:text-5xl font-bold text-center mb-12 text-gray-800">Meet Our Team</h1>
+        
+        <!-- Department Tabs -->
+        <div class="department-tabs rounded-xl overflow-hidden shadow-md mb-10">
+            <div class="department-tab active" data-target="founders-section">
+                <i class="fas fa-crown mr-2"></i>Founders
+            </div>
+            <div class="department-tab" data-target="leaders-section">
+                <i class="fas fa-users-cog mr-2"></i>Club Leaders
+            </div>
+            <div class="department-tab" data-target="smm-section">
+                <i class="fas fa-hashtag mr-2"></i>SMM Team
+            </div>
+        </div>
+        
+        <!-- Founders Section -->
+        <div id="founders-section" class="department-section active founders-section p-8 rounded-2xl shadow-lg">
+            <h2 class="text-2xl font-bold text-center mb-8 text-gray-700 department-heading founders-heading">
+            <i class="fas fa-crown mr-2 text-blue-500"></i>Founders
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-8 max-w-4xl mx-auto">
+                <!-- Team Member 1 -->
+                <div class="team-card" data-member="0">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-blue-400 to-purple-500">
+                                <span class="text-4xl text-white font-bold">AS</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Alex Smith</h3>
+                            <p class="text-blue-600 font-medium">Founder & CEO</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Team Member 2 -->
+                <div class="team-card" data-member="1">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-green-400 to-blue-500">
+                                <span class="text-4xl text-white font-bold">JL</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Jamie Lee</h3>
+                            <p class="text-green-600 font-medium">Co-Founder & CRO</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Club Leaders Section -->
+        <div id="leaders-section" class="department-section leaders-section p-8 rounded-2xl shadow-lg">
+            <h2 class="text-2xl font-bold text-center mb-8 text-gray-700 department-heading leaders-heading">
+            <i class="fas fa-users-cog mr-2 text-yellow-500"></i>Club Leaders
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-8 max-w-4xl mx-auto">
+                <!-- Team Member 3 -->
+                <div class="team-card" data-member="2">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-yellow-400 to-orange-500">
+                                <span class="text-4xl text-white font-bold">MK</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Morgan Kim</h3>
+                            <p class="text-yellow-600 font-medium">Technology Director</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Team Member 4 -->
+                <div class="team-card" data-member="3">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-red-400 to-pink-500">
+                                <span class="text-4xl text-white font-bold">RP</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Riley Patel</h3>
+                            <p class="text-red-600 font-medium">Marketing Strategist</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- SMM Members Section -->
+        <div id="smm-section" class="department-section smm-section p-8 rounded-2xl shadow-lg">
+            <h2 class="text-2xl font-bold text-center mb-8 text-gray-700 department-heading smm-heading">
+            <i class="fas fa-hashtag mr-2 text-purple-500"></i>SMM Team
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8">
+                <!-- Team Member 5 -->
+                <div class="team-card" data-member="4">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-purple-400 to-indigo-500">
+                                <span class="text-4xl text-white font-bold">TJ</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Taylor Johnson</h3>
+                            <p class="text-purple-600 font-medium">Data Scientist</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Team Member 6 -->
+                <div class="team-card" data-member="5">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-indigo-400 to-blue-500">
+                                <span class="text-4xl text-white font-bold">SN</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Sam Nguyen</h3>
+                            <p class="text-indigo-600 font-medium">Community Manager</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Team Member 7 -->
+                <div class="team-card" data-member="6">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-pink-400 to-red-500">
+                                <span class="text-4xl text-white font-bold">EW</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Ellis Wong</h3>
+                            <p class="text-pink-600 font-medium">Financial Analyst</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Team Member 8 -->
+                <div class="team-card" data-member="7">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-teal-400 to-green-500">
+                                <span class="text-4xl text-white font-bold">JR</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Jordan Rivera</h3>
+                            <p class="text-teal-600 font-medium">Sustainability Coordinator</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Team Member 9 -->
+                <div class="team-card" data-member="8">
+                    <div class="team-card-inner">
+                        <div class="team-card-front">
+                            <div class="team-avatar bg-gradient-to-br from-blue-400 to-cyan-500">
+                                <span class="text-4xl text-white font-bold">CB</span>
+                            </div>
+                            <h3 class="text-xl font-bold mt-4 text-gray-800">Casey Blake</h3>
+                            <p class="text-blue-600 font-medium">Content Creator</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Expanded Member Details -->
+        <div id="memberDetails" class="fixed inset-0 z-50 flex items-center justify-center hidden">
+            <div class="absolute inset-0 bg-black bg-opacity-70 backdrop-blur-md" id="detailsOverlay"></div>
+            <div class="relative bg-white rounded-xl w-11/12 max-w-3xl overflow-hidden shadow-2xl z-10 transform transition-all duration-500">
+                <button id="closeDetails" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 transition-all duration-300 hover:rotate-90 z-20">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+                
+                <div class="flex flex-col md:flex-row">
+                    <div class="member-detail-avatar w-full md:w-2/5 aspect-square">
+                        <div class="w-full h-full member-gradient flex items-center justify-center">
+                            <span class="member-initials text-8xl text-white font-bold opacity-80"></span>
+                        </div>
+                    </div>
+                    <div class="member-info w-full md:w-3/5 p-6">
+                        <h3 class="member-name text-3xl font-bold mb-2 text-gray-800"></h3>
+                        <p class="member-position text-xl font-medium mb-4"></p>
+                        <p class="member-bio text-gray-700 mb-6"></p>
+                        
+                        <div class="member-stats grid grid-cols-2 gap-4">
+                            <div class="stat p-3 rounded-lg bg-gray-100">
+                                <span class="block text-sm text-gray-500">Experience</span>
+                                <span class="block text-xl font-bold member-experience"></span>
+                            </div>
+                            <div class="stat p-3 rounded-lg bg-gray-100">
+                                <span class="block text-sm text-gray-500">Specialty</span>
+                                <span class="block text-xl font-bold member-specialty"></span>
+                            </div>
+                        </div>
+                        
+                        <div class="mt-6">
+                            <h4 class="text-lg font-semibold mb-2 text-gray-800">Contact</h4>
+                            <div class="flex space-x-4">
+                                <a href="#" class="text-pink-500 hover:text-pink-700 transition-colors duration-300">
+                                    <i class="fab fa-instagram text-xl"></i>
+                                </a>
+                                <a href="#" class="text-blue-500 hover:text-blue-700 transition-colors duration-300">
+                                    <i class="fab fa-telegram text-xl"></i>
+                                </a>
+                                <a href="#" class="text-blue-600 hover:text-blue-800 transition-colors duration-300">
+                                    <i class="fab fa-linkedin text-xl"></i>
+                                </a>
+                                <a href="mailto:contact@econovation.com" class="text-red-500 hover:text-red-700 transition-colors duration-300">
+                                    <i class="fas fa-envelope text-xl"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="./about-us.js"></script>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">ECONOV<span class="text-blue-400">Δ</span>TION</h3>
+                    <p class="text-gray-400">Transforming economic thinking for a better tomorrow.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="about-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li>
+                        <li><a href="events.html" class="text-gray-400 hover:text-white transition-colors duration-300">Events</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Programs</a></li>
+                        <li><a href="contact-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-twitter text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-linkedin text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-instagram text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-youtube text-xl"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Subscribe</h4>
+                    <p class="text-gray-400 mb-4">Stay updated with our latest events and news.</p>
+                    <div class="flex">
+                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition-colors duration-300">Subscribe</button>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 Econovation. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+<script src="creative.js"></script>
+    <script>
+        // Additional page-specific JavaScript can go here
+        document.addEventListener('DOMContentLoaded', function() {
+            // Mobile menu functionality is now handled by main.js
+            const mobileMenuButton = document.getElementById('mobileMenuButton');
+            const closeMenuButton = document.getElementById('closeMenuButton');
+            const mobileMenu = document.getElementById('mobileMenu');
+            
+            if (mobileMenuButton && closeMenuButton && mobileMenu) {
+                mobileMenuButton.addEventListener('click', function() {
+                    mobileMenu.classList.remove('translate-x-full');
+            });
+            
+            closeMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.add('translate-x-full');
+            });
+            }
+        });
+    </script>
+</body>
+</html>

about-us.js

@@ -0,0 +1,311 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Team member data
+    const teamMembers = [
+        // Founders (2)
+        {
+            initials: 'AS',
+            name: 'Alex Smith',
+            position: 'Founder & CEO',
+            bio: 'Visionary leader with expertise in sustainable economic models and innovation strategies. Alex founded Econovation with the mission to transform how we approach economic challenges in the 21st century.',
+            gradient: 'from-blue-400 to-purple-500',
+            experience: '15+ years',
+            specialty: 'Economic Innovation',
+            color: 'text-blue-600'
+        },
+        {
+            initials: 'JL',
+            name: 'Jamie Lee',
+            position: 'Co-Founder & CRO',
+            bio: 'Economics PhD with focus on behavioral economics and market analysis. Jamie leads our research initiatives and ensures our solutions are backed by solid economic theory and empirical evidence.',
+            gradient: 'from-green-400 to-blue-500',
+            experience: '12 years',
+            specialty: 'Behavioral Economics',
+            color: 'text-green-600'
+        },
+        
+        // Club Leaders (2)
+        {
+            initials: 'MK',
+            name: 'Morgan Kim',
+            position: 'Technology Director',
+            bio: 'Expert in fintech solutions and economic modeling software. Morgan bridges the gap between economic theory and practical technological implementation, creating tools that make economic concepts accessible.',
+            gradient: 'from-yellow-400 to-orange-500',
+            experience: '10 years',
+            specialty: 'Fintech Solutions',
+            color: 'text-yellow-600'
+        },
+        {
+            initials: 'RP',
+            name: 'Riley Patel',
+            position: 'Marketing Strategist',
+            bio: 'Creative mind behind our brand messaging and outreach campaigns. Riley ensures our economic solutions reach the audiences who need them most, translating complex concepts into compelling narratives.',
+            gradient: 'from-red-400 to-pink-500',
+            experience: '8 years',
+            specialty: 'Brand Strategy',
+            color: 'text-red-600'
+        },
+        
+        // SMM Team (5)
+        {
+            initials: 'TJ',
+            name: 'Taylor Johnson',
+            position: 'Data Scientist',
+            bio: 'Specializes in economic forecasting and predictive analytics. Taylor transforms complex economic data into actionable insights for our clients and partners, helping them navigate economic uncertainties.',
+            gradient: 'from-purple-400 to-indigo-500',
+            experience: '9 years',
+            specialty: 'Predictive Analytics',
+            color: 'text-purple-600'
+        },
+        {
+            initials: 'SN',
+            name: 'Sam Nguyen',
+            position: 'Community Manager',
+            bio: 'Builds relationships with partners and manages our growing community. Sam ensures our economic solutions create real impact in communities worldwide, fostering collaboration across sectors.',
+            gradient: 'from-indigo-400 to-blue-500',
+            experience: '7 years',
+            specialty: 'Community Building',
+            color: 'text-indigo-600'
+        },
+        {
+            initials: 'EW',
+            name: 'Ellis Wong',
+            position: 'Financial Analyst',
+            bio: 'Oversees financial planning and investment strategies for our initiatives. Ellis ensures our economic solutions are not just innovative but financially sustainable and viable in diverse market conditions.',
+            gradient: 'from-pink-400 to-red-500',
+            experience: '11 years',
+            specialty: 'Investment Strategy',
+            color: 'text-pink-600'
+        },
+        {
+            initials: 'JR',
+            name: 'Jordan Rivera',
+            position: 'Sustainability Coordinator',
+            bio: 'Ensures our economic solutions align with environmental sustainability goals. Jordan brings expertise in green economics and circular economic models, helping clients transition to more sustainable practices.',
+            gradient: 'from-teal-400 to-green-500',
+            experience: '6 years',
+            specialty: 'Green Economics',
+            color: 'text-teal-600'
+        },
+        {
+            initials: 'CB',
+            name: 'Casey Blake',
+            position: 'Content Creator',
+            bio: 'Talented content creator who specializes in translating complex economic concepts into engaging digital content. Casey helps our audience understand economic principles through creative storytelling.',
+            gradient: 'from-blue-400 to-cyan-500',
+            experience: '5 years',
+            specialty: 'Digital Content',
+            color: 'text-blue-600'
+        },
+        {
+            initials: 'LP',
+            name: 'Lorem Ipsum',
+            position: 'Dolor Sit Amet',
+            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.',
+            gradient: 'from-blue-400 to-purple-500',
+            experience: '5 years',
+            specialty: 'Consectetur Adipiscing',
+            color: 'text-blue-600'
+        },
+        {
+            initials: 'CD',
+            name: 'Consectetur Dolor',
+            position: 'Adipiscing Elit',
+            bio: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.',
+            gradient: 'from-green-400 to-blue-500',
+            experience: '8 years',
+            specialty: 'Sed Do Eiusmod',
+            color: 'text-green-600'
+        },
+        {
+            initials: 'SE',
+            name: 'Sed Eiusmod',
+            position: 'Tempor Incididunt',
+            bio: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.',
+            gradient: 'from-yellow-400 to-orange-500',
+            experience: '6 years',
+            specialty: 'Ut Labore Et Dolore',
+            color: 'text-yellow-600'
+        },
+        {
+            initials: 'UL',
+            name: 'Ut Labore',
+            position: 'Et Dolore Magna',
+            bio: 'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam.',
+            gradient: 'from-red-400 to-pink-500',
+            experience: '9 years',
+            specialty: 'Aliqua Ut Enim',
+            color: 'text-red-600'
+        },
+        {
+            initials: 'AV',
+            name: 'Aliqua Veniam',
+            position: 'Nostrud Exercitation',
+            bio: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.',
+            gradient: 'from-purple-400 to-indigo-500',
+            experience: '4 years',
+            specialty: 'Ullamco Laboris',
+            color: 'text-purple-600'
+        },
+        {
+            initials: 'UL',
+            name: 'Ullamco Laboris',
+            position: 'Nisi Ut Aliquip',
+            bio: 'Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.',
+            gradient: 'from-indigo-400 to-blue-500',
+            experience: '7 years',
+            specialty: 'Ex Ea Commodo',
+            color: 'text-indigo-600'
+        },
+        {
+            initials: 'EC',
+            name: 'Ex Commodo',
+            position: 'Consequat Duis',
+            bio: 'Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.',
+            gradient: 'from-pink-400 to-red-500',
+            experience: '11 years',
+            specialty: 'Aute Irure Dolor',
+            color: 'text-pink-600'
+        },
+        {
+            initials: 'AI',
+            name: 'Aute Irure',
+            position: 'Dolor In Reprehenderit',
+            bio: 'Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.',
+            gradient: 'from-teal-400 to-green-500',
+            experience: '6 years',
+            specialty: 'In Voluptate Velit',
+            color: 'text-teal-600'
+        },
+        {
+            initials: 'VE',
+            name: 'Voluptate Esse',
+            position: 'Cillum Dolore Eu',
+            bio: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.',
+            gradient: 'from-blue-400 to-cyan-500',
+            experience: '5 years',
+            specialty: 'Fugiat Nulla Pariatur',
+            color: 'text-blue-600'
+        }
+    ];
+    
+    // Get DOM elements
+    const teamCards = document.querySelectorAll('.team-card');
+    const memberDetails = document.getElementById('memberDetails');
+    const detailsOverlay = document.getElementById('detailsOverlay');
+    const closeDetails = document.getElementById('closeDetails');
+    
+    let isModalTransitioning = false;
+    
+    // Add click event to each team card
+    teamCards.forEach(card => {
+        card.addEventListener('click', function() {
+            if (isModalTransitioning) return;
+            
+            const index = parseInt(this.getAttribute('data-member'));
+            const member = teamMembers[index];
+            
+            // If modal is already open, close it first then open the new one
+            if (memberDetails.classList.contains('active')) {
+                isModalTransitioning = true;
+                closeMemberDetailsWithCallback(() => {
+                    showMemberDetails(member);
+                    isModalTransitioning = false;
+                });
+            } else {
+                showMemberDetails(member);
+            }
+        });
+    });
+    
+    function showMemberDetails(member) {
+        // Update member details modal with member info
+        document.querySelector('.member-initials').textContent = member.initials;
+        document.querySelector('.member-name').textContent = member.name;
+        
+        const positionElement = document.querySelector('.member-position');
+        positionElement.textContent = member.position;
+        positionElement.className = `member-position text-xl font-medium mb-4 ${member.color}`;
+        
+        document.querySelector('.member-bio').textContent = member.bio;
+        document.querySelector('.member-experience').textContent = member.experience;
+        document.querySelector('.member-specialty').textContent = member.specialty;
+        
+        // Update gradient
+        document.querySelector('.member-gradient').className = 
+            `w-full h-full member-gradient bg-gradient-to-br ${member.gradient} flex items-center justify-center`;
+        
+        // Show the details modal
+        memberDetails.classList.remove('hidden');
+        setTimeout(() => {
+            memberDetails.classList.add('active');
+        }, 10);
+        
+        // Prevent scrolling
+        document.body.style.overflow = 'hidden';
+    }
+    
+    // Close modal when X button or overlay is clicked
+    closeDetails.addEventListener('click', () => closeMemberDetails());
+    detailsOverlay.addEventListener('click', () => closeMemberDetails());
+    
+    function closeMemberDetails() {
+        memberDetails.classList.remove('active');
+        
+        // Delay the modal hiding to allow for animations
+        setTimeout(() => {
+            memberDetails.classList.add('hidden');
+            document.body.style.overflow = ''; // Re-enable scrolling
+        }, 300);
+    }
+    
+    function closeMemberDetailsWithCallback(callback) {
+        memberDetails.classList.remove('active');
+        
+        // Delay the modal hiding to allow for animations
+        setTimeout(() => {
+            memberDetails.classList.add('hidden');
+            if (callback) callback();
+        }, 300);
+    }
+    
+    // Close modal with Escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && !memberDetails.classList.contains('hidden')) {
+            closeMemberDetails();
+        }
+    });
+});
+
+// Department tabs functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const tabs = document.querySelectorAll('.department-tab');
+    const nav = document.getElementById('mainNav');
+    
+    // Tab switching functionality
+    tabs.forEach(tab => {
+        tab.addEventListener('click', function() {
+            // Remove active class from all tabs
+            tabs.forEach(t => t.classList.remove('active'));
+            
+            // Add active class to clicked tab
+            this.classList.add('active');
+            
+            // Hide all sections
+            const sections = document.querySelectorAll('.department-section');
+            sections.forEach(section => section.classList.remove('active'));
+            
+            // Show the target section
+            const targetSection = document.getElementById(this.dataset.target);
+            targetSection.classList.add('active');
+        });
+    });
+    
+    // Navbar scroll effect
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 10) {
+            nav.classList.add('scrolled');
+        } else {
+            nav.classList.remove('scrolled');
+        }
+    });
+});

contact-us.css

@@ -0,0 +1,109 @@
+/* Contact Us Page Styles */
+
+/* Navigation Links */
+.nav-link-about {
+    position: relative;
+    padding-bottom: 5px;
+}
+
+.nav-link-about::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #2563eb; /* blue-600 */
+    transition: width 0.3s ease;
+}
+
+.nav-link-about:hover::after {
+    width: 100%;
+}
+
+/* Contact Information Icons */
+.contact-icon {
+    transition: transform 0.3s ease;
+}
+
+.contact-icon:hover {
+    transform: scale(1.1);
+}
+
+/* Form Elements */
+input:focus, textarea:focus {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+button[type="submit"] {
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+button[type="submit"]:hover {
+    transform: translateY(-2px);
+}
+
+button[type="submit"]:active {
+    transform: translateY(0);
+}
+
+/* FAQ Cards */
+.faq-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.faq-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Social Media Icons */
+.social-icon {
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.social-icon:hover {
+    transform: rotate(15deg);
+}
+
+/* Map Container */
+.map-container {
+    transition: box-shadow 0.3s ease;
+}
+
+.map-container:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .contact-section {
+        flex-direction: column;
+    }
+    
+    .contact-info, .contact-form {
+        width: 100%;
+    }
+    
+    .faq-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Footer Newsletter Form */
+.newsletter-form {
+    transition: transform 0.3s ease;
+}
+
+.newsletter-form:focus-within {
+    transform: scale(1.02);
+}
+
+/* Quick Links Animation */
+.quick-link {
+    transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.quick-link:hover {
+    transform: translateX(5px);
+}

contact-us.html

@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us - Econovation</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="contact-us.css">
+    <link rel="stylesheet" href="creative.css">
+    <style>
+        :root {
+            --primary-bg: #f8fafc;
+            --primary-text: #1e293b;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--primary-bg);
+            color: var(--primary-text);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col animated-gradient-bg">
+    <!-- Navigation bar removed -->
+    
+    <!-- Main content starts here -->
+    <main class="flex-grow container mx-auto px-6 py-12 md:px-12 lg:px-16">
+        <!-- Hero Section -->
+        <section class="mb-16 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6">Get in Touch</h1>
+            <p class="text-lg text-gray-600 max-w-3xl mx-auto">Have questions or want to learn more about Econovation? We're here to help. Reach out to our team using the contact information below or fill out the form.</p>
+        </section>
+
+        <!-- Contact Information and Form -->
+        <section class="grid md:grid-cols-2 gap-12 mb-16">
+            <!-- Contact Information -->
+            <div class="bg-white rounded-lg shadow-lg p-8">
+                <h2 class="text-2xl font-semibold mb-6">Contact Information</h2>
+                
+                <div class="space-y-6">
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-map-marker-alt text-blue-600"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium">Address</h3>
+                            <p class="text-gray-600">123 Innovation Street, Tech City, CA 94043</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-envelope text-blue-600"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium">Email</h3>
+                            <p class="text-gray-600">info@econovation.org</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-phone text-blue-600"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium">Phone</h3>
+                            <p class="text-gray-600">+1 (555) 123-4567</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-full mr-4">
+                            <i class="fas fa-clock text-blue-600"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium">Office Hours</h3>
+                            <p class="text-gray-600">Monday - Friday: 9:00 AM - 5:00 PM</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mt-8">
+                    <h3 class="font-medium mb-4">Connect With Us</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition-colors duration-300">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition-colors duration-300">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition-colors duration-300">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="bg-blue-800 text-white p-3 rounded-full hover:bg-blue-900 transition-colors duration-300">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Contact Form -->
+            <div class="glass-card bg-white rounded-lg shadow-lg p-8">
+                <h2 class="text-2xl font-semibold mb-6">Send Us a Message</h2>
+                <form>
+                    <div class="grid md:grid-cols-2 gap-6 mb-6">
+                        <div>
+                            <label for="first-name" class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
+                            <input type="text" id="first-name" name="first-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label for="last-name" class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
+                            <input type="text" id="last-name" name="last-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
+                        <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
+                        <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                    </div>
+                    
+                    <div class="mb-6">
+                        <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
+                        <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
+                    </div>
+                    
+                    <button type="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-md hover:bg-blue-700 transition-colors duration-300 font-medium">Send Message</button>
+                </form>
+            </div>
+        </section>
+        
+        <!-- Map Section -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-semibold mb-6 text-center">Find Us</h2>
+            <div class="bg-gray-200 rounded-lg h-96 flex items-center justify-center">
+                <!-- Placeholder for map -->
+                <p class="text-gray-600">Map will be embedded here</p>
+            </div>
+        </section>
+        
+        <!-- FAQ Section -->
+        <section>
+            <h2 class="text-2xl font-semibold mb-6 text-center">Frequently Asked Questions</h2>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <h3 class="font-medium text-lg mb-2">How can I join Econovation?</h3>
+                    <p class="text-gray-600">You can join Econovation by filling out the membership form on our website or by contacting us directly via email or phone.</p>
+                </div>
+                
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <h3 class="font-medium text-lg mb-2">What types of programs do you offer?</h3>
+                    <p class="text-gray-600">We offer a variety of programs including workshops, seminars, mentorship opportunities, and collaborative projects focused on economic innovation.</p>
+                </div>
+                
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <h3 class="font-medium text-lg mb-2">How can my organization partner with Econovation?</h3>
+                    <p class="text-gray-600">Please visit our Partnerships page or contact our partnerships team directly at partnerships@econovation.org to discuss collaboration opportunities.</p>
+                </div>
+                
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <h3 class="font-medium text-lg mb-2">Are there volunteer opportunities available?</h3>
+                    <p class="text-gray-600">Yes, we welcome volunteers! Please reach out to our team with your interests and availability, and we'll connect you with suitable opportunities.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6 md:px-12 lg:px-16">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Organization Info -->
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Econovation</h3>
+                    <p class="text-gray-400 mb-4">Empowering economic innovation through education, collaboration, and community engagement.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                    </div>
+                </div>
+                
+                <!-- Quick Links -->
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="about-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li>
+                        <li><a href="events.html" class="text-gray-400 hover:text-white transition-colors duration-300">Events</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Programs</a></li>
+                        <li><a href="partnerships.html" class="text-gray-400 hover:text-white transition-colors duration-300">Partnerships</a></li>
+                        <li><a href="contact-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
+                    </ul>
+                </div>
+                
+                <!-- Contact Info -->
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Contact Us</h3>
+                    <ul class="space-y-2">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-2 text-gray-400"></i>
+                            <span class="text-gray-400">123 Innovation Street, Tech City, CA 94043</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-envelope mt-1 mr-2 text-gray-400"></i>
+                            <span class="text-gray-400">info@econovation.org</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-phone mt-1 mr-2 text-gray-400"></i>
+                            <span class="text-gray-400">+1 (555) 123-4567</span>
+                        </li>
+                    </ul>
+                </div>
+                
+                <!-- Newsletter -->
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Newsletter</h3>
+                    <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and insights.</p>
+                    <form class="flex">
+                        <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-900">
+                        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 transition-colors duration-300">Subscribe</button>
+                    </form>
+                </div>
+            </div>
+            
+            <div class="border-t border-gray-800 mt-10 pt-6 text-center">
+                <p class="text-gray-400">&copy; 2023 Econovation. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+    <script src="creative.js"></script>
+    <script>
+        // Mobile menu toggle
+        document.addEventListener('DOMContentLoaded', function() {
+            const mobileMenuButton = document.getElementById('mobileMenuButton');
+            const closeMenuButton = document.getElementById('closeMenuButton');
+            const mobileMenu = document.getElementById('mobileMenu');
+
+            mobileMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.remove('translate-x-full');
+            });
+
+            closeMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.add('translate-x-full');
+            });
+        });
+    </script>
+</body>
+</html>

creative.css

@@ -0,0 +1,273 @@
+/* Creative CSS Effects for Econovation Website */
+
+/* Gradient Backgrounds */
+.gradient-bg {
+    background: linear-gradient(135deg, #0a2463, #004e89);
+    color: white;
+}
+
+.gradient-text {
+    background: linear-gradient(90deg, #0a2463, #3a6ea5);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+/* Glass Morphism Effect */
+.glass-card {
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+/* Animated Gradient Button */
+.gradient-btn {
+    background-size: 200% 200%;
+    background-image: linear-gradient(45deg, #0a2463, #1e5f74, #3a6ea5, #0a2463);
+    animation: gradient-shift 4s ease infinite;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gradient-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Floating Animation */
+.float {
+    animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+}
+
+/* Glow Effect */
+.glow {
+    box-shadow: 0 0 10px rgba(10, 36, 99, 0.5),
+               0 0 20px rgba(30, 95, 116, 0.3),
+               0 0 30px rgba(58, 110, 165, 0.1);
+    transition: box-shadow 0.3s ease;
+}
+
+.glow:hover {
+    box-shadow: 0 0 15px rgba(10, 36, 99, 0.6),
+               0 0 30px rgba(30, 95, 116, 0.4),
+               0 0 45px rgba(58, 110, 165, 0.2);
+}
+
+/* Particle Canvas Background */
+.particle-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+}
+
+/* Blur Card Effect */
+.blur-card {
+    position: relative;
+    overflow: hidden;
+}
+
+.blur-card::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: inherit;
+    filter: blur(10px) saturate(2);
+    z-index: -1;
+}
+
+/* Neon Text Effect */
+.neon-text {
+    color: #fff;
+    text-shadow: 0 0 5px #fff, 
+                0 0 10px #fff, 
+                0 0 15px #0a2463, 
+                0 0 20px #1e5f74, 
+                0 0 25px #3a6ea5, 
+                0 0 30px #004e89, 
+                0 0 35px #0a2463;
+}
+
+/* 3D Card Effect */
+.card-3d {
+    transition: transform 0.5s ease;
+    transform-style: preserve-3d;
+}
+
+.card-3d:hover {
+    transform: rotateY(10deg) rotateX(10deg);
+}
+
+/* Animated Border */
+.animated-border {
+    position: relative;
+}
+
+.animated-border::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #0a2463, #3a6ea5);
+    transition: width 0.3s ease;
+}
+
+.animated-border:hover::after {
+    width: 100%;
+}
+
+/* Frosted Glass Navigation */
+.frosted-nav {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+}
+
+/* Animated Gradient Background */
+.animated-gradient-bg {
+    background: linear-gradient(-45deg, #0a2463, #1e5f74, #3a6ea5, #004e89);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Ripple Effect */
+.ripple {
+    position: relative;
+    overflow: hidden;
+}
+
+.ripple::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform .5s, opacity 1s;
+}
+
+.ripple:active::after {
+    transform: scale(0, 0);
+    opacity: 0.3;
+    transition: 0s;
+}
+
+/* Shiny Button Effect */
+.shiny-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.shiny-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    transition: 0.5s;
+}
+
+.shiny-btn:hover::before {
+    left: 100%;
+}
+
+
+/* Crystal Glass Navigation Bar */
+.crystal-nav {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0 0 15px 15px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    margin: 0 15px;
+    width: calc(100% - 30px);
+    padding: 0 20px;
+}
+
+.crystal-nav .nav-link {
+    color: rgba(0, 0, 0, 0.8);
+    font-weight: 500;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.crystal-nav .nav-link:hover {
+    color: #0a2463;
+    transform: translateY(-2px);
+}
+
+.crystal-nav .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #0a2463, #3a6ea5);
+    transition: width 0.3s ease;
+}
+
+.crystal-nav .nav-link:hover::after {
+    width: 100%;
+}
+
+.crystal-nav .logo-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.crystal-nav .logo-container img {
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+    transition: transform 0.3s ease;
+}
+
+.crystal-nav .logo-container:hover img {
+    transform: scale(1.05);
+}

creative.js

@@ -0,0 +1,267 @@
+// Creative JavaScript Effects for Econovation Website
+
+// Particle Canvas Background
+document.addEventListener('DOMContentLoaded', function() {
+    // Create canvas element for particles if it doesn't exist
+    if (!document.getElementById('particle-canvas')) {
+        const canvas = document.createElement('canvas');
+        canvas.id = 'particle-canvas';
+        
+        // Insert canvas as the first element in the body
+        const particleContainer = document.createElement('div');
+        particleContainer.className = 'particle-container';
+        particleContainer.appendChild(canvas);
+        document.body.insertBefore(particleContainer, document.body.firstChild);
+        
+        // Initialize particles
+        initParticles();
+    }
+    
+    // Apply creative effects to elements
+    applyCreativeEffects();
+});
+
+// Initialize particle animation
+function initParticles() {
+    const canvas = document.getElementById('particle-canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Set canvas size to window size
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    
+    // Particle properties
+    const particleCount = 100;
+    const particles = [];
+    const colors = ['#3b82f6', '#4f46e5', '#8b5cf6', '#2563eb'];
+    
+    // Create particles
+    for (let i = 0; i < particleCount; i++) {
+        particles.push({
+            x: Math.random() * canvas.width,
+            y: Math.random() * canvas.height,
+            radius: Math.random() * 3 + 1,
+            color: colors[Math.floor(Math.random() * colors.length)],
+            speedX: Math.random() * 1 - 0.5,
+            speedY: Math.random() * 1 - 0.5,
+            opacity: Math.random() * 0.5 + 0.3
+        });
+    }
+    
+    // Animation function
+    function animate() {
+        requestAnimationFrame(animate);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Update and draw particles
+        for (let i = 0; i < particleCount; i++) {
+            const p = particles[i];
+            
+            // Move particles
+            p.x += p.speedX;
+            p.y += p.speedY;
+            
+            // Wrap around edges
+            if (p.x < 0) p.x = canvas.width;
+            if (p.x > canvas.width) p.x = 0;
+            if (p.y < 0) p.y = canvas.height;
+            if (p.y > canvas.height) p.y = 0;
+            
+            // Draw particle
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
+            ctx.fillStyle = p.color;
+            ctx.globalAlpha = p.opacity;
+            ctx.fill();
+            
+            // Connect particles within a certain distance
+            connectParticles(p, particles);
+        }
+    }
+    
+    // Connect particles with lines
+    function connectParticles(p, particles) {
+        const connectionDistance = 150;
+        
+        for (let i = 0; i < particles.length; i++) {
+            const p2 = particles[i];
+            const distance = Math.sqrt(
+                Math.pow(p.x - p2.x, 2) + 
+                Math.pow(p.y - p2.y, 2)
+            );
+            
+            if (distance < connectionDistance) {
+                ctx.beginPath();
+                ctx.strokeStyle = p.color;
+                ctx.globalAlpha = 1 - (distance / connectionDistance);
+                ctx.lineWidth = 0.5;
+                ctx.moveTo(p.x, p.y);
+                ctx.lineTo(p2.x, p2.y);
+                ctx.stroke();
+            }
+        }
+    }
+    
+    // Handle window resize
+    window.addEventListener('resize', function() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    });
+    
+    // Start animation
+    animate();
+}
+
+// Apply creative effects to elements
+function applyCreativeEffects() {
+    // Apply floating animation to selected elements
+    document.querySelectorAll('.hero-image, .feature-icon').forEach((el, index) => {
+        el.classList.add('float');
+        // Stagger the animation
+        el.style.animationDelay = `${index * 0.2}s`;
+    });
+    
+    // Apply 3D card effect to program cards
+    document.querySelectorAll('.program-card, .testimonial-card').forEach(el => {
+        el.classList.add('card-3d');
+        
+        // Add tilt effect based on mouse position
+        el.addEventListener('mousemove', function(e) {
+            const rect = this.getBoundingClientRect();
+            const x = e.clientX - rect.left; // x position within the element
+            const y = e.clientY - rect.top; // y position within the element
+            
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            
+            const rotateX = (y - centerY) / 10;
+            const rotateY = (centerX - x) / 10;
+            
+            this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        });
+        
+        // Reset transform when mouse leaves
+        el.addEventListener('mouseleave', function() {
+            this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
+        });
+    });
+    
+    // Apply animated border to navigation links
+    document.querySelectorAll('.nav-link').forEach(el => {
+        el.classList.add('animated-border');
+    });
+    
+    // Apply ripple effect to buttons
+    document.querySelectorAll('button, .btn').forEach(el => {
+        el.classList.add('ripple');
+    });
+    
+    // Apply gradient text to headings
+    document.querySelectorAll('h1, h2').forEach(el => {
+        if (!el.closest('.hero-section')) { // Skip hero section headings
+            el.classList.add('gradient-text');
+        }
+    });
+    
+    // Apply glass card effect to selected cards
+    document.querySelectorAll('.faq-item, .feature-card').forEach(el => {
+        el.classList.add('glass-card');
+    });
+    
+    // Apply shiny button effect to CTA buttons
+    document.querySelectorAll('.cta-button, .join-btn').forEach(el => {
+        el.classList.add('shiny-btn');
+    });
+    
+    // Apply glow effect to logo
+    const logo = document.querySelector('.logo a, .logo-text');
+    if (logo) logo.classList.add('glow');
+    
+    // Apply frosted glass effect to navigation
+    const nav = document.querySelector('header, nav');
+    if (nav) {
+        nav.classList.add('frosted-nav');
+        // Remove any existing background color or shadow
+        nav.style.backgroundColor = 'transparent';
+    }
+}
+
+// Parallax scrolling effect
+window.addEventListener('scroll', function() {
+    const scrollPosition = window.pageYOffset;
+    
+    // Parallax for hero section
+    const heroSection = document.querySelector('.hero-section');
+    if (heroSection) {
+        heroSection.style.backgroundPositionY = `${scrollPosition * 0.5}px`;
+    }
+    
+    // Parallax for other elements
+    document.querySelectorAll('.parallax').forEach(el => {
+        const speed = el.getAttribute('data-speed') || 0.2;
+        el.style.transform = `translateY(${scrollPosition * speed}px)`;
+    });
+});
+
+// Interactive cursor effect
+document.addEventListener('mousemove', function(e) {
+    // Create cursor element if it doesn't exist
+    let cursor = document.querySelector('.custom-cursor');
+    
+    if (!cursor) {
+        cursor = document.createElement('div');
+        cursor.className = 'custom-cursor';
+        document.body.appendChild(cursor);
+        
+        // Add CSS for cursor
+        const style = document.createElement('style');
+        style.textContent = `
+            .custom-cursor {
+                position: fixed;
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                background-color: rgba(59, 130, 246, 0.3);
+                mix-blend-mode: difference;
+                pointer-events: none;
+                transform: translate(-50%, -50%);
+                z-index: 9999;
+                transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease;
+            }
+            
+            .cursor-expanded {
+                width: 50px;
+                height: 50px;
+                background-color: rgba(59, 130, 246, 0.2);
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
+    // Update cursor position
+    cursor.style.left = `${e.clientX}px`;
+    cursor.style.top = `${e.clientY}px`;
+});
+
+// Expand cursor over interactive elements
+document.addEventListener('mouseover', function(e) {
+    const cursor = document.querySelector('.custom-cursor');
+    if (!cursor) return;
+    
+    if (e.target.tagName === 'A' || 
+        e.target.tagName === 'BUTTON' || 
+        e.target.classList.contains('card-3d')) {
+        cursor.classList.add('cursor-expanded');
+    }
+});
+
+document.addEventListener('mouseout', function(e) {
+    const cursor = document.querySelector('.custom-cursor');
+    if (!cursor) return;
+    
+    if (e.target.tagName === 'A' || 
+        e.target.tagName === 'BUTTON' || 
+        e.target.classList.contains('card-3d')) {
+        cursor.classList.remove('cursor-expanded');
+    }
+});

events.css

@@ -0,0 +1,146 @@
+/* Navigation Styles */
+.nav-link-about {
+    position: relative;
+}
+
+.nav-link-about::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(to right, #3b82f6, #4f46e5);
+    transition: width 0.3s ease;
+}
+
+.nav-link-about:hover::after {
+    width: 100%;
+}
+
+/* Add top margin to account for fixed navbar */
+body {
+    padding-top: 1rem;
+}
+
+/* Event Card Styles */
+.event-card {
+    transition: all 0.3s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.event-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.event-expand-btn i {
+    transition: transform 0.3s ease;
+}
+
+.event-details {
+    transition: all 0.3s ease;
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+}
+
+.event-details:not(.hidden) {
+    max-height: 1000px;
+    opacity: 1;
+    transition: all 0.5s ease;
+}
+
+/* Calendar Modal Styles */
+#calendarModal {
+    transition: opacity 0.3s ease;
+}
+
+#calendarModal.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+#calendarModal:not(.hidden) {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.calendar-option {
+    transition: all 0.2s ease;
+}
+
+.calendar-option:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Add to Calendar Button Animation */
+.add-to-calendar-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.add-to-calendar-btn::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: all 0.6s ease;
+}
+
+.add-to-calendar-btn:hover::after {
+    left: 100%;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .event-card {
+        margin-bottom: 1.5rem;
+    }
+    
+    .calendar-option {
+        padding: 0.75rem;
+    }
+}
+
+/* Animation for event details */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.event-details:not(.hidden) {
+    animation: fadeIn 0.4s ease forwards;
+}
+
+/* Hover effect for event cards */
+.event-card .h-48 {
+    transition: all 0.3s ease;
+}
+
+.event-card:hover .h-48 {
+    transform: scale(1.03);
+}
+
+/* Footer styling */
+footer a {
+    transition: all 0.2s ease;
+}
+
+footer a:hover {
+    transform: translateY(-2px);
+}
+
+footer input {
+    transition: all 0.3s ease;
+}
+
+footer input:focus {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}

events.html

@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Events - Econovation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./events.css">
+    <link rel="stylesheet" href="creative.css">
+    <base href="./">
+</head>
+<body class="min-h-screen flex flex-col animated-gradient-bg">
+    <!-- Navigation bar removed -->
+
+    <!-- Main Content with top padding for fixed navbar -->
+    <main class="flex-grow container mx-auto px-4 py-8 mt-16">
+        <div class="max-w-6xl mx-auto">
+            <h1 class="text-4xl font-bold text-gray-800 mb-8 text-center">Upcoming Events</h1>
+            <p class="text-lg text-gray-600 mb-12 text-center max-w-3xl mx-auto">Join us for exciting events that bring together economics enthusiasts, innovators, and thought leaders to explore new ideas and create meaningful connections.</p>
+            
+            <!-- Events Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+                <!-- Event 1 -->
+                <div class="event-card glass-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="relative">
+                        <div class="h-48 bg-gradient-to-r from-blue-400 to-indigo-500 flex items-center justify-center">
+                            <i class="fas fa-chalkboard-teacher text-white text-5xl"></i>
+                        </div>
+                        <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 text-sm font-semibold text-indigo-600">
+                            <i class="far fa-calendar-alt mr-1"></i> Oct 15, 2023
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Economic Innovation Workshop</h3>
+                        <p class="text-gray-600 mb-4">A hands-on workshop exploring cutting-edge economic models and their practical applications in today's market.</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
+                            <span><i class="fas fa-map-marker-alt mr-1"></i> Virtual Event</span>
+                            <span><i class="far fa-clock mr-1"></i> 2:00 PM - 4:00 PM</span>
+                        </div>
+                        <button class="event-expand-btn w-full py-2 text-blue-600 font-medium hover:text-blue-800 transition-colors duration-300 focus:outline-none flex items-center justify-center" data-event-id="event1">
+                            <span>View Details</span>
+                            <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
+                        </button>
+                        <div id="event1-details" class="event-details hidden mt-4 pt-4 border-t border-gray-200">
+                            <p class="text-gray-700 mb-4">Join us for an interactive workshop led by industry experts where you'll learn about innovative economic models and how they can be applied to solve real-world problems. This session includes breakout rooms for networking and collaborative exercises.</p>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Speakers:</h4>
+                                <ul class="list-disc pl-5 text-gray-600">
+                                    <li>Dr. Emma Rodriguez - Economic Policy Researcher</li>
+                                    <li>Michael Chen - Fintech Entrepreneur</li>
+                                </ul>
+                            </div>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">What to Bring:</h4>
+                                <p class="text-gray-600">Laptop, notepad, and your questions about economic innovation!</p>
+                            </div>
+                            <button class="add-to-calendar-btn w-full py-2 px-4 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 flex items-center justify-center">
+                                <i class="far fa-calendar-plus mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Event 2 -->
+                <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="relative">
+                        <div class="h-48 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center">
+                            <i class="fas fa-users text-white text-5xl"></i>
+                        </div>
+                        <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 text-sm font-semibold text-teal-600">
+                            <i class="far fa-calendar-alt mr-1"></i> Nov 5, 2023
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Sustainable Economics Forum</h3>
+                        <p class="text-gray-600 mb-4">A gathering of thought leaders discussing the intersection of economics, sustainability, and social responsibility.</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
+                            <span><i class="fas fa-map-marker-alt mr-1"></i> City Conference Center</span>
+                            <span><i class="far fa-clock mr-1"></i> 10:00 AM - 3:00 PM</span>
+                        </div>
+                        <button class="event-expand-btn w-full py-2 text-blue-600 font-medium hover:text-blue-800 transition-colors duration-300 focus:outline-none flex items-center justify-center" data-event-id="event2">
+                            <span>View Details</span>
+                            <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
+                        </button>
+                        <div id="event2-details" class="event-details hidden mt-4 pt-4 border-t border-gray-200">
+                            <p class="text-gray-700 mb-4">This forum brings together economists, environmental scientists, and business leaders to explore sustainable economic practices. The day includes keynote speeches, panel discussions, and networking opportunities.</p>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Agenda:</h4>
+                                <ul class="list-disc pl-5 text-gray-600">
+                                    <li>10:00 AM - Opening Keynote: "The Future of Sustainable Economics"</li>
+                                    <li>11:30 AM - Panel Discussion: "Balancing Profit and Planet"</li>
+                                    <li>1:00 PM - Networking Lunch</li>
+                                    <li>2:00 PM - Breakout Sessions</li>
+                                </ul>
+                            </div>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Registration Fee:</h4>
+                                <p class="text-gray-600">$25 (includes lunch and refreshments)</p>
+                            </div>
+                            <button class="add-to-calendar-btn w-full py-2 px-4 bg-gradient-to-r from-green-500 to-teal-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 flex items-center justify-center">
+                                <i class="far fa-calendar-plus mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Event 3 -->
+                <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="relative">
+                        <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
+                            <i class="fas fa-laptop-code text-white text-5xl"></i>
+                        </div>
+                        <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 text-sm font-semibold text-purple-600">
+                            <i class="far fa-calendar-alt mr-1"></i> Dec 8, 2023
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Fintech Hackathon</h3>
+                        <p class="text-gray-600 mb-4">A 48-hour coding challenge to develop innovative financial technology solutions addressing real economic problems.</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
+                            <span><i class="fas fa-map-marker-alt mr-1"></i> Tech Hub Downtown</span>
+                            <span><i class="far fa-clock mr-1"></i> Starts at 6:00 PM</span>
+                        </div>
+                        <button class="event-expand-btn w-full py-2 text-blue-600 font-medium hover:text-blue-800 transition-colors duration-300 focus:outline-none flex items-center justify-center" data-event-id="event3">
+                            <span>View Details</span>
+                            <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
+                        </button>
+                        <div id="event3-details" class="event-details hidden mt-4 pt-4 border-t border-gray-200">
+                            <p class="text-gray-700 mb-4">This hackathon challenges developers, designers, and economic thinkers to collaborate on creating innovative fintech solutions. Prizes will be awarded for the most promising projects with potential for real-world implementation.</p>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Challenge Tracks:</h4>
+                                <ul class="list-disc pl-5 text-gray-600">
+                                    <li>Financial Inclusion Solutions</li>
+                                    <li>Sustainable Investment Platforms</li>
+                                    <li>Economic Education Tools</li>
+                                </ul>
+                            </div>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Prizes:</h4>
+                                <p class="text-gray-600">$5,000 in total prizes, mentorship opportunities, and potential funding for promising projects</p>
+                            </div>
+                            <button class="add-to-calendar-btn w-full py-2 px-4 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 flex items-center justify-center">
+                                <i class="far fa-calendar-plus mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Event 4 -->
+                <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="relative">
+                        <div class="h-48 bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center">
+                            <i class="fas fa-microphone-alt text-white text-5xl"></i>
+                        </div>
+                        <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 text-sm font-semibold text-orange-600">
+                            <i class="far fa-calendar-alt mr-1"></i> Jan 20, 2024
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Economic Trends Speaker Series</h3>
+                        <p class="text-gray-600 mb-4">Distinguished economists share insights on emerging trends and future economic landscapes in this quarterly speaker series.</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
+                            <span><i class="fas fa-map-marker-alt mr-1"></i> University Auditorium</span>
+                            <span><i class="far fa-clock mr-1"></i> 7:00 PM - 9:00 PM</span>
+                        </div>
+                        <button class="event-expand-btn w-full py-2 text-blue-600 font-medium hover:text-blue-800 transition-colors duration-300 focus:outline-none flex items-center justify-center" data-event-id="event4">
+                            <span>View Details</span>
+                            <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
+                        </button>
+                        <div id="event4-details" class="event-details hidden mt-4 pt-4 border-t border-gray-200">
+                            <p class="text-gray-700 mb-4">Our first speaker series of 2024 features Dr. Sophia Martinez, a leading economist specializing in global market trends. She will discuss how emerging technologies are reshaping economic landscapes and what to expect in the coming decade.</p>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">About the Speaker:</h4>
+                                <p class="text-gray-600">Dr. Martinez is the author of "Economic Frontiers" and has advised numerous Fortune 500 companies and government agencies on economic strategy.</p>
+                            </div>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Admission:</h4>
+                                <p class="text-gray-600">Free for students with ID, $10 general admission</p>
+                            </div>
+                            <button class="add-to-calendar-btn w-full py-2 px-4 bg-gradient-to-r from-yellow-500 to-orange-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 flex items-center justify-center">
+                                <i class="far fa-calendar-plus mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Event 5 -->
+                <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="relative">
+                        <div class="h-48 bg-gradient-to-r from-red-400 to-rose-500 flex items-center justify-center">
+                            <i class="fas fa-handshake text-white text-5xl"></i>
+                        </div>
+                        <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 text-sm font-semibold text-rose-600">
+                            <i class="far fa-calendar-alt mr-1"></i> Feb 12, 2024
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Networking Mixer: Economics Professionals</h3>
+                        <p class="text-gray-600 mb-4">Connect with fellow economics professionals, researchers, and enthusiasts in a relaxed setting with structured networking activities.</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
+                            <span><i class="fas fa-map-marker-alt mr-1"></i> The Grand Hotel</span>
+                            <span><i class="far fa-clock mr-1"></i> 6:30 PM - 9:00 PM</span>
+                        </div>
+                        <button class="event-expand-btn w-full py-2 text-blue-600 font-medium hover:text-blue-800 transition-colors duration-300 focus:outline-none flex items-center justify-center" data-event-id="event5">
+                            <span>View Details</span>
+                            <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
+                        </button>
+                        <div id="event5-details" class="event-details hidden mt-4 pt-4 border-t border-gray-200">
+                            <p class="text-gray-700 mb-4">This curated networking event brings together professionals from various economic sectors. The evening includes structured networking activities, a panel discussion on current economic challenges, and opportunities to form meaningful professional connections.</p>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Includes:</h4>
+                                <ul class="list-disc pl-5 text-gray-600">
+                                    <li>Appetizers and refreshments</li>
+                                    <li>Speed networking session</li>
+                                    <li>Panel: "Navigating Economic Uncertainty"</li>
+                                    <li>Open networking with industry leaders</li>
+                                </ul>
+                            </div>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Registration:</h4>
+                                <p class="text-gray-600">$35 early bird (until Jan 15), $45 regular admission</p>
+                            </div>
+                            <button class="add-to-calendar-btn w-full py-2 px-4 bg-gradient-to-r from-red-500 to-rose-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 flex items-center justify-center">
+                                <i class="far fa-calendar-plus mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Event 6 -->
+                <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                    <div class="relative">
+                        <div class="h-48 bg-gradient-to-r from-cyan-400 to-blue-500 flex items-center justify-center">
+                            <i class="fas fa-graduation-cap text-white text-5xl"></i>
+                        </div>
+                        <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 text-sm font-semibold text-blue-600">
+                            <i class="far fa-calendar-alt mr-1"></i> Mar 8, 2024
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Youth Economics Summit</h3>
+                        <p class="text-gray-600 mb-4">Inspiring the next generation of economic thinkers through workshops, competitions, and mentorship from industry leaders.</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
+                            <span><i class="fas fa-map-marker-alt mr-1"></i> Community College</span>
+                            <span><i class="far fa-clock mr-1"></i> 9:00 AM - 5:00 PM</span>
+                        </div>
+                        <button class="event-expand-btn w-full py-2 text-blue-600 font-medium hover:text-blue-800 transition-colors duration-300 focus:outline-none flex items-center justify-center" data-event-id="event6">
+                            <span>View Details</span>
+                            <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
+                        </button>
+                        <div id="event6-details" class="event-details hidden mt-4 pt-4 border-t border-gray-200">
+                            <p class="text-gray-700 mb-4">This full-day summit is designed for high school and college students interested in economics and finance. Participants will engage in interactive workshops, compete in economic case studies, and connect with mentors who can provide guidance on academic and career paths.</p>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Highlights:</h4>
+                                <ul class="list-disc pl-5 text-gray-600">
+                                    <li>Economic case competition with prizes</li>
+                                    <li>Career panel with diverse economic professionals</li>
+                                    <li>Skill-building workshops</li>
+                                    <li>Networking with potential internship providers</li>
+                                </ul>
+                            </div>
+                            <div class="mb-4">
+                                <h4 class="font-semibold text-gray-800 mb-2">Eligibility:</h4>
+                                <p class="text-gray-600">Open to students ages 16-22, no prior economics experience required</p>
+                            </div>
+                            <button class="add-to-calendar-btn w-full py-2 px-4 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 flex items-center justify-center">
+                                <i class="far fa-calendar-plus mr-2"></i> Add to Calendar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Call to Action -->
+            <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl shadow-lg p-8 text-center">
+                <h2 class="text-2xl font-bold text-white mb-4">Want to Host Your Own Event?</h2>
+                <p class="text-white text-opacity-90 mb-6 max-w-2xl mx-auto">If you're interested in hosting an economics-related event with Econovation, we'd love to hear from you! We can provide resources, speakers, and promotional support.</p>
+                <a href="#" class="inline-block py-3 px-6 bg-white text-indigo-600 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">Contact Our Events Team</a>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">ECONOV<span class="text-blue-400">Δ</span>TION</h3>
+                    <p class="text-gray-400">Transforming economic thinking for a better tomorrow.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="about-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li>
+                        <li><a href="events.html" class="text-gray-400 hover:text-white transition-colors duration-300">Events</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Programs</a></li>
+                        <li><a href="partnerships.html" class="text-gray-400 hover:text-white transition-colors duration-300">Partnerships</a></li>
+                        <li><a href="contact-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-twitter text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-linkedin text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-instagram text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-youtube text-xl"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Subscribe</h4>
+                    <p class="text-gray-400 mb-4">Stay updated with our latest events and news.</p>
+                    <div class="flex">
+                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition-colors duration-300">Subscribe</button>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 Econovation. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Calendar Modal (Hidden by default) -->
+    <div id="calendarModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-gray-800">Add to Calendar</h3>
+                <button id="closeCalendarModal" class="text-gray-500 hover:text-gray-700 focus:outline-none">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div class="mb-6">
+                <p class="text-gray-600 mb-4">Choose your preferred calendar application:</p>
+                <div class="grid grid-cols-2 gap-4">
+                    <a href="#" class="calendar-option flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 transition-colors duration-300">
+                        <i class="fab fa-google text-2xl text-red-500 mb-2"></i>
+                        <span class="text-gray-800">Google Calendar</span>
+                    </a>
+                    <a href="#" class="calendar-option flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 transition-colors duration-300">
+                        <i class="fab fa-apple text-2xl text-gray-800 mb-2"></i>
+                        <span class="text-gray-800">Apple Calendar</span>
+                    </a>
+                    <a href="#" class="calendar-option flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 transition-colors duration-300">
+                        <i class="fab fa-microsoft text-2xl text-blue-500 mb-2"></i>
+                        <span class="text-gray-800">Outlook</span>
+                    </a>
+                    <a href="#" class="calendar-option flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 transition-colors duration-300">
+                        <i class="fas fa-calendar-alt text-2xl text-purple-500 mb-2"></i>
+                        <span class="text-gray-800">Other</span>
+                    </a>
+                </div>
+            </div>
+            <div class="text-center text-gray-600 text-sm">
+                <p>You will be redirected to your calendar application to confirm the event details.</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="main.js"></script>
+<script src="creative.js"></script>
+    <script>
+        // Additional page-specific JavaScript
+        document.addEventListener('DOMContentLoaded', function() {
+            // Mobile menu functionality is now handled by main.js
+            const mobileMenuButton = document.getElementById('mobileMenuButton');
+            const closeMenuButton = document.getElementById('closeMenuButton');
+            const mobileMenu = document.getElementById('mobileMenu');
+            
+            if (mobileMenuButton && closeMenuButton && mobileMenu) {
+                mobileMenuButton.addEventListener('click', function() {
+                    mobileMenu.classList.remove('translate-x-full');
+                });
+                
+                closeMenuButton.addEventListener('click', function() {
+                    mobileMenu.classList.add('translate-x-full');
+                });
+            }
+
+            // Event card expansion functionality
+            const expandButtons = document.querySelectorAll('.event-expand-btn');
+            
+            expandButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const eventId = this.getAttribute('data-event-id');
+                    const detailsSection = document.getElementById(`${eventId}-details`);
+                    const icon = this.querySelector('i');
+                    
+                    detailsSection.classList.toggle('hidden');
+                    icon.classList.toggle('rotate-180');
+                    
+                    if (!detailsSection.classList.contains('hidden')) {
+                        // Smooth scroll to the expanded section
+                        setTimeout(() => {
+                            detailsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        }, 300);
+                    }
+                });
+            });
+
+            // Calendar modal functionality
+            const calendarButtons = document.querySelectorAll('.add-to-calendar-btn');
+            const calendarModal = document.getElementById('calendarModal');
+            const closeCalendarModal = document.getElementById('closeCalendarModal');
+            
+            calendarButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    calendarModal.classList.remove('hidden');
+                    document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
+                });
+            });
+            
+            closeCalendarModal.addEventListener('click', function() {
+                calendarModal.classList.add('hidden');
+                document.body.style.overflow = ''; // Re-enable scrolling
+            });
+            
+            // Close modal when clicking outside
+            calendarModal.addEventListener('click', function(e) {
+                if (e.target === calendarModal) {
+                    calendarModal.classList.add('hidden');
+                    document.body.style.overflow = '';
+                }
+            });
+
+            // Calendar options functionality (in a real app, these would link to actual calendar services)
+            const calendarOptions = document.querySelectorAll('.calendar-option');
+            
+            calendarOptions.forEach(option => {
+                option.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    // In a real implementation, this would generate the appropriate calendar link
+                    alert('In a production environment, this would add the event to your selected calendar.');
+                    calendarModal.classList.add('hidden');
+                    document.body.style.overflow = '';
+                });
+            });
+        });
+    </script>
+</body>
+</html>

index.html

@@ -0,0 +1,391 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Econovation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="creative.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Wide+Latin&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+        
+        :root {
+            --primary-bg: rgb(151, 204, 231);
+            --text-color: #ffffff;
+        }
+        
+        body {
+            background-color: var(--primary-bg);
+            color: var(--text-color);
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        
+        .title-font {
+            font-family: 'Wide Latin', serif;
+            font-weight: 900;
+            letter-spacing: 2px;
+        }
+        
+        .term-font {
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+        }
+        
+        .euro-e {
+            font-family: Arial, sans-serif;
+            display: inline-block;
+            transform: scaleX(0.9);
+        }
+        
+        /* Legacy styles kept for compatibility */
+        .nav-container {
+            backdrop-filter: blur(10px);
+            background-color: rgba(151, 204, 231, 0.85);
+        }
+        
+        /* Enhanced header with glass morphism */
+        header {
+            background: rgba(255, 255, 255, 0.1) !important;
+            backdrop-filter: blur(10px) !important;
+            -webkit-backdrop-filter: blur(10px) !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
+        }
+        
+        /* Animated gradient background for hero section */
+        .hero-section {
+            background: linear-gradient(-45deg, #3b82f6, #4f46e5, #8b5cf6, #2563eb);
+            background-size: 400% 400%;
+            animation: gradient 15s ease infinite;
+        }
+        
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        .nav-link {
+            position: relative;
+            color: var(--text-color);
+        }
+        
+        .nav-link:after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background-color: var(--text-color);
+            transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover:after {
+            width: 100%;
+        }
+        
+        .join-btn {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            transition: all 0.3s ease;
+            background-color: var(--text-color);
+            color: rgb(0, 0, 0);
+        }
+        
+        .join-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        
+        .hero-section {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        /* Animation styles */
+        .animation-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            background-color: white;
+        }
+        
+        .shape {
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--text-color);
+            background-color: var(--primary-bg);
+            opacity: 0;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        
+        .circle {
+            border-radius: 50%;
+            width: 400px;
+            height: 400px;
+            font-size: 5rem;
+        }
+        
+        .rounded-square {
+            border-radius: 25px;
+            width: 500px;
+            height: 400px;
+            font-size: 5rem;
+        }
+        
+        .full-screen {
+            width: 100%;
+            height: 100%;
+            border-radius: 0;
+            opacity: 1;
+            background-color: var(--primary-bg);
+        }
+        
+        .title-container {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.8s ease 0.5s;
+        }
+        
+        .title-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .shape-text {
+            transition: opacity 0.1s ease;
+        }
+        
+        .logo-img {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            border-radius: 50%;
+        }
+        
+        .split-title {
+            display: flex;
+            flex-direction: column;
+            line-height: 1;
+        }
+        
+        .title-top {
+            margin-bottom: 0;
+            font-size: 8rem;
+        }
+        
+        .title-bottom {
+            margin-top: -1rem;
+            font-size: 8rem;
+        }
+        
+        @media (min-width: 768px) {
+            .title-top {
+                font-size: 12rem;
+            }
+            
+            .title-bottom {
+                font-size: 12rem;
+            }
+        }
+        
+        @media (min-width: 1024px) {
+            .title-top {
+                font-size: 15rem;
+            }
+            
+            .title-bottom {
+                font-size: 15rem;
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col animated-gradient-bg">
+    <!-- Animation Container -->
+    <div class="animation-container" id="animationContainer">
+        <div class="shape circle" id="mainShape">
+            <div class="shape-text term-font" id="shapeText"></div>
+        </div>
+    </div>
+
+    <div class="hero-section">
+        <!-- Navigation bar removed -->
+        
+        <!-- Main content starts here -->
+        <header class="navbar fixed w-full z-30 transition-all duration-300 crystal-nav">
+            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+                <a href="index.html" class="flex items-center space-x-2 logo-container">
+                    <span class="font-bold text-xl">ECONOV<span class="text-primary">Δ</span>TION</span>
+                </a>
+                
+                <nav class="hidden md:flex space-x-6 items-center">
+                    <a href="index.html" class="nav-link active animated-border">Home</a>
+                    <a href="about-us.html" class="nav-link animated-border">About Us</a>
+                    <a href="events.html" class="nav-link animated-border">Events</a>
+                    <a href="programs.html" class="nav-link animated-border">Programs</a>
+                    <a href="#" class="nav-link animated-border">Videos</a>
+                    <a href="partnerships.html" class="nav-link animated-border">Partnerships</a>
+                    <a href="contact-us.html" class="nav-link animated-border">Contact Us</a>
+                </nav>
+                
+                <button id="mobileMenuButton" class="md:hidden focus:outline-none">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+            </div>
+        </header>
+        
+        <!-- Mobile Menu -->
+        <div id="mobileMenu" class="fixed inset-0 bg-white z-40 transform translate-x-full transition-transform duration-300 md:hidden">
+            <div class="flex flex-col h-full">
+                <div class="flex justify-between items-center p-4 border-b">
+                    <a href="index.html" class="flex items-center space-x-2">
+                        <span class="font-bold text-xl">ECONOV<span class="text-primary">Δ</span>TION</span>
+                    </a>
+                    <button id="closeMenuButton" class="focus:outline-none">
+                        <i class="fas fa-times text-2xl"></i>
+                    </button>
+                </div>
+                <nav class="flex flex-col py-8 px-4 space-y-4">
+                    <a href="index.html" class="mobile-nav-link active">Home</a>
+                    <a href="about-us.html" class="mobile-nav-link">About Us</a>
+                    <a href="events.html" class="mobile-nav-link">Events</a>
+                    <a href="programs.html" class="mobile-nav-link">Programs</a>
+                    <a href="#" class="mobile-nav-link">Videos</a>
+                    <a href="partnerships.html" class="mobile-nav-link">Partnerships</a>
+                    <a href="contact-us.html" class="mobile-nav-link">Contact Us</a>
+                </nav>
+            </div>
+        </div>
+
+        <div class="flex-grow flex items-center justify-center px-4">
+            <div class="text-center title-container" id="titleContainer">
+                <h1 class="title-font">
+                    <div class="split-title">
+                        <span class="title-top">ECONO</span>
+                        <span class="title-bottom">VΔTION</span>
+                    </div>
+                </h1>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const animationContainer = document.getElementById('animationContainer');
+            const mainShape = document.getElementById('mainShape');
+            const shapeText = document.getElementById('shapeText');
+            const titleContainer = document.getElementById('titleContainer');
+            
+            // Full list of terms including abbreviations
+            const allTerms = [
+                'price', 'cost', 'goods', 'needs', 'wants', 'wealth', 'poor', 'rich', 'scarce', 'trade',
+                'plan', 'spend', 'save', 'grow', 'fall', 'boom', 'bust', 'squeeze', 'curb', 'cap',
+                'firm', 'shop', 'buy', 'sell', 'rent', 'wage', 'pay', 'fee', 'bid', 'ask',
+                'deal', 'swap', 'cart', 'mark', 'brand', 'risk', 'loss', 'gain', 'rate', 'tax',
+                'debt', 'cash', 'fund', 'drop', 'peak', 'slump', 'shock', 'curve', 'base', 'flow',
+                'gap', 'drag', 'lag', 'bank', 'trend', 'zone', 'bond', 'stock', 'share', 'loan',
+                'yield', 'vault', 'coin', 'note', 'bucks', 'gold', 'hedge', 'chip', 'swipe', 'port',
+                'ship', 'tariff', 'dump', 'pact', 'grant', 'aid', 'ban', 'quota', 'block', 'link',
+                'bulk', 'fair', 'lead',
+                // Abbreviations
+                'GDP', 'GNP', 'CPI', 'RPI', 'PED', 'YED', 'XED', 'SR', 'LR', 'AD',
+                'AS', 'PPC', 'MPC', 'MPS', 'MPM', 'MPW', 'MR', 'MC', 'AR', 'AC',
+                'TR', 'TC', 'FC', 'VC', 'VAT', 'FT', 'FDI', 'OMO',  'PPP'
+            ];
+            
+            // Function to get 5 random unique terms
+            function getRandomTerms() {
+                const shuffled = [...allTerms].sort(() => 0.5 - Math.random());
+                return shuffled.slice(0, 5);
+            }
+            
+            const terms = getRandomTerms();
+            let currentTermIndex = 0;
+            
+            // Start animation sequence
+            setTimeout(() => {
+                mainShape.style.opacity = '1';
+                
+                const cycleTerms = () => {
+                    if (currentTermIndex < terms.length - 1) {
+                        // Fade out current text (faster)
+                        shapeText.style.opacity = '0';
+                        
+                        setTimeout(() => {
+                            // Change text and fade in (faster)
+                            shapeText.textContent = terms[currentTermIndex];
+                            shapeText.style.opacity = '1';
+                            currentTermIndex++;
+                            
+                            // Continue cycling until last term with shorter delay
+                            if (currentTermIndex < terms.length) {
+                                setTimeout(cycleTerms, 300);
+                            }
+                        }, 50); // Faster transition
+                    } else {
+                        // For the last term, transform to rounded square
+                        setTimeout(() => {
+                            shapeText.style.opacity = '0';
+                            
+                            setTimeout(() => {
+                                shapeText.textContent = terms[currentTermIndex];
+                                shapeText.style.opacity = '1';
+                                mainShape.classList.remove('circle');
+                                mainShape.classList.add('rounded-square');
+                                
+                                // Then expand to full screen (faster)
+                                setTimeout(() => {
+                                    animationContainer.style.backgroundColor = 'var(--primary-bg)';
+                                    mainShape.classList.add('full-screen');
+                                    titleContainer.classList.add('title-visible');
+                                    
+                                    // Faster disappearance of animation container
+                                    setTimeout(() => {
+                                        animationContainer.style.opacity = '0';
+                                        setTimeout(() => {
+                                            animationContainer.style.display = 'none';
+                                        }, 100);
+                                    }, 300); // Shorter delay before disappearing
+                                }, 300); // Shorter delay before expanding
+                            }, 50); 
+                        }, 300); 
+                    }
+                };
+                
+                // Start cycling through terms with shorter initial delay
+                setTimeout(cycleTerms, 300);
+            }, 200); // Shorter initial delay
+            
+            // Mobile menu functionality
+            const mobileMenuButton = document.getElementById('mobileMenuButton');
+            const closeButton = document.getElementById('closeMenuButton');
+            const mobileMenu = document.getElementById('mobileMenu');
+            
+            mobileMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.remove('translate-x-full');
+            });
+            
+            closeButton.addEventListener('click', function() {
+                mobileMenu.classList.add('translate-x-full');
+            });
+        });
+    </script>
+    <script src="creative.js"></script>
+</body>
+</html>

main.css

@@ -0,0 +1,463 @@
+/* Main CSS for Econovation - Universal Styles */
+
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #3b82f6; /* Blue 600 */
+    --primary-hover: #2563eb; /* Blue 700 */
+    --secondary-color: #4f46e5; /* Indigo 600 */
+    --accent-color: #8b5cf6; /* Violet 500 */
+    --text-dark: #1e293b; /* Slate 800 */
+    --text-light: #f8fafc; /* Slate 50 */
+    --bg-light: #f8fafc; /* Slate 50 */
+    --bg-dark: #1e293b; /* Slate 800 */
+    --gray-100: #f3f4f6;
+    --gray-200: #e5e7eb;
+    --gray-300: #d1d5db;
+    --gray-400: #9ca3af;
+    --gray-500: #6b7280;
+    --gray-600: #4b5563;
+    --gray-700: #374151;
+    --gray-800: #1f2937;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Base Styles */
+body {
+    font-family: 'Poppins', 'Inter', sans-serif;
+    margin: 0;
+    padding: 0;
+    color: var(--text-dark);
+    background-color: var(--bg-light);
+    overflow-x: hidden;
+}
+
+/* Universal Navigation Bar */
+.econov-navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+/* Gradient Navigation Bar - Alternative Style */
+.gradient-nav {
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.gradient-nav .nav-link {
+    color: white !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.gradient-nav .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background-color: white;
+    transition: width 0.3s ease;
+}
+
+.gradient-nav .nav-link:hover::after {
+    width: 100%;
+}
+
+.econov-navbar.scrolled {
+    box-shadow: var(--shadow-md);
+}
+
+.econov-navbar .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.econov-navbar .logo {
+    display: flex;
+    align-items: center;
+}
+
+.econov-navbar .logo img {
+    height: 40px;
+    margin-right: 0.5rem;
+}
+
+.econov-navbar .logo-text {
+    font-weight: 700;
+    font-size: 1.25rem;
+    color: var(--text-dark);
+    text-decoration: none;
+}
+
+.econov-navbar .logo-text span {
+    color: var(--primary-color);
+}
+
+.econov-navbar .nav-links {
+    display: flex;
+    gap: 2rem;
+}
+
+.econov-navbar .nav-link {
+    position: relative;
+    color: var(--text-dark);
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.5rem 0;
+    transition: color 0.3s ease;
+}
+
+.econov-navbar .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+    transition: width 0.3s ease;
+}
+
+.econov-navbar .nav-link:hover {
+    color: var(--primary-color);
+}
+
+.econov-navbar .nav-link:hover::after,
+.econov-navbar .nav-link.active::after {
+    width: 100%;
+}
+
+.econov-navbar .nav-link.active {
+    color: var(--primary-color);
+}
+
+.econov-navbar .mobile-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-dark);
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+/* Mobile Menu */
+.econov-mobile-menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 80%;
+    max-width: 300px;
+    background-color: white;
+    z-index: 1001;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    box-shadow: var(--shadow-lg);
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.econov-mobile-menu.open {
+    transform: translateX(0);
+}
+
+.econov-mobile-menu .close-btn {
+    align-self: flex-end;
+    background: none;
+    border: none;
+    color: var(--text-dark);
+    font-size: 1.5rem;
+    cursor: pointer;
+    margin-bottom: 2rem;
+}
+
+.econov-mobile-menu .mobile-nav-links {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.econov-mobile-menu .nav-link {
+    color: var(--text-dark);
+    text-decoration: none;
+    font-size: 1.125rem;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.econov-mobile-menu .nav-link:hover,
+.econov-mobile-menu .nav-link.active {
+    color: var(--primary-color);
+}
+
+.econov-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.econov-overlay.open {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .econov-navbar .nav-links {
+        display: none;
+    }
+    
+    .econov-navbar .mobile-toggle {
+        display: block;
+    }
+    
+    .econov-navbar .container {
+        padding: 0.75rem 1rem;
+    }
+}
+
+/* Main Content Padding (to account for fixed navbar) */
+main {
+    padding-top: 80px;
+}
+
+/* Button Styles */
+.econov-btn {
+    display: inline-block;
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.econov-btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.econov-btn-primary:hover {
+    background-color: var(--primary-hover);
+    transform: translateY(-2px);
+}
+
+.econov-btn-outline {
+    background-color: transparent;
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+}
+
+.econov-btn-outline:hover {
+    background-color: var(--primary-color);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Section Styles */
+.section {
+    padding: 4rem 2rem;
+}
+
+.section-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.section-subtitle {
+    font-size: 1.125rem;
+    color: var(--gray-600);
+    margin-bottom: 2.5rem;
+    text-align: center;
+}
+
+/* Container */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+/* Card Styles */
+.card {
+    background-color: white;
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-md);
+}
+
+/* Footer Styles */
+.econov-footer {
+    background-color: var(--bg-dark);
+    color: var(--text-light);
+    padding: 3rem 2rem;
+}
+
+.econov-footer .container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+}
+
+.econov-footer .footer-logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+.econov-footer .footer-logo span {
+    color: var(--primary-color);
+}
+
+.econov-footer .footer-section h3 {
+    font-size: 1.125rem;
+    margin-bottom: 1.25rem;
+    position: relative;
+    display: inline-block;
+}
+
+.econov-footer .footer-section h3::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 40px;
+    height: 2px;
+    background-color: var(--primary-color);
+}
+
+.econov-footer .footer-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.econov-footer .footer-links li {
+    margin-bottom: 0.75rem;
+}
+
+.econov-footer .footer-links a {
+    color: var(--gray-300);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.econov-footer .footer-links a:hover {
+    color: var(--primary-color);
+}
+
+.econov-footer .social-links {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.econov-footer .social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: var(--gray-700);
+    color: var(--text-light);
+    transition: all 0.3s ease;
+}
+
+.econov-footer .social-link:hover {
+    background-color: var(--primary-color);
+    transform: translateY(-3px);
+}
+
+.econov-footer .newsletter-form {
+    display: flex;
+    margin-top: 1rem;
+}
+
+.econov-footer .newsletter-input {
+    flex: 1;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.25rem 0 0 0.25rem;
+    font-size: 0.875rem;
+}
+
+.econov-footer .newsletter-btn {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 0 0.25rem 0.25rem 0;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.econov-footer .newsletter-btn:hover {
+    background-color: var(--primary-hover);
+}
+
+.econov-footer .copyright {
+    text-align: center;
+    padding-top: 2rem;
+    margin-top: 2rem;
+    border-top: 1px solid var(--gray-700);
+    color: var(--gray-400);
+    font-size: 0.875rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.fade-in {
+    animation: fadeIn 0.5s ease forwards;
+}
+
+.slide-up {
+    animation: slideUp 0.5s ease forwards;
+}

main.js

@@ -0,0 +1,91 @@
+// Econovation Main JavaScript
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Elements
+    const navbar = document.querySelector('.econov-navbar');
+    const mobileToggle = document.querySelector('.mobile-toggle');
+    const mobileMenu = document.querySelector('.econov-mobile-menu');
+    const closeBtn = document.querySelector('.close-btn');
+    const overlay = document.querySelector('.econov-overlay');
+    
+    // Set active nav link based on current page
+    const currentPage = window.location.pathname.split('/').pop();
+    const navLinks = document.querySelectorAll('.nav-link');
+    
+    navLinks.forEach(link => {
+        const href = link.getAttribute('href');
+        if (href === currentPage || 
+            (currentPage === '' && href === 'index.html') ||
+            (currentPage === '/' && href === 'index.html')) {
+            link.classList.add('active');
+        }
+    });
+    
+    // Navbar scroll effect
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 10) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+    
+    // Mobile menu toggle
+    if (mobileToggle) {
+        mobileToggle.addEventListener('click', function() {
+            mobileMenu.classList.add('open');
+            overlay.classList.add('open');
+            document.body.style.overflow = 'hidden'; // Prevent scrolling when menu is open
+        });
+    }
+    
+    // Close mobile menu
+    if (closeBtn) {
+        closeBtn.addEventListener('click', closeMenu);
+    }
+    
+    // Close menu when clicking overlay
+    if (overlay) {
+        overlay.addEventListener('click', closeMenu);
+    }
+    
+    function closeMenu() {
+        mobileMenu.classList.remove('open');
+        overlay.classList.remove('open');
+        document.body.style.overflow = ''; // Restore scrolling
+    }
+    
+    // Close menu when pressing escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && mobileMenu.classList.contains('open')) {
+            closeMenu();
+        }
+    });
+    
+    // Smooth scroll for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return; // Skip if it's just '#'
+            
+            e.preventDefault();
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                // Close mobile menu if it's open
+                if (mobileMenu && mobileMenu.classList.contains('open')) {
+                    closeMenu();
+                }
+                
+                // Scroll to the element
+                const navbarHeight = navbar ? navbar.offsetHeight : 0;
+                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+});

partnerships.css

@@ -0,0 +1,67 @@
+/* Partnerships Page Specific Styles */
+
+/* Partnership Card Hover Effects */
+.partnership-card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.partnership-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Form Input Focus Effects */
+.form-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+}
+
+/* Partner Logo Hover Effects */
+.partner-logo {
+    transition: all 0.3s ease;
+    filter: grayscale(100%);
+}
+
+.partner-logo:hover {
+    filter: grayscale(0%);
+    transform: scale(1.05);
+}
+
+/* Contact Person Card */
+.contact-card {
+    transition: transform 0.3s ease;
+}
+
+.contact-card:hover {
+    transform: translateY(-5px);
+}
+
+/* Custom Navigation Link for Partnerships Page */
+.nav-link-partnerships {
+    position: relative;
+    color: white;
+    text-decoration: none;
+    padding-bottom: 5px;
+}
+
+.nav-link-partnerships::after {
+    content: '';
+    position: absolute;
+    width: 100%; /* Always show underline for active page */
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .partnership-section {
+        flex-direction: column;
+    }
+    
+    .contact-section {
+        flex-direction: column;
+    }
+}

partnerships.html

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Partnerships | Econovation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="partnerships.css">
+    <link rel="stylesheet" href="creative.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Wide+Latin&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+        
+        :root {
+            --primary-bg: rgb(151, 204, 231);
+            --text-color: #ffffff;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            background-color: #f8f9fa;
+            color: #333;
+        }
+        
+        /* Legacy styles kept for compatibility */
+        .nav-container {
+            backdrop-filter: blur(10px);
+            background-color: rgba(151, 204, 231, 0.85);
+        }
+        
+        /* Enhanced header with glass morphism */
+        header {
+            background: rgba(255, 255, 255, 0.1) !important;
+            backdrop-filter: blur(10px) !important;
+            -webkit-backdrop-filter: blur(10px) !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
+        }
+    </style>
+</head>
+<body class="animated-gradient-bg">
+    <!-- Navigation bar removed -->
+    
+    <!-- Main content starts here -->
+    <main class="py-12">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto">
+                <!-- Page Header -->
+                <div class="text-center mb-12">
+                    <h1 class="text-4xl font-bold text-gray-800 mb-4">Partnership & Collaboration</h1>
+                    <p class="text-xl text-gray-600">Join forces with Econovation to create economic impact</p>
+                </div>
+
+                <!-- Partnership Information -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12">
+                    <div class="md:flex">
+                        <div class="md:w-1/3 bg-gradient-to-br from-blue-500 to-indigo-600 p-8 text-white flex flex-col justify-center">
+                            <h2 class="text-2xl font-bold mb-4">Why Partner With Us?</h2>
+                            <ul class="space-y-3">
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle mt-1 mr-2"></i>
+                                    <span>Access to our network of economics enthusiasts</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle mt-1 mr-2"></i>
+                                    <span>Co-branded events and initiatives</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle mt-1 mr-2"></i>
+                                    <span>Shared research and educational resources</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle mt-1 mr-2"></i>
+                                    <span>Increased visibility in the economics community</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="md:w-2/3 p-8">
+                            <h2 class="text-2xl font-bold text-gray-800 mb-6">Partnership Opportunities</h2>
+                            <div class="space-y-6">
+                                <div class="border-l-4 border-blue-500 pl-4">
+                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Educational Partnerships</h3>
+                                    <p class="text-gray-600">Collaborate on workshops, seminars, and educational content to promote economic literacy.</p>
+                                </div>
+                                <div class="border-l-4 border-green-500 pl-4">
+                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Research Collaborations</h3>
+                                    <p class="text-gray-600">Join forces on research projects exploring economic trends, policies, and innovations.</p>
+                                </div>
+                                <div class="border-l-4 border-purple-500 pl-4">
+                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Event Sponsorships</h3>
+                                    <p class="text-gray-600">Sponsor or co-host events, competitions, and conferences focused on economics.</p>
+                                </div>
+                                <div class="border-l-4 border-yellow-500 pl-4">
+                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Content Partnerships</h3>
+                                    <p class="text-gray-600">Create co-branded content, publications, and digital resources.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Contact Section -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12">
+                    <div class="p-8">
+                        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Get in Touch</h2>
+                        <div class="md:flex items-center">
+                            <!-- Contact Person -->
+                            <div class="md:w-1/2 mb-8 md:mb-0 flex flex-col items-center">
+                                <div class="w-40 h-40 rounded-full overflow-hidden mb-4 bg-gray-200 flex items-center justify-center">
+                                    <i class="fas fa-user-tie text-6xl text-gray-400"></i>
+                                </div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-1">Alex Johnson</h3>
+                                <p class="text-gray-600 mb-2">Partnerships Director</p>
+                                <div class="flex space-x-3 mb-4">
+                                    <a href="#" class="text-blue-600 hover:text-blue-800 transition-colors duration-300">
+                                        <i class="fab fa-linkedin text-xl"></i>
+                                    </a>
+                                    <a href="mailto:partnerships@econovation.org" class="text-red-500 hover:text-red-700 transition-colors duration-300">
+                                        <i class="fas fa-envelope text-xl"></i>
+                                    </a>
+                                </div>
+                                <p class="text-gray-600 text-center">If you would like to propose an idea for future partnership, promotion, sponsorship or other form of collaboration with Econovation, please contact our Partnerships Director.</p>
+                            </div>
+
+                            <!-- Contact Form -->
+                            <div class="md:w-1/2 md:pl-8">
+                                <form class="space-y-4">
+                                    <div>
+                                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
+                                        <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300" required>
+                                    </div>
+                                    <div>
+                                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
+                                        <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300" required>
+                                    </div>
+                                    <div>
+                                        <label for="organization" class="block text-sm font-medium text-gray-700 mb-1">Organization</label>
+                                        <input type="text" id="organization" name="organization" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300">
+                                    </div>
+                                    <div>
+                                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Partnership Idea</label>
+                                        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300" required></textarea>
+                                    </div>
+                                    <button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">Submit Partnership Inquiry</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Current Partners Section -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="p-8">
+                        <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Our Current Partners</h2>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                            <!-- Partner logos would go here -->
+                            <div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg glass-card">
+                                <span class="text-gray-400 text-sm">Partner Logo</span>
+                            </div>
+                            <div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg">
+                                <span class="text-gray-400 text-sm">Partner Logo</span>
+                            </div>
+                            <div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg">
+                                <span class="text-gray-400 text-sm">Partner Logo</span>
+                            </div>
+                            <div class="flex items-center justify-center h-24 bg-gray-100 rounded-lg">
+                                <span class="text-gray-400 text-sm">Partner Logo</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">ECONOV<span class="text-blue-400">Δ</span>TION</h3>
+                    <p class="text-gray-400">Transforming economic thinking for a better tomorrow.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="about-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li>
+                        <li><a href="events.html" class="text-gray-400 hover:text-white transition-colors duration-300">Events</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Programs</a></li>
+                        <li><a href="partnerships.html" class="text-gray-400 hover:text-white transition-colors duration-300">Partnerships</a></li>
+                        <li><a href="contact-us.html" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-twitter text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-linkedin text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-instagram text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"><i class="fab fa-youtube text-xl"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Subscribe</h4>
+                    <p class="text-gray-400 mb-4">Stay updated with our latest events and news.</p>
+                    <div class="flex">
+                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition-colors duration-300">Subscribe</button>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 Econovation. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+    <script src="creative.js"></script>
+    <script>
+        // Mobile menu functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const mobileMenuButton = document.getElementById('mobileMenuButton');
+            const closeMenuButton = document.getElementById('closeMenuButton');
+            const mobileMenu = document.getElementById('mobileMenu');
+            
+            mobileMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.remove('translate-x-full');
+            });
+            
+            closeMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.add('translate-x-full');
+            });
+        });
+    </script>
+</body>
+</html>

programs.css

@@ -0,0 +1,252 @@
+/* Programs Page Specific Styles */
+
+/* Hero Section */
+.hero-section {
+    position: relative;
+    padding: 8rem 0;
+    overflow: hidden;
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+    background-size: cover;
+    background-position: center;
+    opacity: 0.15;
+    z-index: -1;
+}
+
+/* Program Cards */
+.program-card {
+    height: 100%;
+}
+
+.program-card-inner {
+    background-color: white;
+    border-radius: 0.75rem;
+    box-shadow: var(--shadow);
+    padding: 2rem;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.program-card-inner:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow-lg);
+}
+
+.program-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.program-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: var(--text-dark);
+}
+
+.program-description {
+    color: var(--gray-600);
+    margin-bottom: 1.5rem;
+    flex-grow: 1;
+}
+
+.program-details {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.program-detail {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--gray-500);
+    font-size: 0.875rem;
+}
+
+.program-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--primary-color);
+    font-weight: 500;
+    text-decoration: none;
+    transition: gap 0.3s ease;
+}
+
+.program-link:hover {
+    gap: 0.75rem;
+}
+
+/* Curriculum Section */
+.curriculum-image {
+    height: 100%;
+    min-height: 400px;
+}
+
+.curriculum-item {
+    display: flex;
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.curriculum-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    flex-shrink: 0;
+}
+
+/* Testimonials */
+.testimonials-slider {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.testimonial-card {
+    background-color: white;
+    border-radius: 0.75rem;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    height: 100%;
+}
+
+.testimonial-content {
+    padding: 2rem;
+}
+
+.testimonial-text {
+    color: var(--gray-700);
+    font-style: italic;
+    margin-bottom: 1.5rem;
+    position: relative;
+}
+
+.testimonial-text::before {
+    content: '"';
+    font-size: 3rem;
+    color: var(--gray-200);
+    position: absolute;
+    top: -1.5rem;
+    left: -0.5rem;
+    z-index: 0;
+}
+
+.testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.testimonial-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.testimonial-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.testimonial-name {
+    font-weight: 600;
+    color: var(--text-dark);
+    margin-bottom: 0.25rem;
+}
+
+.testimonial-role {
+    color: var(--gray-500);
+    font-size: 0.875rem;
+}
+
+/* FAQ Section */
+.faq-item {
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.faq-question {
+    width: 100%;
+    text-align: left;
+    padding: 1.5rem 0;
+    background: none;
+    border: none;
+    font-size: 1.125rem;
+    font-weight: 500;
+    color: var(--text-dark);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.faq-icon {
+    transition: transform 0.3s ease;
+}
+
+.faq-question[aria-expanded="true"] .faq-icon {
+    transform: rotate(180deg);
+}
+
+.faq-answer {
+    padding: 0 0 1.5rem;
+    color: var(--gray-600);
+    display: none;
+}
+
+.faq-answer.active {
+    display: block;
+    animation: fadeIn 0.5s ease;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 6rem 0;
+    }
+    
+    .curriculum-image {
+        min-height: 300px;
+    }
+    
+    .curriculum-item {
+        gap: 1rem;
+    }
+    
+    .curriculum-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+    }
+}
+
+@media (max-width: 640px) {
+    .testimonials-slider {
+        grid-template-columns: 1fr;
+    }
+}

programs.html

@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Programs | Econovation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="programs.css">
+    <link rel="stylesheet" href="creative.css">
+</head>
+<body class="animated-gradient-bg">
+    <!-- Navigation bar removed -->
+    
+    <!-- Hero Section -->
+    <section class="hero-section bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4 slide-up">Our Educational Programs</h1>
+            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 slide-up">Empowering the next generation of economic thinkers and innovators</p>
+            <a href="#programs" class="econov-btn econov-btn-outline text-white border-white hover:bg-white hover:text-blue-700 slide-up">Explore Programs</a>
+        </div>
+    </section>
+    
+    <!-- Programs Overview -->
+    <section id="programs" class="section bg-gray-50">
+        <div class="container">
+            <h2 class="section-title">Our Programs</h2>
+            <p class="section-subtitle">Discover our comprehensive range of educational initiatives designed to foster economic understanding and innovation</p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
+                <!-- Program Card 1 -->
+                <div class="program-card glass-card">
+                    <div class="program-card-inner">
+                        <div class="program-icon bg-blue-100 text-blue-600">
+                            <i class="fas fa-graduation-cap"></i>
+                        </div>
+                        <h3 class="program-title">Economic Literacy</h3>
+                        <p class="program-description">Foundation course covering essential economic principles, market dynamics, and financial literacy for beginners.</p>
+                        <div class="program-details">
+                            <div class="program-detail">
+                                <i class="fas fa-clock"></i>
+                                <span>8 Weeks</span>
+                            </div>
+                            <div class="program-detail">
+                                <i class="fas fa-user-graduate"></i>
+                                <span>Beginner</span>
+                            </div>
+                        </div>
+                        <a href="#" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
+                    </div>
+                </div>
+                
+                <!-- Program Card 2 -->
+                <div class="program-card">
+                    <div class="program-card-inner">
+                        <div class="program-icon bg-green-100 text-green-600">
+                            <i class="fas fa-chart-line"></i>
+                        </div>
+                        <h3 class="program-title">Sustainable Economics</h3>
+                        <p class="program-description">Explore the intersection of economics and sustainability, focusing on green policies and circular economy models.</p>
+                        <div class="program-details">
+                            <div class="program-detail">
+                                <i class="fas fa-clock"></i>
+                                <span>10 Weeks</span>
+                            </div>
+                            <div class="program-detail">
+                                <i class="fas fa-user-graduate"></i>
+                                <span>Intermediate</span>
+                            </div>
+                        </div>
+                        <a href="#" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
+                    </div>
+                </div>
+                
+                <!-- Program Card 3 -->
+                <div class="program-card">
+                    <div class="program-card-inner">
+                        <div class="program-icon bg-purple-100 text-purple-600">
+                            <i class="fas fa-lightbulb"></i>
+                        </div>
+                        <h3 class="program-title">Innovation & Entrepreneurship</h3>
+                        <p class="program-description">Develop entrepreneurial skills and learn how to transform economic insights into viable business ventures.</p>
+                        <div class="program-details">
+                            <div class="program-detail">
+                                <i class="fas fa-clock"></i>
+                                <span>12 Weeks</span>
+                            </div>
+                            <div class="program-detail">
+                                <i class="fas fa-user-graduate"></i>
+                                <span>Advanced</span>
+                            </div>
+                        </div>
+                        <a href="#" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
+                    </div>
+                </div>
+                
+                <!-- Program Card 4 -->
+                <div class="program-card">
+                    <div class="program-card-inner">
+                        <div class="program-icon bg-yellow-100 text-yellow-600">
+                            <i class="fas fa-globe-americas"></i>
+                        </div>
+                        <h3 class="program-title">Global Economics</h3>
+                        <p class="program-description">Analyze international trade, global markets, and cross-border economic relationships in our interconnected world.</p>
+                        <div class="program-details">
+                            <div class="program-detail">
+                                <i class="fas fa-clock"></i>
+                                <span>10 Weeks</span>
+                            </div>
+                            <div class="program-detail">
+                                <i class="fas fa-user-graduate"></i>
+                                <span>Intermediate</span>
+                            </div>
+                        </div>
+                        <a href="#" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
+                    </div>
+                </div>
+                
+                <!-- Program Card 5 -->
+                <div class="program-card">
+                    <div class="program-card-inner">
+                        <div class="program-icon bg-red-100 text-red-600">
+                            <i class="fas fa-calculator"></i>
+                        </div>
+                        <h3 class="program-title">Quantitative Economics</h3>
+                        <p class="program-description">Master data analysis, statistical methods, and econometric modeling to solve complex economic problems.</p>
+                        <div class="program-details">
+                            <div class="program-detail">
+                                <i class="fas fa-clock"></i>
+                                <span>14 Weeks</span>
+                            </div>
+                            <div class="program-detail">
+                                <i class="fas fa-user-graduate"></i>
+                                <span>Advanced</span>
+                            </div>
+                        </div>
+                        <a href="#" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
+                    </div>
+                </div>
+                
+                <!-- Program Card 6 -->
+                <div class="program-card">
+                    <div class="program-card-inner">
+                        <div class="program-icon bg-indigo-100 text-indigo-600">
+                            <i class="fas fa-users"></i>
+                        </div>
+                        <h3 class="program-title">Economic Policy & Governance</h3>
+                        <p class="program-description">Examine how economic policies are developed, implemented, and their impact on society and markets.</p>
+                        <div class="program-details">
+                            <div class="program-detail">
+                                <i class="fas fa-clock"></i>
+                                <span>12 Weeks</span>
+                            </div>
+                            <div class="program-detail">
+                                <i class="fas fa-user-graduate"></i>
+                                <span>Intermediate</span>
+                            </div>
+                        </div>
+                        <a href="#" class="program-link">Learn More <i class="fas fa-arrow-right"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Curriculum Section -->
+    <section class="section bg-white">
+        <div class="container">
+            <h2 class="section-title">Our Curriculum Approach</h2>
+            <p class="section-subtitle">We combine theoretical knowledge with practical applications to provide a comprehensive learning experience</p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-12">
+                <div class="curriculum-image rounded-lg overflow-hidden shadow-lg">
+                    <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Students learning" class="w-full h-full object-cover">
+                </div>
+                
+                <div class="curriculum-content">
+                    <div class="curriculum-item">
+                        <div class="curriculum-icon">
+                            <i class="fas fa-book"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">Theoretical Foundations</h3>
+                            <p class="text-gray-600">Build a solid understanding of economic principles, theories, and models that form the basis of economic thinking.</p>
+                        </div>
+                    </div>
+                    
+                    <div class="curriculum-item">
+                        <div class="curriculum-icon">
+                            <i class="fas fa-hands-helping"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">Practical Applications</h3>
+                            <p class="text-gray-600">Apply theoretical knowledge to real-world scenarios through case studies, simulations, and project-based learning.</p>
+                        </div>
+                    </div>
+                    
+                    <div class="curriculum-item">
+                        <div class="curriculum-icon">
+                            <i class="fas fa-comments"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">Critical Discourse</h3>
+                            <p class="text-gray-600">Engage in thoughtful discussions and debates to develop critical thinking and analytical skills.</p>
+                        </div>
+                    </div>
+                    
+                    <div class="curriculum-item">
+                        <div class="curriculum-icon">
+                            <i class="fas fa-project-diagram"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold mb-2">Interdisciplinary Approach</h3>
+                            <p class="text-gray-600">Explore connections between economics and other fields such as psychology, sociology, and environmental science.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Testimonials Section -->
+    <section class="section bg-gray-50">
+        <div class="container">
+            <h2 class="section-title">What Our Students Say</h2>
+            <p class="section-subtitle">Hear from participants who have experienced our programs</p>
+            
+            <div class="testimonials-slider mt-12">
+                <!-- Testimonial 1 -->
+                <div class="testimonial-card">
+                    <div class="testimonial-content">
+                        <p class="testimonial-text">"The Economic Literacy program provided me with a solid foundation in economic principles that I use daily in my business decisions. The instructors were knowledgeable and supportive throughout the course."</p>
+                        <div class="testimonial-author">
+                            <div class="testimonial-avatar">
+                                <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson">
+                            </div>
+                            <div>
+                                <h4 class="testimonial-name">Sarah Johnson</h4>
+                                <p class="testimonial-role">Small Business Owner</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Testimonial 2 -->
+                <div class="testimonial-card">
+                    <div class="testimonial-content">
+                        <p class="testimonial-text">"The Sustainable Economics program changed my perspective on how economic systems can be redesigned to benefit both people and the planet. I'm now working on implementing these principles in my community."</p>
+                        <div class="testimonial-author">
+                            <div class="testimonial-avatar">
+                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
+                            </div>
+                            <div>
+                                <h4 class="testimonial-name">Michael Chen</h4>
+                                <p class="testimonial-role">Environmental Consultant</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Testimonial 3 -->
+                <div class="testimonial-card">
+                    <div class="testimonial-content">
+                        <p class="testimonial-text">"The Innovation & Entrepreneurship program gave me the tools and confidence to launch my startup. The mentorship and network I gained have been invaluable to my journey as an entrepreneur."</p>
+                        <div class="testimonial-author">
+                            <div class="testimonial-avatar">
+                                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Aisha Patel">
+                            </div>
+                            <div>
+                                <h4 class="testimonial-name">Aisha Patel</h4>
+                                <p class="testimonial-role">Tech Startup Founder</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Call to Action -->
+    <section class="section bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+        <div class="container text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Start Your Learning Journey?</h2>
+            <p class="text-xl max-w-3xl mx-auto mb-8">Join our programs and become part of a community dedicated to economic innovation and positive change.</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#programs" class="econov-btn econov-btn-outline text-white border-white hover:bg-white hover:text-blue-700">Explore Programs</a>
+                <a href="contact-us.html" class="econov-btn econov-btn-primary bg-white text-blue-700 hover:bg-gray-100">Contact Us</a>
+            </div>
+        </div>
+    </section>
+    
+    <!-- FAQ Section -->
+    <section class="section bg-white">
+        <div class="container">
+            <h2 class="section-title">Frequently Asked Questions</h2>
+            <p class="section-subtitle">Find answers to common questions about our programs</p>
+            
+            <div class="max-w-3xl mx-auto mt-12">
+                <!-- FAQ Item 1 -->
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>What are the prerequisites for joining your programs?</span>
+                        <i class="fas fa-chevron-down faq-icon"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Most of our beginner programs have no specific prerequisites other than a general interest in economics and a willingness to learn. For intermediate and advanced programs, we recommend having basic knowledge of economic principles or completing our foundational courses first. Each program page lists specific requirements.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 2 -->
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Are the programs offered online or in-person?</span>
+                        <i class="fas fa-chevron-down faq-icon"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>We offer both online and in-person options for most of our programs. Our online courses provide flexibility for remote learning, while our in-person sessions offer hands-on experience and direct interaction with instructors and peers. Some programs may be available in hybrid formats as well.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 3 -->
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>How much time commitment is required for each program?</span>
+                        <i class="fas fa-chevron-down faq-icon"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Time commitments vary by program. Beginner courses typically require 3-5 hours per week, while intermediate and advanced programs may require 5-10 hours weekly. Each program page provides specific information about the expected time commitment, including class hours and independent study time.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 4 -->
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Are there any scholarships or financial aid available?</span>
+                        <i class="fas fa-chevron-down faq-icon"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Yes, we offer scholarships and financial aid options for eligible participants. We believe in making quality economic education accessible to all. Please visit our Financial Aid page or contact our admissions team for more information about application requirements and deadlines.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 5 -->
+                <div class="faq-item">
+                    <button class="faq-question">
+                        <span>Will I receive a certificate upon completion?</span>
+                        <i class="fas fa-chevron-down faq-icon"></i>
+                    </button>
+                    <div class="faq-answer">
+                        <p>Yes, all participants who successfully complete our programs receive a digital certificate of completion. Some of our advanced programs also offer professional certifications that are recognized in the industry. The specific credentials are detailed on each program page.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Footer -->
+    <footer class="econov-footer">
+        <div class="container">
+            <div class="footer-section">
+                <div class="footer-logo">ECONOV<span>Δ</span>TION</div>
+                <p class="mb-4">Empowering economic innovation and education for a sustainable future.</p>
+                <div class="social-links">
+                    <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
+                    <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+            
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul class="footer-links">
+                    <li><a href="about-us.html">About Us</a></li>
+                    <li><a href="events.html">Events</a></li>
+                    <li><a href="programs.html">Programs</a></li>
+                    <li><a href="#">Videos</a></li>
+                    <li><a href="partnerships.html">Partnerships</a></li>
+                    <li><a href="contact-us.html">Contact Us</a></li>
+                </ul>
+            </div>
+            
+            <div class="footer-section">
+                <h3>Programs</h3>
+                <ul class="footer-links">
+                    <li><a href="#">Economic Literacy</a></li>
+                    <li><a href="#">Sustainable Economics</a></li>
+                    <li><a href="#">Innovation & Entrepreneurship</a></li>
+                    <li><a href="#">Global Economics</a></li>
+                    <li><a href="#">Quantitative Economics</a></li>
+                    <li><a href="#">Economic Policy & Governance</a></li>
+                </ul>
+            </div>
+            
+            <div class="footer-section">
+                <h3>Stay Updated</h3>
+                <p class="mb-4">Subscribe to our newsletter for the latest updates on programs, events, and economic insights.</p>
+                <form class="newsletter-form">
+                    <input type="email" placeholder="Your email address" class="newsletter-input" required>
+                    <button type="submit" class="newsletter-btn">Subscribe</button>
+                </form>
+            </div>
+        </div>
+        
+        <div class="copyright">
+            <p>&copy; 2023 Econovation. All rights reserved.</p>
+        </div>
+    </footer>
+    
+    <script src="main.js"></script>
+    <script src="programs.js"></script>
+    <script src="creative.js"></script>
+</body>
+</html>

programs.js

@@ -0,0 +1,61 @@
+// Programs Page JavaScript
+
+document.addEventListener('DOMContentLoaded', function() {
+    // FAQ Accordion
+    const faqQuestions = document.querySelectorAll('.faq-question');
+    
+    faqQuestions.forEach(question => {
+        question.addEventListener('click', function() {
+            const answer = this.nextElementSibling;
+            const isExpanded = this.getAttribute('aria-expanded') === 'true';
+            
+            // Close all other answers
+            document.querySelectorAll('.faq-answer').forEach(item => {
+                if (item !== answer) {
+                    item.classList.remove('active');
+                }
+            });
+            
+            document.querySelectorAll('.faq-question').forEach(item => {
+                if (item !== this) {
+                    item.setAttribute('aria-expanded', 'false');
+                }
+            });
+            
+            // Toggle current answer
+            if (isExpanded) {
+                answer.classList.remove('active');
+                this.setAttribute('aria-expanded', 'false');
+            } else {
+                answer.classList.add('active');
+                this.setAttribute('aria-expanded', 'true');
+            }
+        });
+    });
+    
+    // Initialize the first FAQ item as open
+    if (faqQuestions.length > 0) {
+        faqQuestions[0].setAttribute('aria-expanded', 'true');
+        faqQuestions[0].nextElementSibling.classList.add('active');
+    }
+    
+    // Animate elements when they come into view
+    const animateOnScroll = function() {
+        const elements = document.querySelectorAll('.program-card, .curriculum-item, .testimonial-card');
+        
+        elements.forEach(element => {
+            const elementPosition = element.getBoundingClientRect().top;
+            const windowHeight = window.innerHeight;
+            
+            if (elementPosition < windowHeight - 100) {
+                element.classList.add('fade-in');
+            }
+        });
+    };
+    
+    // Run once on page load
+    animateOnScroll();
+    
+    // Run on scroll
+    window.addEventListener('scroll', animateOnScroll);
+});

style.css

@@ -0,0 +1,28 @@
+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;
+}