wtf im a contractor for construcgtion and tech/web site infastructor

components/footer.js

@@ -116,8 +116,8 @@ class CustomFooter extends HTMLElement {
         <div class="container">
           <div class="footer-grid">
             <div class="footer-column">
-              <h3>LawConnect</h3>
-              <p>Providing expert legal services with integrity and dedication since 2003. We're committed to achieving the best possible outcomes for our clients.</p>
+              <h3>ConstructionTech Solutions</h3>
+              <p>Specialized construction and technology infrastructure services for commercial and industrial clients. Building the future, one project at a time.</p>
               <div class="social-links">
                 <a href="#"><i data-feather="facebook"></i></a>
                 <a href="#"><i data-feather="twitter"></i></a>
@@ -127,14 +127,14 @@ class CustomFooter extends HTMLElement {
             </div>
             
             <div class="footer-column">
-              <h3>Practice Areas</h3>
+              <h3>Services</h3>
               <ul>
-                <li><a href="#">Corporate Law</a></li>
-                <li><a href="#">Real Estate Law</a></li>
-                <li><a href="#">Family Law</a></li>
-                <li><a href="#">Criminal Defense</a></li>
-                <li><a href="#">Personal Injury</a></li>
-                <li><a href="#">Estate Planning</a></li>
+                <li><a href="#">Commercial Construction</a></li>
+                <li><a href="#">Data Center Infrastructure</a></li>
+                <li><a href="#">Network Infrastructure</a></li>
+                <li><a href="#">Industrial Facilities</a></li>
+                <li><a href="#">Smart Building Systems</a></li>
+                <li><a href="#">Maintenance & Support</a></li>
               </ul>
             </div>
             
@@ -142,25 +142,25 @@ class CustomFooter extends HTMLElement {
               <h3>Contact Us</h3>
               <div class="contact-info">
                 <i data-feather="map-pin"></i>
-                <span>123 Legal Avenue, Suite 100<br>New York, NY 10001</span>
+                <span>456 Industrial Blvd, Suite 200<br>Chicago, IL 60601</span>
               </div>
               <div class="contact-info">
                 <i data-feather="phone"></i>
-                <span>(123) 456-7890</span>
+                <span>(312) 555-7890</span>
               </div>
               <div class="contact-info">
                 <i data-feather="mail"></i>
-                <span>info@lawconnect.com</span>
+                <span>info@constructiontech.com</span>
               </div>
               <div class="contact-info">
                 <i data-feather="clock"></i>
-                <span>Mon-Fri: 9AM - 6PM</span>
+                <span>Mon-Fri: 8AM - 6PM</span>
               </div>
             </div>
           </div>
           
           <div class="copyright">
-            <p>&copy; 2023 LawConnect Legal Services. All rights reserved.</p>
+            <p>&copy; 2023 ConstructionTech Solutions. All rights reserved.</p>
           </div>
         </div>
       </footer>
@@ -170,7 +170,9 @@ class CustomFooter extends HTMLElement {
     const featherScript = document.createElement('script');
     featherScript.src = 'https://unpkg.com/feather-icons';
     featherScript.onload = () => {
-      feather.replace();
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
     };
     this.shadowRoot.appendChild(featherScript);
   }

components/header.js

@@ -110,12 +110,12 @@ class CustomHeader extends HTMLElement {
       <header class="header">
         <div class="container">
           <div class="nav-container">
-            <a href="/" class="logo">Law<span>Connect</span></a>
+            <a href="/" class="logo">Construction<span>Tech</span></a>
             
             <ul class="nav-links">
               <li><a href="/">Home</a></li>
               <li><a href="#services">Services</a></li>
-              <li><a href="#about">About</a></li>
+              <li><a href="#projects">Projects</a></li>
               <li><a href="#contact">Contact</a></li>
             </ul>
             
@@ -130,7 +130,7 @@ class CustomHeader extends HTMLElement {
             <ul>
               <li><a href="/">Home</a></li>
               <li><a href="#services">Services</a></li>
-              <li><a href="#about">About</a></li>
+              <li><a href="#projects">Projects</a></li>
               <li><a href="#contact">Contact</a></li>
             </ul>
           </div>

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LawConnect Legal Services</title>
+    <title>ConstructionTech Solutions - Building the Future</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -16,8 +16,8 @@
         <!-- Hero Section -->
         <section class="relative bg-gradient-to-r from-blue-900 to-indigo-900 text-white py-20 md:py-32">
             <div class="container mx-auto px-4 text-center">
-                <h1 class="text-4xl md:text-6xl font-playfair font-bold mb-6">Expert Legal Solutions</h1>
-                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10">Trusted legal representation for individuals and businesses across all practice areas</p>
+                <h1 class="text-4xl md:text-6xl font-playfair font-bold mb-6">Building Infrastructure for Tomorrow</h1>
+                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10">Expert construction and technology solutions for commercial and industrial projects</p>
                 <div class="flex flex-col sm:flex-row justify-center gap-4">
                     <a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-8 rounded-lg transition duration-300">Get Free Consultation</a>
                     <a href="#services" class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-900 text-white font-bold py-3 px-8 rounded-lg transition duration-300">Our Services</a>
@@ -29,62 +29,62 @@
         <section id="services" class="py-20 bg-gray-50">
             <div class="container mx-auto px-4">
                 <div class="text-center mb-16">
-                    <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-900 mb-4">Our Legal Services</h2>
-                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive legal solutions tailored to your specific needs</p>
+                    <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-900 mb-4">Our Specialized Services</h2>
+                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive solutions for construction and technology infrastructure</p>
                 </div>
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-amber-500">
                         <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-6">
-                            <i data-feather="briefcase" class="text-amber-600 w-8 h-8"></i>
+                            <i data-feather="hard-hat" class="text-amber-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Corporate Law</h3>
-                        <p class="text-gray-600 mb-6">Business formation, contracts, compliance, and corporate governance for companies of all sizes.</p>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Commercial Construction</h3>
+                        <p class="text-gray-600 mb-6">End-to-end commercial building construction with project management and quality assurance.</p>
                         <a href="#" class="text-amber-600 font-semibold flex items-center">Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
                     </div>
                     
                     <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-amber-500">
                         <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-6">
-                            <i data-feather="home" class="text-amber-600 w-8 h-8"></i>
+                            <i data-feather="server" class="text-amber-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Real Estate Law</h3>
-                        <p class="text-gray-600 mb-6">Property transactions, zoning issues, landlord-tenant disputes, and title disputes.</p>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Data Center Infrastructure</h3>
+                        <p class="text-gray-600 mb-6">Design and build mission-critical data center facilities with redundant systems.</p>
                         <a href="#" class="text-amber-600 font-semibold flex items-center">Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
                     </div>
                     
                     <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-amber-500">
                         <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-6">
-                            <i data-feather="users" class="text-amber-600 w-8 h-8"></i>
+                            <i data-feather="wifi" class="text-amber-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Family Law</h3>
-                        <p class="text-gray-600 mb-6">Divorce, child custody, adoption, and domestic relations matters with compassionate guidance.</p>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Network Infrastructure</h3>
+                        <p class="text-gray-600 mb-6">Structured cabling, fiber optic installation, and wireless network deployment.</p>
                         <a href="#" class="text-amber-600 font-semibold flex items-center">Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
                     </div>
                     
                     <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-amber-500">
                         <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-6">
-                            <i data-feather="shield" class="text-amber-600 w-8 h-8"></i>
+                            <i data-feather="home" class="text-amber-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Criminal Defense</h3>
-                        <p class="text-gray-600 mb-6">Strong defense against criminal charges with experienced attorneys fighting for your rights.</p>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Industrial Facilities</h3>
+                        <p class="text-gray-600 mb-6">Specialized construction for manufacturing plants, warehouses, and processing facilities.</p>
                         <a href="#" class="text-amber-600 font-semibold flex items-center">Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
                     </div>
                     
                     <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-amber-500">
                         <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-6">
-                            <i data-feather="heart" class="text-amber-600 w-8 h-8"></i>
+                            <i data-feather="cpu" class="text-amber-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Personal Injury</h3>
-                        <p class="text-gray-600 mb-6">Compensation for injuries caused by negligence with dedicated representation.</p>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Smart Building Systems</h3>
+                        <p class="text-gray-600 mb-6">Integration of IoT, automation, and building management systems.</p>
                         <a href="#" class="text-amber-600 font-semibold flex items-center">Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
                     </div>
                     
                     <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-amber-500">
                         <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-6">
-                            <i data-feather="file-text" class="text-amber-600 w-8 h-8"></i>
+                            <i data-feather="tool" class="text-amber-600 w-8 h-8"></i>
                         </div>
-                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Estate Planning</h3>
-                        <p class="text-gray-600 mb-6">Wills, trusts, probate, and estate administration to protect your legacy.</p>
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Maintenance & Support</h3>
+                        <p class="text-gray-600 mb-6">Ongoing maintenance, upgrades, and 24/7 technical support for all systems.</p>
                         <a href="#" class="text-amber-600 font-semibold flex items-center">Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></a>
                     </div>
                 </div>
@@ -96,11 +96,11 @@
             <div class="container mx-auto px-4">
                 <div class="flex flex-col lg:flex-row items-center gap-12">
                     <div class="lg:w-1/2">
-                        <img src="http://static.photos/office/1200x630/42" alt="Legal team" class="rounded-xl shadow-lg">
+                        <img src="http://static.photos/construction/1200x630/42" alt="Construction project" class="rounded-xl shadow-lg">
                     </div>
                     <div class="lg:w-1/2">
-                        <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-900 mb-6">Why Choose LawConnect</h2>
-                        <p class="text-gray-600 text-lg mb-8">With over 20 years of experience, our team of legal experts provides personalized solutions tailored to your unique situation. We combine deep legal knowledge with a commitment to client success.</p>
+                        <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-900 mb-6">Why Choose ConstructionTech</h2>
+                        <p class="text-gray-600 text-lg mb-8">With over 15 years of experience, we combine construction expertise with cutting-edge technology to deliver projects on time and within budget.</p>
                         
                         <div class="space-y-6">
                             <div class="flex items-start">
@@ -110,8 +110,8 @@
                                     </div>
                                 </div>
                                 <div class="ml-4">
-                                    <h3 class="text-xl font-bold text-gray-900">Proven Track Record</h3>
-                                    <p class="text-gray-600 mt-2">Successful outcomes in thousands of cases across multiple practice areas</p>
+                                    <h3 class="text-xl font-bold text-gray-900">Certified Professionals</h3>
+                                    <p class="text-gray-600 mt-2">Licensed contractors and certified technicians with industry expertise</p>
                                 </div>
                             </div>
                             
@@ -122,8 +122,8 @@
                                     </div>
                                 </div>
                                 <div class="ml-4">
-                                    <h3 class="text-xl font-bold text-gray-900">Personalized Attention</h3>
-                                    <p class="text-gray-600 mt-2">Direct access to experienced attorneys who understand your specific needs</p>
+                                    <h3 class="text-xl font-bold text-gray-900">Quality Assurance</h3>
+                                    <p class="text-gray-600 mt-2">Rigorous quality control processes and safety standards compliance</p>
                                 </div>
                             </div>
                             
@@ -134,8 +134,8 @@
                                     </div>
                                 </div>
                                 <div class="ml-4">
-                                    <h3 class="text-xl font-bold text-gray-900">Transparent Communication</h3>
-                                    <p class="text-gray-600 mt-2">Clear explanations of legal processes and regular updates on your case</p>
+                                    <h3 class="text-xl font-bold text-gray-900">End-to-End Solutions</h3>
+                                    <p class="text-gray-600 mt-2">From planning to completion, we manage all aspects of your project</p>
                                 </div>
                             </div>
                         </div>
@@ -144,86 +144,47 @@
             </div>
         </section>
 
-        <!-- Testimonials -->
+        <!-- Projects -->
         <section class="py-20 bg-gray-50">
             <div class="container mx-auto px-4">
                 <div class="text-center mb-16">
-                    <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-900 mb-4">Client Testimonials</h2>
-                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear what our clients have to say about our legal services</p>
+                    <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-900 mb-4">Recent Projects</h2>
+                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">Showcasing our expertise in construction and technology infrastructure</p>
                 </div>
                 
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div class="bg-white p-8 rounded-xl shadow-lg">
-                        <div class="flex items-center mb-6">
-                            <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
-                                <i data-feather="star" class="text-amber-500 w-6 h-6"></i>
-                            </div>
-                            <div class="ml-4">
-                                <div class="flex text-amber-400">
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <p class="text-gray-600 mb-6 italic">"The team at LawConnect helped me navigate a complex business dispute. Their expertise and dedication resulted in a favorable outcome that exceeded my expectations."</p>
-                        <div class="flex items-center">
-                            <div class="w-12 h-12 rounded-full bg-gray-300"></div>
-                            <div class="ml-4">
-                                <h4 class="font-bold text-gray-900">Michael Thompson</h4>
-                                <p class="text-gray-600">Corporate Client</p>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                        <img src="http://static.photos/industry/640x360/123" alt="Data Center" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise Data Center</h3>
+                            <p class="text-gray-600 mb-4">25,000 sq ft facility with redundant power and cooling systems</p>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded">Data Center</span>
+                                <span class="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded">Infrastructure</span>
                             </div>
                         </div>
                     </div>
                     
-                    <div class="bg-white p-8 rounded-xl shadow-lg">
-                        <div class="flex items-center mb-6">
-                            <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
-                                <i data-feather="star" class="text-amber-500 w-6 h-6"></i>
-                            </div>
-                            <div class="ml-4">
-                                <div class="flex text-amber-400">
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <p class="text-gray-600 mb-6 italic">"After my accident, I was overwhelmed with medical bills and lost wages. LawConnect fought for my rights and secured a settlement that covered all my expenses and more."</p>
-                        <div class="flex items-center">
-                            <div class="w-12 h-12 rounded-full bg-gray-300"></div>
-                            <div class="ml-4">
-                                <h4 class="font-bold text-gray-900">Sarah Johnson</h4>
-                                <p class="text-gray-600">Personal Injury Client</p>
+                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                        <img src="http://static.photos/cityscape/640x360/456" alt="Office Building" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold text-gray-900 mb-2">Corporate Headquarters</h3>
+                            <p class="text-gray-600 mb-4">15-story office building with smart building automation</p>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded">Commercial</span>
+                                <span class="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded">Smart Building</span>
                             </div>
                         </div>
                     </div>
                     
-                    <div class="bg-white p-8 rounded-xl shadow-lg">
-                        <div class="flex items-center mb-6">
-                            <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
-                                <i data-feather="star" class="text-amber-500 w-6 h-6"></i>
-                            </div>
-                            <div class="ml-4">
-                                <div class="flex text-amber-400">
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                    <i data-feather="star" class="w-5 h-5"></i>
-                                </div>
-                            </div>
-                        </div>
-                        <p class="text-gray-600 mb-6 italic">"During my divorce proceedings, LawConnect provided compassionate yet firm representation. They guided me through every step and achieved the best possible outcome for my family."</p>
-                        <div class="flex items-center">
-                            <div class="w-12 h-12 rounded-full bg-gray-300"></div>
-                            <div class="ml-4">
-                                <h4 class="font-bold text-gray-900">Robert Chen</h4>
-                                <p class="text-gray-600">Family Law Client</p>
+                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                        <img src="http://static.photos/industry/640x360/789" alt="Manufacturing Plant" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold text-gray-900 mb-2">Automotive Manufacturing</h3>
+                            <p class="text-gray-600 mb-4">500,000 sq ft assembly plant with specialized infrastructure</p>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded">Industrial</span>
+                                <span class="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded">Process Systems</span>
                             </div>
                         </div>
                     </div>
@@ -234,13 +195,13 @@
         <!-- Contact CTA -->
         <section id="contact" class="py-20 bg-gradient-to-r from-blue-900 to-indigo-900 text-white">
             <div class="container mx-auto px-4 text-center">
-                <h2 class="text-3xl md:text-4xl font-playfair font-bold mb-6">Ready to Get Started?</h2>
-                <p class="text-xl max-w-3xl mx-auto mb-10">Schedule your free consultation today and let us help you navigate your legal challenges</p>
+                <h2 class="text-3xl md:text-4xl font-playfair font-bold mb-6">Ready to Start Your Project?</h2>
+                <p class="text-xl max-w-3xl mx-auto mb-10">Contact us today for a free consultation and project assessment</p>
                 <div class="flex flex-col sm:flex-row justify-center gap-4">
                     <a href="tel:+11234567890" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center justify-center">
                         <i data-feather="phone" class="mr-2"></i> Call Now
                     </a>
-                    <a href="mailto:info@lawconnect.com" class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-900 text-white font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center justify-center">
+                    <a href="mailto:info@constructiontech.com" class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-900 text-white font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center justify-center">
                         <i data-feather="mail" class="mr-2"></i> Email Us
                     </a>
                 </div>
@@ -256,6 +217,5 @@
     <script>
         feather.replace();
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -1,20 +1,21 @@
 // Mobile menu toggle
 document.addEventListener('DOMContentLoaded', function() {
-    const mobileMenuButton = document.getElementById('mobile-menu-button');
-    const mobileMenu = document.getElementById('mobile-menu');
-    
-    if (mobileMenuButton && mobileMenu) {
-        mobileMenuButton.addEventListener('click', function() {
-            mobileMenu.classList.toggle('hidden');
-        });
-    }
-    
     // Close mobile menu when clicking outside
     document.addEventListener('click', function(event) {
-        if (mobileMenu && !mobileMenu.contains(event.target) && 
-            mobileMenuButton && !mobileMenuButton.contains(event.target)) {
-            mobileMenu.classList.add('hidden');
-        }
+        const mobileMenus = document.querySelectorAll('.mobile-menu');
+        const mobileButtons = document.querySelectorAll('.mobile-menu-button');
+        
+        mobileMenus.forEach(menu => {
+            const button = Array.from(mobileButtons).find(btn => 
+                btn.getRootNode() === menu.getRootNode()
+            );
+            
+            if (menu.classList.contains('active') && 
+                !menu.contains(event.target) && 
+                button && !button.contains(event.target)) {
+                menu.classList.remove('active');
+            }
+        });
     });
 });
 
@@ -34,4 +35,8 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 });
 
 // Feather icons initialization
-feather.replace();
+document.addEventListener('DOMContentLoaded', function() {
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+});