Copa Waters - Navbar<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n dark: '#0f172a',\r\n blue: '#0284c7',\r\n light: '#38bdf8',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n min-height: 200vh;\r\n background-color: #f8fafc;\r\n }\r\n\r\n \/* Elegant Link Underline *\/\r\n .nav-link {\r\n position: relative;\r\n }\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n background-color: #0284c7;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .nav-link:hover::after,\r\n .nav-link.active::after {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Dropdown Animation *\/\r\n .dropdown-content {\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(10px);\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .group:hover .dropdown-content {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Two-column dropdown grid *\/\r\n .services-dropdown {\r\n width: 560px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(10px);\r\n }\r\n .group:hover .services-dropdown {\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n \/* Mobile Menu Drawer *\/\r\n #mobile-menu {\r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n #mobile-overlay {\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n \/* Hamburger Animation *\/\r\n .hamburger span {\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n transform-origin: center;\r\n }\r\n .hamburger.open span:nth-child(1) {\r\n transform: translateY(7px) rotate(45deg);\r\n }\r\n .hamburger.open span:nth-child(2) {\r\n opacity: 0;\r\n }\r\n .hamburger.open span:nth-child(3) {\r\n transform: translateY(-7px) rotate(-45deg);\r\n }\r\n\r\n \/* Mobile Accordion *\/\r\n .mobile-dropdown-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.4s ease;\r\n }\r\n .mobile-dropdown.open .mobile-dropdown-content {\r\n max-height: 600px;\r\n }\r\n .mobile-dropdown .chevron {\r\n transition: transform 0.3s ease;\r\n }\r\n .mobile-dropdown.open .chevron {\r\n transform: rotate(180deg);\r\n }\r\n\r\n \/* Divider in dropdown *\/\r\n .dropdown-divider {\r\n height: 1px;\r\n background: #f1f5f9;\r\n margin: 4px 16px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased text-slate-800\">\r\n\r\n \r\n <div class=\"bg-brand-dark text-slate-300 py-2.5 px-4 sm:px-6 lg:px-8 text-xs font-medium relative z-[60]\">\r\n <div class=\"max-w-7xl mx-auto flex justify-between items-center\">\r\n \r\n <div class=\"hidden lg:flex items-center gap-8\">\r\n <a href=\"mailto:info@copawaters.co.ke\" class=\"flex items-center gap-2 hover:text-white transition-colors\">\r\n <i class=\"fa-regular fa-envelope text-brand-light\"><\/i> info@copawaters.co.ke\r\n <\/a>\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fa-regular fa-clock text-brand-light\"><\/i> Mon - Fri: 8:00 AM - 5:00 PM\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fa-solid fa-location-dot text-brand-light\"><\/i> Nairobi, Kenya\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lg:hidden flex items-center justify-center w-full sm:w-auto\">\r\n <a href=\"mailto:info@copawaters.co.ke\" class=\"flex items-center gap-2 hover:text-white transition-colors\">\r\n <i class=\"fa-regular fa-envelope text-brand-light\"><\/i> info@copawaters.co.ke\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hidden sm:flex items-center\">\r\n <a href=\"\/contact-us\" class=\"bg-brand-blue hover:bg-sky-500 text-white px-5 py-1.5 rounded-full font-semibold transition-all duration-300 flex items-center gap-2 hover:shadow-[0_0_15px_rgba(2,132,199,0.4)] hover:-translate-y-0.5\">\r\n Consult Experts <i class=\"fa-solid fa-arrow-right text-[10px] mt-0.5\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <header class=\"bg-white\/90 backdrop-blur-md border-b border-slate-200 sticky top-0 z-50 shadow-sm\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between items-center h-20\">\r\n \r\n \r\n <a href=\"\/\" class=\"flex items-center gap-3 group\">\r\n <div class=\"w-10 h-10 bg-gradient-to-br from-brand-blue to-blue-900 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:scale-105 group-hover:-rotate-3 transition-transform duration-300\">\r\n <i class=\"fa-solid fa-droplet text-lg\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col leading-none\">\r\n <span class=\"font-extrabold text-xl text-brand-dark tracking-tight uppercase\">Copa <span class=\"text-brand-blue\">Waters<\/span><\/span>\r\n <span class=\"text-[9px] font-bold text-slate-500 tracking-[0.2em] uppercase mt-1\">Expert Solutions<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n \r\n <nav class=\"hidden lg:flex items-center gap-7\">\r\n <a href=\"\/\" class=\"nav-link active text-sm font-semibold text-brand-dark hover:text-brand-blue transition-colors\">Home<\/a>\r\n <a href=\"\/copawaters\/about-us\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">About Us<\/a>\r\n \r\n \r\n <div class=\"relative group py-8\">\r\n <button class=\"nav-link text-sm font-semibold text-slate-600 group-hover:text-brand-blue transition-colors flex items-center gap-1.5\">\r\n Services <i class=\"fa-solid fa-chevron-down text-[9px] transition-transform duration-300 group-hover:rotate-180\"><\/i>\r\n <\/button>\r\n \r\n \r\n <div class=\"dropdown-content services-dropdown absolute top-[70px] bg-white rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] border border-slate-100 py-3 overflow-hidden\">\r\n \r\n \r\n <div class=\"px-5 pb-2 pt-1\">\r\n <p class=\"text-[10px] font-bold text-slate-400 uppercase tracking-[0.18em]\">Our Services<\/p>\r\n <\/div>\r\n <div class=\"dropdown-divider\"><\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-x-2 px-3 py-2\">\r\n\r\n <a href=\"\/copawaters\/borehole-drilling\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-arrows-down-to-line text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Borehole Drilling<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/hydrogeological-surveys\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-magnifying-glass-location text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Hydrogeological Surveys<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/pump-installation\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-faucet-drip text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Pump Installation<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/water-treatment\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-flask text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Water Testing & Quality<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/water-treatment\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-droplet text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Water Treatment Solutions<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/borehole-rehabilitation-maintenance\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-wrench text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Borehole Rehabilitation<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/casing-and-grouting\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-layer-group text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Casing & Grouting<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/tank-storage-system-installation\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-tank-water text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Tank & Storage Systems<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/irrigation-system-setup\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-seedling text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Irrigation System Setup<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/consultation-permitting-support\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-file-contract text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Consultation & Permitting<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"dropdown-divider mt-1\"><\/div>\r\n <div class=\"px-5 pt-2 pb-1\">\r\n <a href=\"\/copawaters\/services\" class=\"text-xs font-bold text-brand-blue hover:text-sky-500 flex items-center gap-1.5 transition-colors\">\r\n View All Services <i class=\"fa-solid fa-arrow-right text-[9px]\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <a href=\"\/copawaters\/equipment-technology\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors whitespace-nowrap\">Equipment & Tech<\/a>\r\n\r\n <a href=\"\/copawaters\/projects\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">Projects<\/a>\r\n <a href=\"\/copawaters\/faq\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">FAQ<\/a>\r\n <a href=\"\/copawaters\/contact-us\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">Contact<\/a>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hidden lg:flex items-center gap-2\">\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white transition-all\"><i class=\"fa-brands fa-facebook-f text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white transition-all\"><i class=\"fa-brands fa-instagram text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white transition-all\"><i class=\"fa-brands fa-youtube text-sm\"><\/i><\/a>\r\n <\/div>\r\n\r\n \r\n <button id=\"hamburger-btn\" class=\"lg:hidden hamburger flex flex-col justify-center items-center w-10 h-10 z-[60] focus:outline-none\">\r\n <span class=\"w-6 h-0.5 bg-brand-dark rounded-full mb-1.5\"><\/span>\r\n <span class=\"w-6 h-0.5 bg-brand-dark rounded-full mb-1.5\"><\/span>\r\n <span class=\"w-6 h-0.5 bg-brand-dark rounded-full\"><\/span>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"mobile-overlay\" class=\"fixed inset-0 bg-brand-dark\/50 backdrop-blur-sm z-50 opacity-0 pointer-events-none\"><\/div>\r\n\r\n <div id=\"mobile-menu\" class=\"fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-50 translate-x-full overflow-y-auto flex flex-col\">\r\n \r\n <div class=\"flex items-center justify-between p-6 border-b border-slate-100\">\r\n <span class=\"font-bold text-lg text-brand-dark\">Menu<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 px-6 py-8 flex flex-col gap-5\">\r\n <a href=\"\/\" class=\"text-base font-bold text-brand-blue\">Home<\/a>\r\n <a href=\"\/copawaters\/about-us\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">About Us<\/a>\r\n \r\n \r\n <div class=\"mobile-dropdown cursor-pointer\">\r\n <div class=\"flex items-center justify-between text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\" onclick=\"this.parentElement.classList.toggle('open')\">\r\n Services <i class=\"fa-solid fa-chevron-down text-xs chevron\"><\/i>\r\n <\/div>\r\n <div class=\"mobile-dropdown-content mt-4 flex flex-col gap-3 pl-4 border-l-2 border-slate-100\">\r\n <a href=\"\/copawaters\/borehole-drilling\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-arrows-down-to-line w-4 text-slate-400 text-xs\"><\/i> Borehole Drilling\r\n <\/a>\r\n <a href=\"\/copawaters\/hydrogeological-surveys\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-magnifying-glass-location w-4 text-slate-400 text-xs\"><\/i> Hydrogeological Surveys\r\n <\/a>\r\n <a href=\"\/copawaters\/pump-installation\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-faucet-drip w-4 text-slate-400 text-xs\"><\/i> Pump Installation\r\n <\/a>\r\n <a href=\"\/copawaters\/water-treatment\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-flask w-4 text-slate-400 text-xs\"><\/i> Water Testing & Quality\r\n <\/a>\r\n <a href=\"\/copawaters\/water-treatment\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-droplet w-4 text-slate-400 text-xs\"><\/i> Water Treatment Solutions\r\n <\/a>\r\n <a href=\"\/copawaters\/borehole-rehabilitation-maintenance\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-wrench w-4 text-slate-400 text-xs\"><\/i> Borehole Rehabilitation\r\n <\/a>\r\n <a href=\"\/copawaters\/casing-and-grouting\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-layer-group w-4 text-slate-400 text-xs\"><\/i> Casing & Grouting\r\n <\/a>\r\n <a href=\"\/copawaters\/tank-storage-system-installation\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-tank-water w-4 text-slate-400 text-xs\"><\/i> Tank & Storage Systems\r\n <\/a>\r\n <a href=\"\/copawaters\/irrigation-system-setup\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-seedling w-4 text-slate-400 text-xs\"><\/i> Irrigation System Setup\r\n <\/a>\r\n <a href=\"\/copawaters\/consultation-permitting-support\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-file-contract w-4 text-slate-400 text-xs\"><\/i> Consultation & Permitting\r\n <\/a>\r\n <a href=\"\/copawaters\/services\" class=\"text-xs font-bold text-brand-blue flex items-center gap-1 mt-1\">\r\n View All Services <i class=\"fa-solid fa-arrow-right text-[9px]\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"\/copawaters\/equipment-technology\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">Equipment & Technology<\/a>\r\n <a href=\"\/copawaters\/projects\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">Projects<\/a>\r\n <a href=\"\/copawaters\/faq\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">FAQ<\/a>\r\n <a href=\"\/copawaters\/contact-us\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">Contact<\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 bg-slate-50 border-t border-slate-100 mt-auto\">\r\n <a href=\"\/copawaters\/contact-us\" class=\"w-full block text-center bg-brand-blue text-white font-bold py-3 rounded-xl mb-6 shadow-md\">Consult Experts<\/a>\r\n <div class=\"flex items-center justify-center gap-4\">\r\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-white shadow flex items-center justify-center text-slate-600\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-white shadow flex items-center justify-center text-slate-600\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-white shadow flex items-center justify-center text-slate-600\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n const hamburgerBtn = document.getElementById('hamburger-btn');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n const mobileOverlay = document.getElementById('mobile-overlay');\r\n let isMenuOpen = false;\r\n\r\n function toggleMobileMenu() {\r\n isMenuOpen = !isMenuOpen;\r\n if (isMenuOpen) {\r\n hamburgerBtn.classList.add('open');\r\n mobileMenu.style.transform = 'translateX(0)';\r\n mobileOverlay.style.opacity = '1';\r\n mobileOverlay.style.pointerEvents = 'auto';\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n hamburgerBtn.classList.remove('open');\r\n mobileMenu.style.transform = 'translateX(100%)';\r\n mobileOverlay.style.opacity = '0';\r\n mobileOverlay.style.pointerEvents = 'none';\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n\r\n hamburgerBtn.addEventListener('click', toggleMobileMenu);\r\n mobileOverlay.addEventListener('click', toggleMobileMenu);\r\n\r\n window.addEventListener(\"resize\", () => {\r\n if (window.innerWidth >= 1024 && isMenuOpen) {\r\n toggleMobileMenu();\r\n }\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9b95c0f e-con e-atomic-element e-flexbox-base e-9b95c0f-6277c3d \" data-id=\"9b95c0f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9b95c0f\">\n \t\t<div class=\"elementor-element elementor-element-1464f01 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"1464f01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\"\/>\r\n <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n <title>Our Projects - COPA Water Experts<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brandBlue: '#0072b5', \/* Official COPA Waters Brand Blue *\/\r\n brandDark: '#0f172a',\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-900 font-sans antialiased selection:bg-brandBlue selection:text-white\">\r\n\r\n <header class=\"relative h-[450px] md:h-[500px] flex items-center justify-center text-center overflow-hidden\" data-purpose=\"page-hero\">\r\n \r\n <img decoding=\"async\" alt=\"COPA Water Experts Project Gallery\" class=\"absolute inset-0 w-full h-full object-cover object-[center_30%]\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.28-AM.jpeg\"\/>\r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-900\/80 via-slate-900\/50 to-slate-900\/90 mix-blend-multiply\"><\/div>\r\n \r\n <div class=\"relative z-10 px-4 w-full max-w-4xl mt-12 transform transition-all duration-700 translate-y-0 opacity-100\">\r\n \r\n <div class=\"flex items-center justify-center gap-4 mb-6 opacity-80\">\r\n <div class=\"h-[2px] w-12 bg-brandBlue\"><\/div>\r\n <span class=\"text-brandBlue font-semibold tracking-widest uppercase text-sm\">Our Impact<\/span>\r\n <div class=\"h-[2px] w-12 bg-brandBlue\"><\/div>\r\n <\/div>\r\n\r\n <h1 class=\"text-5xl md:text-6xl lg:text-7xl font-extrabold text-white mb-6 tracking-tight drop-shadow-sm\">\r\n Our Projects\r\n <\/h1>\r\n \r\n <p class=\"text-lg md:text-xl text-slate-300 font-medium max-w-2xl mx-auto mb-10 leading-relaxed\">\r\n Delivering sustainable water solutions across Kenya. From domestic boreholes to complex industrial storage and irrigation systems.\r\n <\/p>\r\n \r\n <nav aria-label=\"Breadcrumb\" class=\"flex justify-center items-center space-x-3 text-sm md:text-base font-medium bg-white\/10 backdrop-blur-md inline-flex px-6 py-2.5 rounded-full border border-white\/20 shadow-xl\">\r\n <a class=\"text-slate-200 hover:text-white transition-colors\" href=\"#\">Home<\/a>\r\n <i class=\"fa-solid fa-chevron-right text-[10px] text-slate-400\"><\/i>\r\n <span class=\"text-white\">Projects<\/span>\r\n <\/nav>\r\n \r\n <\/div>\r\n <\/header>\r\n <\/body>\r\n<\/html> \t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-1e5bfc1 e-con e-atomic-element e-flexbox-base e-1e5bfc1-7780edd \" data-id=\"1e5bfc1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1e5bfc1\">\n \t\t<div class=\"elementor-element elementor-element-6c93801 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6c93801\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\"\/>\r\n <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n \r\n <title>Our Projects - Copa Waters | Borehole Drilling & Hydro Surveys<\/title>\r\n <meta name=\"description\" content=\"Explore Copa Waters' recent projects in borehole drilling, hydrogeological surveys, steel construction, and complete pump rehabilitation.\" \/>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"\/>\r\n \r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #f8fafc;\r\n color: #333;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n \/* Custom Title Accent *\/\r\n .title-accent {\r\n display: inline-block;\r\n width: 40px;\r\n height: 3px;\r\n background: linear-gradient(90deg, #0ea5e9, #38bdf8);\r\n vertical-align: middle;\r\n margin-right: 16px;\r\n border-radius: 2px;\r\n }\r\n\r\n \/* Smooth image scaling on hover - respecting reduced motion preferences *\/\r\n @media (prefers-reduced-motion: no-preference) {\r\n .media-zoom {\r\n transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .group:hover .media-zoom {\r\n transform: scale(1.05);\r\n }\r\n }\r\n\r\n \/* Badge styling *\/\r\n .badge-video {\r\n background: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n \/* Smooth filtering transition *\/\r\n .portfolio-item {\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n }\r\n .portfolio-item.hidden-item {\r\n display: none;\r\n opacity: 0;\r\n transform: scale(0.95);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-[#f8fafc] text-gray-900 font-sans min-h-screen selection:bg-sky-100 selection:text-sky-900\">\r\n\r\n <header class=\"pt-24 pb-8 px-4 md:px-8 text-center max-w-4xl mx-auto\">\r\n <div class=\"mb-4 inline-flex items-center justify-center gap-3\">\r\n <span class=\"w-10 h-0.5 bg-sky-600 rounded-full\"><\/span>\r\n <span class=\"text-sky-600 font-bold uppercase tracking-widest text-sm\">Portfolio<\/span>\r\n <span class=\"w-10 h-0.5 bg-sky-600 rounded-full\"><\/span>\r\n <\/div>\r\n <h1 class=\"text-4xl md:text-5xl font-black text-[#2b3990] mb-6 tracking-tight\">\r\n Field Operations & <span class=\"text-sky-500\">Recent Projects<\/span>\r\n <\/h1>\r\n <p class=\"text-lg text-slate-500 leading-relaxed mb-10\">\r\n Explore our comprehensive gallery showcasing our expertise in hydrogeological surveys, heavy-duty borehole drilling, structural steel construction, and complete pump rehabilitation across various sites.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4\" id=\"filter-container\">\r\n <button data-filter=\"all\" class=\"filter-btn active px-5 py-2 rounded-full text-sm font-semibold bg-[#2b3990] text-white shadow-md transition-all duration-300\">All Projects<\/button>\r\n <button data-filter=\"survey\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Surveys<\/button>\r\n <button data-filter=\"drilling\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Drilling<\/button>\r\n <button data-filter=\"construction\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Construction<\/button>\r\n <button data-filter=\"maintenance\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Maintenance<\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"py-12 px-4 md:px-8 w-full max-w-[90rem] mx-auto min-h-[60vh]\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8\" id=\"portfolio-grid\">\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"survey\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/Hydrological-survey.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Hydrological Survey\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/Hydrological-survey.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Survey & Planning<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Hydrogeological Survey<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Our geologists conducting scientific groundwater exploration to map out subsurface structures and pinpoint high-yielding aquifers prior to drilling.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"drilling\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/drilling.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Active Drilling\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/drilling.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Excavation<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Heavy-Duty Drilling<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Deployment of our robust drilling rig to penetrate tough rock formations and reach deep, sustainable water reserves.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"construction\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/casing-installation.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Casing Installation\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/casing-installation.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Well Construction<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Casing Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Precise installation of durable borehole casing to secure the well walls, ensuring long-term structural integrity and preventing contamination.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"construction\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/steel-construction.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Steel Construction\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/steel-construction.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Infrastructure<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Structural Steel Towers<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Fabrication and erection of robust elevated steel structures to safely support high-capacity water storage tanks.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"maintenance\" onclick=\"openModal('video', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-installation.mp4')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900 video-container\">\r\n <video muted loop playsinline preload=\"metadata\" class=\"media-zoom w-full h-full object-cover\">\r\n <source src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-installation.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"absolute top-4 right-4 badge-video px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-play text-white text-xs\"><\/i>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Hover to Play<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Water Systems<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Pump Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Careful lowering and configuration of submersible electric water pumps to guarantee reliable and optimal flow rates.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"maintenance\" onclick=\"openModal('video', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-lifing-and-rehabilitation.mp4')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900 video-container\">\r\n <video muted loop playsinline preload=\"metadata\" class=\"media-zoom w-full h-full object-cover\">\r\n <source src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-lifing-and-rehabilitation.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"absolute top-4 right-4 badge-video px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-play text-white text-xs\"><\/i>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Hover to Play<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Maintenance<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Pump Lifting & Rehab<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Extracting older pump systems from existing boreholes for deep maintenance, repairs, and restoring water yields to peak capacity.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"survey\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.31-AM.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Site Preparation\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.31-AM.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Preparation<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Site Groundwork & Setup<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Early morning site clearing, leveling, and equipment staging to prepare the grounds for safe drilling operations.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"drilling\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.34-AM.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Field Team Monitoring\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.34-AM.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Site Management<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Field Operators at Work<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Our experienced engineering team monitoring the rig controls and ensuring that ground penetration meets safety protocols.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"drilling\" onclick=\"openModal('video', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-06-at-3.03.33-AM.mp4')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900 video-container\">\r\n <video muted loop playsinline preload=\"metadata\" class=\"media-zoom w-full h-full object-cover\">\r\n <source src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-06-at-3.03.33-AM.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"absolute top-4 right-4 badge-video px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-play text-white text-xs\"><\/i>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Hover to Play<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Logistics<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Rig Alignment & Setup<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Crew operators configuring the drill string and properly aligning the rig mast to ensure a perfectly vertical shaft.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <div id=\"mediaModal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/95 backdrop-blur-sm hidden opacity-0 transition-opacity duration-300\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-6 right-6 text-white hover:text-sky-400 transition-colors z-50\" aria-label=\"Close Modal\">\r\n <i class=\"fa-solid fa-xmark text-4xl\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"relative w-full max-w-5xl max-h-[85vh] flex justify-center items-center p-4\">\r\n <img decoding=\"async\" id=\"modalImg\" class=\"max-w-full max-h-full rounded-lg shadow-2xl hidden\" src=\"\" alt=\"Portfolio Full View\">\r\n \r\n <video id=\"modalVid\" class=\"max-w-full max-h-full rounded-lg shadow-2xl hidden\" controls playsinline>\r\n <source src=\"\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n \r\n \/\/ 1. Filtering Logic\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n const portfolioItems = document.querySelectorAll('.portfolio-item');\r\n\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n \/\/ Update active button styling\r\n filterBtns.forEach(b => {\r\n b.classList.remove('bg-[#2b3990]', 'text-white');\r\n b.classList.add('bg-white', 'text-slate-600');\r\n });\r\n btn.classList.remove('bg-white', 'text-slate-600');\r\n btn.classList.add('bg-[#2b3990]', 'text-white');\r\n\r\n const filter = btn.getAttribute('data-filter');\r\n\r\n \/\/ Show\/Hide items with animation\r\n portfolioItems.forEach(item => {\r\n if (filter === 'all' || item.getAttribute('data-category') === filter) {\r\n item.classList.remove('hidden-item');\r\n \/\/ slight delay to allow display:block to apply before opacity kicks in\r\n setTimeout(() => item.style.display = 'flex', 10);\r\n } else {\r\n item.classList.add('hidden-item');\r\n setTimeout(() => {\r\n if(item.classList.contains('hidden-item')) {\r\n item.style.display = 'none';\r\n }\r\n }, 400); \/\/ Wait for CSS transition to finish\r\n }\r\n });\r\n });\r\n });\r\n\r\n \/\/ 2. Play Video on Hover (Saves massive amounts of data and battery)\r\n const videoContainers = document.querySelectorAll('.video-container');\r\n \r\n videoContainers.forEach(container => {\r\n const video = container.querySelector('video');\r\n \r\n container.addEventListener('mouseenter', () => {\r\n video.play().catch(e => console.log(\"Autoplay prevented:\", e));\r\n });\r\n \r\n container.addEventListener('mouseleave', () => {\r\n video.pause();\r\n });\r\n });\r\n });\r\n\r\n \/\/ 3. Modal Lightbox Logic\r\n const modal = document.getElementById('mediaModal');\r\n const modalImg = document.getElementById('modalImg');\r\n const modalVid = document.getElementById('modalVid');\r\n\r\n function openModal(type, src) {\r\n modal.classList.remove('hidden');\r\n \/\/ Timeout allows display:block to render before transitioning opacity\r\n setTimeout(() => modal.classList.remove('opacity-0'), 10);\r\n\r\n if (type === 'image') {\r\n modalVid.classList.add('hidden');\r\n modalVid.pause();\r\n modalImg.src = src;\r\n modalImg.classList.remove('hidden');\r\n } else if (type === 'video') {\r\n modalImg.classList.add('hidden');\r\n modalVid.src = src;\r\n modalVid.classList.remove('hidden');\r\n modalVid.play();\r\n }\r\n }\r\n\r\n function closeModal() {\r\n modal.classList.add('opacity-0');\r\n \r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n modalVid.pause();\r\n modalVid.src = ''; \/\/ Clear source to stop downloading\r\n modalImg.src = '';\r\n }, 300); \/\/ match duration-300 transition\r\n }\r\n\r\n \/\/ Close modal on escape key or clicking outside\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape' && !modal.classList.contains('hidden')) {\r\n closeModal();\r\n }\r\n });\r\n\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) closeModal();\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-50912486 e-con e-atomic-element e-flexbox-base e-50912486-0463378 \" data-id=\"50912486\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"50912486\">\n \t\t<div class=\"elementor-element elementor-element-761b3d11 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"761b3d11\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\" style=\"scroll-behavior: smooth;\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n <title>Footer Section - COPA Water Experts<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n \r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');\r\n \r\n body {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n }\r\n\r\n \/* Elegant frosted glass effect for icons *\/\r\n .glass-icon {\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n .glass-icon:hover {\r\n background: rgba(56, 189, 248, 0.15); \/* Sky blue tint *\/\r\n border-color: rgba(56, 189, 248, 0.4);\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 20px -10px rgba(56, 189, 248, 0.3);\r\n }\r\n <\/style>\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'brand-accent': '#38bdf8', \/* Tailwind sky-400 *\/\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"bg-gray-50\">\r\n\r\n \r\n \r\n <div class=\"h-1 w-full bg-gradient-to-r from-cyan-400 via-brand-accent to-blue-600 mt-20\"><\/div>\r\n \r\n <footer class=\"bg-slate-900 text-slate-300 relative\" data-purpose=\"main-footer\">\r\n\r\n \r\n <div class=\"max-w-[90rem] mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8\">\r\n \r\n \r\n <div class=\"lg:pr-8\">\r\n <h3 class=\"text-3xl font-extrabold mb-5 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400\">\r\n COPA\r\n <\/h3>\r\n <p class=\"text-sm leading-relaxed mb-6 text-slate-400\">\r\n A premier borehole drilling company committed to delivering pure water solutions with expert precision and unwavering reliability across Kenya.\r\n <\/p>\r\n <div class=\"pl-4 border-l-2 border-brand-accent mb-8\">\r\n <p class=\"text-sm font-semibold text-white tracking-wide italic\">\r\n \"Purity, Expertise, Reliability\"\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 rounded-xl p-4 border border-slate-700\/50 inline-block w-full\">\r\n <h4 class=\"font-semibold text-xs uppercase tracking-wider text-slate-500 mb-2\">Working Hours<\/h4>\r\n <p class=\"text-sm font-medium text-white flex justify-between items-center mb-1\">\r\n <span>Mon \u2013 Sat<\/span> <span class=\"text-brand-accent\">8:00 AM \u2013 5:00 PM<\/span>\r\n <\/p>\r\n <p class=\"text-sm font-medium text-slate-500 flex justify-between items-center\">\r\n <span>Sunday<\/span> <span>CLOSED<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-sm font-bold uppercase tracking-widest text-white mb-6\">Connect With Us<\/h3>\r\n \r\n \r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"Facebook\">\r\n <i class=\"fab fa-facebook-f text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"Twitter\">\r\n <i class=\"fab fa-x-twitter text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"Instagram\">\r\n <i class=\"fab fa-instagram text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"WhatsApp\">\r\n <i class=\"fab fa-whatsapp text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"YouTube\">\r\n <i class=\"fab fa-youtube text-[15px]\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-sm font-bold uppercase tracking-widest text-white mb-6\">Quick Links<\/h3>\r\n <ul class=\"space-y-4 text-sm font-medium\">\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n About Us\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n Core Services\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n Equipment & Tools\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n FAQs\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n Contact Us\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-sm font-bold uppercase tracking-widest text-white mb-6\">Headquarters<\/h3>\r\n <ul class=\"space-y-6 text-sm\">\r\n <li class=\"flex items-start group\">\r\n <div class=\"mt-0.5 mr-4 w-8 h-8 rounded bg-slate-800 flex items-center justify-center shrink-0 group-hover:bg-brand-accent group-hover:text-white transition-colors text-brand-accent\">\r\n <i class=\"fas fa-map-marker-alt\"><\/i>\r\n <\/div>\r\n <span class=\"text-slate-400 leading-relaxed group-hover:text-slate-200 transition-colors\">\r\n Tornado Plaza,<br>Enterprise Road,<br>Nairobi - KENYA.\r\n <\/span>\r\n <\/li>\r\n <li class=\"flex items-start group\">\r\n <div class=\"mt-0.5 mr-4 w-8 h-8 rounded bg-slate-800 flex items-center justify-center shrink-0 group-hover:bg-brand-accent group-hover:text-white transition-colors text-brand-accent\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col space-y-1\">\r\n <a class=\"text-slate-400 hover:text-white transition-colors font-medium\" href=\"tel:+254729252806\">0729 252 806<\/a>\r\n <a class=\"text-slate-400 hover:text-white transition-colors font-medium\" href=\"tel:+254714929193\">0714 929 193<\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex items-center group\">\r\n <div class=\"mr-4 w-8 h-8 rounded bg-slate-800 flex items-center justify-center shrink-0 group-hover:bg-brand-accent group-hover:text-white transition-colors text-brand-accent\">\r\n <i class=\"fas fa-envelope text-xs\"><\/i>\r\n <\/div>\r\n <a class=\"text-slate-400 hover:text-white transition-colors font-medium\" href=\"mailto:info@copawaters.com\">info@copawaters.com<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-950 py-6 px-4 border-t border-slate-800\">\r\n <div class=\"max-w-[90rem] mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <p class=\"text-sm text-slate-500\">\r\n Copyright © 2026. All rights reserved.\r\n <\/p>\r\n <p class=\"text-sm font-bold tracking-widest text-white uppercase flex items-center gap-2\">\r\n <i class=\"fa-solid fa-droplet text-brand-accent text-xs\"><\/i>\r\n COPA WATER EXPERTS\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button aria-label=\"Scroll to top\" onclick=\"window.scrollTo({top: 0, behavior: 'smooth'});\" class=\"absolute bottom-10 right-6 md:right-10 w-12 h-12 bg-white text-slate-900 rounded-full flex items-center justify-center shadow-xl hover:bg-brand-accent hover:text-white hover:-translate-y-2 transition-all duration-300 focus:outline-none\">\r\n <i class=\"fas fa-arrow-up\"><\/i>\r\n <\/button>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Copa Waters – Navbar info@copawaters.co.ke Mon – Fri: 8:00 AM – 5:00 PM Nairobi, Kenya info@copawaters.co.ke Consult Experts Copa Waters Expert Solutions Home About Us Services Our Services Borehole Drilling Hydrogeological Surveys Pump Installation Water Testing & Quality Water Treatment Solutions Borehole Rehabilitation Casing & Grouting Tank & Storage Systems Irrigation System Setup Consultation & […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":16,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":420,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/39\/revisions\/420"}],"wp:attachment":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Copa Waters - Navbar<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n dark: '#0f172a',\r\n blue: '#0284c7',\r\n light: '#38bdf8',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n min-height: 200vh;\r\n background-color: #f8fafc;\r\n }\r\n\r\n \/* Elegant Link Underline *\/\r\n .nav-link {\r\n position: relative;\r\n }\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n background-color: #0284c7;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .nav-link:hover::after,\r\n .nav-link.active::after {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Dropdown Animation *\/\r\n .dropdown-content {\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(10px);\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .group:hover .dropdown-content {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Two-column dropdown grid *\/\r\n .services-dropdown {\r\n width: 560px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(10px);\r\n }\r\n .group:hover .services-dropdown {\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n \/* Mobile Menu Drawer *\/\r\n #mobile-menu {\r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n #mobile-overlay {\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n \/* Hamburger Animation *\/\r\n .hamburger span {\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n transform-origin: center;\r\n }\r\n .hamburger.open span:nth-child(1) {\r\n transform: translateY(7px) rotate(45deg);\r\n }\r\n .hamburger.open span:nth-child(2) {\r\n opacity: 0;\r\n }\r\n .hamburger.open span:nth-child(3) {\r\n transform: translateY(-7px) rotate(-45deg);\r\n }\r\n\r\n \/* Mobile Accordion *\/\r\n .mobile-dropdown-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.4s ease;\r\n }\r\n .mobile-dropdown.open .mobile-dropdown-content {\r\n max-height: 600px;\r\n }\r\n .mobile-dropdown .chevron {\r\n transition: transform 0.3s ease;\r\n }\r\n .mobile-dropdown.open .chevron {\r\n transform: rotate(180deg);\r\n }\r\n\r\n \/* Divider in dropdown *\/\r\n .dropdown-divider {\r\n height: 1px;\r\n background: #f1f5f9;\r\n margin: 4px 16px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased text-slate-800\">\r\n\r\n \r\n <div class=\"bg-brand-dark text-slate-300 py-2.5 px-4 sm:px-6 lg:px-8 text-xs font-medium relative z-[60]\">\r\n <div class=\"max-w-7xl mx-auto flex justify-between items-center\">\r\n \r\n <div class=\"hidden lg:flex items-center gap-8\">\r\n <a href=\"mailto:info@copawaters.co.ke\" class=\"flex items-center gap-2 hover:text-white transition-colors\">\r\n <i class=\"fa-regular fa-envelope text-brand-light\"><\/i> info@copawaters.co.ke\r\n <\/a>\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fa-regular fa-clock text-brand-light\"><\/i> Mon - Fri: 8:00 AM - 5:00 PM\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fa-solid fa-location-dot text-brand-light\"><\/i> Nairobi, Kenya\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lg:hidden flex items-center justify-center w-full sm:w-auto\">\r\n <a href=\"mailto:info@copawaters.co.ke\" class=\"flex items-center gap-2 hover:text-white transition-colors\">\r\n <i class=\"fa-regular fa-envelope text-brand-light\"><\/i> info@copawaters.co.ke\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hidden sm:flex items-center\">\r\n <a href=\"\/contact-us\" class=\"bg-brand-blue hover:bg-sky-500 text-white px-5 py-1.5 rounded-full font-semibold transition-all duration-300 flex items-center gap-2 hover:shadow-[0_0_15px_rgba(2,132,199,0.4)] hover:-translate-y-0.5\">\r\n Consult Experts <i class=\"fa-solid fa-arrow-right text-[10px] mt-0.5\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <header class=\"bg-white\/90 backdrop-blur-md border-b border-slate-200 sticky top-0 z-50 shadow-sm\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between items-center h-20\">\r\n \r\n \r\n <a href=\"\/\" class=\"flex items-center gap-3 group\">\r\n <div class=\"w-10 h-10 bg-gradient-to-br from-brand-blue to-blue-900 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:scale-105 group-hover:-rotate-3 transition-transform duration-300\">\r\n <i class=\"fa-solid fa-droplet text-lg\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col leading-none\">\r\n <span class=\"font-extrabold text-xl text-brand-dark tracking-tight uppercase\">Copa <span class=\"text-brand-blue\">Waters<\/span><\/span>\r\n <span class=\"text-[9px] font-bold text-slate-500 tracking-[0.2em] uppercase mt-1\">Expert Solutions<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n \r\n <nav class=\"hidden lg:flex items-center gap-7\">\r\n <a href=\"\/\" class=\"nav-link active text-sm font-semibold text-brand-dark hover:text-brand-blue transition-colors\">Home<\/a>\r\n <a href=\"\/copawaters\/about-us\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">About Us<\/a>\r\n \r\n \r\n <div class=\"relative group py-8\">\r\n <button class=\"nav-link text-sm font-semibold text-slate-600 group-hover:text-brand-blue transition-colors flex items-center gap-1.5\">\r\n Services <i class=\"fa-solid fa-chevron-down text-[9px] transition-transform duration-300 group-hover:rotate-180\"><\/i>\r\n <\/button>\r\n \r\n \r\n <div class=\"dropdown-content services-dropdown absolute top-[70px] bg-white rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] border border-slate-100 py-3 overflow-hidden\">\r\n \r\n \r\n <div class=\"px-5 pb-2 pt-1\">\r\n <p class=\"text-[10px] font-bold text-slate-400 uppercase tracking-[0.18em]\">Our Services<\/p>\r\n <\/div>\r\n <div class=\"dropdown-divider\"><\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-x-2 px-3 py-2\">\r\n\r\n <a href=\"\/copawaters\/borehole-drilling\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-arrows-down-to-line text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Borehole Drilling<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/hydrogeological-surveys\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-magnifying-glass-location text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Hydrogeological Surveys<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/pump-installation\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-faucet-drip text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Pump Installation<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/water-treatment\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-flask text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Water Testing & Quality<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/water-treatment\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-droplet text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Water Treatment Solutions<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/borehole-rehabilitation-maintenance\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-wrench text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Borehole Rehabilitation<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/casing-and-grouting\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-layer-group text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Casing & Grouting<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/tank-storage-system-installation\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-tank-water text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Tank & Storage Systems<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/irrigation-system-setup\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-seedling text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Irrigation System Setup<\/span>\r\n <\/a>\r\n\r\n <a href=\"\/copawaters\/consultation-permitting-support\" class=\"flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 text-sm font-medium text-slate-700 hover:text-brand-blue transition-colors group\/item\">\r\n <div class=\"w-8 h-8 flex-shrink-0 rounded-lg bg-sky-50 flex items-center justify-center text-brand-blue group-hover\/item:bg-brand-blue group-hover\/item:text-white transition-colors\">\r\n <i class=\"fa-solid fa-file-contract text-xs\"><\/i>\r\n <\/div>\r\n <span class=\"leading-tight\">Consultation & Permitting<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"dropdown-divider mt-1\"><\/div>\r\n <div class=\"px-5 pt-2 pb-1\">\r\n <a href=\"\/copawaters\/services\" class=\"text-xs font-bold text-brand-blue hover:text-sky-500 flex items-center gap-1.5 transition-colors\">\r\n View All Services <i class=\"fa-solid fa-arrow-right text-[9px]\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <a href=\"\/copawaters\/equipment-technology\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors whitespace-nowrap\">Equipment & Tech<\/a>\r\n\r\n <a href=\"\/copawaters\/projects\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">Projects<\/a>\r\n <a href=\"\/copawaters\/faq\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">FAQ<\/a>\r\n <a href=\"\/copawaters\/contact-us\" class=\"nav-link text-sm font-semibold text-slate-600 hover:text-brand-blue transition-colors\">Contact<\/a>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hidden lg:flex items-center gap-2\">\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white transition-all\"><i class=\"fa-brands fa-facebook-f text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white transition-all\"><i class=\"fa-brands fa-instagram text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white transition-all\"><i class=\"fa-brands fa-youtube text-sm\"><\/i><\/a>\r\n <\/div>\r\n\r\n \r\n <button id=\"hamburger-btn\" class=\"lg:hidden hamburger flex flex-col justify-center items-center w-10 h-10 z-[60] focus:outline-none\">\r\n <span class=\"w-6 h-0.5 bg-brand-dark rounded-full mb-1.5\"><\/span>\r\n <span class=\"w-6 h-0.5 bg-brand-dark rounded-full mb-1.5\"><\/span>\r\n <span class=\"w-6 h-0.5 bg-brand-dark rounded-full\"><\/span>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"mobile-overlay\" class=\"fixed inset-0 bg-brand-dark\/50 backdrop-blur-sm z-50 opacity-0 pointer-events-none\"><\/div>\r\n\r\n <div id=\"mobile-menu\" class=\"fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-50 translate-x-full overflow-y-auto flex flex-col\">\r\n \r\n <div class=\"flex items-center justify-between p-6 border-b border-slate-100\">\r\n <span class=\"font-bold text-lg text-brand-dark\">Menu<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 px-6 py-8 flex flex-col gap-5\">\r\n <a href=\"\/\" class=\"text-base font-bold text-brand-blue\">Home<\/a>\r\n <a href=\"\/copawaters\/about-us\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">About Us<\/a>\r\n \r\n \r\n <div class=\"mobile-dropdown cursor-pointer\">\r\n <div class=\"flex items-center justify-between text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\" onclick=\"this.parentElement.classList.toggle('open')\">\r\n Services <i class=\"fa-solid fa-chevron-down text-xs chevron\"><\/i>\r\n <\/div>\r\n <div class=\"mobile-dropdown-content mt-4 flex flex-col gap-3 pl-4 border-l-2 border-slate-100\">\r\n <a href=\"\/copawaters\/borehole-drilling\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-arrows-down-to-line w-4 text-slate-400 text-xs\"><\/i> Borehole Drilling\r\n <\/a>\r\n <a href=\"\/copawaters\/hydrogeological-surveys\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-magnifying-glass-location w-4 text-slate-400 text-xs\"><\/i> Hydrogeological Surveys\r\n <\/a>\r\n <a href=\"\/copawaters\/pump-installation\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-faucet-drip w-4 text-slate-400 text-xs\"><\/i> Pump Installation\r\n <\/a>\r\n <a href=\"\/copawaters\/water-treatment\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-flask w-4 text-slate-400 text-xs\"><\/i> Water Testing & Quality\r\n <\/a>\r\n <a href=\"\/copawaters\/water-treatment\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-droplet w-4 text-slate-400 text-xs\"><\/i> Water Treatment Solutions\r\n <\/a>\r\n <a href=\"\/copawaters\/borehole-rehabilitation-maintenance\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-wrench w-4 text-slate-400 text-xs\"><\/i> Borehole Rehabilitation\r\n <\/a>\r\n <a href=\"\/copawaters\/casing-and-grouting\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-layer-group w-4 text-slate-400 text-xs\"><\/i> Casing & Grouting\r\n <\/a>\r\n <a href=\"\/copawaters\/tank-storage-system-installation\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-tank-water w-4 text-slate-400 text-xs\"><\/i> Tank & Storage Systems\r\n <\/a>\r\n <a href=\"\/copawaters\/irrigation-system-setup\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-seedling w-4 text-slate-400 text-xs\"><\/i> Irrigation System Setup\r\n <\/a>\r\n <a href=\"\/copawaters\/consultation-permitting-support\" class=\"text-sm font-medium text-slate-600 hover:text-brand-blue flex items-center gap-2\">\r\n <i class=\"fa-solid fa-file-contract w-4 text-slate-400 text-xs\"><\/i> Consultation & Permitting\r\n <\/a>\r\n <a href=\"\/copawaters\/services\" class=\"text-xs font-bold text-brand-blue flex items-center gap-1 mt-1\">\r\n View All Services <i class=\"fa-solid fa-arrow-right text-[9px]\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"\/copawaters\/equipment-technology\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">Equipment & Technology<\/a>\r\n <a href=\"\/copawaters\/projects\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">Projects<\/a>\r\n <a href=\"\/copawaters\/faq\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">FAQ<\/a>\r\n <a href=\"\/copawaters\/contact-us\" class=\"text-base font-semibold text-slate-700 hover:text-brand-blue transition-colors\">Contact<\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 bg-slate-50 border-t border-slate-100 mt-auto\">\r\n <a href=\"\/copawaters\/contact-us\" class=\"w-full block text-center bg-brand-blue text-white font-bold py-3 rounded-xl mb-6 shadow-md\">Consult Experts<\/a>\r\n <div class=\"flex items-center justify-center gap-4\">\r\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-white shadow flex items-center justify-center text-slate-600\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-white shadow flex items-center justify-center text-slate-600\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-white shadow flex items-center justify-center text-slate-600\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n const hamburgerBtn = document.getElementById('hamburger-btn');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n const mobileOverlay = document.getElementById('mobile-overlay');\r\n let isMenuOpen = false;\r\n\r\n function toggleMobileMenu() {\r\n isMenuOpen = !isMenuOpen;\r\n if (isMenuOpen) {\r\n hamburgerBtn.classList.add('open');\r\n mobileMenu.style.transform = 'translateX(0)';\r\n mobileOverlay.style.opacity = '1';\r\n mobileOverlay.style.pointerEvents = 'auto';\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n hamburgerBtn.classList.remove('open');\r\n mobileMenu.style.transform = 'translateX(100%)';\r\n mobileOverlay.style.opacity = '0';\r\n mobileOverlay.style.pointerEvents = 'none';\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n\r\n hamburgerBtn.addEventListener('click', toggleMobileMenu);\r\n mobileOverlay.addEventListener('click', toggleMobileMenu);\r\n\r\n window.addEventListener(\"resize\", () => {\r\n if (window.innerWidth >= 1024 && isMenuOpen) {\r\n toggleMobileMenu();\r\n }\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9b95c0f e-con e-atomic-element e-flexbox-base e-9b95c0f-6277c3d \" data-id=\"9b95c0f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9b95c0f\">\n \t\t<div class=\"elementor-element elementor-element-1464f01 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"1464f01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\"\/>\r\n <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n <title>Our Projects - COPA Water Experts<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" rel=\"stylesheet\"\/>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brandBlue: '#0072b5', \/* Official COPA Waters Brand Blue *\/\r\n brandDark: '#0f172a',\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-900 font-sans antialiased selection:bg-brandBlue selection:text-white\">\r\n\r\n <header class=\"relative h-[450px] md:h-[500px] flex items-center justify-center text-center overflow-hidden\" data-purpose=\"page-hero\">\r\n \r\n <img decoding=\"async\" alt=\"COPA Water Experts Project Gallery\" class=\"absolute inset-0 w-full h-full object-cover object-[center_30%]\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.28-AM.jpeg\"\/>\r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-b from-slate-900\/80 via-slate-900\/50 to-slate-900\/90 mix-blend-multiply\"><\/div>\r\n \r\n <div class=\"relative z-10 px-4 w-full max-w-4xl mt-12 transform transition-all duration-700 translate-y-0 opacity-100\">\r\n \r\n <div class=\"flex items-center justify-center gap-4 mb-6 opacity-80\">\r\n <div class=\"h-[2px] w-12 bg-brandBlue\"><\/div>\r\n <span class=\"text-brandBlue font-semibold tracking-widest uppercase text-sm\">Our Impact<\/span>\r\n <div class=\"h-[2px] w-12 bg-brandBlue\"><\/div>\r\n <\/div>\r\n\r\n <h1 class=\"text-5xl md:text-6xl lg:text-7xl font-extrabold text-white mb-6 tracking-tight drop-shadow-sm\">\r\n Our Projects\r\n <\/h1>\r\n \r\n <p class=\"text-lg md:text-xl text-slate-300 font-medium max-w-2xl mx-auto mb-10 leading-relaxed\">\r\n Delivering sustainable water solutions across Kenya. From domestic boreholes to complex industrial storage and irrigation systems.\r\n <\/p>\r\n \r\n <nav aria-label=\"Breadcrumb\" class=\"flex justify-center items-center space-x-3 text-sm md:text-base font-medium bg-white\/10 backdrop-blur-md inline-flex px-6 py-2.5 rounded-full border border-white\/20 shadow-xl\">\r\n <a class=\"text-slate-200 hover:text-white transition-colors\" href=\"#\">Home<\/a>\r\n <i class=\"fa-solid fa-chevron-right text-[10px] text-slate-400\"><\/i>\r\n <span class=\"text-white\">Projects<\/span>\r\n <\/nav>\r\n \r\n <\/div>\r\n <\/header>\r\n <\/body>\r\n<\/html> \t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-1e5bfc1 e-con e-atomic-element e-flexbox-base e-1e5bfc1-7780edd \" data-id=\"1e5bfc1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1e5bfc1\">\n \t\t<div class=\"elementor-element elementor-element-6c93801 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6c93801\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\"\/>\r\n <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\r\n \r\n <title>Our Projects - Copa Waters | Borehole Drilling & Hydro Surveys<\/title>\r\n <meta name=\"description\" content=\"Explore Copa Waters' recent projects in borehole drilling, hydrogeological surveys, steel construction, and complete pump rehabilitation.\" \/>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"\/>\r\n \r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #f8fafc;\r\n color: #333;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n \/* Custom Title Accent *\/\r\n .title-accent {\r\n display: inline-block;\r\n width: 40px;\r\n height: 3px;\r\n background: linear-gradient(90deg, #0ea5e9, #38bdf8);\r\n vertical-align: middle;\r\n margin-right: 16px;\r\n border-radius: 2px;\r\n }\r\n\r\n \/* Smooth image scaling on hover - respecting reduced motion preferences *\/\r\n @media (prefers-reduced-motion: no-preference) {\r\n .media-zoom {\r\n transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .group:hover .media-zoom {\r\n transform: scale(1.05);\r\n }\r\n }\r\n\r\n \/* Badge styling *\/\r\n .badge-video {\r\n background: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n \/* Smooth filtering transition *\/\r\n .portfolio-item {\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n }\r\n .portfolio-item.hidden-item {\r\n display: none;\r\n opacity: 0;\r\n transform: scale(0.95);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-[#f8fafc] text-gray-900 font-sans min-h-screen selection:bg-sky-100 selection:text-sky-900\">\r\n\r\n <header class=\"pt-24 pb-8 px-4 md:px-8 text-center max-w-4xl mx-auto\">\r\n <div class=\"mb-4 inline-flex items-center justify-center gap-3\">\r\n <span class=\"w-10 h-0.5 bg-sky-600 rounded-full\"><\/span>\r\n <span class=\"text-sky-600 font-bold uppercase tracking-widest text-sm\">Portfolio<\/span>\r\n <span class=\"w-10 h-0.5 bg-sky-600 rounded-full\"><\/span>\r\n <\/div>\r\n <h1 class=\"text-4xl md:text-5xl font-black text-[#2b3990] mb-6 tracking-tight\">\r\n Field Operations & <span class=\"text-sky-500\">Recent Projects<\/span>\r\n <\/h1>\r\n <p class=\"text-lg text-slate-500 leading-relaxed mb-10\">\r\n Explore our comprehensive gallery showcasing our expertise in hydrogeological surveys, heavy-duty borehole drilling, structural steel construction, and complete pump rehabilitation across various sites.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4\" id=\"filter-container\">\r\n <button data-filter=\"all\" class=\"filter-btn active px-5 py-2 rounded-full text-sm font-semibold bg-[#2b3990] text-white shadow-md transition-all duration-300\">All Projects<\/button>\r\n <button data-filter=\"survey\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Surveys<\/button>\r\n <button data-filter=\"drilling\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Drilling<\/button>\r\n <button data-filter=\"construction\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Construction<\/button>\r\n <button data-filter=\"maintenance\" class=\"filter-btn px-5 py-2 rounded-full text-sm font-semibold bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 transition-all duration-300\">Maintenance<\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"py-12 px-4 md:px-8 w-full max-w-[90rem] mx-auto min-h-[60vh]\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8\" id=\"portfolio-grid\">\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"survey\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/Hydrological-survey.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Hydrological Survey\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/Hydrological-survey.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Survey & Planning<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Hydrogeological Survey<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Our geologists conducting scientific groundwater exploration to map out subsurface structures and pinpoint high-yielding aquifers prior to drilling.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"drilling\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/drilling.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Active Drilling\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/drilling.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Excavation<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Heavy-Duty Drilling<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Deployment of our robust drilling rig to penetrate tough rock formations and reach deep, sustainable water reserves.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"construction\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/casing-installation.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Casing Installation\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/casing-installation.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Well Construction<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Casing Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Precise installation of durable borehole casing to secure the well walls, ensuring long-term structural integrity and preventing contamination.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"construction\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/steel-construction.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Steel Construction\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/steel-construction.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Infrastructure<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Structural Steel Towers<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Fabrication and erection of robust elevated steel structures to safely support high-capacity water storage tanks.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"maintenance\" onclick=\"openModal('video', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-installation.mp4')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900 video-container\">\r\n <video muted loop playsinline preload=\"metadata\" class=\"media-zoom w-full h-full object-cover\">\r\n <source src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-installation.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"absolute top-4 right-4 badge-video px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-play text-white text-xs\"><\/i>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Hover to Play<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Water Systems<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Pump Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Careful lowering and configuration of submersible electric water pumps to guarantee reliable and optimal flow rates.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"maintenance\" onclick=\"openModal('video', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-lifing-and-rehabilitation.mp4')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900 video-container\">\r\n <video muted loop playsinline preload=\"metadata\" class=\"media-zoom w-full h-full object-cover\">\r\n <source src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/pump-lifing-and-rehabilitation.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"absolute top-4 right-4 badge-video px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-play text-white text-xs\"><\/i>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Hover to Play<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Maintenance<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Pump Lifting & Rehab<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Extracting older pump systems from existing boreholes for deep maintenance, repairs, and restoring water yields to peak capacity.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"survey\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.31-AM.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Site Preparation\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.31-AM.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Preparation<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Site Groundwork & Setup<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Early morning site clearing, leveling, and equipment staging to prepare the grounds for safe drilling operations.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"drilling\" onclick=\"openModal('image', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.34-AM.jpeg')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"Field Team Monitoring\" loading=\"lazy\" class=\"media-zoom w-full h-full object-cover\" src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-06-at-3.03.34-AM.jpeg\"\/>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Site Management<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Field Operators at Work<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Our experienced engineering team monitoring the rig controls and ensuring that ground penetration meets safety protocols.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"portfolio-item group flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-pointer\" data-category=\"drilling\" onclick=\"openModal('video', 'https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-06-at-3.03.33-AM.mp4')\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900 video-container\">\r\n <video muted loop playsinline preload=\"metadata\" class=\"media-zoom w-full h-full object-cover\">\r\n <source src=\"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-06-at-3.03.33-AM.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"absolute top-4 right-4 badge-video px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-play text-white text-xs\"><\/i>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Hover to Play<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 flex-1 flex flex-col\">\r\n <span class=\"text-xs font-bold text-sky-500 uppercase tracking-wider mb-2\">Logistics<\/span>\r\n <h3 class=\"font-bold text-lg text-[#2b3990] mb-2\">Rig Alignment & Setup<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-3\">Crew operators configuring the drill string and properly aligning the rig mast to ensure a perfectly vertical shaft.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <div id=\"mediaModal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/95 backdrop-blur-sm hidden opacity-0 transition-opacity duration-300\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-6 right-6 text-white hover:text-sky-400 transition-colors z-50\" aria-label=\"Close Modal\">\r\n <i class=\"fa-solid fa-xmark text-4xl\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"relative w-full max-w-5xl max-h-[85vh] flex justify-center items-center p-4\">\r\n <img decoding=\"async\" id=\"modalImg\" class=\"max-w-full max-h-full rounded-lg shadow-2xl hidden\" src=\"\" alt=\"Portfolio Full View\">\r\n \r\n <video id=\"modalVid\" class=\"max-w-full max-h-full rounded-lg shadow-2xl hidden\" controls playsinline>\r\n <source src=\"\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n \r\n \/\/ 1. Filtering Logic\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n const portfolioItems = document.querySelectorAll('.portfolio-item');\r\n\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n \/\/ Update active button styling\r\n filterBtns.forEach(b => {\r\n b.classList.remove('bg-[#2b3990]', 'text-white');\r\n b.classList.add('bg-white', 'text-slate-600');\r\n });\r\n btn.classList.remove('bg-white', 'text-slate-600');\r\n btn.classList.add('bg-[#2b3990]', 'text-white');\r\n\r\n const filter = btn.getAttribute('data-filter');\r\n\r\n \/\/ Show\/Hide items with animation\r\n portfolioItems.forEach(item => {\r\n if (filter === 'all' || item.getAttribute('data-category') === filter) {\r\n item.classList.remove('hidden-item');\r\n \/\/ slight delay to allow display:block to apply before opacity kicks in\r\n setTimeout(() => item.style.display = 'flex', 10);\r\n } else {\r\n item.classList.add('hidden-item');\r\n setTimeout(() => {\r\n if(item.classList.contains('hidden-item')) {\r\n item.style.display = 'none';\r\n }\r\n }, 400); \/\/ Wait for CSS transition to finish\r\n }\r\n });\r\n });\r\n });\r\n\r\n \/\/ 2. Play Video on Hover (Saves massive amounts of data and battery)\r\n const videoContainers = document.querySelectorAll('.video-container');\r\n \r\n videoContainers.forEach(container => {\r\n const video = container.querySelector('video');\r\n \r\n container.addEventListener('mouseenter', () => {\r\n video.play().catch(e => console.log(\"Autoplay prevented:\", e));\r\n });\r\n \r\n container.addEventListener('mouseleave', () => {\r\n video.pause();\r\n });\r\n });\r\n });\r\n\r\n \/\/ 3. Modal Lightbox Logic\r\n const modal = document.getElementById('mediaModal');\r\n const modalImg = document.getElementById('modalImg');\r\n const modalVid = document.getElementById('modalVid');\r\n\r\n function openModal(type, src) {\r\n modal.classList.remove('hidden');\r\n \/\/ Timeout allows display:block to render before transitioning opacity\r\n setTimeout(() => modal.classList.remove('opacity-0'), 10);\r\n\r\n if (type === 'image') {\r\n modalVid.classList.add('hidden');\r\n modalVid.pause();\r\n modalImg.src = src;\r\n modalImg.classList.remove('hidden');\r\n } else if (type === 'video') {\r\n modalImg.classList.add('hidden');\r\n modalVid.src = src;\r\n modalVid.classList.remove('hidden');\r\n modalVid.play();\r\n }\r\n }\r\n\r\n function closeModal() {\r\n modal.classList.add('opacity-0');\r\n \r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n modalVid.pause();\r\n modalVid.src = ''; \/\/ Clear source to stop downloading\r\n modalImg.src = '';\r\n }, 300); \/\/ match duration-300 transition\r\n }\r\n\r\n \/\/ Close modal on escape key or clicking outside\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape' && !modal.classList.contains('hidden')) {\r\n closeModal();\r\n }\r\n });\r\n\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) closeModal();\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-50912486 e-con e-atomic-element e-flexbox-base e-50912486-0463378 \" data-id=\"50912486\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"50912486\">\n \t\t<div class=\"elementor-element elementor-element-761b3d11 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"761b3d11\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\" style=\"scroll-behavior: smooth;\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\">\r\n <title>Footer Section - COPA Water Experts<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n \r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');\r\n \r\n body {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n }\r\n\r\n \/* Elegant frosted glass effect for icons *\/\r\n .glass-icon {\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n .glass-icon:hover {\r\n background: rgba(56, 189, 248, 0.15); \/* Sky blue tint *\/\r\n border-color: rgba(56, 189, 248, 0.4);\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 20px -10px rgba(56, 189, 248, 0.3);\r\n }\r\n <\/style>\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'brand-accent': '#38bdf8', \/* Tailwind sky-400 *\/\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"bg-gray-50\">\r\n\r\n \r\n \r\n <div class=\"h-1 w-full bg-gradient-to-r from-cyan-400 via-brand-accent to-blue-600 mt-20\"><\/div>\r\n \r\n <footer class=\"bg-slate-900 text-slate-300 relative\" data-purpose=\"main-footer\">\r\n\r\n \r\n <div class=\"max-w-[90rem] mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8\">\r\n \r\n \r\n <div class=\"lg:pr-8\">\r\n <h3 class=\"text-3xl font-extrabold mb-5 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400\">\r\n COPA\r\n <\/h3>\r\n <p class=\"text-sm leading-relaxed mb-6 text-slate-400\">\r\n A premier borehole drilling company committed to delivering pure water solutions with expert precision and unwavering reliability across Kenya.\r\n <\/p>\r\n <div class=\"pl-4 border-l-2 border-brand-accent mb-8\">\r\n <p class=\"text-sm font-semibold text-white tracking-wide italic\">\r\n \"Purity, Expertise, Reliability\"\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 rounded-xl p-4 border border-slate-700\/50 inline-block w-full\">\r\n <h4 class=\"font-semibold text-xs uppercase tracking-wider text-slate-500 mb-2\">Working Hours<\/h4>\r\n <p class=\"text-sm font-medium text-white flex justify-between items-center mb-1\">\r\n <span>Mon \u2013 Sat<\/span> <span class=\"text-brand-accent\">8:00 AM \u2013 5:00 PM<\/span>\r\n <\/p>\r\n <p class=\"text-sm font-medium text-slate-500 flex justify-between items-center\">\r\n <span>Sunday<\/span> <span>CLOSED<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-sm font-bold uppercase tracking-widest text-white mb-6\">Connect With Us<\/h3>\r\n \r\n \r\n <div class=\"flex flex-wrap gap-3\">\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"Facebook\">\r\n <i class=\"fab fa-facebook-f text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"Twitter\">\r\n <i class=\"fab fa-x-twitter text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"Instagram\">\r\n <i class=\"fab fa-instagram text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"WhatsApp\">\r\n <i class=\"fab fa-whatsapp text-[15px]\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-11 h-11 rounded-full flex items-center justify-center glass-icon text-white\" aria-label=\"YouTube\">\r\n <i class=\"fab fa-youtube text-[15px]\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-sm font-bold uppercase tracking-widest text-white mb-6\">Quick Links<\/h3>\r\n <ul class=\"space-y-4 text-sm font-medium\">\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n About Us\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n Core Services\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n Equipment & Tools\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n FAQs\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a class=\"group inline-flex items-center text-slate-400 hover:text-white transition-colors\" href=\"#\">\r\n <span class=\"w-0 overflow-hidden opacity-0 group-hover:w-4 group-hover:opacity-100 group-hover:mr-1 transition-all duration-300 text-brand-accent\">\r\n <i class=\"fas fa-arrow-right text-[10px]\"><\/i>\r\n <\/span>\r\n Contact Us\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h3 class=\"text-sm font-bold uppercase tracking-widest text-white mb-6\">Headquarters<\/h3>\r\n <ul class=\"space-y-6 text-sm\">\r\n <li class=\"flex items-start group\">\r\n <div class=\"mt-0.5 mr-4 w-8 h-8 rounded bg-slate-800 flex items-center justify-center shrink-0 group-hover:bg-brand-accent group-hover:text-white transition-colors text-brand-accent\">\r\n <i class=\"fas fa-map-marker-alt\"><\/i>\r\n <\/div>\r\n <span class=\"text-slate-400 leading-relaxed group-hover:text-slate-200 transition-colors\">\r\n Tornado Plaza,<br>Enterprise Road,<br>Nairobi - KENYA.\r\n <\/span>\r\n <\/li>\r\n <li class=\"flex items-start group\">\r\n <div class=\"mt-0.5 mr-4 w-8 h-8 rounded bg-slate-800 flex items-center justify-center shrink-0 group-hover:bg-brand-accent group-hover:text-white transition-colors text-brand-accent\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col space-y-1\">\r\n <a class=\"text-slate-400 hover:text-white transition-colors font-medium\" href=\"tel:+254729252806\">0729 252 806<\/a>\r\n <a class=\"text-slate-400 hover:text-white transition-colors font-medium\" href=\"tel:+254714929193\">0714 929 193<\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex items-center group\">\r\n <div class=\"mr-4 w-8 h-8 rounded bg-slate-800 flex items-center justify-center shrink-0 group-hover:bg-brand-accent group-hover:text-white transition-colors text-brand-accent\">\r\n <i class=\"fas fa-envelope text-xs\"><\/i>\r\n <\/div>\r\n <a class=\"text-slate-400 hover:text-white transition-colors font-medium\" href=\"mailto:info@copawaters.com\">info@copawaters.com<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-950 py-6 px-4 border-t border-slate-800\">\r\n <div class=\"max-w-[90rem] mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <p class=\"text-sm text-slate-500\">\r\n Copyright © 2026. All rights reserved.\r\n <\/p>\r\n <p class=\"text-sm font-bold tracking-widest text-white uppercase flex items-center gap-2\">\r\n <i class=\"fa-solid fa-droplet text-brand-accent text-xs\"><\/i>\r\n COPA WATER EXPERTS\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button aria-label=\"Scroll to top\" onclick=\"window.scrollTo({top: 0, behavior: 'smooth'});\" class=\"absolute bottom-10 right-6 md:right-10 w-12 h-12 bg-white text-slate-900 rounded-full flex items-center justify-center shadow-xl hover:bg-brand-accent hover:text-white hover:-translate-y-2 transition-all duration-300 focus:outline-none\">\r\n <i class=\"fas fa-arrow-up\"><\/i>\r\n <\/button>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Copa Waters – Navbar info@copawaters.co.ke Mon – Fri: 8:00 AM – 5:00 PM Nairobi, Kenya info@copawaters.co.ke Consult Experts Copa Waters Expert Solutions Home About Us Services Our Services Borehole Drilling Hydrogeological Surveys Pump Installation Water Testing & Quality Water Treatment Solutions Borehole Rehabilitation Casing & Grouting Tank & Storage Systems Irrigation System Setup Consultation & […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":16,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":420,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/39\/revisions\/420"}],"wp:attachment":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}