add telecom, fire protection and fire alarm design services to website

index.html

@@ -149,9 +149,8 @@
                     From conceptual design to commissioning, we deliver integrated solutions for complex facilities.
                 </p>
             </div>
-            
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <div class="service-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300">
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+<div class="service-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300">
                     <div class="text-blue-600 mb-6">
                         <i data-feather="droplet" class="w-10 h-10"></i>
                     </div>
@@ -228,8 +227,47 @@
                         Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                     </a>
                 </div>
+
+                <div class="service-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300">
+                    <div class="text-blue-600 mb-6">
+                        <i data-feather="wifi" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Telecom Systems</h3>
+                    <p class="text-gray-600 mb-4">
+                        Structured cabling, data networks, and communication systems for mission-critical facilities.
+                    </p>
+                    <a href="#" class="text-blue-600 font-medium flex items-center">
+                        Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+
+                <div class="service-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300">
+                    <div class="text-blue-600 mb-6">
+                        <i data-feather="shield" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Fire Protection</h3>
+                    <p class="text-gray-600 mb-4">
+                        Special hazard suppression systems, fire pumps, and sprinkler design for critical environments.
+                    </p>
+                    <a href="#" class="text-blue-600 font-medium flex items-center">
+                        Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+
+                <div class="service-card bg-white p-8 rounded-xl border border-gray-100 transition duration-300">
+                    <div class="text-blue-600 mb-6">
+                        <i data-feather="bell" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Fire Alarm Systems</h3>
+                    <p class="text-gray-600 mb-4">
+                        Code-compliant detection and notification systems with integration to building automation.
+                    </p>
+                    <a href="#" class="text-blue-600 font-medium flex items-center">
+                        Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
             </div>
-        </div>
+</div>
     </section>
 
     <!-- CTA Section -->
@@ -278,9 +316,12 @@
                         <li><a href="#" class="text-gray-400 hover:text-white transition">Cleanroom Design</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition">HVAC Systems</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition">Process Piping</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Commissioning</a></li>
-                    </ul>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Electrical Systems</a></li>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Commissioning</a></li>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Telecom Systems</a></li>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Fire Protection</a></li>
+                    <li><a href="#" class="text-gray-400 hover:text-white transition">Fire Alarm Systems</a></li>
+</ul>
                 </div>
                 
                 <div>