<!-- Start Hero -->
     <section class=" w-full  py-4 md:py-24 lg:py-24 bg-gray-50  bg-bottom">
        <div class="container mx-auto px-6">
            <div class="grid lg:grid-cols-12 md:grid-cols-2 mt-5 items-center gap-6">
                <div class="lg:col-span-7 mx-auto">
                    <span class="bg-blue-600/5 text-blue-600 text-xs font-bold px-2.5 py-0.5 rounded h-5">Private Webinar Services</span>

                    <h4 class="font-semibold lg:leading-normal leading-normal text-4xl lg:text-5xl mt-2 mb-5">Elevate Your Virtual Events</h4>
            
                    <p class="text-slate-400 text-lg max-w-xl">
                        Elevate your online events to the next level with our secure and user-friendly private webinar services. Experience real-time interactions, advanced features, and confidentiality, all in one place.
                    </p>
                
                    <div class="relative mt-10">
                        <a href="" class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle transition duration-500 ease-in-out text-base text-center bg-blue-600 border-primary-600 text-white rounded-full mr-1">Get Started</a>
                        
                    </div>
                </div>

                <div class="lg:col-span-5">
                    <div class="bg-white  rounded-xl shadow  md:p-8 p-4 lg:ml-10 z-10 relative">
                        <h4 class="mb-5 text-2xl font-semibold">Get 30 day FREE Trial</h4>

                        <form>
                            <div class="grid grid-cols-1">
                                <div class="mb-5">
                                    <label class=" font-medium">Your Name : <span class="text-danger-600">*</span></label>
                                    <div class=" relative mt-2">
                                        <input type="text" class="rounded-t-sm rounded-r-none rounded-b-none rounded-l-sm outline-0 hover:border-primary-600 hover:shadow-none w-full py-2 px-2 border border-inherit  rounded h-10 outline-none bg-transparent " placeholder="Name" name="name" required>
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <label class=" font-medium">Your Email : <span class="text-danger-600">*</span></label>
                                    <div class="relative mt-2">
                                        <input type="email" class="rounded-t-sm rounded-r-none rounded-b-none rounded-l-sm outline-0 w-full py-2 px-3 border border-inherit  rounded h-10 outline-none bg-transparent " placeholder="Email" name="email" required>
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <label class="font-medium">Phone No. : <span class="text-danger-600">*</span></label>
                                    <div class="relative mt-2">
                                        <input name="number" id="phNumber" class="rounded-t-sm rounded-r-none rounded-b-none rounded-l-sm outline-0 w-full py-2 px-3 border border-inherit  rounded h-10 outline-none bg-transparent " placeholder="+12 12458 854" required>
                                    </div>
                                </div>
                                
                                <div>
                                    <a href="" class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle transition duration-500 ease-in-out text-base text-center bg-blue-600 border-blue-600 text-white rounded-md w-full hover:bg-blue-700 hover:border-blue-700">Sign Up for a Free Trial</a>
                                </div>
                            </div><!--end grid-->
                        </form>
                        <!-- end form -->
                    </div>
                </div>
            </div>
        </div><!--end container-->
    </section><!--end section-->