<div class="section bg-image py-5" data-img-src="../../assets/images/upload/app-landing-highlight-bg.jpg">
    <div class="container">
        
        <div class="row my-5">
            <div class="col-lg-8 offset-lg-2">
                <div class="text-center text-white-75 mt-3">

                    <h2 class="h1 font-weight-800 text-white line-height-sm mb-4">Creative App Showcase</h2>
                    <div class="zz-separator zz-separator-wide zz-separator-white ml-auto mr-auto mb-4" data-width="93px"></div>

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

        <div class="row align-items-lg-center mb-5">

            <div class="col-md-6 col-lg-4 order-2 order-lg-1">
                <div class="px-4 px-lg-0 pl-xl-4 pr-xl-5">

                    <div class="icon-info-3 pb-2 mb-5 add-animate" data-animated="fadeInLeft">
                        <div class="icon-title d-flex justify-content-start justify-content-lg-end align-items-center mb-3">
                            <img src="../../assets/svg/upload/app-highlight-icon-01.svg" alt="icon" class="mr-3 mr-lg-0 ml-lg-3 order-lg-2" data-width="50px" data-height="50px">
                            <h5 class="mb-0 font-weight-700 text-white text-lg-right order-lg-1">Designed to Sell</h5>
                        </div>
                        <div class="text-white-75 text-lg-right">
                            <p>Aenean sed mattis arcu rhoncus risus duis pretium purus eget cursus molestie</p>
                        </div>
                    </div>

                    <div class="icon-info-3 pb-2 mb-5 add-animate" data-animated="fadeInLeft">
                        <div class="icon-title d-flex justify-content-start justify-content-lg-end align-items-center mb-3">
                            <img src="../../assets/svg/upload/app-highlight-icon-02.svg" alt="icon" class="mr-3 mr-lg-0 ml-lg-3 order-lg-2" data-width="50px" data-height="50px">
                            <h5 class="mb-0 font-weight-700 text-white text-lg-right order-lg-1">Client Targeting</h5>
                        </div>
                        <div class="text-white-75 text-lg-right">
                            <p>Magna nec semper magna quis malesuada dolor nullam ornare dictum magna</p>
                        </div>
                    </div>

                    <div class="icon-info-3 add-animate" data-animated="fadeInLeft">
                        <div class="icon-title d-flex justify-content-start justify-content-lg-end align-items-center mb-3">
                            <img src="../../assets/svg/upload/app-highlight-icon-03.svg" alt="icon" class="mr-3 mr-lg-0 ml-lg-3 order-lg-2" data-width="50px" data-height="50px">
                            <h5 class="mb-0 font-weight-700 text-white text-lg-right order-lg-1">Customer Support</h5>
                        </div>
                        <div class="text-white-75 text-lg-right">
                            <p>Nam dolor sapien felis eu donec interdum neca placerat lacinia nullam enim</p>
                        </div>
                    </div>

                    <div class="d-lg-none" data-height="56px"></div>

                </div>
            </div>

            <div class="col-lg-4 order-1 order-lg-2">
                <div class="text-center px-4 pb-4 mb-5 pb-lg-0 mb-lg-0">
                    <img src="../../assets/images/upload/phone-mockup-05.png" alt="image" class="img-fluid add-animate" data-animated="fadeInUp">
                </div>
            </div>

            <div class="col-md-6 col-lg-4 order-3 order-lg-3">
                <div class="px-4 px-lg-0 pl-xl-5 pr-xl-4">

                    <div class="icon-info-3 pb-2 mb-5 add-animate" data-animated="fadeInRight">
                        <div class="icon-title d-flex justify-content-start align-items-center mb-3">
                            <img src="../../assets/svg/upload/app-highlight-icon-04.svg" alt="icon" class="mr-3" data-width="50px" data-height="50px">
                            <h5 class="mb-0 font-weight-700 text-white">Growth Strategy</h5>
                        </div>
                        <div class="text-white-75">
                            <p>Vestibulum sem ipsum primis metus neca charetra justo sapien purus cursus</p>
                        </div>
                    </div>

                    <div class="icon-info-3 pb-2 mb-5 add-animate" data-animated="fadeInRight">
                        <div class="icon-title d-flex justify-content-start align-items-center mb-3">
                            <img src="../../assets/svg/upload/app-highlight-icon-05.svg" alt="icon" class="mr-3" data-width="50px" data-height="50px">
                            <h5 class="mb-0 font-weight-700 text-white">Configuration</h5>
                        </div>
                        <div class="text-white-75">
                            <p>Hendrerit volutpat in laoreet elementum luctus a consequat bibendum</p>
                        </div>
                    </div>

                    <div class="icon-info-3 add-animate" data-animated="fadeInRight">
                        <div class="icon-title d-flex justify-content-start align-items-center mb-3">
                            <img src="../../assets/svg/upload/app-highlight-icon-06.svg" alt="icon" class="mr-3" data-width="50px" data-height="50px">
                            <h5 class="mb-0 font-weight-700 text-white">Task Management</h5>
                        </div>
                        <div class="text-white-75">
                            <p>Morbi tristique ac cursus dignissim sapien nunc commodo orci vestibulum</p>
                        </div>
                    </div>

                </div>
            </div>

        </div>

        <div class="d-none d-lg-block" data-height="20px"></div>

    </div>
</div>