import React from 'react'

function AboutSection() {
  return (
    <section className="lqd-section about py-100" id="about">
        <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-48">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="about-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-inside relative pt-30">
                        <div className="carousel-items -mr-25 -ml-25" data-lqd-flickity='{"cellAlign": "left", "prevNextButtons" :true, "pageDots" :false, "groupCells" :false, "wrapAround" :true, "equalHeightCells" :true, "pauseAutoPlayOnHover" :false, "navArrow": "4", "buttonsAppendTo": "#about-nav", "addSlideNumbersToArrows" :false, "dotsIndicator": "dots", "numbersStyle": "circle", "dotsAppendTo": "self"}'>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow px-25 w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner">
                                    <div className="carousel-item-content">
                                        <div className="module-carousel transition-all relative mb-45 bg-gray-100 pt-25 pb-15 rounded-10">
                                            <div className="ld-fancy-heading uppercase text-end relative">
                                                <h6 className="ld-fh-element inline-block py-5 px-10 mr-35 mb-0/5em bg-white rounded-5em text-10 font-bold leading-1em tracking-0/1em text-dark">New</h6>
                                            </div>
                                            <div className="iconbox flex-col text-start relative justify-center items-start mb-35 px-35">
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center text-40 mb-30 text-primary">
                                                        <svg className="relative w-60 h-auto z-2" height="54.856" viewBox="0 0 55.69 54.856" width="55.69" xmlns="http://www.w3.org/2000/svg">
                                                            <g fill="#0f5a64">
                                                                <path d="m42.495 294.129a13.084 13.084 0 0 0 -9.583 4.126 20.053 20.053 0 0 0 -12.582-4.378h-.036a19.9 19.9 0 0 0 -14.369 6.033 21.309 21.309 0 0 0 -5.925 15.101 1.237 1.237 0 0 0 .348.851 1.185 1.185 0 0 0 .851.348l31.485-.06c.072.084.144.156.216.24a13.2 13.2 0 1 0 9.6-22.261zm-40.061 19.671a18.757 18.757 0 0 1 5.206-12.222 17.491 17.491 0 0 1 12.654-5.3h.036a17.7 17.7 0 0 1 11.107 3.862 13.223 13.223 0 0 0 -.456 13.613zm40.06 4.318a10.795 10.795 0 1 1 10.795-10.795 10.795 10.795 0 0 1 -10.794 10.795zm0 0" transform="translate(.001 -265.667)"></path>
                                                                <path d="m92.127 25.422a12.678 12.678 0 1 0 -12.678-12.678 12.678 12.678 0 0 0 12.678 12.678zm0-22.957a10.279 10.279 0 1 1 -10.279 10.279 10.279 10.279 0 0 1 10.279-10.279zm0 0" transform="translate(-71.821 -.066)"></path>
                                                                <path d="m390.282 393.349-5.794 4.714-2.123-2.483a1.2 1.2 0 1 0 -1.823 1.559l2.879 3.37a1.206 1.206 0 0 0 .912.42 1.179 1.179 0 0 0 .755-.264l6.705-5.457a1.2 1.2 0 0 0 -1.511-1.859zm0 0" transform="translate(-343.745 -355.351)"></path>
                                                            </g>
                                                        </svg>
                                                    </span>
                                                </div>
                                                <div className="contents">
                                                    <h3 className="mb-15 text-22 leading-1/5em">Protected Insurance</h3>
                                                    <p>
                                                        <span className="text-17 leading-1/5em">Adjust global theme options and see design changes in real-time.</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <hr />
                                            <a href="./" className="btn btn-naked text-15 font-medium mt-20 mx-35">
                                                <span className="inline-flex items-center">
                                                    <span className="btn-txt" data-text="Learn more">Learn more</span>
                                                    <span className="btn-icon">
                                                        <i className="lqd-icn-ess icon-md-arrow-forward"></i>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow px-25 w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner">
                                    <div className="carousel-item-content">
                                        <div className="module-carousel transition-all relative mb-45 bg-gray-100 pt-25 pb-15 rounded-10">
                                            <div className="ld-fancy-heading uppercase text-end relative">
                                                <h6 className="ld-fh-element inline-block py-5 px-10 mr-35 mb-0/5em bg-white rounded-5em text-10 font-bold leading-1em tracking-0/1em text-dark">Offer</h6>
                                            </div>
                                            <div className="iconbox flex-col text-start relative justify-center items-start mb-35 px-35">
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center text-40 mb-30 text-primary">
                                                        <svg className="relative w-50 h-auto z-2" height="58.915" viewBox="0 0 51.785 58.915" width="51.785" xmlns="http://www.w3.org/2000/svg">
                                                            <g fill="#0f5a64" transform="translate(-30.981)">
                                                                <path d="m46.1 58.81.419.1.419-.1a20.01 20.01 0 0 0 10.73-6.91h25.1v-51.9h-37.978v24.281h-6.9v1.726a5.184 5.184 0 0 1 -5.178 5.178h-1.731v8.206a20.037 20.037 0 0 0 15.119 19.419zm2.143-55.358h31.07v45h-19.43a20.137 20.137 0 0 0 2.169-9.056v-8.21h-1.726a5.184 5.184 0 0 1 -5.178-5.178v-1.727h-6.9v-20.829zm-13.81 31.013a8.658 8.658 0 0 0 6.731-6.731h10.7a8.658 8.658 0 0 0 6.736 6.731v4.927a16.519 16.519 0 0 1 -12.084 15.959 16.519 16.519 0 0 1 -12.083-15.959z"></path>
                                                                <path d="m124.433 311.357h3.452v-3.457h3.452v-3.452h-3.452v-3.448h-3.452v3.452h-3.452v3.448h3.452z" transform="translate(-79.643 -266.362)"></path>
                                                                <path d="m240.981 91h17.262v3.452h-17.262z" transform="translate(-185.834 -80.528)"></path>
                                                                <path d="m240.981 151h17.262v3.452h-17.262z" transform="translate(-185.834 -133.623)"></path>
                                                            </g>
                                                        </svg>
                                                    </span>
                                                </div>
                                                <div className="contents">
                                                    <h3 className="mb-15 text-22 leading-1/5em">Healthcare Policy</h3>
                                                    <p>
                                                        <span className="text-17 leading-1/5em">Adjust global theme options and see design changes in real-time.</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <hr />
                                            <a href="./" className="btn btn-naked text-15 font-medium mt-20 mx-35">
                                                <span className="inline-flex items-center">
                                                    <span className="btn-txt" data-text="Learn more">Learn more</span>
                                                    <span className="btn-icon">
                                                        <i className="lqd-icn-ess icon-md-arrow-forward"></i>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow px-25 w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner">
                                    <div className="carousel-item-content">
                                        <div className="module-carousel transition-all relative mb-45 bg-gray-100 pt-25 pb-15 rounded-10">
                                            <div className="ld-fancy-heading uppercase text-end relative">
                                                <h6 className="ld-fh-element inline-block py-5 px-10 mr-35 mb-0/5em bg-white rounded-5em text-10 font-bold leading-1em tracking-0/1em text-dark">Hot</h6>
                                            </div>
                                            <div className="iconbox flex-col text-start relative justify-center items-start mb-35 px-35">
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center text-40 mb-30 text-primary">
                                                        <svg className="relative w-65 h-auto z-2" xmlns="http://www.w3.org/2000/svg" width="67.001" height="62.923" viewBox="0 0 67.001 62.923">
                                                            <path d="M63.39,54.329l-5.317-2.413-1.521-2.459a20.442,20.442,0,0,0,9.528-17.288v-10.1a1.571,1.571,0,0,0-.845-1.352L51.573,13.452a1.5,1.5,0,0,0-1.46.015L36.882,20.72a1.488,1.488,0,0,0-.768,1.352v10.3a20.522,20.522,0,0,0,1.783,8.5H26.816a7.732,7.732,0,0,0-6.1,3.012l-6.039,7.914L4.533,54.559A6.151,6.151,0,0,0,0,60.476v3.873a6.228,6.228,0,0,0,6.178,6.178h.738a7.736,7.736,0,0,0,14.906,0h22.59a7.736,7.736,0,0,0,14.906,0h1.506A6.208,6.208,0,0,0,67,64.348V59.907A6.175,6.175,0,0,0,63.39,54.329Zm-24.2-31.349,11.725-6.439,12.094,6.454v9.174a17.452,17.452,0,0,1-10.7,16.059H52.28l-1.475.63-1.2-.538A17.426,17.426,0,0,1,39.187,32.354ZM14.368,73.062a4.656,4.656,0,1,1,4.656-4.656A4.653,4.653,0,0,1,14.368,73.062Zm37.5,0a4.656,4.656,0,1,1,4.656-4.656A4.653,4.653,0,0,1,51.865,73.062Zm12.079-8.729h-.015a3.135,3.135,0,0,1-3.1,3.1H59.533a7.733,7.733,0,0,0-15.337,0H22.037a7.733,7.733,0,0,0-15.337,0H6.178a3.135,3.135,0,0,1-3.1-3.1V60.46A3.089,3.089,0,0,1,5.348,57.51l10.634-2.9a1.6,1.6,0,0,0,.83-.553l6.362-8.329a4.615,4.615,0,0,1,3.657-1.8H39.648a20.811,20.811,0,0,0,8.729,7.223l1.844.8a1.553,1.553,0,0,0,1.229,0l2.075-.891c.108-.046.215-.092.307-.138l1.89,3.027a1.436,1.436,0,0,0,.661.584l5.747,2.6a3.1,3.1,0,0,1,1.813,2.781v4.426Z" transform="translate(0 -13.269)" fill="#0f5a64"></path>
                                                        </svg>
                                                    </span>
                                                </div>
                                                <div className="contents">
                                                    <h3 className="mb-15 text-22 leading-1/5em">Car / Vehicle Insurance</h3>
                                                    <p>
                                                        <span className="text-17 leading-1/5em">Adjust global theme options and see design changes in real-time.</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <hr />
                                            <a href="./" className="btn btn-naked text-15 font-medium mt-20 mx-35">
                                                <span className="inline-flex items-center">
                                                    <span className="btn-txt" data-text="Learn more">Learn more</span>
                                                    <span className="btn-icon">
                                                        <i className="lqd-icn-ess icon-md-arrow-forward"></i>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="carousel-item has-width flex flex-col items-stretch justify-center transition-shadow px-25 w-33percent md:w-40percent sm:w-full">
                                <div className="carousel-item-inner">
                                    <div className="carousel-item-content">
                                        <div className="module-carousel transition-all relative mb-45 bg-gray-100 pt-25 pb-15 rounded-10">
                                            <div className="ld-fancy-heading uppercase text-end relative">
                                                <h6 className="ld-fh-element inline-block py-5 px-10 mr-35 mb-0/5em bg-white rounded-5em text-10 font-bold leading-1em tracking-0/1em text-dark">Offer</h6>
                                            </div>
                                            <div className="iconbox flex-col text-start relative justify-center items-start mb-35 px-35">
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center text-40 mb-30 text-primary">
                                                        <svg className="relative w-60 h-auto z-2" height="58.915" viewBox="0 0 51.785 58.915" width="51.785" xmlns="http://www.w3.org/2000/svg">
                                                            <g fill="#0f5a64" transform="translate(-30.981)">
                                                                <path d="m46.1 58.81.419.1.419-.1a20.01 20.01 0 0 0 10.73-6.91h25.1v-51.9h-37.978v24.281h-6.9v1.726a5.184 5.184 0 0 1 -5.178 5.178h-1.731v8.206a20.037 20.037 0 0 0 15.119 19.419zm2.143-55.358h31.07v45h-19.43a20.137 20.137 0 0 0 2.169-9.056v-8.21h-1.726a5.184 5.184 0 0 1 -5.178-5.178v-1.727h-6.9v-20.829zm-13.81 31.013a8.658 8.658 0 0 0 6.731-6.731h10.7a8.658 8.658 0 0 0 6.736 6.731v4.927a16.519 16.519 0 0 1 -12.084 15.959 16.519 16.519 0 0 1 -12.083-15.959z"></path>
                                                                <path d="m124.433 311.357h3.452v-3.457h3.452v-3.452h-3.452v-3.448h-3.452v3.452h-3.452v3.448h3.452z" transform="translate(-79.643 -266.362)"></path>
                                                                <path d="m240.981 91h17.262v3.452h-17.262z" transform="translate(-185.834 -80.528)"></path>
                                                                <path d="m240.981 151h17.262v3.452h-17.262z" transform="translate(-185.834 -133.623)"></path>
                                                            </g>
                                                        </svg>
                                                    </span>
                                                </div>
                                                <div className="contents">
                                                    <h3 className="mb-15 text-22 leading-1/5em">Healthcare Policy</h3>
                                                    <p>
                                                        <span className="text-17 leading-1/5em">Adjust global theme options and see design changes in real-time.</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <hr />
                                            <a href="./" className="btn btn-naked text-15 font-medium mt-20 mx-35">
                                                <span className="inline-flex items-center">
                                                    <span className="btn-txt" data-text="Learn more">Learn more</span>
                                                    <span className="btn-icon">
                                                        <i className="lqd-icn-ess icon-md-arrow-forward"></i>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col col-12 text-center">
                    <div className="module-bottom">
                        <div className="ld-fancy-heading">
                            <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>
        </div>
    </section>
  )
}

export default AboutSection