<div class="px-8 py-10 bg-white">
    <div class="">
        <div class="con_shrt_con pb-5 font-[500] font-Mona-Sans">How we can help?</div>
        <form id="contactForm" class="newsletter-form flex flex-col items-center justify-center w-[100%]" encType="multipart/form-data" method="POST">
            <div class="flex lg:flex-row flex-wrap gap-5 flex-col justify-between form_datas">  
            <div class="line w-full pb-4">
                <input type="checkbox" class="absolute hidden" id="Checkbox_1" value="Website Development" onChange={handleCheckboxChange} />
                <input type="checkbox" class="absolute hidden" id="Checkbox_2" value="E-Commerce" onChange={handleCheckboxChange} />
                <input type="checkbox" class="absolute hidden" id="Checkbox_3" value="Digital Marketing" onChange={handleCheckboxChange} />
                <input type="checkbox" class="absolute hidden" id="Checkbox_4" value="Branding" onChange={handleCheckboxChange} />
            
                <div class="flex gap-2 flex-wrap label-cover text-[#00000099] text-[14px]">
                    <label class="hover:text-white hover:bg-[#00C71C] px-2 py-2 rounded-[4px] border-[1.5px] border-[#0000001F]" htmlFor="Checkbox_1">Website Development</label>
                    <label class="hover:text-white hover:bg-[#00C71C] px-2 py-2 rounded-[4px] border-[1.5px] border-[#0000001F]" htmlFor="Checkbox_2">E-Commerce</label>
                    <label class="hover:text-white hover:bg-[#00C71C] px-2 py-2 rounded-[4px] border-[1.5px] border-[#0000001F]" htmlFor="Checkbox_3">Digital Marketing</label>
                    <label class="hover:text-white hover:bg-[#00C71C] px-2 py-2 rounded-[4px] border-[1.5px] border-[#0000001F]" htmlFor="Checkbox_4">Branding</label>
                </div>
            </div>  
            <div class="line w-full">
                <input type="text" pattern="[A-Za-zs]+" autoComplete='off' class="pb-3 outline-[0] w-full border-b-[1.4px] border-[#000000] newsletter-form-name" name="firstname" value="" maxLength="255" placeholder="Name*" required />
                <span class="error" id="username_err"> </span>
            </div>
            <div class="line w-full">
                <input type="text" autoComplete='off' class="outline-[0] pb-3 w-full border-b-[1.4px] border-[#000000] newsletter-form-company" id="Kcompany" value="" maxLength="40" name="company" placeholder="Company name (optional)" />
                <span class="error" id="username_err"> </span>
            </div> 
            <div class="line flex-1">
                <input type="email" autoComplete='off' maxLength="255" name="email" class="outline-[0] pb-3 lg:w-[98%] w-full border-b-[1.4px] border-[#000000] newsletter-form-input" value="" placeholder="E-mail*" required />
                <span class="error" id="email_err"> </span>
            </div>
            <div class="line flex-1">
                <input type="text" autoComplete='off' name="mobile" maxLength="18" id="Knumber" class="outline-[0] pb-3 lg:w-[98%] w-full border-b-[1.4px] border-[#000000] newsletter-form-mobile" value="" placeholder="Phone Number*" required />
                <span class="error" id="mobile_err"> </span>
            </div>
            <div class="line w-full">
                <textarea class="outline-[0] pb-3 w-full border-b-[1.4px] border-[#000000] newsletter-form-message" value="" name="message" id="Kmessage" maxLength="500" placeholder="Tell us about your project"></textarea>
                <span class="error" id="message_err"> </span>
            </div>
            <button type="submit" id="submitbtn" class="pb-3 gap-3 items-center self-start hover:bg-[#006B9E] apply_now mt-4 block px-12 py-3 w-full bg-[#C9F001] hover:text-white cursor-pointer" >
                Submit
            </button>
            </div>
        </form>
    </div>
</div>