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-f9d78c0 e-con e-atomic-element e-flexbox-base e-f9d78c0-f06385d \" data-id=\"f9d78c0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f9d78c0\">\n \t\t<div class=\"elementor-element elementor-element-c87918b elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"c87918b\" 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 name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<title>Copa Waters \u2014 Hero Section<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@400;600;700;800&family=Barlow+Condensed:wght@700;800&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:root {\r\n --blue: #0078C1;\r\n --blue-dark: #005a92;\r\n --white: #fff;\r\n --text-dark: #0d1f2d;\r\n --card-border: #e4e8ed;\r\n --font-display: 'Barlow Condensed', sans-serif;\r\n --font-body: 'Barlow', sans-serif;\r\n}\r\n\r\nhtml, body {\r\n font-family: var(--font-body);\r\n background: #f0f2f4;\r\n -webkit-font-smoothing: antialiased;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO SLIDER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n position: relative;\r\n width: 100%;\r\n height: 600px;\r\n overflow: hidden;\r\n}\r\n\r\n.slide {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n transition: opacity 0.9s ease;\r\n pointer-events: none;\r\n}\r\n.slide.active { opacity: 1; pointer-events: all; }\r\n\r\n.slide__bg {\r\n position: absolute;\r\n inset: 0;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.05);\r\n transition: transform 8s ease-out;\r\n}\r\n.slide.active .slide__bg { transform: scale(1); }\r\n\r\n.slide__overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to right, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.88) 100%);\r\n}\r\n\r\n.slide__body {\r\n position: absolute;\r\n right: 80px;\r\n top: 50%;\r\n transform: translateY(calc(-50% + 16px));\r\n max-width: 520px;\r\n text-align: right;\r\n opacity: 0;\r\n transition: opacity 0.7s 0.3s ease, transform 0.7s 0.3s ease;\r\n}\r\n.slide.active .slide__body { opacity: 1; transform: translateY(-50%); }\r\n\r\n.slide__tag {\r\n display: inline-flex; align-items: center; gap: 7px;\r\n background: rgba(0,120,193,0.2);\r\n border: 0.5px solid rgba(0,120,193,0.55);\r\n color: #8dd1f5;\r\n font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;\r\n padding: 5px 13px 5px 10px;\r\n border-radius: 30px; margin-bottom: 16px;\r\n}\r\n.slide__tag-dot {\r\n width: 6px; height: 6px; background: var(--blue); border-radius: 50%;\r\n animation: blink 2s ease-in-out infinite; flex-shrink: 0;\r\n}\r\n@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }\r\n\r\n.slide__title {\r\n font-family: var(--font-display);\r\n font-size: 52px; font-weight: 800; color: var(--white);\r\n line-height: 1.08; letter-spacing: -0.01em;\r\n text-shadow: 0 2px 16px rgba(0,0,0,0.3); margin-bottom: 16px;\r\n}\r\n.slide__sub {\r\n font-size: 13.5px; color: rgba(255,255,255,0.7); line-height: 1.65;\r\n max-width: 280px; margin-left: auto;\r\n border-right: 2.5px solid var(--blue); padding-right: 14px; margin-bottom: 26px;\r\n}\r\n.btn {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n background: var(--blue); color: var(--white);\r\n font-family: var(--font-body); font-size: 13px; font-weight: 700;\r\n letter-spacing: 0.03em; padding: 10px 12px 10px 22px;\r\n border-radius: 30px; border: none; cursor: pointer;\r\n text-decoration: none; transition: background .18s, transform .15s; white-space: nowrap;\r\n}\r\n.btn:hover { background: var(--blue-dark); transform: translateY(-1px); }\r\n.btn__arrow {\r\n display: flex; align-items: center; justify-content: center;\r\n width: 28px; height: 28px; background: var(--white);\r\n border-radius: 6px; color: var(--blue); flex-shrink: 0;\r\n}\r\n.btn__arrow svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }\r\n\r\n.pagination {\r\n position: absolute; right: 20px; top: 50%; transform: translateY(-50%);\r\n z-index: 10; display: flex; flex-direction: column; gap: 8px;\r\n}\r\n.pag-dot {\r\n width: 24px; height: 24px; border-radius: 50%; border: none;\r\n background: var(--white); color: var(--text-dark);\r\n font-size: 10px; font-weight: 700; cursor: pointer;\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background .2s, color .2s, transform .2s;\r\n -webkit-tap-highlight-color: transparent; touch-action: manipulation;\r\n}\r\n.pag-dot:hover { background: #dbeeff; transform: scale(1.1); }\r\n.pag-dot.active { background: var(--blue); color: var(--white); transform: scale(1.1); }\r\n\r\n.progress {\r\n position: absolute; bottom: 0; left: 0;\r\n height: 3px; background: var(--blue); width: 0%;\r\n z-index: 10; pointer-events: none;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SERVICE CARDS CAROUSEL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cards-section {\r\n background: var(--white);\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.cards-viewport {\r\n overflow: hidden;\r\n width: 100%;\r\n}\r\n\r\n.cards-track {\r\n display: flex;\r\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n will-change: transform;\r\n}\r\n\r\n.card {\r\n flex: 0 0 auto;\r\n padding: 28px 20px 26px;\r\n border-right: 0.5px solid var(--card-border);\r\n text-decoration: none;\r\n display: flex; flex-direction: column;\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n transition: background .18s;\r\n}\r\n.card:last-child { border-right: none; }\r\n.card:hover { background: #f2f8fd; }\r\n.card:hover .card__icon {\r\n background: var(--blue); border-color: var(--blue); color: var(--white); transform: scale(1.06);\r\n}\r\n.card__icon {\r\n width: 48px; height: 48px; border-radius: 50%;\r\n border: 1.5px solid var(--blue); color: var(--blue);\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 14px; flex-shrink: 0;\r\n transition: background .18s, color .18s, transform .18s;\r\n}\r\n.card__icon svg { width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }\r\n.card__title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; line-height: 1.3; }\r\n.card__desc { font-size: 11.5px; color: #6b7280; line-height: 1.55; }\r\n\r\n.cards-nav {\r\n position: absolute; top: 50%; transform: translateY(-50%);\r\n z-index: 5; background: var(--blue); color: var(--white);\r\n border: none; cursor: pointer; width: 32px; height: 32px;\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n transition: background .18s, opacity .18s;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n.cards-nav:hover { background: var(--blue-dark); }\r\n.cards-nav.hidden { opacity: 0; pointer-events: none; }\r\n.cards-nav svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }\r\n#cardsPrev { left: 10px; }\r\n#cardsNext { right: 10px; }\r\n\r\n.cards-dots {\r\n display: flex; justify-content: center; gap: 6px;\r\n padding: 8px 0 0;\r\n background: var(--white);\r\n}\r\n.cards-dot {\r\n width: 7px; height: 7px; border-radius: 50%;\r\n background: #d1d5db; border: none; cursor: pointer; padding: 0;\r\n transition: background .2s, transform .2s;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n.cards-dot.active { background: var(--blue); transform: scale(1.3); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 1024px) {\r\n .hero { height: 520px; }\r\n .slide__body { right: 50px; max-width: 460px; }\r\n .slide__title { font-size: 42px; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .hero { height: 480px; }\r\n .slide__body { right: 36px; max-width: 380px; }\r\n .slide__title { font-size: 34px; }\r\n .slide__sub { font-size: 13px; }\r\n .pagination { right: 10px; }\r\n}\r\n\r\n@media (max-width: 580px) {\r\n .hero { height: 460px; }\r\n .slide__overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%); }\r\n .slide__body {\r\n right: 0; left: 0; bottom: 24px; top: auto;\r\n transform: none; text-align: left; padding: 0 20px; max-width: 100%;\r\n }\r\n .slide.active .slide__body { transform: none; }\r\n .slide__title { font-size: 28px; margin-bottom: 10px; }\r\n .slide__sub {\r\n border-right: none; border-left: 2.5px solid var(--blue);\r\n padding-right: 0; padding-left: 12px; text-align: left;\r\n margin-left: 0; max-width: 100%; font-size: 12px; margin-bottom: 18px;\r\n }\r\n .slide__tag { font-size: 10px; margin-bottom: 12px; }\r\n .btn { font-size: 12px; padding: 9px 12px 9px 18px; }\r\n .btn__arrow { width: 24px; height: 24px; }\r\n .btn__arrow svg { width: 12px; height: 12px; }\r\n .pagination {\r\n flex-direction: row; right: auto; left: 50%; top: auto;\r\n bottom: 190px; transform: translateX(-50%); gap: 6px;\r\n }\r\n .pag-dot { width: 20px; height: 20px; font-size: 9px; }\r\n\r\n .card { padding: 20px 16px 18px; }\r\n .card__title { font-size: 12px; }\r\n .card__desc { font-size: 11px; }\r\n .card__icon { width: 42px; height: 42px; }\r\n .card__icon svg { width: 19px; height: 19px; }\r\n}\r\n\r\n@media (max-width: 400px) {\r\n .hero { height: 420px; }\r\n .slide__title { font-size: 24px; }\r\n .slide__body { padding: 0 16px; }\r\n .card__title { font-size: 11.5px; }\r\n .card__desc { font-size: 10.5px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"hero\" id=\"hero\">\r\n\r\n \r\n <div class=\"slide active\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.25-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Borehole Drilling<\/div>\r\n <h1 class=\"slide__title\">Professional Borehole<br>Drilling Services<\/h1>\r\n <p class=\"slide__sub\">Domestic, agricultural, commercial, community & industrial boreholes. Shallow, deep & hand-dug wells.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/borehole-drilling\">Get a Quote <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.41-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Hydrogeology<\/div>\r\n <h1 class=\"slide__title\">Hydrogeological<br>Surveys & Reports<\/h1>\r\n <p class=\"slide__sub\">Groundwater investigation & geophysical surveys to identify optimal drilling points and expected yields.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/hydrogeological-surveys\">Request Survey <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.28-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Pump Systems<\/div>\r\n <h1 class=\"slide__title\">Pump Installation<br>& Solarization<\/h1>\r\n <p class=\"slide__sub\">Submersible & surface pumps, solar pump systems, and manual hand pumps for rural setups.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/pump-installation\">Learn More <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.32-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Water Treatment<\/div>\r\n <h1 class=\"slide__title\">Water Treatment<br>Solutions<\/h1>\r\n <p class=\"slide__sub\">Filtration systems, reverse osmosis, chlorination & UV systems for safe, clean water supply.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/water-treatment-solutions\">View Options <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.30-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Rehabilitation<\/div>\r\n <h1 class=\"slide__title\">Borehole Rehab<br>& Maintenance<\/h1>\r\n <p class=\"slide__sub\">Cleaning & flushing old boreholes, re-casing, re-drilling & restoring full water output.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/borehole-rehabilitation-maintenance\">Book Service <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.29-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Storage Systems<\/div>\r\n <h1 class=\"slide__title\">Tank & Storage<br>System Installation<\/h1>\r\n <p class=\"slide__sub\">Elevated tanks, underground reservoirs & pressure systems designed for your water needs.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/tank-storage-system-installation\">Consult Here <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pagination\" id=\"pagination\">\r\n <button class=\"pag-dot active\" data-i=\"0\">1<\/button>\r\n <button class=\"pag-dot\" data-i=\"1\">2<\/button>\r\n <button class=\"pag-dot\" data-i=\"2\">3<\/button>\r\n <button class=\"pag-dot\" data-i=\"3\">4<\/button>\r\n <button class=\"pag-dot\" data-i=\"4\">5<\/button>\r\n <button class=\"pag-dot\" data-i=\"5\">6<\/button>\r\n <\/div>\r\n\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"cards-section\">\r\n <button class=\"cards-nav hidden\" id=\"cardsPrev\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 12H5M11 18l-6-6 6-6\"\/><\/svg>\r\n <\/button>\r\n <button class=\"cards-nav\" id=\"cardsNext\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\r\n <\/button>\r\n\r\n <div class=\"cards-viewport\" id=\"cardsViewport\">\r\n <div class=\"cards-track\" id=\"cardsTrack\">\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/borehole-drilling\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2s-8 9.5-8 14a8 8 0 0016 0c0-4.5-8-14-8-14z\"\/><path d=\"M12 22a6 6 0 01-6-6c0-3.3 4-9.5 6-12.2\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Borehole Drilling<\/div>\r\n <div class=\"card__desc\">Domestic, agricultural, commercial & industrial boreholes. Shallow & deep drilling.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/hydrogeological-surveys\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z\"\/><path d=\"M2 12h20\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Hydrogeological Surveys<\/div>\r\n <div class=\"card__desc\">Geophysical surveys to identify optimal drilling points & expected water yields.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/pump-installation\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2v6m0 8v6M2 12h6m8 0h6\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 5a7 7 0 017 7\"\/><path d=\"M5 12a7 7 0 017-7\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Pump Installation<\/div>\r\n <div class=\"card__desc\">Submersible & surface pumps, solar systems & manual hand pumps.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/water-treatment\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Water Testing & Quality<\/div>\r\n <div class=\"card__desc\">Comprehensive water quality analysis & lab testing for safe water supply.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/water-treatment\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Water Treatment Solutions<\/div>\r\n <div class=\"card__desc\">Filtration, reverse osmosis, chlorination & UV systems for clean water.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/borehole-rehabilitation-maintenance\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Borehole Rehab & Maintenance<\/div>\r\n <div class=\"card__desc\">Flushing, re-casing & re-drilling old boreholes to restore full output.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/casing-and-grouting\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M3 15h18M9 3v18\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Casing & Grouting<\/div>\r\n <div class=\"card__desc\">Professional borehole casing & grouting for structural integrity & contamination prevention.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/tank-storage-system-installation\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 21h18\"\/><path d=\"M5 21V7l7-4 7 4v14\"\/><path d=\"M9 21v-6h6v6\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Tank & Storage Systems<\/div>\r\n <div class=\"card__desc\">Elevated tanks, underground reservoirs & pressure systems installed.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/irrigation-system-setup\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 22V12\"\/><path d=\"M5 12H2a10 10 0 0020 0h-3\"\/><path d=\"M12 12V2\"\/><path d=\"M7 7l5 5 5-5\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Irrigation System Setup<\/div>\r\n <div class=\"card__desc\">Drip, sprinkler & surface irrigation systems for agricultural & landscaping needs.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/consultation-permitting-support\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/><path d=\"M14 2v6h6\"\/><path d=\"M16 13H8M16 17H8M10 9H8\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Consultation & Permitting<\/div>\r\n <div class=\"card__desc\">Expert guidance on water permits, regulatory compliance & project planning support.<\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cards-dots\" id=\"cardsDots\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO SLIDER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n var HERO_INTERVAL = 5000;\r\n var slides = document.querySelectorAll('.slide');\r\n var heroDots = document.querySelectorAll('.pag-dot');\r\n var bar = document.getElementById('progress');\r\n var hero = document.getElementById('hero');\r\n var hCur = 0, hTimer = null;\r\n\r\n function startBar(){\r\n bar.style.transition = 'none'; bar.style.width = '0%'; bar.offsetWidth;\r\n bar.style.transition = 'width ' + HERO_INTERVAL + 'ms linear'; bar.style.width = '100%';\r\n }\r\n function heroGoTo(n){\r\n slides[hCur].classList.remove('active'); heroDots[hCur].classList.remove('active');\r\n hCur = (n + slides.length) % slides.length;\r\n slides[hCur].classList.add('active'); heroDots[hCur].classList.add('active');\r\n startBar();\r\n }\r\n function heroAuto(){ clearInterval(hTimer); hTimer = setInterval(function(){ heroGoTo(hCur+1); }, HERO_INTERVAL); }\r\n\r\n heroDots.forEach(function(d){\r\n d.addEventListener('click', function(){ heroGoTo(parseInt(d.dataset.i)); heroAuto(); });\r\n });\r\n\r\n var htx=0,hty=0;\r\n hero.addEventListener('touchstart',function(e){ htx=e.changedTouches[0].clientX; hty=e.changedTouches[0].clientY; },{passive:true});\r\n hero.addEventListener('touchend',function(e){\r\n var dx=htx-e.changedTouches[0].clientX, dy=hty-e.changedTouches[0].clientY;\r\n if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>40){ heroGoTo(dx>0?hCur+1:hCur-1); heroAuto(); }\r\n },{passive:true});\r\n\r\n document.addEventListener('keydown',function(e){\r\n if(e.key==='ArrowRight'){ heroGoTo(hCur+1); heroAuto(); }\r\n if(e.key==='ArrowLeft'){ heroGoTo(hCur-1); heroAuto(); }\r\n });\r\n\r\n startBar(); heroAuto();\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CARDS CAROUSEL\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n var CARD_INTERVAL = 2500;\r\n var track = document.getElementById('cardsTrack');\r\n var viewport = document.getElementById('cardsViewport');\r\n var prevBtn = document.getElementById('cardsPrev');\r\n var nextBtn = document.getElementById('cardsNext');\r\n var dotsWrap = document.getElementById('cardsDots');\r\n var cards = document.querySelectorAll('.card');\r\n var cCur = 0, cTimer = null;\r\n var visCount = 1;\r\n\r\n var dotEls = [];\r\n function buildDots(){\r\n dotsWrap.innerHTML = '';\r\n dotEls = [];\r\n var pages = Math.ceil(cards.length \/ visCount);\r\n for(var i=0;i<pages;i++){\r\n var d = document.createElement('button');\r\n d.className = 'cards-dot' + (i===0?' active':'');\r\n d.dataset.p = i;\r\n d.addEventListener('click', (function(idx){ return function(){ cGoTo(idx); cAuto(); }; })(i));\r\n dotsWrap.appendChild(d);\r\n dotEls.push(d);\r\n }\r\n }\r\n\r\n function layout(){\r\n var vw = viewport.clientWidth;\r\n if(vw >= 900) visCount = 6;\r\n else if(vw >= 700) visCount = 4;\r\n else if(vw >= 500) visCount = 3;\r\n else if(vw >= 340) visCount = 2;\r\n else visCount = 1;\r\n\r\n var cardW = vw \/ visCount;\r\n cards.forEach(function(c){ c.style.width = cardW + 'px'; });\r\n buildDots();\r\n cGoTo(0);\r\n }\r\n\r\n function cGoTo(n){\r\n var pages = Math.ceil(cards.length \/ visCount);\r\n if(n < 0) n = pages - 1;\r\n if(n >= pages) n = 0;\r\n cCur = n;\r\n\r\n var cardW = viewport.clientWidth \/ visCount;\r\n var offset = cCur * visCount * cardW;\r\n var maxOffset = (cards.length - visCount) * cardW;\r\n if(offset > maxOffset) offset = maxOffset;\r\n track.style.transform = 'translateX(-' + offset + 'px)';\r\n\r\n dotEls.forEach(function(d,i){ d.classList.toggle('active', i===cCur); });\r\n\r\n prevBtn.classList.toggle('hidden', cCur === 0);\r\n nextBtn.classList.toggle('hidden', cCur >= pages - 1);\r\n }\r\n\r\n function cAuto(){\r\n clearInterval(cTimer);\r\n cTimer = setInterval(function(){\r\n var pages = Math.ceil(cards.length \/ visCount);\r\n cGoTo((cCur + 1) % pages);\r\n }, CARD_INTERVAL);\r\n }\r\n\r\n prevBtn.addEventListener('click', function(){ cGoTo(cCur-1); cAuto(); });\r\n nextBtn.addEventListener('click', function(){ cGoTo(cCur+1); cAuto(); });\r\n\r\n var ctx=0;\r\n viewport.addEventListener('touchstart',function(e){ ctx=e.changedTouches[0].clientX; },{passive:true});\r\n viewport.addEventListener('touchend',function(e){\r\n var dx=ctx-e.changedTouches[0].clientX;\r\n if(Math.abs(dx)>40){ cGoTo(dx>0?cCur+1:cCur-1); cAuto(); }\r\n },{passive:true});\r\n\r\n layout();\r\n cAuto();\r\n window.addEventListener('resize', function(){ layout(); cAuto(); });\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8daecd4 e-con e-atomic-element e-flexbox-base e-8daecd4-cccd79d \" data-id=\"8daecd4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8daecd4\">\n \t\t<div class=\"elementor-element elementor-element-69281cd elementor-widget__width-inherit elementor-widget-tablet__width-initial elementor-widget elementor-widget-html\" data-id=\"69281cd\" 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 name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Who We Are - Copa Waters<\/title>\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 <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f8fafc;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n\r\n \/* \u2500\u2500 SECTION \u2500\u2500 *\/\r\n .whoweare {\r\n padding: 100px 0;\r\n overflow: hidden; \/* Prevents overflow from decorative elements *\/\r\n }\r\n\r\n .whoweare-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 72px;\r\n align-items: center;\r\n }\r\n\r\n \/* \u2500\u2500 LEFT: IMAGE \u2500\u2500 *\/\r\n .whoweare-image {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .whoweare-image__main {\r\n width: 100%;\r\n \/* Replaced fixed height with aspect ratio for perfect proportions *\/\r\n aspect-ratio: 4\/4.2; \r\n max-height: 480px; \r\n object-fit: cover;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 40px -10px rgba(43, 57, 144, 0.15);\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n .whoweare-image:hover .whoweare-image__main {\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* Elegant Dotted Pattern behind image *\/\r\n .whoweare-image::before {\r\n content: '';\r\n position: absolute;\r\n top: -30px;\r\n left: -30px;\r\n width: 200px;\r\n height: 200px;\r\n background-image: radial-gradient(rgba(0, 118, 190, 0.3) 2px, transparent 2px);\r\n background-size: 16px 16px;\r\n z-index: -1;\r\n }\r\n\r\n \/* Soft color blob *\/\r\n .whoweare-image::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -20px;\r\n right: -20px;\r\n width: 70%;\r\n height: 50%;\r\n background: linear-gradient(135deg, rgba(43, 57, 144, 0.08), rgba(0, 118, 190, 0.05));\r\n border-radius: 24px;\r\n z-index: -2;\r\n }\r\n\r\n \/* \u2500\u2500 OVERLAY CARDS \u2500\u2500 *\/\r\n .overlay-card {\r\n position: absolute;\r\n background: #fff;\r\n border-radius: 16px;\r\n box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n z-index: 10;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .overlay-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 25px 50px -10px rgba(0, 118, 190, 0.15);\r\n }\r\n\r\n \/* Registered card *\/\r\n .overlay-registered {\r\n top: 40px;\r\n right: -40px;\r\n padding: 18px 24px;\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n\r\n .overlay-registered__icon {\r\n width: 48px;\r\n height: 48px;\r\n background: linear-gradient(135deg, #0076be, #0288d1);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-shadow: 0 8px 16px -4px rgba(0, 118, 190, 0.4);\r\n }\r\n\r\n .overlay-registered__icon svg {\r\n width: 24px;\r\n height: 24px;\r\n stroke: #fff;\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .overlay-registered__number {\r\n font-size: 1.5rem;\r\n font-weight: 900;\r\n color: #1e293b;\r\n line-height: 1;\r\n }\r\n\r\n .overlay-registered__label {\r\n font-size: 0.8rem;\r\n color: #64748b;\r\n font-weight: 600;\r\n margin-top: 4px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n \/* Coverage card *\/\r\n .overlay-coverage {\r\n bottom: -24px;\r\n left: -30px;\r\n display: flex;\r\n align-items: stretch;\r\n overflow: hidden;\r\n }\r\n\r\n .overlay-coverage__flag {\r\n background: linear-gradient(135deg, #2b3990, #1e296b);\r\n padding: 16px 24px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .overlay-coverage__number {\r\n font-size: 1.75rem;\r\n font-weight: 900;\r\n color: #fff;\r\n line-height: 1;\r\n }\r\n\r\n .overlay-coverage__code {\r\n font-size: 0.65rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n margin-top: 4px;\r\n }\r\n\r\n .overlay-coverage__text {\r\n padding: 16px 24px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .overlay-coverage__text p {\r\n font-size: 0.9rem;\r\n color: #1e293b;\r\n font-weight: 800;\r\n white-space: nowrap;\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n \/* \u2500\u2500 RIGHT: CONTENT \u2500\u2500 *\/\r\n .whoweare-content {\r\n padding-left: 20px;\r\n }\r\n\r\n .whoweare-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .whoweare-label__text {\r\n font-size: 0.85rem;\r\n font-weight: 800;\r\n color: #0076be;\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n }\r\n\r\n .whoweare-label__line {\r\n width: 60px;\r\n height: 2px;\r\n background: linear-gradient(90deg, #0076be, transparent);\r\n border-radius: 2px;\r\n }\r\n\r\n .whoweare-title {\r\n font-size: 3rem;\r\n font-weight: 900;\r\n line-height: 1.15;\r\n margin-bottom: 28px;\r\n color: #0f172a;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .whoweare-desc {\r\n font-size: 1.05rem;\r\n line-height: 1.8;\r\n color: #475569;\r\n margin-bottom: 36px;\r\n }\r\n\r\n .whoweare-desc strong {\r\n color: #0f172a;\r\n font-weight: 700;\r\n }\r\n\r\n \/* \u2500\u2500 HIGHLIGHTS \u2500\u2500 *\/\r\n .whoweare-highlights {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .highlight-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 16px;\r\n border-radius: 12px;\r\n background: #fff;\r\n border: 1px solid #e2e8f0;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.02);\r\n cursor: default;\r\n }\r\n\r\n .highlight-item:hover {\r\n border-color: #0076be;\r\n box-shadow: 0 10px 20px -5px rgba(0, 118, 190, 0.1);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .highlight-item__icon {\r\n width: 40px;\r\n height: 40px;\r\n background: #f0f9ff;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all 0.3s;\r\n }\r\n\r\n .highlight-item:hover .highlight-item__icon {\r\n background: #0076be;\r\n }\r\n\r\n .highlight-item__icon svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: #0076be;\r\n fill: none;\r\n stroke-width: 2.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: stroke 0.3s;\r\n }\r\n\r\n .highlight-item:hover .highlight-item__icon svg {\r\n stroke: #fff;\r\n }\r\n\r\n .highlight-item__text {\r\n font-size: 0.95rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n .whoweare {\r\n padding: 80px 0;\r\n }\r\n .whoweare-container {\r\n gap: 50px;\r\n }\r\n .whoweare-title {\r\n font-size: 2.5rem;\r\n }\r\n .whoweare-image__main {\r\n aspect-ratio: 1\/1; \/* Switch to square-ish on medium screens *\/\r\n }\r\n .overlay-registered {\r\n right: -20px;\r\n }\r\n }\r\n\r\n @media (max-width: 840px) {\r\n .whoweare-container {\r\n grid-template-columns: 1fr;\r\n gap: 60px;\r\n }\r\n .whoweare-content {\r\n padding-left: 0;\r\n }\r\n .whoweare-image {\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n .whoweare-image__main {\r\n aspect-ratio: 16\/10; \/* Wider banner style for mobile stack *\/\r\n max-height: 400px;\r\n }\r\n .overlay-registered {\r\n right: 20px;\r\n top: -20px;\r\n }\r\n .overlay-coverage {\r\n left: 20px;\r\n bottom: -20px;\r\n }\r\n }\r\n\r\n @media (max-width: 580px) {\r\n .whoweare {\r\n padding: 60px 0;\r\n }\r\n .whoweare-image__main {\r\n aspect-ratio: 4\/3;\r\n border-radius: 16px;\r\n }\r\n .whoweare-image::before,\r\n .whoweare-image::after {\r\n display: none; \/* Keep mobile clean *\/\r\n }\r\n .overlay-registered {\r\n right: 12px;\r\n top: 12px;\r\n padding: 12px 16px;\r\n gap: 12px;\r\n border-radius: 12px;\r\n }\r\n .overlay-registered__icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n }\r\n .overlay-registered__icon svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n .overlay-registered__number {\r\n font-size: 1.25rem;\r\n }\r\n .overlay-registered__label {\r\n font-size: 0.7rem;\r\n }\r\n .overlay-coverage {\r\n left: 12px;\r\n bottom: -16px;\r\n border-radius: 12px;\r\n }\r\n .overlay-coverage__flag {\r\n padding: 12px 16px;\r\n }\r\n .overlay-coverage__number {\r\n font-size: 1.3rem;\r\n }\r\n .overlay-coverage__text {\r\n padding: 12px 16px;\r\n }\r\n .overlay-coverage__text p {\r\n font-size: 0.8rem;\r\n }\r\n .whoweare-title {\r\n font-size: 2rem;\r\n margin-bottom: 20px;\r\n }\r\n .whoweare-desc {\r\n font-size: 0.95rem;\r\n }\r\n .whoweare-highlights {\r\n grid-template-columns: 1fr;\r\n }\r\n .highlight-item {\r\n padding: 14px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<section class=\"whoweare\">\r\n <div class=\"whoweare-container\">\r\n\r\n \r\n <div class=\"whoweare-image\">\r\n\r\n <img decoding=\"async\" alt=\"Copa Waters drilling team in action\"\r\n class=\"whoweare-image__main\"\r\n 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 \r\n <div class=\"overlay-card overlay-registered\">\r\n <div class=\"overlay-registered__icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <p class=\"overlay-registered__number\">100%<\/p>\r\n <p class=\"overlay-registered__label\">Registered<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"overlay-card overlay-coverage\">\r\n <div class=\"overlay-coverage__flag\">\r\n <span class=\"overlay-coverage__number\">254<\/span>\r\n <span class=\"overlay-coverage__code\">Kenya<\/span>\r\n <\/div>\r\n <div class=\"overlay-coverage__text\">\r\n <p>Nationwide Coverage<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"whoweare-content\">\r\n\r\n <div class=\"whoweare-label\">\r\n <span class=\"whoweare-label__text\">About Us<\/span>\r\n <span class=\"whoweare-label__line\"><\/span>\r\n <\/div>\r\n\r\n <h2 class=\"whoweare-title\">Who We Are<\/h2>\r\n\r\n <p class=\"whoweare-desc\">\r\n At <strong>Copa Waters<\/strong>, we are committed to delivering pure water solutions with expert precision and unwavering reliability. Our core team is led by professionally trained geologists and water engineers who bring scientific rigor to every project. By combining cutting-edge drilling technology with unmatched industry expertise, we provide accurate site selection, efficient drilling, and sustainable groundwater solutions tailored to your specific needs.\r\n <\/p>\r\n\r\n <div class=\"whoweare-highlights\">\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">Expert Geologists<\/span>\r\n <\/div>\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">Advanced Technology<\/span>\r\n <\/div>\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">Sustainable Solutions<\/span>\r\n <\/div>\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">100% Reliable<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\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-8ff3164 e-con e-atomic-element e-flexbox-base e-8ff3164-143db99 \" data-id=\"8ff3164\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8ff3164\">\n \t\t<div class=\"elementor-element elementor-element-dc65052 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"dc65052\" 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 Recent Work - Copawaters<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n \r\n <style>\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 \/* Hide scrollbar for seamless look *\/\r\n .no-scrollbar::-webkit-scrollbar {\r\n display: none;\r\n }\r\n .no-scrollbar {\r\n -ms-overflow-style: none; \/* IE and Edge *\/\r\n scrollbar-width: none; \/* Firefox *\/\r\n }\r\n\r\n \/* Scroll snapping for app-like swiping *\/\r\n .snap-x-mandatory {\r\n scroll-snap-type: x mandatory;\r\n }\r\n .snap-center {\r\n scroll-snap-align: center;\r\n }\r\n \r\n \/* Smooth image scaling on hover *\/\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 <\/style>\r\n<\/head>\r\n<body class=\"bg-[#f8fafc] text-gray-900 font-sans min-h-screen flex items-center selection:bg-sky-100 selection:text-sky-900\">\r\n\r\n <section class=\"py-20 px-4 md:px-8 w-full max-w-[90rem] mx-auto relative\" data-purpose=\"recent-work\">\r\n \r\n <div class=\"text-center mb-14\" data-purpose=\"section-header\">\r\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900 inline-flex items-center justify-center tracking-tight\">\r\n <span class=\"title-accent\"><\/span>\r\n Our Recent Work\r\n <\/h2>\r\n <p class=\"text-slate-500 mt-4 max-w-2xl mx-auto text-base md:text-lg\">\r\n Swipe through our latest fieldwork, featuring live project footage and site preparations.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"relative group\/nav\">\r\n \r\n <button id=\"prevBtn\" class=\"absolute left-2 md:left-4 top-1\/2 -translate-y-1\/2 z-20 bg-white\/90 hover:bg-white text-slate-800 p-3.5 md:p-4 rounded-full shadow-[0_4px_20px_-4px_rgba(0,0,0,0.15)] backdrop-blur-md transition-all duration-300 opacity-0 md:group-hover\/nav:opacity-100 focus:outline-none focus:ring-2 focus:ring-sky-500 scale-95 hover:scale-100\" aria-label=\"Previous\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\" class=\"w-5 h-5 md:w-6 md:h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <div id=\"carouselTrack\" class=\"flex gap-5 md:gap-8 overflow-x-auto no-scrollbar snap-x-mandatory pb-8 pt-4 px-4 md:px-12 scroll-smooth\">\r\n \r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Hydrological Survey<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Initial geological and groundwater assessment to determine optimal drilling locations.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Steel Construction<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Fabrication and erection of robust steel structures to support water infrastructure.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Casing Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Secure installation of borehole casings to ensure structural integrity and water purity.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Drilling<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Heavy-duty machinery executing precise ground penetration to access water reserves.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900\">\r\n <video autoplay muted loop playsinline 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 bg-black\/40 backdrop-blur-md px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <div class=\"w-2 h-2 bg-red-500 rounded-full animate-pulse\"><\/div>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Footage<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Pump Lifting & Rehabilitation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Careful extraction and maintenance operations to restore existing water systems.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900\">\r\n <video autoplay muted loop playsinline 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 bg-black\/40 backdrop-blur-md px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <div class=\"w-2 h-2 bg-red-500 rounded-full animate-pulse\"><\/div>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Footage<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Pump Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Final deployment and testing of high-efficiency pumps to secure steady water flow.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button id=\"nextBtn\" class=\"absolute right-2 md:right-4 top-1\/2 -translate-y-1\/2 z-20 bg-white\/90 hover:bg-white text-slate-800 p-3.5 md:p-4 rounded-full shadow-[0_4px_20px_-4px_rgba(0,0,0,0.15)] backdrop-blur-md transition-all duration-300 opacity-0 md:group-hover\/nav:opacity-100 focus:outline-none focus:ring-2 focus:ring-sky-500 scale-95 hover:scale-100\" aria-label=\"Next\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\" class=\"w-5 h-5 md:w-6 md:h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/section>\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const track = document.getElementById(\"carouselTrack\");\r\n const prevBtn = document.getElementById(\"prevBtn\");\r\n const nextBtn = document.getElementById(\"nextBtn\");\r\n\r\n \/\/ Get accurate scroll amount including the dynamic gap\r\n const getScrollAmount = () => {\r\n const item = track.querySelector('div.snap-center');\r\n if (!item) return 300;\r\n const gap = parseInt(window.getComputedStyle(track).gap) || 20;\r\n return item.offsetWidth + gap;\r\n };\r\n\r\n \/\/ Navigation Actions\r\n nextBtn.addEventListener(\"click\", () => {\r\n track.scrollBy({ left: getScrollAmount(), behavior: 'smooth' });\r\n });\r\n\r\n \/\/ Update Button Visibility on Scroll\r\n const updateButtons = () => {\r\n const maxScrollLeft = track.scrollWidth - track.clientWidth;\r\n \r\n \/\/ Mobile-friendly fade out at edges\r\n prevBtn.style.opacity = track.scrollLeft <= 5 ? '0' : '';\r\n prevBtn.style.pointerEvents = track.scrollLeft <= 5 ? 'none' : 'auto';\r\n \r\n nextBtn.style.opacity = track.scrollLeft >= maxScrollLeft - 5 ? '0' : '';\r\n nextBtn.style.pointerEvents = track.scrollLeft >= maxScrollLeft - 5 ? 'none' : 'auto';\r\n };\r\n\r\n track.addEventListener(\"scroll\", updateButtons);\r\n window.addEventListener(\"resize\", updateButtons);\r\n \r\n \/\/ Initial check\r\n updateButtons();\r\n\r\n \/\/ --- Auto-Sliding Logic ---\r\n let autoSlideInterval;\r\n const slideDelay = 3000; \/\/ Speed in milliseconds (3000 = 3 seconds)\r\n\r\n const startAutoSlide = () => {\r\n autoSlideInterval = setInterval(() => {\r\n const maxScrollLeft = track.scrollWidth - track.clientWidth;\r\n \r\n \/\/ If at the end, smoothly scroll back to the beginning\r\n if (track.scrollLeft >= maxScrollLeft - 10) {\r\n track.scrollTo({ left: 0, behavior: 'smooth' });\r\n } else {\r\n \/\/ Otherwise, slide to the next item\r\n track.scrollBy({ left: getScrollAmount(), behavior: 'smooth' });\r\n }\r\n }, slideDelay);\r\n };\r\n\r\n const stopAutoSlide = () => {\r\n clearInterval(autoSlideInterval);\r\n };\r\n\r\n \/\/ Start the auto-slide on load\r\n startAutoSlide();\r\n\r\n \/\/ Pause auto-slide when the user interacts with the carousel\r\n track.addEventListener('mouseenter', stopAutoSlide);\r\n track.addEventListener('mouseleave', startAutoSlide);\r\n track.addEventListener('touchstart', stopAutoSlide);\r\n track.addEventListener('touchend', startAutoSlide);\r\n \r\n \/\/ Stop auto-slide when using the navigation buttons to prevent jarring jumps\r\n prevBtn.addEventListener(\"click\", () => {\r\n stopAutoSlide();\r\n track.scrollBy({ left: -getScrollAmount(), behavior: 'smooth' });\r\n setTimeout(startAutoSlide, slideDelay); \/\/ Restart after delay\r\n });\r\n \r\n nextBtn.addEventListener(\"click\", () => {\r\n stopAutoSlide();\r\n \/\/ The scroll action is already handled in the previous event listener\r\n setTimeout(startAutoSlide, slideDelay); \/\/ Restart after delay\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-a1cd88f e-con e-atomic-element e-flexbox-base e-a1cd88f-019a3aa \" data-id=\"a1cd88f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a1cd88f\">\n \t\t<div class=\"elementor-element elementor-element-555a156 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"555a156\" 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 Current Statistics<\/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 \/* Safe Entrance Animations using Keyframes *\/\r\n @keyframes slideUpFade {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .animate-on-load {\r\n animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n opacity: 0; \/* Starts hidden, but animation forces it visible immediately *\/\r\n }\r\n\r\n \/* Staggered animation delays *\/\r\n .delay-100 { animation-delay: 100ms; }\r\n .delay-200 { animation-delay: 200ms; }\r\n .delay-300 { animation-delay: 300ms; }\r\n .delay-400 { animation-delay: 400ms; }\r\n .delay-500 { animation-delay: 500ms; }\r\n .delay-600 { animation-delay: 600ms; }\r\n\r\n \/* Elegant background gradient *\/\r\n .bg-elegant-gradient {\r\n background: linear-gradient(135deg, #CBE2F1 0%, #E8F1F8 100%);\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 'light-blue-bg': '#CBE2F1',\r\n 'dark-grey-col': '#4C5D66',\r\n 'primary-blue': '#1686C1',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-primary-blue selection:text-white\">\r\n\r\n <section class=\"bg-elegant-gradient py-24 font-sans relative overflow-hidden min-h-screen flex items-center\" id=\"stats-section\">\r\n \r\n <div class=\"absolute top-0 left-0 w-64 h-64 bg-white\/40 rounded-full blur-3xl -translate-y-1\/2 -translate-x-1\/2 pointer-events-none\"><\/div>\r\n <div class=\"absolute bottom-0 right-0 w-96 h-96 bg-primary-blue\/10 rounded-full blur-3xl translate-y-1\/3 translate-x-1\/3 pointer-events-none\"><\/div>\r\n\r\n <div class=\"max-w-[90rem] mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full\">\r\n \r\n <div class=\"text-center mb-16 animate-on-load\">\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-primary-blue to-sky-300 mx-auto mb-6 rounded-full\"><\/div>\r\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight\">Our Current Statistics<\/h2>\r\n <p class=\"mt-4 text-slate-600 max-w-2xl mx-auto text-lg\">Delivering sustainable water solutions and impactful results across all our active regions.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 shadow-2xl rounded-3xl overflow-hidden border border-white\/50 bg-white\">\r\n \r\n <div class=\"group bg-white p-8 text-center flex flex-col justify-center items-center hover:bg-slate-50 transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-gray-100 animate-on-load delay-100\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.2)] transition-all duration-500 bg-white\">\r\n <i class=\"fa-solid fa-faucet-drip text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-slate-900 mb-2 counter\" data-target=\"52\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider leading-tight\">Shallow<br\/>Wells<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-dark-grey-col p-8 text-center flex flex-col justify-center items-center hover:bg-[#43525a] transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-white\/10 animate-on-load delay-200\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/50 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.3)] transition-all duration-500 bg-dark-grey-col\">\r\n <i class=\"fa-solid fa-droplet text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-white mb-2 counter\" data-target=\"200\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-300 uppercase tracking-wider leading-tight\">Boreholes<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-white p-8 text-center flex flex-col justify-center items-center hover:bg-slate-50 transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-gray-100 animate-on-load delay-300\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.2)] transition-all duration-500 bg-white\">\r\n <i class=\"fa-solid fa-hard-hat text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-slate-900 mb-2 counter\" data-target=\"115\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider leading-tight\">Hydrogeological<br\/>Surveys<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-dark-grey-col p-8 text-center flex flex-col justify-center items-center hover:bg-[#43525a] transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-white\/10 animate-on-load delay-400\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/50 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.3)] transition-all duration-500 bg-dark-grey-col\">\r\n <i class=\"fa-solid fa-pump-water text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-white mb-2 counter\" data-target=\"100\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-300 uppercase tracking-wider leading-tight\">Installed<br\/>Pumps<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-white p-8 text-center flex flex-col justify-center items-center hover:bg-slate-50 transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-gray-100 animate-on-load delay-500\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.2)] transition-all duration-500 bg-white\">\r\n <i class=\"fa-solid fa-hand-holding-droplet text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-slate-900 mb-2 counter\" data-target=\"60\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider leading-tight\">Water<br\/>Tanks<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-dark-grey-col p-8 text-center flex flex-col justify-center items-center hover:bg-[#43525a] transition-colors duration-300 animate-on-load delay-600\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/50 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.3)] transition-all duration-500 bg-dark-grey-col\">\r\n <i class=\"fa-solid fa-truck-droplet text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-white mb-2 counter\" data-target=\"21\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-300 uppercase tracking-wider leading-tight\">Serviced<br\/>Boreholes<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const counters = document.querySelectorAll('.counter');\r\n \r\n counters.forEach(counter => {\r\n const target = +counter.getAttribute('data-target');\r\n const duration = 2000; \/\/ Total animation time in ms\r\n const increment = target \/ (duration \/ 16); \/\/ 60fps calculation\r\n \r\n let current = 0;\r\n const updateCounter = () => {\r\n current += increment;\r\n if (current < target) {\r\n counter.innerText = Math.ceil(current);\r\n requestAnimationFrame(updateCounter);\r\n } else {\r\n counter.innerText = target;\r\n }\r\n };\r\n \r\n \/\/ Add a slight delay to the counting so it matches the CSS fade-in\r\n setTimeout(updateCounter, 300);\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-5856089 e-con e-atomic-element e-flexbox-base e-5856089-e31aeae \" data-id=\"5856089\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5856089\">\n \t\t<div class=\"elementor-element elementor-element-ce16aa3 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"ce16aa3\" 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>FAQ - Copawaters<\/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 \/* CSS Entrance Animation *\/\r\n @keyframes slideUpFade {\r\n 0% { opacity: 0; transform: translateY(40px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .animate-on-load {\r\n animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* Staggered Delays *\/\r\n .delay-100 { animation-delay: 100ms; }\r\n .delay-200 { animation-delay: 200ms; }\r\n <\/style>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'primary-blue': '#1686C1',\r\n 'deep-navy': '#0f172a',\r\n 'soft-bg': '#f8fafc',\r\n 'border-light': '#e2e8f0',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"bg-soft-bg font-sans text-slate-800 antialiased selection:bg-primary-blue selection:text-white\">\r\n\r\n <section class=\"py-24 px-4 sm:px-6 lg:px-8 max-w-[90rem] mx-auto min-h-screen\">\r\n \r\n <div class=\"text-center mb-16 animate-on-load\">\r\n <p class=\"text-primary-blue font-semibold tracking-wider uppercase text-sm mb-3\">Knowledge Base<\/p>\r\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-deep-navy tracking-tight mb-4\">Frequently Asked Questions<\/h2>\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-primary-blue to-sky-300 mx-auto rounded-full\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-10 max-w-7xl mx-auto\">\r\n \r\n <div class=\"space-y-4 animate-on-load delay-100\">\r\n \r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq1\" class=\"peer hidden\" \/>\r\n <label for=\"faq1\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">1. How do I know if there's water on my land?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n We conduct a hydrogeological survey using advanced geophysical tools to assess the presence, depth, and quality of underground water before drilling.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq2\" class=\"peer hidden\" \/>\r\n <label for=\"faq2\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">2. How long does the drilling process take?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Depending on site conditions and borehole depth, drilling typically takes 2\u20135 days. We\u2019ll provide a more accurate timeline after the site survey.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq3\" class=\"peer hidden\" \/>\r\n <label for=\"faq3\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">3. How deep will the borehole be?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Borehole depth varies based on location and geology but generally ranges from 50 to 250 meters. Our trained geologists determine the optimal depth during the survey.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq4\" class=\"peer hidden\" \/>\r\n <label for=\"faq4\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">4. What type of pump will be installed?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n We recommend the best pump (submersible, solar, or hand pump) based on your water usage, borehole depth, and power availability.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq5\" class=\"peer hidden\" \/>\r\n <label for=\"faq5\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">5. Is the water safe to drink?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Yes, after drilling we offer water quality testing and treatment services to ensure the water is clean and safe for consumption.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq6\" class=\"peer hidden\" \/>\r\n <label for=\"faq6\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">6. Do I need any permits before drilling?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n In some areas, permits or environmental approvals may be required. We\u2019ll guide you through the process and assist with any necessary documentation.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 animate-on-load delay-200\">\r\n \r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq7\" class=\"peer hidden\" \/>\r\n <label for=\"faq7\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">7. How much does it cost to drill a borehole?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Costs depend on depth, location, and the type of system installed. Contact us for a customized quote based on your specific needs.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq8\" class=\"peer hidden\" \/>\r\n <label for=\"faq8\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">8. How long does a borehole last?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n With proper maintenance, a borehole can last 20\u201350 years. We also offer servicing and rehabilitation for older boreholes.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq9\" class=\"peer hidden\" \/>\r\n <label for=\"faq9\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">9. Do you offer after-sales service or maintenance?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Absolutely! We provide regular maintenance, pump servicing, water treatment, and borehole rehabilitation services.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq10\" class=\"peer hidden\" \/>\r\n <label for=\"faq10\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">10. Can I use solar power for my water pump?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Yes, we install solar-powered water systems that are energy-efficient and ideal for remote or off-grid locations.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq11\" class=\"peer hidden\" \/>\r\n <label for=\"faq11\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">11. Which areas do you operate?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Our headquarter is in Nairobi, but we operate all over Kenya and beyond.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq12\" class=\"peer hidden\" \/>\r\n <label for=\"faq12\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">12. Are you registered to handle water projects?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Yes, we are registered as a company to handle water works projects. <br><span class=\"font-semibold text-primary-blue mt-1 inline-block\">Certificate of Incorporation \u2013 PVT-Y2U977A9<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\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-c542773 e-con e-atomic-element e-flexbox-base e-c542773-dafaea8 \" data-id=\"c542773\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c542773\">\n \t\t<div class=\"elementor-element elementor-element-5891dfe elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5891dfe\" 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-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/21","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=21"}],"version-history":[{"count":88,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/21\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/media?parent=21"}],"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-f9d78c0 e-con e-atomic-element e-flexbox-base e-f9d78c0-f06385d \" data-id=\"f9d78c0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f9d78c0\">\n \t\t<div class=\"elementor-element elementor-element-c87918b elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"c87918b\" 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 name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<title>Copa Waters \u2014 Hero Section<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@400;600;700;800&family=Barlow+Condensed:wght@700;800&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:root {\r\n --blue: #0078C1;\r\n --blue-dark: #005a92;\r\n --white: #fff;\r\n --text-dark: #0d1f2d;\r\n --card-border: #e4e8ed;\r\n --font-display: 'Barlow Condensed', sans-serif;\r\n --font-body: 'Barlow', sans-serif;\r\n}\r\n\r\nhtml, body {\r\n font-family: var(--font-body);\r\n background: #f0f2f4;\r\n -webkit-font-smoothing: antialiased;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO SLIDER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n position: relative;\r\n width: 100%;\r\n height: 600px;\r\n overflow: hidden;\r\n}\r\n\r\n.slide {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n transition: opacity 0.9s ease;\r\n pointer-events: none;\r\n}\r\n.slide.active { opacity: 1; pointer-events: all; }\r\n\r\n.slide__bg {\r\n position: absolute;\r\n inset: 0;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.05);\r\n transition: transform 8s ease-out;\r\n}\r\n.slide.active .slide__bg { transform: scale(1); }\r\n\r\n.slide__overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to right, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.88) 100%);\r\n}\r\n\r\n.slide__body {\r\n position: absolute;\r\n right: 80px;\r\n top: 50%;\r\n transform: translateY(calc(-50% + 16px));\r\n max-width: 520px;\r\n text-align: right;\r\n opacity: 0;\r\n transition: opacity 0.7s 0.3s ease, transform 0.7s 0.3s ease;\r\n}\r\n.slide.active .slide__body { opacity: 1; transform: translateY(-50%); }\r\n\r\n.slide__tag {\r\n display: inline-flex; align-items: center; gap: 7px;\r\n background: rgba(0,120,193,0.2);\r\n border: 0.5px solid rgba(0,120,193,0.55);\r\n color: #8dd1f5;\r\n font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;\r\n padding: 5px 13px 5px 10px;\r\n border-radius: 30px; margin-bottom: 16px;\r\n}\r\n.slide__tag-dot {\r\n width: 6px; height: 6px; background: var(--blue); border-radius: 50%;\r\n animation: blink 2s ease-in-out infinite; flex-shrink: 0;\r\n}\r\n@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }\r\n\r\n.slide__title {\r\n font-family: var(--font-display);\r\n font-size: 52px; font-weight: 800; color: var(--white);\r\n line-height: 1.08; letter-spacing: -0.01em;\r\n text-shadow: 0 2px 16px rgba(0,0,0,0.3); margin-bottom: 16px;\r\n}\r\n.slide__sub {\r\n font-size: 13.5px; color: rgba(255,255,255,0.7); line-height: 1.65;\r\n max-width: 280px; margin-left: auto;\r\n border-right: 2.5px solid var(--blue); padding-right: 14px; margin-bottom: 26px;\r\n}\r\n.btn {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n background: var(--blue); color: var(--white);\r\n font-family: var(--font-body); font-size: 13px; font-weight: 700;\r\n letter-spacing: 0.03em; padding: 10px 12px 10px 22px;\r\n border-radius: 30px; border: none; cursor: pointer;\r\n text-decoration: none; transition: background .18s, transform .15s; white-space: nowrap;\r\n}\r\n.btn:hover { background: var(--blue-dark); transform: translateY(-1px); }\r\n.btn__arrow {\r\n display: flex; align-items: center; justify-content: center;\r\n width: 28px; height: 28px; background: var(--white);\r\n border-radius: 6px; color: var(--blue); flex-shrink: 0;\r\n}\r\n.btn__arrow svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }\r\n\r\n.pagination {\r\n position: absolute; right: 20px; top: 50%; transform: translateY(-50%);\r\n z-index: 10; display: flex; flex-direction: column; gap: 8px;\r\n}\r\n.pag-dot {\r\n width: 24px; height: 24px; border-radius: 50%; border: none;\r\n background: var(--white); color: var(--text-dark);\r\n font-size: 10px; font-weight: 700; cursor: pointer;\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background .2s, color .2s, transform .2s;\r\n -webkit-tap-highlight-color: transparent; touch-action: manipulation;\r\n}\r\n.pag-dot:hover { background: #dbeeff; transform: scale(1.1); }\r\n.pag-dot.active { background: var(--blue); color: var(--white); transform: scale(1.1); }\r\n\r\n.progress {\r\n position: absolute; bottom: 0; left: 0;\r\n height: 3px; background: var(--blue); width: 0%;\r\n z-index: 10; pointer-events: none;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SERVICE CARDS CAROUSEL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cards-section {\r\n background: var(--white);\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.cards-viewport {\r\n overflow: hidden;\r\n width: 100%;\r\n}\r\n\r\n.cards-track {\r\n display: flex;\r\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n will-change: transform;\r\n}\r\n\r\n.card {\r\n flex: 0 0 auto;\r\n padding: 28px 20px 26px;\r\n border-right: 0.5px solid var(--card-border);\r\n text-decoration: none;\r\n display: flex; flex-direction: column;\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n transition: background .18s;\r\n}\r\n.card:last-child { border-right: none; }\r\n.card:hover { background: #f2f8fd; }\r\n.card:hover .card__icon {\r\n background: var(--blue); border-color: var(--blue); color: var(--white); transform: scale(1.06);\r\n}\r\n.card__icon {\r\n width: 48px; height: 48px; border-radius: 50%;\r\n border: 1.5px solid var(--blue); color: var(--blue);\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 14px; flex-shrink: 0;\r\n transition: background .18s, color .18s, transform .18s;\r\n}\r\n.card__icon svg { width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }\r\n.card__title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; line-height: 1.3; }\r\n.card__desc { font-size: 11.5px; color: #6b7280; line-height: 1.55; }\r\n\r\n.cards-nav {\r\n position: absolute; top: 50%; transform: translateY(-50%);\r\n z-index: 5; background: var(--blue); color: var(--white);\r\n border: none; cursor: pointer; width: 32px; height: 32px;\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n transition: background .18s, opacity .18s;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n.cards-nav:hover { background: var(--blue-dark); }\r\n.cards-nav.hidden { opacity: 0; pointer-events: none; }\r\n.cards-nav svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }\r\n#cardsPrev { left: 10px; }\r\n#cardsNext { right: 10px; }\r\n\r\n.cards-dots {\r\n display: flex; justify-content: center; gap: 6px;\r\n padding: 8px 0 0;\r\n background: var(--white);\r\n}\r\n.cards-dot {\r\n width: 7px; height: 7px; border-radius: 50%;\r\n background: #d1d5db; border: none; cursor: pointer; padding: 0;\r\n transition: background .2s, transform .2s;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n.cards-dot.active { background: var(--blue); transform: scale(1.3); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 1024px) {\r\n .hero { height: 520px; }\r\n .slide__body { right: 50px; max-width: 460px; }\r\n .slide__title { font-size: 42px; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .hero { height: 480px; }\r\n .slide__body { right: 36px; max-width: 380px; }\r\n .slide__title { font-size: 34px; }\r\n .slide__sub { font-size: 13px; }\r\n .pagination { right: 10px; }\r\n}\r\n\r\n@media (max-width: 580px) {\r\n .hero { height: 460px; }\r\n .slide__overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%); }\r\n .slide__body {\r\n right: 0; left: 0; bottom: 24px; top: auto;\r\n transform: none; text-align: left; padding: 0 20px; max-width: 100%;\r\n }\r\n .slide.active .slide__body { transform: none; }\r\n .slide__title { font-size: 28px; margin-bottom: 10px; }\r\n .slide__sub {\r\n border-right: none; border-left: 2.5px solid var(--blue);\r\n padding-right: 0; padding-left: 12px; text-align: left;\r\n margin-left: 0; max-width: 100%; font-size: 12px; margin-bottom: 18px;\r\n }\r\n .slide__tag { font-size: 10px; margin-bottom: 12px; }\r\n .btn { font-size: 12px; padding: 9px 12px 9px 18px; }\r\n .btn__arrow { width: 24px; height: 24px; }\r\n .btn__arrow svg { width: 12px; height: 12px; }\r\n .pagination {\r\n flex-direction: row; right: auto; left: 50%; top: auto;\r\n bottom: 190px; transform: translateX(-50%); gap: 6px;\r\n }\r\n .pag-dot { width: 20px; height: 20px; font-size: 9px; }\r\n\r\n .card { padding: 20px 16px 18px; }\r\n .card__title { font-size: 12px; }\r\n .card__desc { font-size: 11px; }\r\n .card__icon { width: 42px; height: 42px; }\r\n .card__icon svg { width: 19px; height: 19px; }\r\n}\r\n\r\n@media (max-width: 400px) {\r\n .hero { height: 420px; }\r\n .slide__title { font-size: 24px; }\r\n .slide__body { padding: 0 16px; }\r\n .card__title { font-size: 11.5px; }\r\n .card__desc { font-size: 10.5px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"hero\" id=\"hero\">\r\n\r\n \r\n <div class=\"slide active\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.25-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Borehole Drilling<\/div>\r\n <h1 class=\"slide__title\">Professional Borehole<br>Drilling Services<\/h1>\r\n <p class=\"slide__sub\">Domestic, agricultural, commercial, community & industrial boreholes. Shallow, deep & hand-dug wells.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/borehole-drilling\">Get a Quote <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.41-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Hydrogeology<\/div>\r\n <h1 class=\"slide__title\">Hydrogeological<br>Surveys & Reports<\/h1>\r\n <p class=\"slide__sub\">Groundwater investigation & geophysical surveys to identify optimal drilling points and expected yields.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/hydrogeological-surveys\">Request Survey <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.28-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Pump Systems<\/div>\r\n <h1 class=\"slide__title\">Pump Installation<br>& Solarization<\/h1>\r\n <p class=\"slide__sub\">Submersible & surface pumps, solar pump systems, and manual hand pumps for rural setups.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/pump-installation\">Learn More <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.32-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Water Treatment<\/div>\r\n <h1 class=\"slide__title\">Water Treatment<br>Solutions<\/h1>\r\n <p class=\"slide__sub\">Filtration systems, reverse osmosis, chlorination & UV systems for safe, clean water supply.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/water-treatment-solutions\">View Options <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.30-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Rehabilitation<\/div>\r\n <h1 class=\"slide__title\">Borehole Rehab<br>& Maintenance<\/h1>\r\n <p class=\"slide__sub\">Cleaning & flushing old boreholes, re-casing, re-drilling & restoring full water output.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/borehole-rehabilitation-maintenance\">Book Service <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide\">\r\n <div class=\"slide__bg\" style=\"background-image:url('https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-05-at-8.39.29-AM.jpeg')\"><\/div>\r\n <div class=\"slide__overlay\"><\/div>\r\n <div class=\"slide__body\">\r\n <div class=\"slide__tag\"><span class=\"slide__tag-dot\"><\/span>Storage Systems<\/div>\r\n <h1 class=\"slide__title\">Tank & Storage<br>System Installation<\/h1>\r\n <p class=\"slide__sub\">Elevated tanks, underground reservoirs & pressure systems designed for your water needs.<\/p>\r\n <a class=\"btn\" href=\"\/copawaters\/tank-storage-system-installation\">Consult Here <span class=\"btn__arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/span><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pagination\" id=\"pagination\">\r\n <button class=\"pag-dot active\" data-i=\"0\">1<\/button>\r\n <button class=\"pag-dot\" data-i=\"1\">2<\/button>\r\n <button class=\"pag-dot\" data-i=\"2\">3<\/button>\r\n <button class=\"pag-dot\" data-i=\"3\">4<\/button>\r\n <button class=\"pag-dot\" data-i=\"4\">5<\/button>\r\n <button class=\"pag-dot\" data-i=\"5\">6<\/button>\r\n <\/div>\r\n\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"cards-section\">\r\n <button class=\"cards-nav hidden\" id=\"cardsPrev\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 12H5M11 18l-6-6 6-6\"\/><\/svg>\r\n <\/button>\r\n <button class=\"cards-nav\" id=\"cardsNext\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\r\n <\/button>\r\n\r\n <div class=\"cards-viewport\" id=\"cardsViewport\">\r\n <div class=\"cards-track\" id=\"cardsTrack\">\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/borehole-drilling\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2s-8 9.5-8 14a8 8 0 0016 0c0-4.5-8-14-8-14z\"\/><path d=\"M12 22a6 6 0 01-6-6c0-3.3 4-9.5 6-12.2\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Borehole Drilling<\/div>\r\n <div class=\"card__desc\">Domestic, agricultural, commercial & industrial boreholes. Shallow & deep drilling.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/hydrogeological-surveys\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z\"\/><path d=\"M2 12h20\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Hydrogeological Surveys<\/div>\r\n <div class=\"card__desc\">Geophysical surveys to identify optimal drilling points & expected water yields.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/pump-installation\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2v6m0 8v6M2 12h6m8 0h6\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 5a7 7 0 017 7\"\/><path d=\"M5 12a7 7 0 017-7\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Pump Installation<\/div>\r\n <div class=\"card__desc\">Submersible & surface pumps, solar systems & manual hand pumps.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/water-treatment\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Water Testing & Quality<\/div>\r\n <div class=\"card__desc\">Comprehensive water quality analysis & lab testing for safe water supply.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/water-treatment\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Water Treatment Solutions<\/div>\r\n <div class=\"card__desc\">Filtration, reverse osmosis, chlorination & UV systems for clean water.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/borehole-rehabilitation-maintenance\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Borehole Rehab & Maintenance<\/div>\r\n <div class=\"card__desc\">Flushing, re-casing & re-drilling old boreholes to restore full output.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/casing-and-grouting\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M3 15h18M9 3v18\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Casing & Grouting<\/div>\r\n <div class=\"card__desc\">Professional borehole casing & grouting for structural integrity & contamination prevention.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/tank-storage-system-installation\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 21h18\"\/><path d=\"M5 21V7l7-4 7 4v14\"\/><path d=\"M9 21v-6h6v6\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Tank & Storage Systems<\/div>\r\n <div class=\"card__desc\">Elevated tanks, underground reservoirs & pressure systems installed.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/irrigation-system-setup\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 22V12\"\/><path d=\"M5 12H2a10 10 0 0020 0h-3\"\/><path d=\"M12 12V2\"\/><path d=\"M7 7l5 5 5-5\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Irrigation System Setup<\/div>\r\n <div class=\"card__desc\">Drip, sprinkler & surface irrigation systems for agricultural & landscaping needs.<\/div>\r\n <\/a>\r\n\r\n \r\n <a class=\"card\" href=\"\/copawaters\/consultation-permitting-support\">\r\n <div class=\"card__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/><path d=\"M14 2v6h6\"\/><path d=\"M16 13H8M16 17H8M10 9H8\"\/><\/svg><\/div>\r\n <div class=\"card__title\">Consultation & Permitting<\/div>\r\n <div class=\"card__desc\">Expert guidance on water permits, regulatory compliance & project planning support.<\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cards-dots\" id=\"cardsDots\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO SLIDER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n var HERO_INTERVAL = 5000;\r\n var slides = document.querySelectorAll('.slide');\r\n var heroDots = document.querySelectorAll('.pag-dot');\r\n var bar = document.getElementById('progress');\r\n var hero = document.getElementById('hero');\r\n var hCur = 0, hTimer = null;\r\n\r\n function startBar(){\r\n bar.style.transition = 'none'; bar.style.width = '0%'; bar.offsetWidth;\r\n bar.style.transition = 'width ' + HERO_INTERVAL + 'ms linear'; bar.style.width = '100%';\r\n }\r\n function heroGoTo(n){\r\n slides[hCur].classList.remove('active'); heroDots[hCur].classList.remove('active');\r\n hCur = (n + slides.length) % slides.length;\r\n slides[hCur].classList.add('active'); heroDots[hCur].classList.add('active');\r\n startBar();\r\n }\r\n function heroAuto(){ clearInterval(hTimer); hTimer = setInterval(function(){ heroGoTo(hCur+1); }, HERO_INTERVAL); }\r\n\r\n heroDots.forEach(function(d){\r\n d.addEventListener('click', function(){ heroGoTo(parseInt(d.dataset.i)); heroAuto(); });\r\n });\r\n\r\n var htx=0,hty=0;\r\n hero.addEventListener('touchstart',function(e){ htx=e.changedTouches[0].clientX; hty=e.changedTouches[0].clientY; },{passive:true});\r\n hero.addEventListener('touchend',function(e){\r\n var dx=htx-e.changedTouches[0].clientX, dy=hty-e.changedTouches[0].clientY;\r\n if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>40){ heroGoTo(dx>0?hCur+1:hCur-1); heroAuto(); }\r\n },{passive:true});\r\n\r\n document.addEventListener('keydown',function(e){\r\n if(e.key==='ArrowRight'){ heroGoTo(hCur+1); heroAuto(); }\r\n if(e.key==='ArrowLeft'){ heroGoTo(hCur-1); heroAuto(); }\r\n });\r\n\r\n startBar(); heroAuto();\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n CARDS CAROUSEL\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n var CARD_INTERVAL = 2500;\r\n var track = document.getElementById('cardsTrack');\r\n var viewport = document.getElementById('cardsViewport');\r\n var prevBtn = document.getElementById('cardsPrev');\r\n var nextBtn = document.getElementById('cardsNext');\r\n var dotsWrap = document.getElementById('cardsDots');\r\n var cards = document.querySelectorAll('.card');\r\n var cCur = 0, cTimer = null;\r\n var visCount = 1;\r\n\r\n var dotEls = [];\r\n function buildDots(){\r\n dotsWrap.innerHTML = '';\r\n dotEls = [];\r\n var pages = Math.ceil(cards.length \/ visCount);\r\n for(var i=0;i<pages;i++){\r\n var d = document.createElement('button');\r\n d.className = 'cards-dot' + (i===0?' active':'');\r\n d.dataset.p = i;\r\n d.addEventListener('click', (function(idx){ return function(){ cGoTo(idx); cAuto(); }; })(i));\r\n dotsWrap.appendChild(d);\r\n dotEls.push(d);\r\n }\r\n }\r\n\r\n function layout(){\r\n var vw = viewport.clientWidth;\r\n if(vw >= 900) visCount = 6;\r\n else if(vw >= 700) visCount = 4;\r\n else if(vw >= 500) visCount = 3;\r\n else if(vw >= 340) visCount = 2;\r\n else visCount = 1;\r\n\r\n var cardW = vw \/ visCount;\r\n cards.forEach(function(c){ c.style.width = cardW + 'px'; });\r\n buildDots();\r\n cGoTo(0);\r\n }\r\n\r\n function cGoTo(n){\r\n var pages = Math.ceil(cards.length \/ visCount);\r\n if(n < 0) n = pages - 1;\r\n if(n >= pages) n = 0;\r\n cCur = n;\r\n\r\n var cardW = viewport.clientWidth \/ visCount;\r\n var offset = cCur * visCount * cardW;\r\n var maxOffset = (cards.length - visCount) * cardW;\r\n if(offset > maxOffset) offset = maxOffset;\r\n track.style.transform = 'translateX(-' + offset + 'px)';\r\n\r\n dotEls.forEach(function(d,i){ d.classList.toggle('active', i===cCur); });\r\n\r\n prevBtn.classList.toggle('hidden', cCur === 0);\r\n nextBtn.classList.toggle('hidden', cCur >= pages - 1);\r\n }\r\n\r\n function cAuto(){\r\n clearInterval(cTimer);\r\n cTimer = setInterval(function(){\r\n var pages = Math.ceil(cards.length \/ visCount);\r\n cGoTo((cCur + 1) % pages);\r\n }, CARD_INTERVAL);\r\n }\r\n\r\n prevBtn.addEventListener('click', function(){ cGoTo(cCur-1); cAuto(); });\r\n nextBtn.addEventListener('click', function(){ cGoTo(cCur+1); cAuto(); });\r\n\r\n var ctx=0;\r\n viewport.addEventListener('touchstart',function(e){ ctx=e.changedTouches[0].clientX; },{passive:true});\r\n viewport.addEventListener('touchend',function(e){\r\n var dx=ctx-e.changedTouches[0].clientX;\r\n if(Math.abs(dx)>40){ cGoTo(dx>0?cCur+1:cCur-1); cAuto(); }\r\n },{passive:true});\r\n\r\n layout();\r\n cAuto();\r\n window.addEventListener('resize', function(){ layout(); cAuto(); });\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8daecd4 e-con e-atomic-element e-flexbox-base e-8daecd4-cccd79d \" data-id=\"8daecd4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8daecd4\">\n \t\t<div class=\"elementor-element elementor-element-69281cd elementor-widget__width-inherit elementor-widget-tablet__width-initial elementor-widget elementor-widget-html\" data-id=\"69281cd\" 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 name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Who We Are - Copa Waters<\/title>\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 <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f8fafc;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n\r\n \/* \u2500\u2500 SECTION \u2500\u2500 *\/\r\n .whoweare {\r\n padding: 100px 0;\r\n overflow: hidden; \/* Prevents overflow from decorative elements *\/\r\n }\r\n\r\n .whoweare-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 72px;\r\n align-items: center;\r\n }\r\n\r\n \/* \u2500\u2500 LEFT: IMAGE \u2500\u2500 *\/\r\n .whoweare-image {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .whoweare-image__main {\r\n width: 100%;\r\n \/* Replaced fixed height with aspect ratio for perfect proportions *\/\r\n aspect-ratio: 4\/4.2; \r\n max-height: 480px; \r\n object-fit: cover;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 40px -10px rgba(43, 57, 144, 0.15);\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n .whoweare-image:hover .whoweare-image__main {\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* Elegant Dotted Pattern behind image *\/\r\n .whoweare-image::before {\r\n content: '';\r\n position: absolute;\r\n top: -30px;\r\n left: -30px;\r\n width: 200px;\r\n height: 200px;\r\n background-image: radial-gradient(rgba(0, 118, 190, 0.3) 2px, transparent 2px);\r\n background-size: 16px 16px;\r\n z-index: -1;\r\n }\r\n\r\n \/* Soft color blob *\/\r\n .whoweare-image::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -20px;\r\n right: -20px;\r\n width: 70%;\r\n height: 50%;\r\n background: linear-gradient(135deg, rgba(43, 57, 144, 0.08), rgba(0, 118, 190, 0.05));\r\n border-radius: 24px;\r\n z-index: -2;\r\n }\r\n\r\n \/* \u2500\u2500 OVERLAY CARDS \u2500\u2500 *\/\r\n .overlay-card {\r\n position: absolute;\r\n background: #fff;\r\n border-radius: 16px;\r\n box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n z-index: 10;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .overlay-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 25px 50px -10px rgba(0, 118, 190, 0.15);\r\n }\r\n\r\n \/* Registered card *\/\r\n .overlay-registered {\r\n top: 40px;\r\n right: -40px;\r\n padding: 18px 24px;\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n\r\n .overlay-registered__icon {\r\n width: 48px;\r\n height: 48px;\r\n background: linear-gradient(135deg, #0076be, #0288d1);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-shadow: 0 8px 16px -4px rgba(0, 118, 190, 0.4);\r\n }\r\n\r\n .overlay-registered__icon svg {\r\n width: 24px;\r\n height: 24px;\r\n stroke: #fff;\r\n fill: none;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .overlay-registered__number {\r\n font-size: 1.5rem;\r\n font-weight: 900;\r\n color: #1e293b;\r\n line-height: 1;\r\n }\r\n\r\n .overlay-registered__label {\r\n font-size: 0.8rem;\r\n color: #64748b;\r\n font-weight: 600;\r\n margin-top: 4px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n \/* Coverage card *\/\r\n .overlay-coverage {\r\n bottom: -24px;\r\n left: -30px;\r\n display: flex;\r\n align-items: stretch;\r\n overflow: hidden;\r\n }\r\n\r\n .overlay-coverage__flag {\r\n background: linear-gradient(135deg, #2b3990, #1e296b);\r\n padding: 16px 24px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .overlay-coverage__number {\r\n font-size: 1.75rem;\r\n font-weight: 900;\r\n color: #fff;\r\n line-height: 1;\r\n }\r\n\r\n .overlay-coverage__code {\r\n font-size: 0.65rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n margin-top: 4px;\r\n }\r\n\r\n .overlay-coverage__text {\r\n padding: 16px 24px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .overlay-coverage__text p {\r\n font-size: 0.9rem;\r\n color: #1e293b;\r\n font-weight: 800;\r\n white-space: nowrap;\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n \/* \u2500\u2500 RIGHT: CONTENT \u2500\u2500 *\/\r\n .whoweare-content {\r\n padding-left: 20px;\r\n }\r\n\r\n .whoweare-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .whoweare-label__text {\r\n font-size: 0.85rem;\r\n font-weight: 800;\r\n color: #0076be;\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n }\r\n\r\n .whoweare-label__line {\r\n width: 60px;\r\n height: 2px;\r\n background: linear-gradient(90deg, #0076be, transparent);\r\n border-radius: 2px;\r\n }\r\n\r\n .whoweare-title {\r\n font-size: 3rem;\r\n font-weight: 900;\r\n line-height: 1.15;\r\n margin-bottom: 28px;\r\n color: #0f172a;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .whoweare-desc {\r\n font-size: 1.05rem;\r\n line-height: 1.8;\r\n color: #475569;\r\n margin-bottom: 36px;\r\n }\r\n\r\n .whoweare-desc strong {\r\n color: #0f172a;\r\n font-weight: 700;\r\n }\r\n\r\n \/* \u2500\u2500 HIGHLIGHTS \u2500\u2500 *\/\r\n .whoweare-highlights {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .highlight-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 16px;\r\n border-radius: 12px;\r\n background: #fff;\r\n border: 1px solid #e2e8f0;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.02);\r\n cursor: default;\r\n }\r\n\r\n .highlight-item:hover {\r\n border-color: #0076be;\r\n box-shadow: 0 10px 20px -5px rgba(0, 118, 190, 0.1);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .highlight-item__icon {\r\n width: 40px;\r\n height: 40px;\r\n background: #f0f9ff;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all 0.3s;\r\n }\r\n\r\n .highlight-item:hover .highlight-item__icon {\r\n background: #0076be;\r\n }\r\n\r\n .highlight-item__icon svg {\r\n width: 20px;\r\n height: 20px;\r\n stroke: #0076be;\r\n fill: none;\r\n stroke-width: 2.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: stroke 0.3s;\r\n }\r\n\r\n .highlight-item:hover .highlight-item__icon svg {\r\n stroke: #fff;\r\n }\r\n\r\n .highlight-item__text {\r\n font-size: 0.95rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n .whoweare {\r\n padding: 80px 0;\r\n }\r\n .whoweare-container {\r\n gap: 50px;\r\n }\r\n .whoweare-title {\r\n font-size: 2.5rem;\r\n }\r\n .whoweare-image__main {\r\n aspect-ratio: 1\/1; \/* Switch to square-ish on medium screens *\/\r\n }\r\n .overlay-registered {\r\n right: -20px;\r\n }\r\n }\r\n\r\n @media (max-width: 840px) {\r\n .whoweare-container {\r\n grid-template-columns: 1fr;\r\n gap: 60px;\r\n }\r\n .whoweare-content {\r\n padding-left: 0;\r\n }\r\n .whoweare-image {\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n .whoweare-image__main {\r\n aspect-ratio: 16\/10; \/* Wider banner style for mobile stack *\/\r\n max-height: 400px;\r\n }\r\n .overlay-registered {\r\n right: 20px;\r\n top: -20px;\r\n }\r\n .overlay-coverage {\r\n left: 20px;\r\n bottom: -20px;\r\n }\r\n }\r\n\r\n @media (max-width: 580px) {\r\n .whoweare {\r\n padding: 60px 0;\r\n }\r\n .whoweare-image__main {\r\n aspect-ratio: 4\/3;\r\n border-radius: 16px;\r\n }\r\n .whoweare-image::before,\r\n .whoweare-image::after {\r\n display: none; \/* Keep mobile clean *\/\r\n }\r\n .overlay-registered {\r\n right: 12px;\r\n top: 12px;\r\n padding: 12px 16px;\r\n gap: 12px;\r\n border-radius: 12px;\r\n }\r\n .overlay-registered__icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n }\r\n .overlay-registered__icon svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n .overlay-registered__number {\r\n font-size: 1.25rem;\r\n }\r\n .overlay-registered__label {\r\n font-size: 0.7rem;\r\n }\r\n .overlay-coverage {\r\n left: 12px;\r\n bottom: -16px;\r\n border-radius: 12px;\r\n }\r\n .overlay-coverage__flag {\r\n padding: 12px 16px;\r\n }\r\n .overlay-coverage__number {\r\n font-size: 1.3rem;\r\n }\r\n .overlay-coverage__text {\r\n padding: 12px 16px;\r\n }\r\n .overlay-coverage__text p {\r\n font-size: 0.8rem;\r\n }\r\n .whoweare-title {\r\n font-size: 2rem;\r\n margin-bottom: 20px;\r\n }\r\n .whoweare-desc {\r\n font-size: 0.95rem;\r\n }\r\n .whoweare-highlights {\r\n grid-template-columns: 1fr;\r\n }\r\n .highlight-item {\r\n padding: 14px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<section class=\"whoweare\">\r\n <div class=\"whoweare-container\">\r\n\r\n \r\n <div class=\"whoweare-image\">\r\n\r\n <img decoding=\"async\" alt=\"Copa Waters drilling team in action\"\r\n class=\"whoweare-image__main\"\r\n 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 \r\n <div class=\"overlay-card overlay-registered\">\r\n <div class=\"overlay-registered__icon\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <p class=\"overlay-registered__number\">100%<\/p>\r\n <p class=\"overlay-registered__label\">Registered<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"overlay-card overlay-coverage\">\r\n <div class=\"overlay-coverage__flag\">\r\n <span class=\"overlay-coverage__number\">254<\/span>\r\n <span class=\"overlay-coverage__code\">Kenya<\/span>\r\n <\/div>\r\n <div class=\"overlay-coverage__text\">\r\n <p>Nationwide Coverage<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"whoweare-content\">\r\n\r\n <div class=\"whoweare-label\">\r\n <span class=\"whoweare-label__text\">About Us<\/span>\r\n <span class=\"whoweare-label__line\"><\/span>\r\n <\/div>\r\n\r\n <h2 class=\"whoweare-title\">Who We Are<\/h2>\r\n\r\n <p class=\"whoweare-desc\">\r\n At <strong>Copa Waters<\/strong>, we are committed to delivering pure water solutions with expert precision and unwavering reliability. Our core team is led by professionally trained geologists and water engineers who bring scientific rigor to every project. By combining cutting-edge drilling technology with unmatched industry expertise, we provide accurate site selection, efficient drilling, and sustainable groundwater solutions tailored to your specific needs.\r\n <\/p>\r\n\r\n <div class=\"whoweare-highlights\">\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">Expert Geologists<\/span>\r\n <\/div>\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">Advanced Technology<\/span>\r\n <\/div>\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">Sustainable Solutions<\/span>\r\n <\/div>\r\n <div class=\"highlight-item\">\r\n <div class=\"highlight-item__icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>\r\n <\/div>\r\n <span class=\"highlight-item__text\">100% Reliable<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\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-8ff3164 e-con e-atomic-element e-flexbox-base e-8ff3164-143db99 \" data-id=\"8ff3164\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8ff3164\">\n \t\t<div class=\"elementor-element elementor-element-dc65052 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"dc65052\" 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 Recent Work - Copawaters<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\r\n \r\n <style>\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 \/* Hide scrollbar for seamless look *\/\r\n .no-scrollbar::-webkit-scrollbar {\r\n display: none;\r\n }\r\n .no-scrollbar {\r\n -ms-overflow-style: none; \/* IE and Edge *\/\r\n scrollbar-width: none; \/* Firefox *\/\r\n }\r\n\r\n \/* Scroll snapping for app-like swiping *\/\r\n .snap-x-mandatory {\r\n scroll-snap-type: x mandatory;\r\n }\r\n .snap-center {\r\n scroll-snap-align: center;\r\n }\r\n \r\n \/* Smooth image scaling on hover *\/\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 <\/style>\r\n<\/head>\r\n<body class=\"bg-[#f8fafc] text-gray-900 font-sans min-h-screen flex items-center selection:bg-sky-100 selection:text-sky-900\">\r\n\r\n <section class=\"py-20 px-4 md:px-8 w-full max-w-[90rem] mx-auto relative\" data-purpose=\"recent-work\">\r\n \r\n <div class=\"text-center mb-14\" data-purpose=\"section-header\">\r\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-slate-900 inline-flex items-center justify-center tracking-tight\">\r\n <span class=\"title-accent\"><\/span>\r\n Our Recent Work\r\n <\/h2>\r\n <p class=\"text-slate-500 mt-4 max-w-2xl mx-auto text-base md:text-lg\">\r\n Swipe through our latest fieldwork, featuring live project footage and site preparations.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"relative group\/nav\">\r\n \r\n <button id=\"prevBtn\" class=\"absolute left-2 md:left-4 top-1\/2 -translate-y-1\/2 z-20 bg-white\/90 hover:bg-white text-slate-800 p-3.5 md:p-4 rounded-full shadow-[0_4px_20px_-4px_rgba(0,0,0,0.15)] backdrop-blur-md transition-all duration-300 opacity-0 md:group-hover\/nav:opacity-100 focus:outline-none focus:ring-2 focus:ring-sky-500 scale-95 hover:scale-100\" aria-label=\"Previous\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\" class=\"w-5 h-5 md:w-6 md:h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <div id=\"carouselTrack\" class=\"flex gap-5 md:gap-8 overflow-x-auto no-scrollbar snap-x-mandatory pb-8 pt-4 px-4 md:px-12 scroll-smooth\">\r\n \r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Hydrological Survey<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Initial geological and groundwater assessment to determine optimal drilling locations.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Steel Construction<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Fabrication and erection of robust steel structures to support water infrastructure.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Casing Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Secure installation of borehole casings to ensure structural integrity and water purity.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-100\">\r\n <img decoding=\"async\" alt=\"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\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Drilling<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Heavy-duty machinery executing precise ground penetration to access water reserves.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900\">\r\n <video autoplay muted loop playsinline 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 bg-black\/40 backdrop-blur-md px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <div class=\"w-2 h-2 bg-red-500 rounded-full animate-pulse\"><\/div>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Footage<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Pump Lifting & Rehabilitation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Careful extraction and maintenance operations to restore existing water systems.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group snap-center shrink-0 w-[85vw] sm:w-[340px] md:w-[400px] flex flex-col bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-100 cursor-grab active:cursor-grabbing\">\r\n <div class=\"aspect-[4\/3] relative overflow-hidden bg-slate-900\">\r\n <video autoplay muted loop playsinline 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 bg-black\/40 backdrop-blur-md px-3 py-1.5 rounded-full flex items-center gap-1.5\">\r\n <div class=\"w-2 h-2 bg-red-500 rounded-full animate-pulse\"><\/div>\r\n <span class=\"text-xs font-medium text-white tracking-wide\">Footage<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6\">\r\n <h3 class=\"font-bold text-lg text-slate-800 mb-1\">Pump Installation<\/h3>\r\n <p class=\"text-sm text-slate-500 line-clamp-2\">Final deployment and testing of high-efficiency pumps to secure steady water flow.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button id=\"nextBtn\" class=\"absolute right-2 md:right-4 top-1\/2 -translate-y-1\/2 z-20 bg-white\/90 hover:bg-white text-slate-800 p-3.5 md:p-4 rounded-full shadow-[0_4px_20px_-4px_rgba(0,0,0,0.15)] backdrop-blur-md transition-all duration-300 opacity-0 md:group-hover\/nav:opacity-100 focus:outline-none focus:ring-2 focus:ring-sky-500 scale-95 hover:scale-100\" aria-label=\"Next\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\" class=\"w-5 h-5 md:w-6 md:h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/section>\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const track = document.getElementById(\"carouselTrack\");\r\n const prevBtn = document.getElementById(\"prevBtn\");\r\n const nextBtn = document.getElementById(\"nextBtn\");\r\n\r\n \/\/ Get accurate scroll amount including the dynamic gap\r\n const getScrollAmount = () => {\r\n const item = track.querySelector('div.snap-center');\r\n if (!item) return 300;\r\n const gap = parseInt(window.getComputedStyle(track).gap) || 20;\r\n return item.offsetWidth + gap;\r\n };\r\n\r\n \/\/ Navigation Actions\r\n nextBtn.addEventListener(\"click\", () => {\r\n track.scrollBy({ left: getScrollAmount(), behavior: 'smooth' });\r\n });\r\n\r\n \/\/ Update Button Visibility on Scroll\r\n const updateButtons = () => {\r\n const maxScrollLeft = track.scrollWidth - track.clientWidth;\r\n \r\n \/\/ Mobile-friendly fade out at edges\r\n prevBtn.style.opacity = track.scrollLeft <= 5 ? '0' : '';\r\n prevBtn.style.pointerEvents = track.scrollLeft <= 5 ? 'none' : 'auto';\r\n \r\n nextBtn.style.opacity = track.scrollLeft >= maxScrollLeft - 5 ? '0' : '';\r\n nextBtn.style.pointerEvents = track.scrollLeft >= maxScrollLeft - 5 ? 'none' : 'auto';\r\n };\r\n\r\n track.addEventListener(\"scroll\", updateButtons);\r\n window.addEventListener(\"resize\", updateButtons);\r\n \r\n \/\/ Initial check\r\n updateButtons();\r\n\r\n \/\/ --- Auto-Sliding Logic ---\r\n let autoSlideInterval;\r\n const slideDelay = 3000; \/\/ Speed in milliseconds (3000 = 3 seconds)\r\n\r\n const startAutoSlide = () => {\r\n autoSlideInterval = setInterval(() => {\r\n const maxScrollLeft = track.scrollWidth - track.clientWidth;\r\n \r\n \/\/ If at the end, smoothly scroll back to the beginning\r\n if (track.scrollLeft >= maxScrollLeft - 10) {\r\n track.scrollTo({ left: 0, behavior: 'smooth' });\r\n } else {\r\n \/\/ Otherwise, slide to the next item\r\n track.scrollBy({ left: getScrollAmount(), behavior: 'smooth' });\r\n }\r\n }, slideDelay);\r\n };\r\n\r\n const stopAutoSlide = () => {\r\n clearInterval(autoSlideInterval);\r\n };\r\n\r\n \/\/ Start the auto-slide on load\r\n startAutoSlide();\r\n\r\n \/\/ Pause auto-slide when the user interacts with the carousel\r\n track.addEventListener('mouseenter', stopAutoSlide);\r\n track.addEventListener('mouseleave', startAutoSlide);\r\n track.addEventListener('touchstart', stopAutoSlide);\r\n track.addEventListener('touchend', startAutoSlide);\r\n \r\n \/\/ Stop auto-slide when using the navigation buttons to prevent jarring jumps\r\n prevBtn.addEventListener(\"click\", () => {\r\n stopAutoSlide();\r\n track.scrollBy({ left: -getScrollAmount(), behavior: 'smooth' });\r\n setTimeout(startAutoSlide, slideDelay); \/\/ Restart after delay\r\n });\r\n \r\n nextBtn.addEventListener(\"click\", () => {\r\n stopAutoSlide();\r\n \/\/ The scroll action is already handled in the previous event listener\r\n setTimeout(startAutoSlide, slideDelay); \/\/ Restart after delay\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-a1cd88f e-con e-atomic-element e-flexbox-base e-a1cd88f-019a3aa \" data-id=\"a1cd88f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a1cd88f\">\n \t\t<div class=\"elementor-element elementor-element-555a156 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"555a156\" 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 Current Statistics<\/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 \/* Safe Entrance Animations using Keyframes *\/\r\n @keyframes slideUpFade {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .animate-on-load {\r\n animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n opacity: 0; \/* Starts hidden, but animation forces it visible immediately *\/\r\n }\r\n\r\n \/* Staggered animation delays *\/\r\n .delay-100 { animation-delay: 100ms; }\r\n .delay-200 { animation-delay: 200ms; }\r\n .delay-300 { animation-delay: 300ms; }\r\n .delay-400 { animation-delay: 400ms; }\r\n .delay-500 { animation-delay: 500ms; }\r\n .delay-600 { animation-delay: 600ms; }\r\n\r\n \/* Elegant background gradient *\/\r\n .bg-elegant-gradient {\r\n background: linear-gradient(135deg, #CBE2F1 0%, #E8F1F8 100%);\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 'light-blue-bg': '#CBE2F1',\r\n 'dark-grey-col': '#4C5D66',\r\n 'primary-blue': '#1686C1',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-primary-blue selection:text-white\">\r\n\r\n <section class=\"bg-elegant-gradient py-24 font-sans relative overflow-hidden min-h-screen flex items-center\" id=\"stats-section\">\r\n \r\n <div class=\"absolute top-0 left-0 w-64 h-64 bg-white\/40 rounded-full blur-3xl -translate-y-1\/2 -translate-x-1\/2 pointer-events-none\"><\/div>\r\n <div class=\"absolute bottom-0 right-0 w-96 h-96 bg-primary-blue\/10 rounded-full blur-3xl translate-y-1\/3 translate-x-1\/3 pointer-events-none\"><\/div>\r\n\r\n <div class=\"max-w-[90rem] mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full\">\r\n \r\n <div class=\"text-center mb-16 animate-on-load\">\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-primary-blue to-sky-300 mx-auto mb-6 rounded-full\"><\/div>\r\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight\">Our Current Statistics<\/h2>\r\n <p class=\"mt-4 text-slate-600 max-w-2xl mx-auto text-lg\">Delivering sustainable water solutions and impactful results across all our active regions.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 shadow-2xl rounded-3xl overflow-hidden border border-white\/50 bg-white\">\r\n \r\n <div class=\"group bg-white p-8 text-center flex flex-col justify-center items-center hover:bg-slate-50 transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-gray-100 animate-on-load delay-100\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.2)] transition-all duration-500 bg-white\">\r\n <i class=\"fa-solid fa-faucet-drip text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-slate-900 mb-2 counter\" data-target=\"52\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider leading-tight\">Shallow<br\/>Wells<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-dark-grey-col p-8 text-center flex flex-col justify-center items-center hover:bg-[#43525a] transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-white\/10 animate-on-load delay-200\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/50 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.3)] transition-all duration-500 bg-dark-grey-col\">\r\n <i class=\"fa-solid fa-droplet text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-white mb-2 counter\" data-target=\"200\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-300 uppercase tracking-wider leading-tight\">Boreholes<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-white p-8 text-center flex flex-col justify-center items-center hover:bg-slate-50 transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-gray-100 animate-on-load delay-300\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.2)] transition-all duration-500 bg-white\">\r\n <i class=\"fa-solid fa-hard-hat text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-slate-900 mb-2 counter\" data-target=\"115\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider leading-tight\">Hydrogeological<br\/>Surveys<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-dark-grey-col p-8 text-center flex flex-col justify-center items-center hover:bg-[#43525a] transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-white\/10 animate-on-load delay-400\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/50 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.3)] transition-all duration-500 bg-dark-grey-col\">\r\n <i class=\"fa-solid fa-pump-water text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-white mb-2 counter\" data-target=\"100\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-300 uppercase tracking-wider leading-tight\">Installed<br\/>Pumps<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-white p-8 text-center flex flex-col justify-center items-center hover:bg-slate-50 transition-colors duration-300 border-b lg:border-b-0 lg:border-r border-gray-100 animate-on-load delay-500\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.2)] transition-all duration-500 bg-white\">\r\n <i class=\"fa-solid fa-hand-holding-droplet text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-slate-900 mb-2 counter\" data-target=\"60\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider leading-tight\">Water<br\/>Tanks<\/p>\r\n <\/div>\r\n\r\n <div class=\"group bg-dark-grey-col p-8 text-center flex flex-col justify-center items-center hover:bg-[#43525a] transition-colors duration-300 animate-on-load delay-600\">\r\n <div class=\"w-16 h-16 border-2 border-primary-blue\/50 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-primary-blue group-hover:shadow-[0_0_20px_rgba(22,134,193,0.3)] transition-all duration-500 bg-dark-grey-col\">\r\n <i class=\"fa-solid fa-truck-droplet text-primary-blue text-2xl group-hover:-translate-y-1 transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <p class=\"text-5xl font-black text-white mb-2 counter\" data-target=\"21\">0<\/p>\r\n <p class=\"text-sm font-medium text-slate-300 uppercase tracking-wider leading-tight\">Serviced<br\/>Boreholes<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const counters = document.querySelectorAll('.counter');\r\n \r\n counters.forEach(counter => {\r\n const target = +counter.getAttribute('data-target');\r\n const duration = 2000; \/\/ Total animation time in ms\r\n const increment = target \/ (duration \/ 16); \/\/ 60fps calculation\r\n \r\n let current = 0;\r\n const updateCounter = () => {\r\n current += increment;\r\n if (current < target) {\r\n counter.innerText = Math.ceil(current);\r\n requestAnimationFrame(updateCounter);\r\n } else {\r\n counter.innerText = target;\r\n }\r\n };\r\n \r\n \/\/ Add a slight delay to the counting so it matches the CSS fade-in\r\n setTimeout(updateCounter, 300);\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-5856089 e-con e-atomic-element e-flexbox-base e-5856089-e31aeae \" data-id=\"5856089\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5856089\">\n \t\t<div class=\"elementor-element elementor-element-ce16aa3 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"ce16aa3\" 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>FAQ - Copawaters<\/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 \/* CSS Entrance Animation *\/\r\n @keyframes slideUpFade {\r\n 0% { opacity: 0; transform: translateY(40px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .animate-on-load {\r\n animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n opacity: 0;\r\n }\r\n\r\n \/* Staggered Delays *\/\r\n .delay-100 { animation-delay: 100ms; }\r\n .delay-200 { animation-delay: 200ms; }\r\n <\/style>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'primary-blue': '#1686C1',\r\n 'deep-navy': '#0f172a',\r\n 'soft-bg': '#f8fafc',\r\n 'border-light': '#e2e8f0',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"bg-soft-bg font-sans text-slate-800 antialiased selection:bg-primary-blue selection:text-white\">\r\n\r\n <section class=\"py-24 px-4 sm:px-6 lg:px-8 max-w-[90rem] mx-auto min-h-screen\">\r\n \r\n <div class=\"text-center mb-16 animate-on-load\">\r\n <p class=\"text-primary-blue font-semibold tracking-wider uppercase text-sm mb-3\">Knowledge Base<\/p>\r\n <h2 class=\"text-4xl md:text-5xl font-extrabold text-deep-navy tracking-tight mb-4\">Frequently Asked Questions<\/h2>\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-primary-blue to-sky-300 mx-auto rounded-full\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-10 max-w-7xl mx-auto\">\r\n \r\n <div class=\"space-y-4 animate-on-load delay-100\">\r\n \r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq1\" class=\"peer hidden\" \/>\r\n <label for=\"faq1\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">1. How do I know if there's water on my land?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n We conduct a hydrogeological survey using advanced geophysical tools to assess the presence, depth, and quality of underground water before drilling.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq2\" class=\"peer hidden\" \/>\r\n <label for=\"faq2\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">2. How long does the drilling process take?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Depending on site conditions and borehole depth, drilling typically takes 2\u20135 days. We\u2019ll provide a more accurate timeline after the site survey.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq3\" class=\"peer hidden\" \/>\r\n <label for=\"faq3\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">3. How deep will the borehole be?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Borehole depth varies based on location and geology but generally ranges from 50 to 250 meters. Our trained geologists determine the optimal depth during the survey.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq4\" class=\"peer hidden\" \/>\r\n <label for=\"faq4\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">4. What type of pump will be installed?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n We recommend the best pump (submersible, solar, or hand pump) based on your water usage, borehole depth, and power availability.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq5\" class=\"peer hidden\" \/>\r\n <label for=\"faq5\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">5. Is the water safe to drink?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Yes, after drilling we offer water quality testing and treatment services to ensure the water is clean and safe for consumption.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq6\" class=\"peer hidden\" \/>\r\n <label for=\"faq6\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">6. Do I need any permits before drilling?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n In some areas, permits or environmental approvals may be required. We\u2019ll guide you through the process and assist with any necessary documentation.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 animate-on-load delay-200\">\r\n \r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq7\" class=\"peer hidden\" \/>\r\n <label for=\"faq7\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">7. How much does it cost to drill a borehole?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Costs depend on depth, location, and the type of system installed. Contact us for a customized quote based on your specific needs.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq8\" class=\"peer hidden\" \/>\r\n <label for=\"faq8\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">8. How long does a borehole last?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n With proper maintenance, a borehole can last 20\u201350 years. We also offer servicing and rehabilitation for older boreholes.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq9\" class=\"peer hidden\" \/>\r\n <label for=\"faq9\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">9. Do you offer after-sales service or maintenance?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Absolutely! We provide regular maintenance, pump servicing, water treatment, and borehole rehabilitation services.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq10\" class=\"peer hidden\" \/>\r\n <label for=\"faq10\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">10. Can I use solar power for my water pump?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Yes, we install solar-powered water systems that are energy-efficient and ideal for remote or off-grid locations.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq11\" class=\"peer hidden\" \/>\r\n <label for=\"faq11\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">11. Which areas do you operate?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Our headquarter is in Nairobi, but we operate all over Kenya and beyond.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-1 border border-border-light shadow-sm hover:shadow-md transition-shadow duration-300\">\r\n <input type=\"checkbox\" id=\"faq12\" class=\"peer hidden\" \/>\r\n <label for=\"faq12\" class=\"cursor-pointer p-5 flex items-center justify-between w-full select-none\">\r\n <span class=\"font-bold text-lg text-deep-navy pr-4\">12. Are you registered to handle water projects?<\/span>\r\n <div class=\"w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 text-primary-blue transition-transform duration-300 peer-checked:rotate-45\">\r\n <i class=\"fa-solid fa-plus\"><\/i>\r\n <\/div>\r\n <\/label>\r\n <div class=\"max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-96\">\r\n <div class=\"px-5 pb-5 text-slate-600 leading-relaxed\">\r\n Yes, we are registered as a company to handle water works projects. <br><span class=\"font-semibold text-primary-blue mt-1 inline-block\">Certificate of Incorporation \u2013 PVT-Y2U977A9<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\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-c542773 e-con e-atomic-element e-flexbox-base e-c542773-dafaea8 \" data-id=\"c542773\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c542773\">\n \t\t<div class=\"elementor-element elementor-element-5891dfe elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5891dfe\" 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-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/21","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=21"}],"version-history":[{"count":88,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/pages\/21\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/nikadigitalhub.co.ke\/copawaters\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}