import React from 'react'

function InsurancePackages() {
  return (
    <section className="lqd-section insurance-table py-55 bg-primary bg-center bg-no-repeat bg-cover" id="insurance" style={{backgroundImage: "url('./assets/images/demo/insurance/shape/lines.svg')"}}>
        <div className="container">
            <div className="row justify-center">
                <div className="col col-12 col-lg-8 col-xl-6 text-center md:text-start">
                    <div className="ld-fancy-heading pb-15">
                        <h2 className="ld-fh-element mb-0/5em text-white">Compare insurance packages to get the best deal.</h2>
                    </div>
                </div>
                <div className="col col-12 col-xl-10 md:hidden">
                    <div className="flex w-full">
                        <div className="flex flex-col w-50percent justify-center py-20 border-right border-bottom border-white-20">
                            <div className="ld-fancy-heading">
                                <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Injuries or Vehicle Damages</h3>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center pt-10 pb-20 px-15 border-right border-bottom border-white-20">
                            <div className="ld-fancy-heading">
                                <p className="ld-fh-element mb-1/25em text-15 text-white">Hub Insurance</p>
                            </div>
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-22 text-green-300">
                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center pt-10 pb-20 px-15 border-bottom border-white-20">
                            <div className="ld-fancy-heading">
                                <p className="ld-fh-element mb-1/25em text-15 text-white">Other Companies</p>
                            </div>
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(255, 255, 255)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                        <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flex w-full">
                        <div className="flex flex-col w-50percent justify-center py-20 border-right border-bottom border-white-20">
                            <div className="ld-fancy-heading">
                                <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Full Health Care Package</h3>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-right border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-22 text-green-300">
                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(255, 255, 255)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                        <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flex w-full">
                        <div className="flex flex-col w-50percent justify-center py-20 border-right border-bottom border-white-20">
                            <div className="ld-fancy-heading">
                                <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Annual Bonus and Extras</h3>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-right border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-22 text-green-300">
                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(255, 255, 255)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                        <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flex w-full">
                        <div className="flex flex-col w-50percent justify-center py-20 border-right border-bottom border-white-20">
                            <div className="ld-fancy-heading">
                                <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Auto-Renewal</h3>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-right border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-22 text-green-300">
                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(255, 255, 255)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                        <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flex w-full">
                        <div className="flex flex-col w-50percent justify-center py-20 border-right border-bottom border-white-20">
                            <div className="ld-fancy-heading">
                                <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Responsible Driver Discount</h3>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-right border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-22 text-green-300">
                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-bottom border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(255, 255, 255)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                        <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flex w-full">
                        <div className="flex flex-col w-50percent justify-center py-20 border-right border-white-20">
                            <div className="ld-fancy-heading">
                                <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Full Health Care Package</h3>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-right border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-22 text-green-300">
                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col w-25percent justify-center items-center py-20 px-15 border-white-20">
                            <div className="iconbox text-align-default" data-animate-icon="true" data-plugin-options='{"color": "rgb(255, 255, 255)"}'>
                                <div className="iconbox-icon-wrap">
                                    <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                        <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col col-12 col-lg-10 hidden md:block">
                    <div className="w-full relative flex flex-col justify-center items-stretch flex-grow-1 mb-35">
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-full relative">
                                    <div className="ld-fancy-heading">
                                        <p className="ld-fh-element mb-1/25em text-16 text-white">Hub Insurance</p>
                                    </div>
                                </div>
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Injuries or Vehicle Damages</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex justify-center items-center text-18 text-green-300 mb-0">
                                                <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Full Health Care Package</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex justify-center items-center text-18 text-green-300 mb-0">
                                                <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Annual Bonus and Extras</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex justify-center items-center text-18 text-green-300 mb-0">
                                                <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Auto-Renewal</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex justify-center items-center text-18 text-green-300 mb-0">
                                                <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Responsible Driver Discount</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex justify-center items-center text-18 text-green-300 mb-0">
                                                <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Full Health Care Package</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex justify-center items-center text-18 text-green-300 mb-0">
                                                <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col col-12 col-lg-10 hidden md:block">
                    <div className="w-full relative flex flex-col justify-center items-stretch flex-grow-1">
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-full relative">
                                    <div className="ld-fancy-heading">
                                        <p className="ld-fh-element mb-1/25em text-16 text-white">Other Companies</p>
                                    </div>
                                </div>
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Injuries or Vehicle Damages</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                                <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Full Health Care Package</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                                <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Annual Bonus and Extras</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                                <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Auto-Renewal</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                                <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Responsible Driver Discount</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                                <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="flex flex-col border-bottom border-white-20">
                            <div className="flex flex-wrap items-center justify-between">
                                <div className="w-85percent relative flex items-center justify-start">
                                    <div className="ld-fancy-heading py-20">
                                        <h3 className="ld-fh-element mb-0 text-16 font-medium text-white">Full Health Care Package</h3>
                                    </div>
                                </div>
                                <div className="w-15percent relative flex items-center justify-center">
                                    <div className="iconbox text-align-default py-20 px-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(122, 209, 158)"}'>
                                        <div className="iconbox-icon-wrap">
                                            <span className="iconbox-icon-container flex items-center justify-center text-28 text-white">
                                                <i className="lqd-icn-ess icon-ion-ios-close"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
  )
}

export default InsurancePackages