import React from 'react'

function Services() {
  return (
    <section className="lqd-section services pt-100 pb-40" id="services">
        <div className="container">
            <div className="row items-center">
                <div className="col col-12 col-lg-6 col-xl-5">
                    <div className="ld-fancy-heading">
                        <h2 className="ld-fh-element mb-0/5em text-46">Insurance Packages.</h2>
                    </div>
                </div>
                <div className="col col-12 col-lg-5 offset-xl-1">
                    <div className="ld-fancy-heading">
                        <h6 className="ld-fh-element mb-0/5em text-18 leading-1/5em text-black-70">Being a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.</h6>
                    </div>
                </div>
                <div className="col col-12 col-lg-1">
                    <div className="h-full flex items-center justify-center" id="carousel-image-box-nav"></div>
                </div>
                <div className="col col-12">
                    <div className="carousel-container carousel-nav-left carousel-nav-mobile-center carousel-nav-dot-between carousel-nav-sm carousel-nav-square carousel-dots-mobile-center carousel-dots-style1 carousel-dots-mobile-outside pt-30">
                        <div className="carousel-items relative" data-lqd-flickity='{"cellAlign": "left", "prevNextButtons" :true, "pageDots" :false, "fullwidthSide" :true, "groupCells" :false, "equalHeightCells" :true, "pauseAutoPlayOnHover" :false, "navArrow": "4", "buttonsAppendTo": "#carousel-image-box-nav", "addSlideNumbersToArrows" :false, "dotsIndicator": "dots", "numbersStyle": "circle", "dotsAppendTo": "self"}'>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner relative w-full">
                                    <div className="carousel-item-content">
                                        <div className="lqd-fb lqd-fb-style-1 round relative overflow-hidden lqd-fb-zoom-img-onhover h-pt-100 rounded-4" data-inview="true" data-slideelement-onhover="true" data-slideelement-options='{"visibleElement": "h6, h2", "hiddenElement": ".lqd-fb-txt"}'>
                                            <div className="lqd-fb-inner lqd-overlay flex">
                                                <div className="lqd-fb-img lqd-overlay flex overflow-hidden scale-1 opacity-100">
                                                    <figure className="w-full" data-responsive-bg="true">
                                                        <img width="716" height="888" src="./assets/images/demo/insurance/carousel-image-box/Image-4@2x.jpg" alt="insurance Package" />
                                                    </figure>
                                                    <a href="#" title="Services" className="liquid-overlay-link inline-block w-full h-full absolute top-0 left-0 text-start overflow-hidden indent-hide"></a>
                                                </div>
                                                <div className="lqd-fb-content lqd-overlay flex items-end">
                                                    <div className="lqd-fb-bg lqd-overlay flex"></div>
                                                    <div className="lqd-fb-content-inner relative p-3rem pb-2/5rem w-full" data-custom-animations="true" data-ca-options='{"triggerHandler": "inview", "animationTarget": "all-childs", "duration" : 1200, "delay" : 120,  "startDelay" : 250, "initValues": { "y" : 30, "opacity" : 0 } , "animations": { "y" : 0, "opacity" : 1 } }'>
                                                        <h6 className="uppercase font-medium tracking-0/2em text-12 mb-1/5rem mt-0 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'> Healthcare</h6>
                                                        <h2 className="my-0 text-24 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'>
                                                            <a href="#" title="Services">Healthcare Policies</a>
                                                        </h2>
                                                        <div className="lqd-fb-txt mt-1rem">
                                                            <p className="m-0">We embrace holistic development and support for employees the aim of</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner relative w-full">
                                    <div className="carousel-item-content">
                                        <div className="lqd-fb lqd-fb-style-1 round relative overflow-hidden lqd-fb-zoom-img-onhover h-pt-100 rounded-4" data-inview="true" data-slideelement-onhover="true" data-slideelement-options='{"visibleElement": "h6, h2", "hiddenElement": ".lqd-fb-txt"}'>
                                            <div className="lqd-fb-inner lqd-overlay flex">
                                                <div className="lqd-fb-img lqd-overlay flex overflow-hidden scale-1 opacity-100">
                                                    <figure className="w-full" data-responsive-bg="true">
                                                        <img width="716" height="888" src="./assets/images/demo/insurance/carousel-image-box/Image-3@2x.jpg" alt="insurance packages" />
                                                    </figure>
                                                    <a href="#" title="Services" className="liquid-overlay-link inline-block w-full h-full absolute top-0 left-0 text-start overflow-hidden indent-hide"></a>
                                                </div>
                                                <div className="lqd-fb-content lqd-overlay flex items-end">
                                                    <div className="lqd-fb-bg lqd-overlay flex"></div>
                                                    <div className="lqd-fb-content-inner relative p-3rem pb-2/5rem w-full" data-custom-animations="true" data-ca-options='{"triggerHandler": "inview", "animationTarget": "all-childs", "duration" : 1200, "delay" : 120,  "startDelay" : 250, "initValues": { "y" : 30, "opacity" : 0 } , "animations": { "y" : 0, "opacity" : 1 } }'>
                                                        <h6 className="uppercase font-medium tracking-0/2em text-12 mb-1/5rem mt-0 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'> Insurance</h6>
                                                        <h2 className="my-0 text-24 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'>
                                                            <a href="#" title="Services">Life Insurance</a>
                                                        </h2>
                                                        <div className="lqd-fb-txt mt-1rem">
                                                            <p className="m-0">We embrace holistic development and support for employees the aim of</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner relative w-full">
                                    <div className="carousel-item-content">
                                        <div className="lqd-fb lqd-fb-style-1 round relative overflow-hidden lqd-fb-zoom-img-onhover h-pt-100 rounded-4" data-inview="true" data-slideelement-onhover="true" data-slideelement-options='{"visibleElement": "h6, h2", "hiddenElement": ".lqd-fb-txt"}'>
                                            <div className="lqd-fb-inner lqd-overlay flex">
                                                <div className="lqd-fb-img lqd-overlay flex overflow-hidden scale-1 opacity-100">
                                                    <figure className="w-full" data-responsive-bg="true">
                                                        <img width="716" height="888" src="./assets/images/demo/insurance/carousel-image-box/Image-2@2x.jpg" alt="insurance packages" />
                                                    </figure>
                                                    <a href="#" title="Services" className="liquid-overlay-link inline-block w-full h-full absolute top-0 left-0 text-start overflow-hidden indent-hide"></a>
                                                </div>
                                                <div className="lqd-fb-content lqd-overlay flex items-end">
                                                    <div className="lqd-fb-bg lqd-overlay flex"></div>
                                                    <div className="lqd-fb-content-inner relative p-3rem pb-2/5rem w-full" data-custom-animations="true" data-ca-options='{"triggerHandler": "inview", "animationTarget": "all-childs", "duration" : 1200, "delay" : 120,  "startDelay" : 250, "initValues": { "y" : 30, "opacity" : 0 } , "animations": { "y" : 0, "opacity" : 1 } }'>
                                                        <h6 className="uppercase font-medium tracking-0/2em text-12 mb-1/5rem mt-0 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'> Vehicles</h6>
                                                        <h2 className="my-0 text-24 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'>
                                                            <a href="#" title="Services">Health Insurance</a>
                                                        </h2>
                                                        <div className="lqd-fb-txt mt-1rem">
                                                            <p className="m-0">We embrace holistic development and support for employees the aim of</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner relative w-full">
                                    <div className="carousel-item-content">
                                        <div className="lqd-fb lqd-fb-style-1 round relative overflow-hidden lqd-fb-zoom-img-onhover h-pt-100 rounded-4" data-inview="true" data-slideelement-onhover="true" data-slideelement-options='{"visibleElement": "h6, h2", "hiddenElement": ".lqd-fb-txt"}'>
                                            <div className="lqd-fb-inner lqd-overlay flex">
                                                <div className="lqd-fb-img lqd-overlay flex overflow-hidden scale-1 opacity-100">
                                                    <figure className="w-full" data-responsive-bg="true">
                                                        <img width="716" height="888" src="./assets/images/demo/insurance/carousel-image-box/Image-1@2x.jpg" alt="insurance packages" />
                                                    </figure>
                                                    <a href="#" title="Services" className="liquid-overlay-link inline-block w-full h-full absolute top-0 left-0 text-start overflow-hidden indent-hide"></a>
                                                </div>
                                                <div className="lqd-fb-content lqd-overlay flex items-end">
                                                    <div className="lqd-fb-bg lqd-overlay flex"></div>
                                                    <div className="lqd-fb-content-inner relative p-3rem pb-2/5rem w-full" data-custom-animations="true" data-ca-options='{"triggerHandler": "inview", "animationTarget": "all-childs", "duration" : 1200, "delay" : 120,  "startDelay" : 250, "initValues": { "y" : 30, "opacity" : 0 } , "animations": { "y" : 0, "opacity" : 1 } }'>
                                                        <h6 className="uppercase font-medium tracking-0/2em text-12 mb-1/5rem mt-0 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'> Insurance</h6>
                                                        <h2 className="my-0 text-24 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'>
                                                            <a href="#" title="Services">Insurance Policy</a>
                                                        </h2>
                                                        <div className="lqd-fb-txt mt-1rem">
                                                            <p className="m-0">We embrace holistic development and support for employees the aim of</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner relative w-full">
                                    <div className="carousel-item-content">
                                        <div className="lqd-fb lqd-fb-style-1 round relative overflow-hidden lqd-fb-zoom-img-onhover h-pt-100 rounded-4" data-inview="true" data-slideelement-onhover="true" data-slideelement-options='{"visibleElement": "h6, h2", "hiddenElement": ".lqd-fb-txt"}'>
                                            <div className="lqd-fb-inner lqd-overlay flex">
                                                <div className="lqd-fb-img lqd-overlay flex overflow-hidden scale-1 opacity-100">
                                                    <figure className="w-full" data-responsive-bg="true">
                                                        <img width="716" height="888" src="./assets/images/demo/insurance/carousel-image-box/Image-4@2x.jpg" alt="insurance packages" />
                                                    </figure>
                                                    <a href="#" title="Services" className="liquid-overlay-link inline-block w-full h-full absolute top-0 left-0 text-start overflow-hidden indent-hide"></a>
                                                </div>
                                                <div className="lqd-fb-content lqd-overlay flex items-end">
                                                    <div className="lqd-fb-bg lqd-overlay flex"></div>
                                                    <div className="lqd-fb-content-inner relative p-3rem pb-2/5rem w-full" data-custom-animations="true" data-ca-options='{"triggerHandler": "inview", "animationTarget": "all-childs", "duration" : 1200, "delay" : 120,  "startDelay" : 250, "initValues": { "y" : 30, "opacity" : 0 } , "animations": { "y" : 0, "opacity" : 1 } }'>
                                                        <h6 className="uppercase font-medium tracking-0/2em text-12 mb-1/5rem mt-0 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'> Healthcare</h6>
                                                        <h2 className="my-0 text-24 font-medium" data-split-text="true" data-split-options='{"type": "lines"}'>
                                                            <a href="#" title="Services">Healthcare Policies</a>
                                                        </h2>
                                                        <div className="lqd-fb-txt mt-1rem">
                                                            <p className="m-0">We embrace holistic development and support for employees the aim of</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col col-12 text-center">
                    <div className="ld-fancy-heading pt-65 module-bottom">
                        <p className="ld-fh-element mb-0/5em text-15 text-black">Our nearly 8,000 committed <a href="#">staff members</a> are ready to help.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
  )
}

export default Services