@extends('frontend.layouts.app')
@section('main')
<section id="master">

    <section id="hero-section" class="font-poppins  bg-[#F3F6FE] lg:bg-white pt-10 sm:pt-10">
            <div class="title text-center bg-white pb-10 lg:pb-0">
                <div class="hidden lg:block bg-[#F3F6FE]">
                    <img src="{{asset('frontend/image/background-1.jpg')}}" alt="" class=" object-cover w-full h-[400px] lg:relative">
                </div>
                <div class="px-10 sm:px-16 md:px-24 lg:px-0 pt-20 lg:pt-36 lg:absolute lg:top-0" >
                    <div >
                        <h2 class="text-[24px] sm:text-[30px] md:text-[36px] lg:text-[60px] sm:px-5 text-[#212529] font-bold">Complete Health Solution EverEast</h2>
                    </div>
                    <p class="text-[16px] sm:text-[18px] text-gray-600 font-medium leading-6 lg:leading-10 mt-3 lg:mt-10 sm:mt-5 lg:px-24 lg:text-[24px]">Consulting a healthcare professional, buying medicine, ordering lab tests and improving your health and wellbeing, all can be done 24/7 with Evereast!</p>
                </div>
            </div>
            <div class="card px-5 sm:px-10 md:px-16 py-5 grid sm:grid-cols-2 lg:grid-cols-5 sm:gap-x-5  gap-y-5 lg:transform lg:-translate-y-20">
                <div class="group" data-aos="flip-up"  data-aos-duration="1000">
                    <div class="single-card bg-white h-[200px] shadow-lg rounded-xl text-center py-10 px-10 sm:px-5  transition-transform transform scale-100 group-hover:scale-110 group-hover:ring-1 group-hover:ring-[#05B4E3] duration-300 cursor-pointer">
                        <div>
                            <div class="image flex justify-center">
                                <img class="w-[50px]" src="{{asset('frontend/image/Video.svg')}}" alt="" >
                            </div>
                            <div class="title">
                                <h2 class="text-[15px] font-semibold">Live Video Consultation</h2>
                            </div>
                            <div class="description">
                                <p class="text-[12px] text-gray-600 font-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="icons hidden group-hover:block mt-1  duration-300">
                                    <ion-icon name="arrow-forward-outline" class="text-gray-500 text-xl"></ion-icon>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="group" data-aos="flip-up"  data-aos-duration="1000">
                    <div class="single-card bg-white h-[200px] shadow-lg rounded-xl text-center py-10 px-10 sm:px-5  transition-transform transform scale-100 group-hover:scale-110 group-hover:ring-1 group-hover:ring-[#05B4E3] duration-300 cursor-pointer">
                        <div>
                            <div class="image flex justify-center ">
                                <img class="" src="{{asset('frontend/image/Protection.svg')}}" alt="" >
                            </div>
                            <div class="title">
                                <h2 class="text-[15px] font-semibold">Live Video Consultation</h2>
                            </div>
                            <div class="description">
                                <p class="text-[12px] text-gray-600 font-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="icons hidden group-hover:block mt-1  duration-300">
                                    <ion-icon name="arrow-forward-outline" class="text-gray-500 text-xl"></ion-icon>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="group" data-aos="flip-up"  data-aos-duration="1000">
                    <div class="single-card bg-white h-[200px] shadow-lg rounded-xl text-center py-10 px-10 sm:px-5  transition-transform transform scale-100 group-hover:scale-110 group-hover:ring-1 group-hover:ring-[#05B4E3] duration-300 cursor-pointer">
                        <div>
                            <div class="image flex justify-center ">
                                <img class="" src="{{asset('frontend/image/Diagnostic.svg')}}" alt="" >
                            </div>
                            <div class="title">
                                <h2 class="text-[15px] font-semibold">Live Video Consultation</h2>
                            </div>
                            <div class="description">
                                <p class="text-[12px] text-gray-600 font-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="icons hidden group-hover:block mt-1  duration-300">
                                    <ion-icon name="arrow-forward-outline" class="text-gray-500 text-xl"></ion-icon>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="group" data-aos="flip-up"  data-aos-duration="1000">
                    <div class="single-card bg-white h-[200px] shadow-lg rounded-xl text-center py-10 px-10 sm:px-5  transition-transform transform scale-100 group-hover:scale-110 group-hover:ring-1 group-hover:ring-[#05B4E3] duration-300 cursor-pointer">
                        <div>
                            <div class="image flex justify-center ">
                                <img class="" style="width: 80px" src="{{asset('frontend/image/Medicine.svg')}}" alt="">
                            </div>
                            <div class="title">
                                <h2 class="text-[15px] font-semibold">Live Video Consultation</h2>
                            </div>
                            <div class="description">
                                <p class="text-[12px] text-gray-600 font-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="icons hidden group-hover:block mt-1  duration-300">
                                    <ion-icon name="arrow-forward-outline" class="text-gray-500 text-xl"></ion-icon>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="group" data-aos="flip-up"  data-aos-duration="1000">
                    <div class="single-card bg-white h-[200px] shadow-lg rounded-xl text-center py-10 px-10 sm:px-5  transition-transform transform scale-100 group-hover:scale-110 group-hover:ring-1 group-hover:ring-[#05B4E3] duration-300 cursor-pointer">
                        <div>
                            <div class="image flex justify-center ">
                                <img class="" src="{{asset('frontend/image/it_service.svg')}}" alt="" >
                            </div>
                            <div class="title">
                                <h2 class="text-[15px] font-semibold">Live Video Consultation</h2>
                            </div>
                            <div class="description">
                                <p class="text-[12px] text-gray-600 font-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="icons hidden group-hover:block mt-1  duration-300">
                                    <ion-icon name="arrow-forward-outline" class="text-gray-500 text-xl"></ion-icon>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        <div class="icons py-14 lg:pt-0 lg:pb-32 px-10 sm:px-24 bg-white">
            <h2 class="text-gray-600 text-lg lg:text-2xl text-center">Download and register on our app for free and feel safe for all your family</h2>
            <div class="flex justify-center gap-x-5 mt-2 lg:mt-5">
                <img class="w-[150px]" src="{{asset('frontend/image/google-play-store-3.png')}}" alt="">
                <img class="w-[150px]" src="{{asset('frontend/image/app-store.png')}}" alt="">
            </div>
        </div>
    </section>

    <section id="why-use-section" class="font-poppins pt-10 lg:pt-0 pb-20 lg:pb-5 px-10 sm:px-20 lg:px-0 bg-white">
        <div class="lg:grid lg:grid-cols-12">
            <div class="hidden lg:block lg:col-span-7 order-last">
                <img src="{{asset('frontend/image/mobile_hand.webp')}}" alt="" class="object-cover w-full">
            </div>
            <div class="text-section lg:pl-20 lg:col-span-5">
                <div class="title" data-aos="fade-up" data-aos-duration="1000">
                    <h2 class="text-2xl md:text-[30px] lg:text-[48px] font-bold leading-[60px]">Why Use Evereast?</h2>
                </div>
                <div class="list-items pt-10 flex flex-col gap-y-10 md:gap-y-14 md:pt-20 md:pb-10">
                    <div class="single-item flex items-center gap-x-5" >
                        <div data-aos="fade-right" data-aos-duration="1000">
                            <h2 class="text-[40px] font-bold text-[#6734FF]">1</h2>
                        </div>
                        <div>
                            <p class="text-gray-600 sm:text-[18px] md:text-[20px]">Access any GP or specialist doctor you need at anytime from anywhere</p>
                        </div>
                    </div>
                    <div class="single-item flex items-center gap-x-5">
                        <div data-aos="fade-right" data-aos-duration="1000">
                            <h2 class="text-[40px] font-bold text-[#6734FF]">2</h2>
                        </div>
                        <div>
                            <p class="text-gray-600 sm:text-[18px] md:text-[20px]">Access to online prescriptions, medicine, delivery, tests and diagnostics</p>
                        </div>
                    </div>
                    <div class="single-item flex items-center gap-x-5">
                        <div data-aos="fade-right" data-aos-duration="1000">
                            <h2 class="text-[40px] font-bold text-[#6734FF]">3</h2>
                        </div>
                        <div>
                            <p class="text-gray-600 sm:text-[18px] md:text-[20px]">Easy subscriptions to protect you and loved ones health and wellbeing</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="medical-help-section" class="font-poppins px-10 sm:px-20 md:px-14 lg:px-20 bg-white">
        <div class="text-section">
            <h2 class="text-2xl text-gray-700 text-center md:text-left ">Get medical help</h2>
            <div data-aos="zoom-in" data-aos-duration="1000">
                <h2 class="text-2xl md:text-[30px] lg:text-[48px] font-bold text-gray-900 pt-5 text-center md:text-left">Just in few taps!</h2>
            </div>
        </div>
        <div class="items pt-10 md:pt-24  flex flex-col gap-y-10 md:grid md:grid-cols-2 lg:grid-cols-5 md:gap-x-10 lg:gap-x-5 ">
            <div class="single-item text-center flex flex-col gap-y-5 md:text-left">
                <div class="icon flex justify-center md:block">
                    <img src="{{asset('frontend/image/soccer.svg')}}" alt="" class="">
                </div>
                <div class="title" data-aos="zoom-in" data-aos-duration="1000">
                    <h2 class="text-xl text-[#6734FF] font-medium">Easy to use</h2>
                </div>
                <div class="description flex flex-col gap-y-5 text-gray-600 md:text-left">
                    <p>Get the best user experience on DocTime App. Search for a doctor and get an instant consultation.</p>
                    <p>You can join the online queue immediately, while you can continue doing other tasks at home or office.</p>
                </div>
            </div>
            <div class="single-item text-center flex flex-col gap-y-5 md:text-left">
                <div class="icon flex justify-center md:block">
                    <img src="{{asset('frontend/image/hours.svg')}}" alt="" class="">
                </div>
                <div class="title" data-aos="zoom-in" data-aos-duration="1000">
                    <h2 class="text-xl text-[#6734FF] font-medium">AnyTime</h2>
                </div>
                <div class="description  text-gray-600 md:text-left">
                    <p>
                        Talk to a doctor within minutes. Our qualified network of doctors is available 24/7. You can get a consultation and prescription
                        whenever you need. Patients and doctors can keep their previous consultation history and view online prescriptions.
                      </p>
                </div>
            </div>
            <div class="single-item text-center flex flex-col gap-y-5 md:text-left">
                <div class="icon flex justify-center md:block">
                    <img src="{{asset('frontend/image/shield.svg')}}" alt="" class="">
                </div>
                <div class="title" data-aos="zoom-in" data-aos-duration="1000">
                    <h2 class="text-xl text-[#6734FF] font-medium">Trusted</h2>
                </div>
                <div class="description  text-gray-600 md:text-left">
                    <p>
                        DocTime's experienced doctors, specialists and therapists are selected carefully. Safety and quality is at the heart of everything we
                        do. Each doctor is certified, registered, and operates to the highest clinical standards. DocTime uses 256 bit encryption to secure the
                        video consultation.
                      </p>
                </div>
            </div>
            <div class="hidden lg:block lg:col-span-2">
                <img src="{{asset('frontend/image/nilima.webp')}}" alt="">
            </div>
        </div>
    </section>
    <section id="when-to-use-doctime" class="pt-24 lg:pt-32 font-poppins pb-10 bg-white">
        <div class="lg:grid lg:grid-cols-2 lg:items-center">
            <div class="image px-10 sm:px-14 md:px-28 lg:px-10">
                <img src="{{asset('frontend/image/head_pain.webp')}}" alt="" srcset="">
            </div>
            <div class="text pt-10 px-10 sm:px-14 md:px-28 lg:px-14 md:pb-20">
                <div class="title" data-aos="fade-up" data-aos-duration="1000">
                    <h2 class="text-center text-[26px] sm:text-[32px] lg:text-[48px] lg:text-left font-bold">When to use <span class="text-[#6734FF]">EverEast</span></h2>
                </div>
                <div class="description pt-10 flex flex-col gap-y-10">
                    <div class="single-item" data-aos="fade-left" data-aos-duration="1000">
                        <h2 class="text-center sm:text-left text-[20px] sm:text-[24px] font-semibold text-gray-800 pb-5">Common health issue</h2>
                        <p class="text-center sm:text-left text-gray-700  md:text-[17px] lg:text-[20px]">Ask anything you would normally ask your GP. You can have an instant video with one of our GPs via a digital consultation from anywhere, at any time of day.</p>
                    </div>
                    <div class="single-item" data-aos="fade-left" data-aos-duration="1000">
                        <h2 class="text-center sm:text-left text-[20px] sm:text-[24px] font-semibold text-gray-800 pb-5">Specialist advice</h2>
                        <p class="text-center sm:text-left text-gray-700 md:text-[17px] lg:text-[20px]">
                            Sometimes it’s helpful to see a specialist when you want. For gynaecology, child specialists, dermatology, cardiology,
                            gastroenterology, nutrition,chronic diseases such as hypertension, or other conditions, DocTime can help you to connect with the right
                            specialist doctor and to stay healthy. More than 20 different specialities are available on DocTime.
                          </p>
                    </div>
                    <div class="single-item" data-aos="fade-left" data-aos-duration="1000">
                        <h2 class="text-center sm:text-left text-[20px] sm:text-[24px] font-semibold text-gray-800 pb-5">Mental health and wellbeing</h2>
                        <p class="text-center sm:text-left text-gray-700  md:text-[17px] lg:text-[20px]">
                            In a fast paced world, it is important to monitor and protect your mental health and wellbeing. Doctors can help you stay healthy
                            whether you have symptoms at home or in your workplace of stress, smoking, anxiety, bereavement or depression.
                          </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="easy-step" class="font-poppins bg-[#F6F7FF]">
        <div class="py-10 lg:px-20">
            <div class="title px-10" >
                <div data-aos="fade-up" data-aos-duration="1000">
                    <h2 class="text-[26px] md:text-[30px] lg:text-[48px] font-bold text-center pb-7">Easy Steps To Feel Better Rapidly</h2>
                </div>
                <p class="text-[16px] md:text-[18px] lg:text-[20px] font-medium text-gray-600 text-center">You do not have to wait in line for hours or go to the hospital to take healthcare services.</p>
                <p class="text-[16px] md:text-[18px] lg:text-[20px] font-medium text-gray-600 text-center">Easily consult a doctor in just 10 minutes on your device at home or office.</p>
            </div>
            <div class="lg:grid lg:grid-cols-12 lg:items-center">
                <div class="image lg:col-span-5  lg:flex lg:justify-end ">
                    <div class="flex mx-auto max-w-sm  relative">
                        <img src="{{asset('frontend/image/phone_farme.webp')}}" alt="" class="w-full ">
                        <img src="{{asset('frontend/image/doctor-1.jpg')}}" alt="" class="w-full  h-full absolute top-10 left-0 px-24 pt-20 pb-32">
                    </div>

                </div>
                <div class="px-10 lg:px-0 icon-section  lg:col-span-7">
                    <div class="icons flex justify-center gap-x-5 gap-y-14 lg:flex-col">
                        <div class="lg:grid lg:grid-cols-12 items-center space-x-5">
                            <div class="hidden lg:block lg:col-span-1" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-[60px] font-bold text-gray-400">1</h2>
                            </div>
                            <div class="lg:col-span-2 single-icon w-20 h-20  bg-gradient-to-bl from-[#05B4E3]  to-[#6734FF] flex items-center justify-center rounded-xl shadow-lg" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="search-outline" class="w-10 h-10 text-white "></ion-icon>
                            </div>
                            <div class="hidden lg:block lg:col-span-9">
                                <h2 class="text-[22px] text-gray-700 font-bold pr-10 pb-2">Search your Doctor and Consult live on Video Call</h2>
                                <p class="text-[16px]">
                                    Search your doctor by specialty or doctor profile, rating & experience name, or depending on your symptoms. Once you pay the
                                    required doctor fee or if you have a subscription, you will be joining the short queue. Doctor will start a secured video call
                                    to do the consultation.
                                  </p>
                            </div>
                        </div>
                        <div class="lg:grid lg:grid-cols-12 items-center space-x-5">
                            <div class="hidden lg:block lg:col-span-1" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-[60px] font-bold text-gray-400">2</h2>
                            </div>
                            <div class="lg:col-span-2 single-icon w-20 h-20 bg-gradient-to-bl from-[#05B4E3]  to-[#6734FF] flex items-center justify-center rounded-xl shadow-lg" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="videocam-outline" class="w-10 h-10 text-white "></ion-icon>
                            </div>
                            <div class="hidden lg:block lg:col-span-9">
                                <h2 class="text-[22px] text-gray-700 font-bold  pr-10 pb-2">Instant Prescription</h2>
                                <p class="text-[16px]">Once the video consultation is complete, the doctor will upload the prescription. You can download and use the prescription immediately or later.
                                  </p>
                            </div>
                        </div>
                        <div class="lg:grid lg:grid-cols-12 items-center space-x-5">
                            <div class="hidden lg:block lg:col-span-1" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-[60px] font-bold text-gray-400">3</h2>
                            </div>
                            <div class="lg:col-span-2 single-icon w-20 h-20 bg-gradient-to-bl from-[#05B4E3]  to-[#6734FF] flex items-center justify-center rounded-xl shadow-lg" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="medical-outline" class="w-10 h-10 text-white "></ion-icon>
                            </div>
                            <div class="hidden lg:block lg:col-span-9">
                                <h2 class="text-[22px] text-gray-700 font-bold pr-10 pb-2">
                                    Order medicine online and order diagnostic tests
                                  </h2>
                                <p class="text-[16px]">Medicine will be delivered quickly to your home within 2/3 hours of placing any order. You can also get tested in a few hours at home & get report in the App.
                                  </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="below-title px-10 pt-14">
               <div data-aos="fade-up" data-aos-duration="1000">
                <h2 class="text-[26px] lg:text-[48px] md:text-[30px] font-bold text-center pb-7"><span class="text-[#6734FF]">EverEast</span> Health Care & Protection Plans</h2>
               </div>
                <p class="text-[16px] md:text-[18px] lg:text-[20px] font-medium text-gray-600 text-center">24/7 qualified doctor's consultation facility for your family. Also big save on diagnostic tests,</p>
                <p class="text-[16px] md:text-[18px] lg:text-[20px] font-medium text-gray-600 text-center">medicine and healthcare product purchases with life & health insurance coverage</p>
            </div>
        </div>
    </section>
    <section id="main-service" class="font-poppins bg-white">
        <div class="px-10 sm:px-14 lg:px-20 ">
            <div class="lg:grid lg:grid-cols-2 lg:items-center lg:justify-between">
                <div class="image lg:order-2">
                    <img src="{{asset('frontend/image/man_uncomfird.webp')}}" alt="" class="w-8/12 lg:w-10/12 mx-auto">
                </div>
                <div class="text pt-14 md:px-10 lg:px-0 lg:order-1">
                    <div class="title pb-5" data-aos="fade-up" data-aos-duration="1000">
                        <h2 class="text-[24px] md:text-[30px] lg:text-[48px] font-bold text-center lg:text-left">Main <span class="text-[#6734FF]">EverEast</span> Services</h2>
                    </div>
                    <div class="description">
                        <p class="text-[15px] sm:text-[18px] md:text-[20px] text-center lg:text-left text-gray-600">EverEast is an end-to-end health solution that enables better health and wellbeing with advanced technology.</p>
                        <p class="text-[15px] sm:text-[18px] md:text-[20px] text-center lg:text-left text-gray-600 pt-12">
                            DocTime offers several services including healthcare and protection subscriptions packages, certified and verified GP and specialist
                            consultations (80% of our patients wait less than 10min to be connected to a doctor), online prescriptions, medicine delivery, and
                            integrated tests and diagnostics. Our secure technology gives affordable access to healthcare for all.
                          </p>
                    </div>
                </div>
            </div>
            <div class="icon-section flex flex-col lg:grid lg:grid-cols-3 gap-y-10 py-10 md:py-20 md:px-20 lg:px-0 lg:gap-x-10">
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="medkit-outline" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Varified doctors</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="videocam-outline" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Instant video consultation</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="newspaper-outline" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Instant electronics prescription</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="logo-paypal" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Easy payment options</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="phone-portrait-outline" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Better consultation quality</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="thermometer-outline" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Super fast support</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="headset-outline" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Medicine delivered to your doorstop</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
                <div class="single-icon flex gap-x-7">
                    <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                        <ion-icon name="bicycle-outline" class="w-12 h-12 text-[#05B4E3]"></ion-icon>
                    </div>
                    <div class="text">
                        <h2 class="text-[20px] font-semibold text-[#0C0B52]">Varified doctors</h2>
                        <p class="text-[14px] lg:text-[16px] text-gray-600">
                            Every doctors on DocTime platform are BMDC certified. We verify relevant information before the doctor can consult any patient.
                          </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="specialist-section" class="font-poppins bg-white">
        <div class="py-10 px-10 sm:px-14 lg:px-20">
            <div class="title" data-aos="fade-up" data-aos-duration="1000">
                <h2 class="text-center lg:text-left text-[24px] md:text-[30px] lg:text-[48px] font-bold">Available specialist</h2>
            </div>
            <div class="">
                <div class="all-items pt-10 flex flex-col  gap-y-5 sm:grid sm:grid-cols-2 lg:grid-cols-4 ">
                    <div class="single-item flex items-center lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Geneeal Physician</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Pediatrics / Child Care</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Gynaecology</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Neurology / Brain</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Pulmonology / Lungs</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Nephrology / Kidney</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Endocrinology / Diabetes</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Cardiology / Heart</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Parasitology</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Urology</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Dermatology</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Cardiology / Heart</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Parasitology</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Urology</h2>
                    </div>
                    <div class="single-item flex items-center  lg:justify-start gap-x-3">
                        <div>
                            <ion-icon name="checkmark-outline" class="w-7 h-7 text-[#05B4E3]"></ion-icon>
                        </div>
                        <h2 class="text-[16px] text-gray-700">Dermatology</h2>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <section id="rating-section" class="font-poppins bg-white">
        <div class="py-10">
            <div class="text">
                <h2 class="text-[24px] md:text-[30px] lg:text-[48px] font-bold text-center lg:pb-10">More than <span class="text-[#6734FF]">90%</span> of users<br> give us a 5 star rating</h2>
            </div>
            <div class="lg:grid lg:grid-cols-2 items-center">
                <div class="rating-icons pt-5">
                    <div data-aos="flip-left" data-aos-duration="1000">
                        <h2 class="text-[24px] lg:text-[48px] font-bold text-center text-[#6734FF]">4.8</h2>
                    </div>
                    <h2 class="text-[24px] font-bold text-center py-5">Out of 5 rating *</h2>
                    <div class="w-[250px] mx-auto">
                        <div class="icons bg-[#F5F5F5]  py-5 flex gap-x-2 justify-center items-center rounded-full w-full">
                            <div data-aos="flip-left" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[34px]"></ion-icon>
                            </div>
                            <div data-aos="flip-left" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[34px]"></ion-icon>
                            </div>
                            <div data-aos="flip-left" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[34px]"></ion-icon>
                            </div>
                            <div data-aos="flip-left" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[34px]"></ion-icon>
                            </div>
                            <div data-aos="flip-left" data-aos-duration="1000">
                                <ion-icon name="star-half" class="text-[#FFB83A] text-[34px]"></ion-icon>
                            </div>
                        </div>
                    </div>
                    <div class="progress-bar px-10 mt-10">
                        <div class="single-item flex justify-center items-center gap-x-2">
                            <div class="text" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-xl font-semibold">5</h2>
                            </div>
                            <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[18px]"></ion-icon>
                            </div>
                            <div class="main-progress-bar ">
                                <div class="w-[300px] sm:w-[400px] bg-gray-200 rounded-full">
                                    <div class="bg-gradient-to-r from-[#05B4E3]  to-[#6734FF] text-xs font-medium text-blue-100 text-center p-[7px] leading-none rounded-full" style="width: 95%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="single-item flex justify-center items-center gap-x-2">
                            <div class="text" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-xl font-semibold">4</h2>
                            </div>
                            <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[18px]"></ion-icon>
                            </div>
                            <div class="main-progress-bar ">
                                <div class="w-[300px] sm:w-[400px] bg-gray-200 rounded-full">
                                    <div class="bg-gradient-to-r from-[#05B4E3]  to-[#6734FF] text-xs font-medium text-blue-100 text-center p-[7px] leading-none rounded-full" style="width: 15%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="single-item flex justify-center items-center gap-x-2">
                            <div class="text" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-xl font-semibold">3</h2>
                            </div>
                            <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[18px]"></ion-icon>
                            </div>
                            <div class="main-progress-bar ">
                                <div class="w-[300px] sm:w-[400px] bg-gray-200 rounded-full">
                                    <div class="bg-gradient-to-r from-[#05B4E3]  to-[#6734FF] text-xs font-medium text-blue-100 text-center p-[7px] leading-none rounded-full" style="width: 10%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="single-item flex justify-center items-center gap-x-2">
                            <div class="text" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-xl font-semibold">2</h2>
                            </div>
                            <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[18px]"></ion-icon>
                            </div>
                            <div class="main-progress-bar ">
                                <div class="w-[300px] sm:w-[400px] bg-gray-200 rounded-full">
                                    <div class="bg-gradient-to-r from-[#05B4E3]  to-[#6734FF] text-xs font-medium text-blue-100 text-center p-[7px] leading-none rounded-full" style="width: 7%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="single-item flex justify-center items-center gap-x-2">
                            <div class="text" data-aos="fade-right" data-aos-duration="1000">
                                <h2 class="text-xl font-semibold">1</h2>
                            </div>
                            <div class="icon" data-aos="fade-right" data-aos-duration="1000">
                                <ion-icon name="star" class="text-[#FFB83A] text-[18px]"></ion-icon>
                            </div>
                            <div class="main-progress-bar ">
                                <div class="w-[300px] sm:w-[400px] bg-gray-200 rounded-full">
                                    <div class="bg-gradient-to-r from-[#05B4E3]  to-[#6734FF] text-xs font-medium text-blue-100 text-center p-[7px] leading-none rounded-full" style="width: 5%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="source px-10 pt-5">
                        <p class="text-sm text-gray-600 text-center">*Source : Google play rating collected during March 2023</p>
                    </div>
                </div>
                <div class="video">
                    <div class="">
                        <div class="relative px-5 sm:px-20 md:px-32 lg:px-20">
                            <img src="{{asset('frontend/image/background-1.jpg')}}" alt="Your Image" class=" rounded-xl object-cover my-10 lg:py-0 " />
                            <div class="absolute  inset-0 w-[100px] h-[100px] mx-auto my-auto  text-white px-4 py-4 rounded-full" data-aos="fade-left" data-aos-duration="1000">
                                <div id="openModalButton" class="w-16 h-16 glow bg-gradient-to-r from-[#05B4E3]  to-[#6734FF] rounded-full flex items-center justify-center">
                                    <ion-icon name="play" class="w-8 h-8"></ion-icon>
                                  </div>
                            </button>
                        </div>
                        </div>
                         <!-- Modal Container -->
                        <div id="videoModal" class="hidden">
                            <div  class=" fixed top-10 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-80 z-50">
                                <div class="relative max-w-sm lg:max-w-4xl w-full h-[200px] lg:h-[400px]">
                                    <button id="closeModalButton" class="absolute top-2 right-2 text-white text-xl hover:text-gray-300 focus:outline-none">
                                        &times;
                                    </button>
                                    <iframe class="w-full h-full" src="https://www.youtube.com/embed/nJT--MlnCBk?si=Be5YbKhXp6qaWePa" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen frameborder="0" allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>
                       </div>
                </div>
            </div>
        </div>
    </section>
    <section id="qr-code-section" class="font-poppins">
        <div class="fixed-background"></div>

        <!-- Content container with text scrolling over the image -->
        <div class="relative z-10">

          <div class="container mx-auto h-screen sm:h-[90%] md:h-[300px] lg:h-[500px]">
            <div class="py-10 lg:pt-24 px-10 md:px-0 lg:px-20 md:grid md:grid-cols-2 lg:grid-cols-12 md:items-center">
                <div class="text lg:col-span-8">
                    <div data-aos="fade-up" data-aos-duration="1000">
                        <h2 class="text-white text-[26px] font-semibold lg:text-[36px] lg:font-bold text-center md:text-left">Download and register on our App for free and feel safe for all your family</h2>
                    </div>
                    <p class="text-white text-[16px] text-center md:text-left pt-5 pb-5 lg:text-[20px]">To download the app on your mobile, go the Play Store or open your camera and
                    point it towards the QR code</p>
                </div>
                <div class="lg:col-span-4">
                    <div class="icon flex flex-col sm:flex-row justify-center gap-y-5 sm:gap-y-0 sm:gap-x-5 sm:pt-20 md:pt-0">
                        <div class="single-item mx-auto sm:mx-0" data-aos="fade-right" data-aos-duration="1000">
                            <img src="{{asset('frontend/image/qr-code.png')}}" alt="" class="w-[150px] h-[150px]">
                        </div>
                        <div class="flex flex-col justify-center gap-y-5 sm:gap-y-0">
                            <div class="single-item mx-auto" data-aos="fade-left" data-aos-duration="1000">
                                <img src="{{asset('frontend/image/google-play-store-2.png')}}" alt="" class="w-[150px]">
                            </div>
                            <div class="single-item mx-auto" data-aos="fade-left" data-aos-duration="1000">
                                <img src="{{asset('frontend/image/app-store.png')}}" alt="" class="w-[150px] ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="absolute inset-0 bg-black opacity-50 -z-40"></div>
        </div>
    </section>
    <section id="faq-section" class="bg-white font-poppins">
        <div class="faq-section px-10 md:px-32 lg:px-40 py-10 sm:pt-14">
            <div class="text">
                <div data-aos="fade-up" data-aos-duration="1000">
                    <h2 class="text-[24px] md:text-[30px] lg:text-[48px] font-bold text-center">Have any questions?</h2>
                </div>
                <p class="text-[16px] sm:text-[18px] text-center text-gray-600 pt-3">Find below our frequently asked questions. If you have other questions please contact us.</p>
            </div>
            <div class="accordion-section py-10 ">

                <div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
                    <h2 id="accordion-flush-heading-1">
                    <button type="button" class="flex text-[20px] items-center justify-between w-full py-5 font-semibold rtl:text-right text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3 text-left" data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
                        <span>What do we treat?</span>
                        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                        </svg>
                    </button>
                    </h2>
                    <div id="accordion-flush-body-1" class="hidden" aria-labelledby="accordion-flush-heading-1">
                    <div class="py-5 border-b border-gray-200 dark:border-gray-700">
                        <p class="mb-2 text-gray-500 dark:text-gray-400 text-[18px]">
                            Common health issue
                            Ask anything you would normally ask your GP. You can have an instant video with one of our GPs via a digital consultation from anywhere, at any time of day.

                            Specialist advice
                            Sometimes it's helpful to see a specialist when you want. And get educational advice, pre-screening, monitoring and follow-ups. For maternal and infant health care, chronic diseases such as diabetes, or other conditions, DocTime can help you to connect with the right specialist doctor and to stay healthy. More than 20 different specialities are available on DocTime.

                            Mental health and wellbeing
                            In a fast paced world, it is important to monitor and protect your mental health and wellbeing. Doctors can help you stay healthy whether you have symptoms at home or in your workplace of stress, smoking, anxiety, bereavement or depression.
                        </p>
                    </div>
                    </div>
                    <h2 id="accordion-flush-heading-2">
                    <button type="button" class="flex text-[20px] items-center justify-between w-full py-5 font-semibold rtl:text-right text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3 text-left" data-accordion-target="#accordion-flush-body-2" aria-expanded="false" aria-controls="accordion-flush-body-2">
                        <span data-aos="fade-right" data-aos-duration="1000">How does it work?</span>
                        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                        </svg>
                    </button>
                    </h2>
                    <div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
                    <div class="py-5 border-b border-gray-200 dark:border-gray-700">
                        <p class="mb-2 text-gray-500 dark:text-gray-400 text-[18px]">
                            You can register on our App and access several medical services
                            easily. The basic video consultation service is straightforward: search for
                            your relevant doctor with easy filters, talk to your doctor directly as
                            included in your DocTime healthcare package or pay just prior the on-demand
                            consultation starts.

                            Then access your prescription uploaded by the doctor and you can
                            order medicine or tests as recommended. Keep in touch with the doctor and
                            use medicine reminders until your feel completely healthy again.

                            Access plenty of other medical services including your personal
                            Electronic Patient Record and health tips at any time through our homepage
                        </p>
                    </div>
                    </div>
                    <h2 id="accordion-flush-heading-3">
                        <button type="button" class="flex text-[20px] items-center justify-between w-full py-5 font-semibold rtl:text-right text-gray-500 border-b border-gray-200  gap-3 text-left" data-accordion-target="#accordion-flush-body-3" aria-expanded="false" aria-controls="accordion-flush-body-2">
                            <span data-aos="fade-right" data-aos-duration="1000">Who provides consultation on EverEast?</span>
                            <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                            </svg>
                        </button>
                        </h2>
                        <div id="accordion-flush-body-3" class="hidden" aria-labelledby="accordion-flush-heading-3">
                        <div class="py-5 border-b border-gray-200 ">
                            <p class="mb-2 text-gray-500 d text-[18px]">
                                Only certified MBBS doctors can provide consultation via the DocTime app.
                            </p>
                        </div>
                        </div>
                        <h2 id="accordion-flush-heading-4">
                            <button type="button" class="flex text-[20px] items-center justify-between w-full py-5 font-semibold rtl:text-right text-gray-500 border-b border-gray-200  gap-3 text-left" data-accordion-target="#accordion-flush-body-4" aria-expanded="false" aria-controls="accordion-flush-body-4">
                                <span data-aos="fade-right" data-aos-duration="1000">Are the registerd doctors verified?</span>
                                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                                </svg>
                            </button>
                            </h2>
                            <div id="accordion-flush-body-4" class="hidden" aria-labelledby="accordion-flush-heading-4">
                            <div class="py-5 border-b border-gray-200 ">
                                <p class="mb-2 text-gray-500 d text-[18px]">
                                    Yes, all our panel of doctors are verified. We verify their registration with BMDC, we also check doctors national id / passport with selfie to make sure the qualified doctors are getting registered.
                                </p>
                            </div>
                            </div>
                            <h2 id="accordion-flush-heading-5">
                                <button type="button" class="flex text-[20px] items-center justify-between w-full py-5 font-semibold rtl:text-right text-gray-500 border-b border-gray-200  gap-3 text-left" data-accordion-target="#accordion-flush-body-5" aria-expanded="false" aria-controls="accordion-flush-body-5">
                                    <span data-aos="fade-right" data-aos-duration="1000">When are the doctors available for consultation?</span>
                                    <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                                    </svg>
                                </button>
                                </h2>
                                <div id="accordion-flush-body-5" class="hidden" aria-labelledby="accordion-flush-heading-5">
                                <div class="py-5 border-b border-gray-200 ">
                                    <p class="mb-2 text-gray-500 d text-[18px]">
                                        Doctors are available according to their time availability. Our platform is available 24/7. Any doctor can come online at any time if they want.
                                    </p>
                                </div>
                                </div>

                </div>

            </div>
        </div>
    </section>
    <section id="get-in-touch-section" class="font-poppins">
        <div class="imge">
            <div class="fixed-background"></div>
            <div class="relative z-10">

                <div class="container mx-auto h-screen sm:h-[90%]   px-5 md:px-20 lg:px-20 lg:py-24 py-14">
                  <div class="bg-white px-5 md:px-10  pt-5 pb-2 rounded-xl">
                    <div class="text">
                        <div>
                            <h2 class="text-[26px] lg:text-[48px] lg:pt-10 font-bold text-center">Get in touch with us</h2>
                        </div>
                        <p class="text-gray-500 text-center pt-7 pb-7">
                            We're here to help. Send your query or question below and provide us with as much details as possible. We will answer your query as soon as
                            possible. We aim to reply to your query within 24 hours.
                          </p>
                    </div>
                    <form class=" mx-auto">
                        <div class="lg:grid lg:grid-cols-2 lg:gap-x-5">
                            <div class="mb-5">
                                <input type="text" id="name" class="bg-gray-100  text-gray-900 text-base rounded-lg block w-full p-4  border-none " placeholder="Full Name"  required>
                            </div>
                            <div class="mb-5">
                                <input type="email" id="email" class="bg-gray-100  text-gray-900 text-base rounded-lg block w-full p-4  border-none " placeholder="Email"  required>
                            </div>
                        </div>
                        <div class="mb-5">
                            <select id="countries" class="bg-gray-100  text-gray-500 text-base rounded-lg block w-full p-4  border-none ">
                                <option selected>What is your concern</option>
                                <option value="US">United States</option>
                                <option value="CA">Canada</option>
                                <option value="FR">France</option>
                                <option value="DE">Germany</option>
                              </select>
                        </div>
                        <div class="mb-5">
                           <textarea name="" id="" cols="30" rows="4" class="bg-gray-100  text-gray-500 text-base rounded-lg block w-full p-4  border-none " placeholder="Your Query"></textarea>
                        </div>
                        <div class="mb-5">
                            <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 00">Send</button>
                        </div>


                    </form>

                  </div>
                </div>
                <div class="absolute inset-0 bg-blue-500 opacity-50 -z-40"></div>
              </div>
        </div>
    </section>

</section>
@endsection