<section class="cbx-benefits" id="why-complete-bliss">

    <div class="cbx-container">


        <!-- =====================================
             SECTION HEADING
        ====================================== -->

        <div class="cbx-benefits-heading">

            <div class="cbx-section-tag">

                <i class="fa-solid fa-heart"></i>

                <span>
                    WHY COMPLETE BLISS?
                </span>

            </div>


            <h2>

                Contribution should feel

                <span>
                    simple, not stressful.
                </span>

            </h2>


            <p>
                Complete Bliss gives you a clearer and more convenient
                way to plan, contribute and stay informed about the goals
                that matter to you and your family.
            </p>

        </div>



        <!-- =====================================
             BENEFIT CARDS
        ====================================== -->

        <div class="cbx-benefit-grid">


            <!-- =================================
                 CARD 1
            ================================== -->

            <article class="cbx-benefit-card cbx-benefit-card--blue">


                <div class="cbx-benefit-visual">


                    <div class="cbx-benefit-icon">

                        <i class="fa-solid fa-chart-pie"></i>

                    </div>


                    <span class="cbx-benefit-number">
                        01
                    </span>


                    <!-- MINI DASHBOARD VISUAL -->

                    <div class="cbx-mini-dashboard">

                        <div class="cbx-mini-dashboard-top">

                            <span></span>
                            <span></span>

                        </div>


                        <div class="cbx-mini-dashboard-amount">

                            <small>
                                Your Progress
                            </small>

                            <strong>
                                Clear & Updated
                            </strong>

                        </div>


                        <div class="cbx-mini-progress">

                            <span></span>

                        </div>

                    </div>


                </div>



                <div class="cbx-benefit-body">


                    <span class="cbx-benefit-label">
                        FULL VISIBILITY
                    </span>


                    <h3>
                        See Everything Clearly
                    </h3>


                    <p>
                        Keep track of your wallet activity,
                        contributions, scheme progress and records
                        from one organised dashboard.
                    </p>


                    <div class="cbx-benefit-features">

                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Contribution history

                        </span>


                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Scheme progress

                        </span>

                    </div>


                    <div class="cbx-benefit-bottom">

                        <span>
                            No more guesswork
                        </span>

                        <i class="fa-solid fa-arrow-right"></i>

                    </div>


                </div>


            </article>



            <!-- =================================
                 CARD 2
            ================================== -->

            <article class="cbx-benefit-card cbx-benefit-card--green">


                <div class="cbx-benefit-visual">


                    <div class="cbx-benefit-icon">

                        <i class="fa-solid fa-basket-shopping"></i>

                    </div>


                    <span class="cbx-benefit-number">
                        02
                    </span>


                    <!-- MINI PLAN VISUAL -->

                    <div class="cbx-mini-plan">

                        <div class="cbx-mini-plan-icon">

                            <i class="fa-solid fa-box-open"></i>

                        </div>


                        <div>

                            <small>
                                YOUR PLAN
                            </small>

                            <strong>
                                Food • Household • More
                            </strong>

                        </div>

                    </div>


                </div>



                <div class="cbx-benefit-body">


                    <span class="cbx-benefit-label">
                        REAL-LIFE GOALS
                    </span>


                    <h3>
                        Plans That Fit Real Life
                    </h3>


                    <p>
                        Choose contribution schemes around food,
                        household needs, savings goals and things
                        you genuinely want to achieve.
                    </p>


                    <div class="cbx-benefit-features">

                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Flexible schemes

                        </span>


                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Multiple hands

                        </span>

                    </div>


                    <div class="cbx-benefit-bottom">

                        <span>
                            Choose what suits you
                        </span>

                        <i class="fa-solid fa-arrow-right"></i>

                    </div>


                </div>


            </article>



            <!-- =================================
                 CARD 3
            ================================== -->

            <article class="cbx-benefit-card cbx-benefit-card--orange">


                <div class="cbx-benefit-visual">


                    <div class="cbx-benefit-icon">

                        <i class="fa-solid fa-mobile-screen-button"></i>

                    </div>


                    <span class="cbx-benefit-number">
                        03
                    </span>


                    <!-- MINI PHONE VISUAL -->

                    <div class="cbx-mini-phone">

                        <div class="cbx-mini-phone-speaker"></div>


                        <div class="cbx-mini-phone-line line-one"></div>

                        <div class="cbx-mini-phone-line line-two"></div>


                        <div class="cbx-mini-phone-status">

                            <i class="fa-solid fa-check"></i>

                            <span>
                                Updated
                            </span>

                        </div>

                    </div>


                </div>



                <div class="cbx-benefit-body">


                    <span class="cbx-benefit-label">
                        ACCESS ANYWHERE
                    </span>


                    <h3>
                        Your Progress, Anywhere
                    </h3>


                    <p>
                        Check your personal dashboard from your
                        phone or computer and stay informed about
                        your contributions whenever you need to.
                    </p>


                    <div class="cbx-benefit-features">

                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Mobile friendly

                        </span>


                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Easy monitoring

                        </span>

                    </div>


                    <div class="cbx-benefit-bottom">

                        <span>
                            Stay informed on the go
                        </span>

                        <i class="fa-solid fa-arrow-right"></i>

                    </div>


                </div>


            </article>



            <!-- =================================
                 CARD 4
            ================================== -->

            <article class="cbx-benefit-card cbx-benefit-card--purple">


                <div class="cbx-benefit-visual">


                    <div class="cbx-benefit-icon">

                        <i class="fa-solid fa-headset"></i>

                    </div>


                    <span class="cbx-benefit-number">
                        04
                    </span>


                    <!-- MINI SUPPORT VISUAL -->

                    <div class="cbx-mini-support">

                        <div class="cbx-support-avatar">

                            <i class="fa-solid fa-user"></i>

                        </div>


                        <div class="cbx-support-chat">

                            <span></span>
                            <span></span>

                        </div>


                        <div class="cbx-support-online">

                            <i class="fa-solid fa-circle"></i>

                            Available

                        </div>

                    </div>


                </div>



                <div class="cbx-benefit-body">


                    <span class="cbx-benefit-label">
                        HUMAN SUPPORT
                    </span>


                    <h3>
                        You're Not Left Alone
                    </h3>


                    <p>
                        When you need help or clarification,
                        Complete Bliss gives you a direct way
                        to reach the support team.
                    </p>


                    <div class="cbx-benefit-features">

                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Direct support

                        </span>


                        <span>

                            <i class="fa-solid fa-circle-check"></i>

                            Helpful guidance

                        </span>

                    </div>


                    <div class="cbx-benefit-bottom">

                        <span>
                            Help when you need it
                        </span>

                        <i class="fa-solid fa-arrow-right"></i>

                    </div>


                </div>


            </article>


        </div>



        <!-- =====================================
             BOTTOM CTA
        ====================================== -->

        <div class="cbx-benefits-message">


            <div class="cbx-benefits-message-icon">

                <i class="fa-solid fa-house-chimney-heart"></i>

            </div>


            <div class="cbx-benefits-message-content">

                <span>
                    BUILT AROUND EVERYDAY LIFE
                </span>


                <h3>
                    Your goals may be different.
                    Your progress should always be clear.
                </h3>

            </div>


            <a href="#schemes">

                See Available Schemes

                <i class="fa-solid fa-arrow-right"></i>

            </a>


        </div>


    </div>

</section>