<!-- Tailwind CSS CDN -->

<script src="https://cdn.tailwindcss.com"></script>

<!-- FontAwesome Icons -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Google Fonts: Outfit, Plus Jakarta Sans & Fraunces -->

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,700;1,9..144,800&family=Outfit:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">


<script>

    tailwind.config = {

        theme: {

            extend: {

                colors: {

                    ppc: {

                        blue: '#1B2468',

                        bluedark: '#101642',

                        bluelight: '#283593',

                        green: '#2B722E',

                        greenlight: '#388E3C',

                        gold: '#E28B18',

                        goldbright: '#F59E0B',

                        cream: '#F8FAFC'

                    }

                },

                fontFamily: {

                    heading: ['"Outfit"', 'sans-serif'],

                    sans: ['"Plus Jakarta Sans"', 'sans-serif'],

                    seriflogo: ['"Fraunces"', 'serif'],

                }

            }

        }

    }

</script>

<style>

    /* Standalone Fallback Styles to Guarantee Instant Rendering in Any Browser */

    :root {

        --ppc-blue: #1B2468;

        --ppc-bluedark: #101642;

        --ppc-green: #2B722E;

        --ppc-gold: #E28B18;

    }

    * { box-sizing: border-box; }

    body {

        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

        margin: 0;

        padding: 0;

        background-color: #f8fafc;

        color: #1e293b;

    }

    h1, h2, h3, h4, .brand-font {

        font-family: 'Outfit', sans-serif;

    }

    .logo-serif {

        font-family: 'Fraunces', Georgia, serif;

    }

    .hero-brand-bg {

        background-color: #101642;

        background-image: 

            radial-gradient(circle at 12% 22%, rgba(43, 114, 46, 0.42) 0%, transparent 48%),

            radial-gradient(circle at 88% 78%, rgba(226, 139, 24, 0.35) 0%, transparent 50%),

            linear-gradient(135deg, #101642 0%, #1B2468 55%, #151C52 100%);

    }

    .roof-split-border {

        background: linear-gradient(90deg, #2B722E 0%, #2B722E 50%, #E28B18 50%, #E28B18 100%);

        height: 6px;

        width: 100%;

    }

    .service-card {

        transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);

    }

    .service-card:hover {

        transform: translateY(-6px);

    }

</style>

<!-- Top Brand Accent Ribbon (Mirrors Logo's Green/Gold split roof) -->

<div class="roof-split-border"></div>


<!-- Top Utility Bar: Gov Verification & Direct Phones -->

<header class="bg-[#101642] text-slate-200 text-xs py-2.5 px-4 border-b border-white/10">

    <div class="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between items-center gap-2.5">

        <div class="flex items-center gap-3 flex-wrap justify-center lg:justify-start">

            <span class="inline-flex items-center text-amber-300 font-bold tracking-wide bg-white/10 px-3 py-1 rounded-full border border-amber-400/30 shadow-sm">

                <i class="fa-solid fa-stamp mr-1.5 text-amber-400"></i> Dept. of Agriculture Reg: RP/PCS/WP/033

            </span>

            <span class="text-slate-500 hidden sm:inline">|</span>

            <span class="text-slate-300 flex items-center font-medium">

                <i class="fa-solid fa-location-dot text-emerald-400 mr-1.5"></i> 83, Yodaya Kanatta Rd, Hendala, Wattala

            </span>

        </div>


        <div class="flex items-center gap-4 text-xs font-semibold">

            <a href="tel:+94776160119" class="text-amber-300 hover:text-white transition-colors flex items-center gap-1.5 bg-amber-500/10 px-2.5 py-1 rounded-lg border border-amber-400/20">

                <i class="fa-solid fa-phone-volume text-amber-400 animate-pulse"></i> 077 616 0119

            </a>

            <a href="tel:+94112940094" class="text-slate-300 hover:text-white transition-colors hidden sm:flex items-center gap-1">

                <i class="fa-solid fa-tty text-slate-400"></i> 011 294 0094

            </a>

            <span class="text-slate-600 hidden sm:inline">|</span>

            <a href="https://wa.me/94776160119" target="_blank" class="text-emerald-400 hover:text-emerald-300 transition-colors flex items-center gap-1.5">

                <i class="fa-brands fa-whatsapp text-sm"></i> WhatsApp Dispatch

            </a>

        </div>

    </div>

</header>


<!-- Main Navigation Bar -->

<nav class="bg-white/95 backdrop-blur-md sticky top-0 z-40 border-b border-slate-200/80 shadow-sm">

    <div class="max-w-7xl mx-auto px-4 sm:px-6">

        <div class="flex justify-between h-24 items-center">


            <!-- Brand Logo Lockup: Vector Recreation of Uploaded Logo -->

            <a href="#home" class="flex items-center gap-4 group focus:outline-none">

                <div class="w-16 h-16 bg-[#1B2468] rounded-2xl p-1.5 flex flex-col items-center justify-between shadow-lg shadow-indigo-950/20 group-hover:scale-105 transition-transform shrink-0 border-2 border-[#1B2468] relative overflow-hidden">

                    <svg viewBox="0 0 120 115" class="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">

                        <defs>

                            <linearGradient id="greenRoof" x1="10" y1="10" x2="65" y2="90" gradientUnits="userSpaceOnUse">

                                <stop offset="0%" stop-color="#388E3C"/>

                                <stop offset="60%" stop-color="#2B722E"/>

                                <stop offset="100%" stop-color="#1E5220"/>

                            </linearGradient>

                            <linearGradient id="goldRoof" x1="60" y1="20" x2="105" y2="90" gradientUnits="userSpaceOnUse">

                                <stop offset="0%" stop-color="#F59E0B"/>

                                <stop offset="50%" stop-color="#E28B18"/>

                                <stop offset="100%" stop-color="#C26D07"/>

                            </linearGradient>

                            <filter id="whiteGlow" x="-20%" y="-20%" width="140%" height="140%">

                                <feDropShadow dx="0" dy="0" stdDeviation="2.2" flood-color="#FFFFFF" flood-opacity="0.85"/>

                            </filter>

                        </defs>

                        <!-- Green Left Side of House -->

                        <path d="M60 6 L6 52 L20 52 L20 92 L28 92 L82 25 Z" fill="url(#greenRoof)"/>

                        <path d="M20 60 Q42 35 58 55 L20 92 Z" fill="#4CAF50" opacity="0.25"/>

                        <!-- Gold Right Side of House -->

                        <path d="M82 25 L114 52 L100 52 L100 92 L28 92 Z" fill="url(#goldRoof)"/>

                        <path d="M55 92 Q78 65 100 78 L100 92 Z" fill="#FBBF24" opacity="0.25"/>


                        <!-- White Termite Silhouette with glow -->

                        <g filter="url(#whiteGlow)" fill="#FFFFFF" stroke="#FFFFFF">

                            <ellipse cx="41" cy="69" rx="18" ry="8.5" transform="rotate(-38 41 69)" stroke="none"/>

                            <ellipse cx="59" cy="54" rx="6.5" ry="4.8" transform="rotate(-38 59 54)" stroke="none"/>

                            <ellipse cx="70" cy="44" rx="8.5" ry="7.2" transform="rotate(-35 70 44)" stroke="none"/>

                            <path d="M74 37 Q77 23 82 18" stroke-width="2.6" stroke-linecap="round" fill="none"/>

                            <path d="M78 44 Q93 44 104 38" stroke-width="2.6" stroke-linecap="round" fill="none"/>

                            <path d="M62 49 L56 38 L61 31" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

                            <path d="M53 52 L42 46 L31 44" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

                            <path d="M45 58 L32 58 L20 63" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

                            <path d="M68 51 L80 51 L88 46" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

                            <path d="M60 58 L66 67 L66 78" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

                            <path d="M51 67 L55 77 L50 88" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

                        </g>

                        <text x="60" y="106" text-anchor="middle" fill="#FBBF24" font-family="Fraunces, Georgia, serif" font-weight="800" font-style="italic" font-size="11">Since 1997</text>

                    </svg>

                </div>


                <div>

                    <div class="flex items-center gap-2 mb-0.5">

                        <span class="logo-serif italic text-xs font-extrabold text-[#E28B18] tracking-wide bg-amber-50 px-2 py-0.5 rounded border border-amber-200/80">

                            Since 1997

                        </span>

                        <span class="text-[11px] font-bold text-[#2B722E] bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200/80">

                            Gov. Reg: RP/PCS/WP/033

                        </span>

                    </div>

                    <span class="block text-xl sm:text-2xl font-black text-[#1B2468] tracking-tight brand-font leading-none">

                        POWER PEST CONTROL

                    </span>

                    <span class="block text-xs font-bold text-slate-500 uppercase tracking-widest mt-0.5">

                        Service • Sri Lanka

                    </span>

                </div>

            </a>


            <!-- Desktop Navigation Links -->

            <div class="hidden lg:flex items-center space-x-8 text-sm font-bold text-slate-700">

                <a href="#services" class="hover:text-[#1B2468] transition-colors py-2">Treatments</a>

                <a href="#approach" class="hover:text-[#1B2468] transition-colors py-2">How We Work</a>

                <a href="#about" class="hover:text-[#1B2468] transition-colors py-2">27-Year Heritage</a>

                <a href="#faq" class="hover:text-[#1B2468] transition-colors py-2">Safety & FAQ</a>


                <div class="flex items-center gap-3 pl-2 border-l border-slate-200">

                    <a href="tel:+94776160119" class="text-[#1B2468] hover:bg-slate-100 px-3.5 py-2.5 rounded-xl font-extrabold transition-colors flex items-center gap-2 text-xs border border-slate-200">

                        <i class="fa-solid fa-phone text-[#E28B18]"></i>

                        <span>077 616 0119</span>

                    </a>

                    <a href="#contact" class="bg-[#2B722E] hover:bg-emerald-700 text-white px-5 py-2.5 rounded-xl font-bold transition-all shadow-md shadow-emerald-900/20 hover:shadow-lg flex items-center gap-2">

                        <i class="fa-solid fa-clipboard-check text-amber-300"></i>

                        <span>Free Site Visit</span>

                    </a>

                </div>

            </div>


            <!-- Mobile Menu Toggle -->

            <button id="mobile-toggle" class="lg:hidden p-2.5 rounded-xl text-[#1B2468] bg-slate-100 hover:bg-slate-200 focus:outline-none" aria-label="Open Navigation">

                <i class="fa-solid fa-bars-staggered text-xl"></i>

            </button>

        </div>

    </div>


    <!-- Mobile Drawer -->

    <div id="mobile-nav" class="hidden lg:hidden border-t border-slate-200 bg-white px-5 py-5 space-y-3 shadow-xl">

        <a href="#services" class="block py-2 text-slate-800 font-bold hover:text-[#1B2468]">Our Treatments</a>

        <a href="#approach" class="block py-2 text-slate-800 font-bold hover:text-[#1B2468]">How We Work</a>

        <a href="#about" class="block py-2 text-slate-800 font-bold hover:text-[#1B2468]">Our Story (Since 1997)</a>

        <a href="#faq" class="block py-2 text-slate-800 font-bold hover:text-[#1B2468]">Common Questions</a>

        <div class="pt-2 flex flex-col gap-2.5">

            <a href="#contact" class="block w-full text-center bg-[#2B722E] text-white py-3.5 rounded-xl font-bold shadow-md">

                Book Free Site Inspection

            </a>

            <a href="tel:+94776160119" class="block w-full text-center bg-[#1B2468] text-white py-3 rounded-xl font-bold">

                <i class="fa-solid fa-phone text-amber-400 mr-1.5"></i> Call 077 616 0119

            </a>

        </div>

    </div>

</nav>


<!-- Hero Section -->

<section id="home" class="hero-brand-bg text-white py-16 lg:py-24 relative overflow-hidden">

    <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">

        <div class="grid lg:grid-cols-12 gap-12 items-center">


            <!-- Left Column -->

            <div class="lg:col-span-7 space-y-6">

                <div class="inline-flex items-center gap-2.5 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-xs font-bold">

                    <span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>

                    <span class="text-amber-300 logo-serif italic text-sm">Since 1997</span>

                    <span class="text-white/40">•</span>

                    <span class="text-slate-100">Family & Pet Safe Vector Extermination</span>

                </div>


                <h1 class="text-3xl sm:text-5xl lg:text-[54px] font-black brand-font leading-[1.12] text-white tracking-tight">

                    Safe, lasting pest protection for <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 via-amber-400 to-emerald-300">Sri Lankan homes</span> & businesses.

                </h1>


                <p class="text-slate-200/90 text-base sm:text-lg leading-relaxed max-w-2xl font-normal">

                    When subterranean termites attack your timber roof or Dengue mosquitoes threaten your family, you need proven specialists—not guesswork. We combine certified low-toxicity formulations with <strong>27+ years</strong> of hands-on Sri Lankan building experience.

                </p>


                <!-- Badges -->

                <div class="grid grid-cols-3 gap-3 sm:gap-4 pt-2 max-w-xl">

                    <div class="bg-white/10 border-l-4 border-amber-400 p-3.5 rounded-r-xl backdrop-blur-sm">

                        <span class="block text-2xl sm:text-3xl font-black text-amber-400 brand-font">10 Yrs</span>

                        <span class="text-xs text-slate-200 font-semibold">Termite Warranty</span>

                    </div>

                    <div class="bg-white/10 border-l-4 border-emerald-400 p-3.5 rounded-r-xl backdrop-blur-sm">

                        <span class="block text-2xl sm:text-3xl font-black text-emerald-400 brand-font">ROP Reg.</span>

                        <span class="text-xs text-slate-200 font-semibold">Gov. Certified</span>

                    </div>

                    <div class="bg-white/10 border-l-4 border-white p-3.5 rounded-r-xl backdrop-blur-sm">

                        <span class="block text-2xl sm:text-3xl font-black text-white brand-font">Wattala</span>

                        <span class="text-xs text-slate-200 font-semibold">Dispatch HQ</span>

                    </div>

                </div>


                <!-- Actions -->

                <div class="flex flex-col sm:flex-row gap-3.5 pt-3">

                    <a href="#contact" class="bg-[#2B722E] hover:bg-emerald-700 text-white font-bold px-7 py-4 rounded-xl transition-all shadow-xl text-center flex items-center justify-center gap-2.5 text-sm sm:text-base border border-emerald-400/30">

                        <i class="fa-solid fa-calendar-check text-amber-300"></i>

                        <span>Arrange Free Site Inspection</span>

                    </a>

                    <a href="tel:+94776160119" class="bg-white text-[#1B2468] hover:bg-amber-50 font-extrabold px-7 py-4 rounded-xl transition-all shadow-xl text-center flex items-center justify-center gap-2.5 text-sm sm:text-base">

                        <i class="fa-solid fa-phone-volume text-[#E28B18]"></i>

                        <span>Speak to an Officer (077 616 0119)</span>

                    </a>

                </div>

            </div>


            <!-- Right Column: Quick Dispatch Form -->

            <div class="lg:col-span-5">

                <div class="bg-white text-slate-800 rounded-3xl shadow-2xl overflow-hidden border border-white/20">

                    <div class="roof-split-border"></div>


                    <div class="p-6 sm:p-8">

                        <div class="flex items-start justify-between pb-4 border-b border-slate-100">

                            <div>

                                <span class="text-[11px] font-extrabold uppercase tracking-wider text-[#2B722E] bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-200">

                                    Zero-Obligation Assessment

                                </span>

                                <h3 class="font-black text-[#1B2468] text-xl brand-font mt-1.5">Need an inspection today?</h3>

                                <p class="text-xs text-slate-500 mt-0.5">Free diagnostic check across Wattala & Greater Colombo</p>

                            </div>

                            <div class="w-11 h-11 rounded-2xl bg-[#1B2468] text-amber-400 flex items-center justify-center text-lg shadow-md shrink-0">

                                <i class="fa-solid fa-shield-halved"></i>

                            </div>

                        </div>


                        <form id="hero-quick" onsubmit="handleQuickForm(event)" class="space-y-4 mt-5">

                            <div>

                                <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">

                                    1. What pest sign are you seeing?

                                </label>

                                <select id="quick_problem" class="w-full text-sm font-medium border border-slate-300 rounded-xl p-3 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none">

                                    <option value="Termites & White Ants">Termites / White Ants (Mud tubes, hollow wood)</option>

                                    <option value="Mosquito & Dengue">Mosquitoes / Dengue Fogging Required</option>

                                    <option value="Rodents & Mice">Rats or Mice in ceiling / kitchen</option>

                                    <option value="Cockroaches & Bed Bugs">Cockroaches or Bed Bug Infestation</option>

                                    <option value="Wood Borer Treatment">Wood Borer / Fine yellow timber dust</option>

                                    <option value="Commercial Fumigation">Commercial / Warehouse Fumigation</option>

                                </select>

                            </div>


                            <div class="grid sm:grid-cols-2 gap-3.5">

                                <div>

                                    <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">

                                        2. Phone / WhatsApp

                                    </label>

                                    <input type="tel" id="quick_phone" required placeholder="077 616 0119" class="w-full text-sm border border-slate-300 rounded-xl p-3 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none">

                                </div>

                                <div>

                                    <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">

                                        3. Your Town / Area

                                    </label>

                                    <input type="text" id="quick_location" required placeholder="e.g. Hendala, Wattala" class="w-full text-sm border border-slate-300 rounded-xl p-3 bg-slate-50 focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none">

                                </div>

                            </div>


                            <button type="submit" class="w-full bg-[#1B2468] hover:bg-indigo-900 text-white font-bold py-3.5 rounded-xl text-sm transition-all shadow-lg flex items-center justify-center gap-2">

                                <span>Request Technical Officer Call</span>

                                <i class="fa-solid fa-arrow-right text-amber-400"></i>

                            </button>


                            <div class="pt-1 flex items-center justify-center gap-2 text-[11px] text-slate-500 font-medium">

                                <i class="fa-solid fa-lock text-[#2B722E]"></i>

                                <span>We inspect the site first before giving a written estimate.</span>

                            </div>

                        </form>

                    </div>

                </div>

            </div>


        </div>

    </div>

</section>


<!-- Trust Credentials Bar -->

<section class="bg-white border-b border-slate-200 py-5 shadow-sm relative z-20">

    <div class="max-w-7xl mx-auto px-4 sm:px-6">

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-xs sm:text-sm font-bold text-slate-700">

            <div class="flex items-center gap-3 p-2 rounded-xl bg-slate-50 border border-slate-200/70">

                <div class="w-9 h-9 rounded-lg bg-[#1B2468] text-amber-400 flex items-center justify-center shrink-0">

                    <i class="fa-solid fa-certificate"></i>

                </div>

                <div>

                    <span class="block text-[10px] uppercase text-slate-400 font-extrabold">Dept. of Agriculture</span>

                    <span class="text-[#1B2468]">Reg: RP/PCS/WP/033</span>

                </div>

            </div>


            <div class="flex items-center gap-3 p-2 rounded-xl bg-slate-50 border border-slate-200/70">

                <div class="w-9 h-9 rounded-lg bg-[#2B722E] text-white flex items-center justify-center shrink-0">

                    <i class="fa-solid fa-award"></i>

                </div>

                <div>

                    <span class="block text-[10px] uppercase text-slate-400 font-extrabold">Industry Standing</span>

                    <span class="text-slate-800">Member: PMA Sri Lanka</span>

                </div>

            </div>


            <div class="flex items-center gap-3 p-2 rounded-xl bg-slate-50 border border-slate-200/70">

                <div class="w-9 h-9 rounded-lg bg-[#E28B18] text-white flex items-center justify-center shrink-0">

                    <i class="fa-solid fa-leaf"></i>

                </div>

                <div>

                    <span class="block text-[10px] uppercase text-slate-400 font-extrabold">Eco-Conscious</span>

                    <span class="text-slate-800">Child & Food Prep Safe</span>

                </div>

            </div>


            <div class="flex items-center gap-3 p-2 rounded-xl bg-slate-50 border border-slate-200/70">

                <div class="w-9 h-9 rounded-lg bg-[#1B2468] text-white flex items-center justify-center shrink-0">

                    <i class="fa-solid fa-clock-rotate-left"></i>

                </div>

                <div>

                    <span class="block text-[10px] uppercase text-slate-400 font-extrabold">Proven Track Record</span>

                    <span class="text-slate-800">Serving SL Since 1997</span>

                </div>

            </div>

        </div>

    </div>

</section>


<!-- Treatments Grid -->

<section id="services" class="py-20 bg-slate-50">

    <div class="max-w-7xl mx-auto px-4 sm:px-6">


        <div class="max-w-2xl mx-auto text-center mb-14">

            <div class="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-amber-100/80 border border-amber-300/60 text-amber-900 text-xs font-extrabold uppercase tracking-wider">

                <i class="fa-solid fa-crosshairs text-[#E28B18]"></i> Targeted Pest Treatments

            </div>

            <h2 class="text-3xl sm:text-4xl font-black text-[#1B2468] brand-font mt-3">

                Proper methods tailored for Sri Lankan climates & buildings

            </h2>

            <p class="text-sm sm:text-base text-slate-600 mt-2.5">

                Every pest problem requires specific treatment. We diagnose the root nesting cause rather than merely spraying surface chemicals.

            </p>

        </div>


        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-7">


            <!-- 1. Termite Control -->

            <div class="service-card bg-white rounded-3xl border-2 border-indigo-100 p-7 shadow-md flex flex-col justify-between relative overflow-hidden">

                <div class="roof-split-border absolute top-0 left-0 right-0"></div>

                <div>

                    <div class="flex justify-between items-start mb-5 mt-1">

                        <div class="w-14 h-14 rounded-2xl bg-[#1B2468] text-white flex items-center justify-center text-2xl shadow-md">

                            <i class="fa-solid fa-house-chimney-crack text-amber-400"></i>

                        </div>

                        <span class="text-[11px] font-black tracking-wider uppercase text-amber-800 bg-amber-100 px-3 py-1 rounded-full border border-amber-300">

                            Up to 10-Yr Guarantee

                        </span>

                    </div>

                    <h3 class="text-xl font-extrabold text-[#1B2468] brand-font">Subterranean Termite Barrier</h3>

                    <p class="text-sm text-slate-600 mt-2.5 leading-relaxed">

                        Protect door frames, wooden ceilings, and foundation beams. We use deep slab drilling, chemical soil barrier injections, and pre-construction treatments that eliminate the underground queen colony.

                    </p>

                    <div class="mt-5 pt-4 border-t border-slate-100 space-y-2 text-xs font-semibold text-slate-700">

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Pre & Post construction floor barriers</div>

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Certified written warranty issued</div>

                    </div>

                </div>

                <button onclick="bookSpecificService('Termites & White Ants')" class="mt-7 w-full py-3 rounded-xl text-xs font-extrabold uppercase tracking-wider text-white bg-[#1B2468] hover:bg-indigo-900 transition-colors shadow-sm flex items-center justify-center gap-2">

                    <span>Inspect For Termites</span>

                    <i class="fa-solid fa-arrow-right text-amber-400"></i>

                </button>

            </div>


            <!-- 2. Mosquito & Dengue Control -->

            <div class="service-card bg-white rounded-3xl border border-slate-200 p-7 shadow-sm flex flex-col justify-between relative overflow-hidden">

                <div class="h-1.5 bg-[#E28B18] absolute top-0 left-0 right-0"></div>

                <div>

                    <div class="flex justify-between items-start mb-5 mt-1">

                        <div class="w-14 h-14 rounded-2xl bg-amber-50 text-[#E28B18] flex items-center justify-center text-2xl border border-amber-200">

                            <i class="fa-solid fa-mosquito"></i>

                        </div>

                        <span class="text-[11px] font-black tracking-wider uppercase text-emerald-800 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">

                            Dengue Defense

                        </span>

                    </div>

                    <h3 class="text-xl font-extrabold text-[#1B2468] brand-font">Mosquito & Dengue Management</h3>

                    <p class="text-sm text-slate-600 mt-2.5 leading-relaxed">

                        Target adult mosquitoes and stop breeding grounds in drains, storm gutters, and gardens using thermal smoke fogging and biological larvicide misting adhering to health department guidelines.

                    </p>

                    <div class="mt-5 pt-4 border-t border-slate-100 space-y-2 text-xs font-semibold text-slate-700">

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Outdoor thermal smoke fogging</div>

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Gutter and water larvicide treatment</div>

                    </div>

                </div>

                <button onclick="bookSpecificService('Mosquito & Dengue')" class="mt-7 w-full py-3 rounded-xl text-xs font-extrabold uppercase tracking-wider text-[#1B2468] bg-slate-100 hover:bg-[#1B2468] hover:text-white transition-colors">

                    Book Mosquito Fogging

                </button>

            </div>


            <!-- 3. Rodent Proofing -->

            <div class="service-card bg-white rounded-3xl border border-slate-200 p-7 shadow-sm flex flex-col justify-between relative overflow-hidden">

                <div class="h-1.5 bg-[#2B722E] absolute top-0 left-0 right-0"></div>

                <div>

                    <div class="flex justify-between items-start mb-5 mt-1">

                        <div class="w-14 h-14 rounded-2xl bg-emerald-50 text-[#2B722E] flex items-center justify-center text-2xl border border-emerald-200">

                            <i class="fa-solid fa-paw"></i>

                        </div>

                        <span class="text-[11px] font-black tracking-wider uppercase text-slate-600 bg-slate-100 px-3 py-1 rounded-full">

                            Tamper-Resistant

                        </span>

                    </div>

                    <h3 class="text-xl font-extrabold text-[#1B2468] brand-font">Rats & Rodent Exclusion</h3>

                    <p class="text-sm text-slate-600 mt-2.5 leading-relaxed">

                        Rats chewing electrical cables in ceilings and nesting in store rooms pose real fire and disease risks. We deploy secure, locked bait stations and seal building entryways safely away from domestic pets.

                    </p>

                    <div class="mt-5 pt-4 border-t border-slate-100 space-y-2 text-xs font-semibold text-slate-700">

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Roof crawl spaces & attic treatments</div>

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Safe for households with dogs & cats</div>

                    </div>

                </div>

                <button onclick="bookSpecificService('Rodents & Mice')" class="mt-7 w-full py-3 rounded-xl text-xs font-extrabold uppercase tracking-wider text-[#1B2468] bg-slate-100 hover:bg-[#1B2468] hover:text-white transition-colors">

                    Eliminate Rodents

                </button>

            </div>


            <!-- 4. Cockroaches -->

            <div class="service-card bg-white rounded-3xl border border-slate-200 p-7 shadow-sm flex flex-col justify-between relative overflow-hidden">

                <div class="h-1.5 bg-[#2B722E] absolute top-0 left-0 right-0"></div>

                <div>

                    <div class="flex justify-between items-start mb-5 mt-1">

                        <div class="w-14 h-14 rounded-2xl bg-emerald-50 text-[#2B722E] flex items-center justify-center text-2xl border border-emerald-200">

                            <i class="fa-solid fa-bugs"></i>

                        </div>

                        <span class="text-[11px] font-black tracking-wider uppercase text-emerald-800 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">

                            Odorless & Discreet

                        </span>

                    </div>

                    <h3 class="text-xl font-extrabold text-[#1B2468] brand-font">Cockroach Gel Treatment</h3>

                    <p class="text-sm text-slate-600 mt-2.5 leading-relaxed">

                        No need to empty your kitchen cabinets or evacuate the house. We place tiny, odorless micro-dots of pheromone-attracting gel in hinges and corners that eliminate the entire colony within 48 hours.

                    </p>

                    <div class="mt-5 pt-4 border-t border-slate-100 space-y-2 text-xs font-semibold text-slate-700">

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> 100% food-safe gel application</div>

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Targets German & American cockroaches</div>

                    </div>

                </div>

                <button onclick="bookSpecificService('Cockroaches & Bed Bugs')" class="mt-7 w-full py-3 rounded-xl text-xs font-extrabold uppercase tracking-wider text-[#1B2468] bg-slate-100 hover:bg-[#1B2468] hover:text-white transition-colors">

                    Treat Cockroaches

                </button>

            </div>


            <!-- 5. Wood Borer Preservation -->

            <div class="service-card bg-white rounded-3xl border border-slate-200 p-7 shadow-sm flex flex-col justify-between relative overflow-hidden">

                <div class="h-1.5 bg-[#E28B18] absolute top-0 left-0 right-0"></div>

                <div>

                    <div class="flex justify-between items-start mb-5 mt-1">

                        <div class="w-14 h-14 rounded-2xl bg-amber-50 text-[#E28B18] flex items-center justify-center text-2xl border border-amber-200">

                            <i class="fa-solid fa-tree"></i>

                        </div>

                        <span class="text-[11px] font-black tracking-wider uppercase text-amber-800 bg-amber-50 px-3 py-1 rounded-full border border-amber-200">

                            Timber Preservation

                        </span>

                    </div>

                    <h3 class="text-xl font-extrabold text-[#1B2468] brand-font">Wood Borer Eradication</h3>

                    <p class="text-sm text-slate-600 mt-2.5 leading-relaxed">

                        Fine yellow powder falling under doorframes or antique jack-wood furniture is a sign of powder-post beetle larvae. We use syringe micro-injections and penetrating wood preservatives to rescue your timber.

                    </p>

                    <div class="mt-5 pt-4 border-t border-slate-100 space-y-2 text-xs font-semibold text-slate-700">

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Deep syringe injection into flight holes</div>

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Halts structural weakening of rafters</div>

                    </div>

                </div>

                <button onclick="bookSpecificService('Wood Borer Treatment')" class="mt-7 w-full py-3 rounded-xl text-xs font-extrabold uppercase tracking-wider text-[#1B2468] bg-slate-100 hover:bg-[#1B2468] hover:text-white transition-colors">

                    Save Timber

                </button>

            </div>


            <!-- 6. Commercial Fumigation -->

            <div class="service-card bg-white rounded-3xl border border-slate-200 p-7 shadow-sm flex flex-col justify-between relative overflow-hidden">

                <div class="h-1.5 bg-[#1B2468] absolute top-0 left-0 right-0"></div>

                <div>

                    <div class="flex justify-between items-start mb-5 mt-1">

                        <div class="w-14 h-14 rounded-2xl bg-blue-50 text-[#1B2468] flex items-center justify-center text-2xl border border-blue-200">

                            <i class="fa-solid fa-warehouse"></i>

                        </div>

                        <span class="text-[11px] font-black tracking-wider uppercase text-[#1B2468] bg-blue-50 px-3 py-1 rounded-full border border-blue-200">

                            Industrial & Export

                        </span>

                    </div>

                    <h3 class="text-xl font-extrabold text-[#1B2468] brand-font">Warehouse & Facility Fumigation</h3>

                    <p class="text-sm text-slate-600 mt-2.5 leading-relaxed">

                        Complete pest management contracts for food processing units, apparel factories, schools, and export shipping containers compliant with international phytosanitary quarantine standards.

                    </p>

                    <div class="mt-5 pt-4 border-t border-slate-100 space-y-2 text-xs font-semibold text-slate-700">

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Routine quarterly corporate audits</div>

                        <div class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-[#2B722E]"></i> Official fumigation certificates provided</div>

                    </div>

                </div>

                <button onclick="bookSpecificService('Commercial Fumigation')" class="mt-7 w-full py-3 rounded-xl text-xs font-extrabold uppercase tracking-wider text-[#1B2468] bg-slate-100 hover:bg-[#1B2468] hover:text-white transition-colors">

                    Corporate Inquiry

                </button>

            </div>


        </div>

    </div>

</section>


<!-- Methodology -->

<section id="approach" class="py-20 bg-white border-y border-slate-200">

    <div class="max-w-7xl mx-auto px-4 sm:px-6">

        <div class="max-w-2xl mx-auto text-center mb-14">

            <span class="text-xs font-extrabold text-[#2B722E] bg-emerald-50 px-3.5 py-1 rounded-full uppercase tracking-wider border border-emerald-200">

                Transparent Methodology

            </span>

            <h2 class="text-3xl sm:text-4xl font-black text-[#1B2468] brand-font mt-3">

                How our technical officers work with you

            </h2>

            <p class="text-sm sm:text-base text-slate-600 mt-2">

                No guesswork or unexpected charges. Here is our straightforward process from first phone call to final warranty certificate.

            </p>

        </div>


        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">

            <div class="p-6 rounded-3xl bg-slate-50 border border-slate-200 relative group hover:border-[#1B2468] transition-colors">

                <div class="flex justify-between items-center mb-4">

                    <span class="w-10 h-10 rounded-xl bg-[#1B2468] text-amber-400 font-black brand-font flex items-center justify-center text-sm shadow">01</span>

                    <span class="text-[11px] font-bold text-[#2B722E] bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-200">Free in Wattala & CMB</span>

                </div>

                <h4 class="font-extrabold text-[#1B2468] text-lg brand-font">On-Site Diagnosis</h4>

                <p class="text-xs sm:text-sm text-slate-600 mt-2 leading-relaxed">

                    An officer visits your premises to inspect wood moisture, wall hollows, entry points, and pest nest origins.

                </p>

            </div>


            <div class="p-6 rounded-3xl bg-slate-50 border border-slate-200 relative group hover:border-[#1B2468] transition-colors">

                <div class="flex justify-between items-center mb-4">

                    <span class="w-10 h-10 rounded-xl bg-[#1B2468] text-amber-400 font-black brand-font flex items-center justify-center text-sm shadow">02</span>

                    <span class="text-[11px] font-bold text-slate-600 bg-white px-2.5 py-0.5 rounded-full border border-slate-200">No Hidden Fees</span>

                </div>

                <h4 class="font-extrabold text-[#1B2468] text-lg brand-font">Clear Quotation</h4>

                <p class="text-xs sm:text-sm text-slate-600 mt-2 leading-relaxed">

                    You receive a straightforward written estimate itemizing the approved chemicals, warranty duration, and exact areas treated.

                </p>

            </div>


            <div class="p-6 rounded-3xl bg-slate-50 border border-slate-200 relative group hover:border-[#1B2468] transition-colors">

                <div class="flex justify-between items-center mb-4">

                    <span class="w-10 h-10 rounded-xl bg-[#2B722E] text-white font-black brand-font flex items-center justify-center text-sm shadow">03</span>

                    <span class="text-[11px] font-bold text-[#2B722E] bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-200">ROP Approved</span>

                </div>

                <h4 class="font-extrabold text-[#1B2468] text-lg brand-font">Targeted Treatment</h4>

                <p class="text-xs sm:text-sm text-slate-600 mt-2 leading-relaxed">

                    Our technicians perform chemical barrier injections or misting using Department of Agriculture approved products with minimal disruption.

                </p>

            </div>


            <div class="p-6 rounded-3xl bg-slate-50 border border-slate-200 relative group hover:border-[#1B2468] transition-colors">

                <div class="flex justify-between items-center mb-4">

                    <span class="w-10 h-10 rounded-xl bg-[#E28B18] text-white font-black brand-font flex items-center justify-center text-sm shadow">04</span>

                    <span class="text-[11px] font-bold text-amber-800 bg-amber-50 px-2.5 py-0.5 rounded-full border border-amber-200">Signed Guarantee</span>

                </div>

                <h4 class="font-extrabold text-[#1B2468] text-lg brand-font">Warranty Seal</h4>

                <p class="text-xs sm:text-sm text-slate-600 mt-2 leading-relaxed">

                    You receive an official signed warranty document. If any infestation recurs during the warranty period, we return free of charge.

                </p>

            </div>

        </div>

    </div>

</section>


<!-- Company Story & Wattala Office -->

<section id="about" class="py-20 bg-slate-100/70">

    <div class="max-w-7xl mx-auto px-4 sm:px-6">

        <div class="grid lg:grid-cols-12 gap-12 items-center">


            <div class="lg:col-span-6 space-y-5">

                <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#1B2468] text-amber-300 text-xs font-bold shadow-sm">

                    <i class="fa-solid fa-shield-heart text-emerald-400"></i>

                    <span class="logo-serif italic">Since 1997</span> • 27+ Years of Integrity

                </div>

                <h2 class="text-3xl sm:text-4xl font-black text-[#1B2468] brand-font leading-tight">

                    Local knowledge matters when protecting buildings in Sri Lanka.

                </h2>

                <p class="text-sm sm:text-base text-slate-600 leading-relaxed">

                    Founded in 1997 and registered under the Department of Agriculture Registrar of Pesticides (<strong class="text-[#1B2468]">RP/PCS/WP/033</strong>), <strong>Power Pest Control Service</strong> began with a clear purpose: to deliver dependable, science-backed pest relief without exposing households to dangerous unlicensed chemicals.

                </p>

                <p class="text-sm sm:text-base text-slate-600 leading-relaxed">

                    Sri Lanka's tropical humidity creates distinct challenges, from deep subterranean termite colonies in coastal sands to aggressive Dengue vectors during monsoon seasons. Over the past 27 years, our technicians have safeguarded thousands of family dwellings, food warehouses, embassies, and historic residences across the Western Province.

                </p>


                <div class="pt-3 grid grid-cols-3 gap-3 text-xs font-extrabold text-[#1B2468]">

                    <div class="bg-white p-3.5 rounded-2xl border border-slate-200 flex items-center gap-2 shadow-sm">

                        <i class="fa-solid fa-circle-check text-[#2B722E] text-base"></i>

                        <span>PMA Member</span>

                    </div>

                    <div class="bg-white p-3.5 rounded-2xl border border-slate-200 flex items-center gap-2 shadow-sm">

                        <i class="fa-solid fa-circle-check text-[#2B722E] text-base"></i>

                        <span>Trained Officers</span>

                    </div>

                    <div class="bg-white p-3.5 rounded-2xl border border-slate-200 flex items-center gap-2 shadow-sm">

                        <i class="fa-solid fa-circle-check text-[#2B722E] text-base"></i>

                        <span>100% Genuine</span>

                    </div>

                </div>

            </div>


            <div class="lg:col-span-6">

                <div class="bg-[#1B2468] text-white p-7 sm:p-9 rounded-3xl shadow-2xl relative overflow-hidden border border-white/10">

                    <div class="roof-split-border absolute top-0 left-0 right-0"></div>


                    <div class="border-b border-white/15 pb-4 flex justify-between items-center">

                        <div>

                            <span class="text-[11px] font-bold uppercase tracking-widest text-amber-300">Western Province Dispatch Base</span>

                            <h3 class="font-black text-white text-xl brand-font mt-0.5">Hendala, Wattala Head Office</h3>

                        </div>

                        <span class="text-xs font-extrabold text-emerald-300 bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-500/40">

                            <i class="fa-solid fa-check-double mr-1"></i> Gov. Verified

                        </span>

                    </div>


                    <div class="space-y-5 my-6 text-sm">

                        <div class="flex items-start gap-4">

                            <div class="w-10 h-10 rounded-xl bg-white/10 text-amber-400 flex items-center justify-center shrink-0 mt-0.5 border border-white/10">

                                <i class="fa-solid fa-location-dot text-lg"></i>

                            </div>

                            <div>

                                <span class="block text-slate-300 text-xs uppercase font-bold tracking-wider">Headquarters Address</span>

                                <span class="text-white font-semibold leading-relaxed block mt-0.5">

                                    83, Yodaya Kanatta Road, Alwis Town, Hendala, Wattala, Sri Lanka.

                                </span>

                            </div>

                        </div>


                        <div class="flex items-start gap-4">

                            <div class="w-10 h-10 rounded-xl bg-white/10 text-emerald-400 flex items-center justify-center shrink-0 mt-0.5 border border-white/10">

                                <i class="fa-solid fa-phone-volume text-lg"></i>

                            </div>

                            <div>

                                <span class="block text-slate-300 text-xs uppercase font-bold tracking-wider">Direct Hotlines</span>

                                <div class="flex flex-wrap gap-4 font-black text-base mt-1">

                                    <a href="tel:+94776160119" class="text-amber-300 hover:underline">+94 77 616 0119</a>

                                    <span class="text-white/30">|</span>

                                    <a href="tel:+94112940094" class="text-white hover:underline">+94 11 294 0094</a>

                                </div>

                            </div>

                        </div>


                        <div class="flex items-start gap-4">

                            <div class="w-10 h-10 rounded-xl bg-white/10 text-amber-400 flex items-center justify-center shrink-0 mt-0.5 border border-white/10">

                                <i class="fa-solid fa-file-shield text-lg"></i>

                            </div>

                            <div>

                                <span class="block text-slate-300 text-xs uppercase font-bold tracking-wider">Official License</span>

                                <span class="text-white font-semibold block mt-0.5">RP/PCS/WP/033 (Registrar of Pesticides, Dept. of Agriculture)</span>

                            </div>

                        </div>

                    </div>


                    <div class="p-4 bg-white/10 rounded-2xl border border-white/15 text-xs text-slate-200 leading-relaxed">

                        <strong class="text-amber-300">Daily Rapid Coverage:</strong> Wattala, Hendala, Peliyagoda, Kelaniya, Ragama, Kiribathgoda, Ja-Ela, Negombo, Colombo 01–15, and islandwide for commercial contracts.

                    </div>

                </div>

            </div>


        </div>

    </div>

</section>


<!-- FAQ -->

<section id="faq" class="py-20 bg-white border-t border-slate-200">

    <div class="max-w-4xl mx-auto px-4 sm:px-6">

        <div class="text-center mb-12">

            <span class="text-xs font-extrabold text-amber-800 bg-amber-100 px-3.5 py-1 rounded-full uppercase tracking-wider">

                Help & Clarity

            </span>

            <h2 class="text-3xl sm:text-4xl font-black text-[#1B2468] brand-font mt-3">Questions Sri Lankan property owners ask us</h2>

        </div>


        <div class="space-y-4">

            <details class="group bg-slate-50 border border-slate-200 rounded-2xl p-5 open:bg-white open:border-[#1B2468] open:shadow-md transition-all" open>

                <summary class="font-extrabold text-[#1B2468] cursor-pointer flex justify-between items-center text-base">

                    <span>Are the chemicals safe for my children and pet dogs?</span>

                    <span class="w-7 h-7 rounded-full bg-slate-200/70 text-[#1B2468] flex items-center justify-center group-open:rotate-180 transition-transform"><i class="fa-solid fa-chevron-down text-xs"></i></span>

                </summary>

                <p class="mt-3 text-sm text-slate-600 leading-relaxed">

                    Yes. We strictly use formulations approved by the Sri Lankan Registrar of Pesticides (ROP) with low mammalian toxicity. For indoor cockroach problems, we apply odorless gel dots that do not require emptying cupboards or leaving the kitchen. For outdoor fogging, we simply recommend keeping pets inside for roughly 60 to 90 minutes.

                </p>

            </details>


            <details class="group bg-slate-50 border border-slate-200 rounded-2xl p-5 open:bg-white open:border-[#1B2468] open:shadow-md transition-all">

                <summary class="font-extrabold text-[#1B2468] cursor-pointer flex justify-between items-center text-base">

                    <span>How does your termite warranty work if termites come back?</span>

                    <span class="w-7 h-7 rounded-full bg-slate-200/70 text-[#1B2468] flex items-center justify-center group-open:rotate-180 transition-transform"><i class="fa-solid fa-chevron-down text-xs"></i></span>

                </summary>

                <p class="mt-3 text-sm text-slate-600 leading-relaxed">

                    Our termite treatments are backed by written certificates (up to 10 years for pre-construction soil treatment and up to 5–7 years for post-construction drill injection). If termites re-appear in treated areas during the warranty period, our technical team returns and re-treats the zone at zero charge.

                </p>

            </details>


            <details class="group bg-slate-50 border border-slate-200 rounded-2xl p-5 open:bg-white open:border-[#1B2468] open:shadow-md transition-all">

                <summary class="font-extrabold text-[#1B2468] cursor-pointer flex justify-between items-center text-base">

                    <span>Is the site inspection in Wattala and Colombo genuinely free?</span>

                    <span class="w-7 h-7 rounded-full bg-slate-200/70 text-[#1B2468] flex items-center justify-center group-open:rotate-180 transition-transform"><i class="fa-solid fa-chevron-down text-xs"></i></span>

                </summary>

                <p class="mt-3 text-sm text-slate-600 leading-relaxed">

                    Yes, our initial site inspection is completely free for residences and commercial spaces in Wattala, Kelaniya, Peliyagoda, and Greater Colombo. An officer inspects the property, pinpoints the nesting, and gives an honest written quote. You are never obligated to proceed.

                </p>

            </details>

        </div>

    </div>

</section>


<!-- Inspection Booking Section -->

<section id="contact" class="py-20 bg-slate-100">

    <div class="max-w-3xl mx-auto px-4 sm:px-6">

        <div class="text-center mb-10">

            <span class="text-xs font-extrabold text-[#2B722E] bg-emerald-100 px-3.5 py-1 rounded-full uppercase tracking-wider border border-emerald-200">

                Direct Officer Consultation

            </span>

            <h2 class="text-3xl sm:text-4xl font-black text-[#1B2468] brand-font mt-3">Book Your Free Site Inspection</h2>

            <p class="text-sm sm:text-base text-slate-600 mt-1.5">Leave your contact details and our Wattala dispatch officer will call you to schedule a convenient visit.</p>

        </div>


        <!-- Client-Side Confirmation Banner -->

        <div id="client-alert" class="hidden mb-6 p-5 bg-emerald-50 border-2 border-emerald-400 text-emerald-950 rounded-2xl flex items-center gap-3 shadow-sm">

            <i class="fa-solid fa-circle-check text-2xl text-[#2B722E] shrink-0"></i>

            <div class="text-sm" id="client-alert-msg">

                Thank you! Your inspection request has been logged. Our Wattala office will phone you soon.

            </div>

        </div>


        <div class="bg-white rounded-3xl border border-slate-200 shadow-xl overflow-hidden">

            <div class="roof-split-border"></div>

            <form id="contact-form" onsubmit="handleFormSubmit(event)" class="p-6 sm:p-10 space-y-5">

                <div class="grid sm:grid-cols-2 gap-5">

                    <div>

                        <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">Your Name *</label>

                        <input type="text" id="fullname" name="fullname" required placeholder="e.g. Ruwan Silva" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3.5 text-sm focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none">

                    </div>


                    <div>

                        <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">Phone / WhatsApp *</label>

                        <input type="tel" id="phone" name="phone" required placeholder="e.g. 077 616 0119" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3.5 text-sm focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none">

                    </div>

                </div>


                <div class="grid sm:grid-cols-2 gap-5">

                    <div>

                        <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">Target Pest *</label>

                        <select id="service" name="service" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3.5 text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none">

                            <option value="Termites & White Ants">Termite / White Ant Barrier</option>

                            <option value="Mosquito & Dengue">Mosquito / Dengue Fogging</option>

                            <option value="Rodents & Mice">Rat & Rodent Proofing</option>

                            <option value="Cockroaches & Bed Bugs">Cockroach Odorless Gel</option>

                            <option value="Wood Borer Treatment">Wood Borer Timber Preservation</option>

                            <option value="Commercial Fumigation">Commercial / Factory Sanitization</option>

                        </select>

                    </div>


                    <div>

                        <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">Location / Town *</label>

                        <input type="text" id="address" name="address" required placeholder="e.g. Hendala, Wattala" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3.5 text-sm focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none">

                    </div>

                </div>


                <div>

                    <label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wide mb-1.5">What damage or signs have you noticed?</label>

                    <textarea id="notes" name="notes" rows="3" placeholder="e.g. Saw mud lines on the door frame, or hollow sounds in skirting boards..." class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3.5 text-sm focus:bg-white focus:ring-2 focus:ring-[#1B2468] focus:outline-none"></textarea>

                </div>


                <div class="grid sm:grid-cols-2 gap-3 pt-2">

                    <button type="submit" class="w-full bg-[#1B2468] hover:bg-indigo-900 text-white font-bold py-4 rounded-xl text-sm transition-all shadow-lg flex items-center justify-center gap-2">

                        <i class="fa-solid fa-paper-plane text-amber-400"></i>

                        <span>Confirm Free Site Inspection</span>

                    </button>

                    <button type="button" onclick="sendViaWhatsApp()" class="w-full bg-[#2B722E] hover:bg-emerald-700 text-white font-bold py-4 rounded-xl text-sm transition-all shadow-lg flex items-center justify-center gap-2">

                        <i class="fa-brands fa-whatsapp text-lg text-amber-300"></i>

                        <span>Send Details via WhatsApp</span>

                    </button>

                </div>

            </form>

        </div>

    </div>

</section>


<!-- Footer -->

<footer class="bg-[#101642] text-slate-300 text-xs py-14 border-t border-white/10 mt-auto">

    <div class="max-w-7xl mx-auto px-4 sm:px-6">

        <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-10">


            <div class="space-y-3.5">

                <div class="flex items-center gap-3">

                    <div class="w-10 h-10 bg-[#1B2468] rounded-xl p-1 flex items-center justify-center border border-white/20 shrink-0">

                        <svg viewBox="0 0 100 100" class="w-full h-full" fill="none">

                            <path d="M50 8 L6 48 L18 48 L18 88 L26 88 L72 28 Z" fill="#2B722E"/>

                            <path d="M72 28 L94 48 L82 48 L82 88 L26 88 Z" fill="#E28B18"/>

                            <ellipse cx="48" cy="56" rx="14" ry="7" transform="rotate(-35 48 56)" fill="#FFFFFF"/>

                            <circle cx="63" cy="41" r="6" fill="#FFFFFF"/>

                        </svg>

                    </div>

                    <div>

                        <span class="logo-serif italic text-[11px] text-amber-400 block leading-none">Since 1997</span>

                        <span class="font-black text-sm text-white brand-font tracking-tight">POWER PEST CONTROL</span>

                    </div>

                </div>

                <p class="text-slate-400 leading-relaxed text-xs">

                    Serving Sri Lankan homeowners, businesses, and government institutions with honest, certified pest management since 1997.

                </p>

                <p class="text-amber-300 font-bold text-xs">

                    <i class="fa-solid fa-stamp mr-1"></i> Dept. of Agriculture Reg: RP/PCS/WP/033

                </p>

            </div>


            <div>

                <h4 class="text-white font-bold text-xs uppercase tracking-wider mb-3.5">Treatments</h4>

                <ul class="space-y-2.5 text-slate-400">

                    <li>Termite Slab Injections (10-Yr Warranty)</li>

                    <li>Pre-Construction Soil Drenching</li>

                    <li>Mosquito & Dengue Thermal Fogging</li>

                    <li>Odorless Kitchen Cockroach Gel</li>

                    <li>Wood Borer Syringe Preservation</li>

                </ul>

            </div>


            <div>

                <h4 class="text-white font-bold text-xs uppercase tracking-wider mb-3.5">Direct Navigation</h4>

                <ul class="space-y-2.5 text-slate-400">

                    <li><a href="#services" class="hover:text-amber-400 transition-colors">Our Treatments</a></li>

                    <li><a href="#approach" class="hover:text-amber-400 transition-colors">How We Work</a></li>

                    <li><a href="#about" class="hover:text-amber-400 transition-colors">Our Company Story</a></li>

                    <li><a href="#faq" class="hover:text-amber-400 transition-colors">Safety & Guarantees</a></li>

                    <li><a href="#contact" class="hover:text-amber-400 transition-colors">Book Free Visit</a></li>

                </ul>

            </div>


            <div>

                <h4 class="text-white font-bold text-xs uppercase tracking-wider mb-3.5">Wattala Headquarters</h4>

                <p class="leading-relaxed text-slate-300">

                    83, Yodaya Kanatta Road,<br>

                    Alwis Town, Hendala, Wattala,<br>

                    Sri Lanka.

                </p>

                <p class="mt-3 text-slate-300">

                    Hotline: <a href="tel:+94776160119" class="text-amber-400 font-bold hover:underline">+94 77 616 0119</a>

                </p>

                <p class="text-slate-300 mt-1">

                    Office Line: <a href="tel:+94112940094" class="text-slate-200 hover:underline">+94 11 294 0094</a>

                </p>

            </div>


        </div>


        <div class="border-t border-slate-800 pt-6 flex flex-col sm:flex-row justify-between items-center gap-3 text-slate-400 text-[11px]">

            <p>&copy; 2026 Power Pest Control Service. All Rights Reserved. Reg: RP/PCS/WP/033.</p>

            <div class="flex items-center gap-5">

                <a href="tel:+94776160119" class="hover:text-amber-400 font-semibold"><i class="fa-solid fa-phone mr-1"></i> Call Wattala Office</a>

                <a href="https://wa.me/94776160119" target="_blank" class="text-emerald-400 hover:text-emerald-300 font-semibold"><i class="fa-brands fa-whatsapp mr-1"></i> WhatsApp Support</a>

            </div>

        </div>

    </div>

</footer>


<!-- Mobile Sticky Bar -->

<div class="fixed bottom-0 left-0 right-0 bg-[#101642] border-t border-white/15 p-2.5 z-50 md:hidden flex justify-between gap-2.5 shadow-2xl">

    <a href="tel:+94776160119" class="flex-1 bg-[#1B2468] hover:bg-indigo-900 text-white font-bold text-xs py-3.5 px-3 rounded-xl flex items-center justify-center gap-2 border border-white/15">

        <i class="fa-solid fa-phone text-amber-400"></i>

        <span>Call 077 616 0119</span>

    </a>

    <a href="https://wa.me/94776160119?text=Hello%20Power%20Pest%20Control%2C%20I%20would%20like%20to%20request%20a%20free%20site%20inspection." target="_blank" class="flex-1 bg-[#2B722E] hover:bg-emerald-700 text-white font-bold text-xs py-3.5 px-3 rounded-xl flex items-center justify-center gap-2">

        <i class="fa-brands fa-whatsapp text-sm text-amber-300"></i>

        <span>WhatsApp Us</span>

    </a>

</div>


<!-- Scripts -->

<script>

    // Mobile Navigation Toggle

    const toggleBtn = document.getElementById('mobile-toggle');

    const mobileNav = document.getElementById('mobile-nav');


    if (toggleBtn && mobileNav) {

        toggleBtn.addEventListener('click', () => {

            mobileNav.classList.toggle('hidden');

        });


        mobileNav.querySelectorAll('a').forEach(link => {

            link.addEventListener('click', () => {

                mobileNav.classList.add('hidden');

            });

        });

    }


    // Pre-select service & scroll

    function bookSpecificService(serviceName) {

        const selectEl = document.getElementById('service');

        if (selectEl) {

            selectEl.value = serviceName;

        }

        window.location.hash = 'contact';

        setTimeout(() => {

            const nameEl = document.getElementById('fullname');

            if (nameEl) nameEl.focus();

        }, 300);

    }


    // Hero Quick Form Transfer

    function handleQuickForm(e) {

        e.preventDefault();

        const pest = document.getElementById('quick_problem').value;

        const phone = document.getElementById('quick_phone').value;

        const loc = document.getElementById('quick_location').value;


        document.getElementById('service').value = pest;

        document.getElementById('phone').value = phone;

        document.getElementById('address').value = loc;


        window.location.hash = 'contact';

        setTimeout(() => {

            const nameEl = document.getElementById('fullname');

            if (nameEl) nameEl.focus();

        }, 300);

    }


    // Direct WhatsApp Dispatch

    function sendViaWhatsApp() {

        const name = document.getElementById('fullname').value || 'Homeowner';

        const phone = document.getElementById('phone').value || '';

        const service = document.getElementById('service').value || 'Pest Inspection';

        const address = document.getElementById('address').value || '';

        const notes = document.getElementById('notes').value || '';


        const text = `Hello Power Pest Control Service, I would like to book a Free Site Inspection.\n\n*Name:* ${name}\n*Phone:* ${phone}\n*Treatment:* ${service}\n*Location:* ${address}\n*Notes:* ${notes}`;

        window.open(`https://wa.me/94776160119?text=${encodeURIComponent(text)}`, '_blank');

    }


    // Client Form Submission Alert

    function handleFormSubmit(e) {

        e.preventDefault();

        const name = document.getElementById('fullname').value || 'Valued Customer';

        const phone = document.getElementById('phone').value || '';


        const alertEl = document.getElementById('client-alert');

        const msgEl = document.getElementById('client-alert-msg');


        msgEl.innerHTML = `Thank you, <strong>${name}</strong>. Your inspection request is confirmed. Our Wattala officer will phone <strong>${phone}</strong> shortly.`;

        alertEl.classList.remove('hidden');


        document.getElementById('contact-form').reset();

        window.location.hash = 'client-alert';

    }

</script>