<div data-type="component-text"
     data-preview="{{assetPath('') }}Modules/Appointment/Resources/assets/keditor/snippets/preview/affiliate/feature_06.png"
     data-keditor-title="Feature 06" data-keditor-categories="Feature 06">
    <!-- how it work:start -->
    <section class="section_padding tutor_how_it_work">
        <div class="container">

            <div class="row align-items-center">
                <div class="col-xxl-6 col-md-5">
                    <div class="tutor_how_it_work_content">
                        <div class="tutor_how_it_work_content_icon"><img
                                src="{{assetPath('modules/appointment/frontend/img/tutor/title-shape.png') }}"
                                alt=""></div>
                        <span class='d-block text-primary fw-bold'>How Tutor Finder does works</span>
                        <h2>Sharing expert knowledge with world-wide.</h2>
                        <p>Using Felix saves you time and helps you build beautiful products with complete ease. Totally
                            reusable and completely customisab Using Felix saves you time and helps you build.</p>
                    </div>
                </div>
                <div class="col-xxl-6 col-md-7">
                    <div class="tutor_how_it_work_cards">
                        <div class="tutor_how_it_work_card">
                            <div class="tutor_how_it_work_card_icon">
                                <svg id="" data-name="1" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
                                     viewBox="0 0 70 70">
                                    <rect id="" data-name="Rectangle 394" width="70" height="70" rx="32"
                                          fill="rgba(249,189,100,0.08)"/>
                                    <path id="" data-name="Path 717"
                                          d="M21.044,19.768,32,17.333l10.956,2.435A1.333,1.333,0,0,1,44,21.069V34.385a8,8,0,0,1-3.563,6.656L32,46.667l-8.437-5.625A8,8,0,0,1,20,34.387V21.069a1.333,1.333,0,0,1,1.044-1.3Zm12.289,9.565V22.667L26.667,32h4v6.667l6.667-9.333Z"
                                          transform="translate(3 3)" fill="#f9bd64"/>
                                </svg>
                            </div>
                            <h4>Find Best Tutor</h4>
                            <p>Capib vivamus element senisie Aene vulputa eleifend tellus aenean ligula.</p>
                        </div>
                        <div class="tutor_how_it_work_card">
                            <div class="tutor_how_it_work_card_icon">
                                <svg id="" data-name="3" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
                                     viewBox="0 0 70 70">
                                    <rect id="" data-name="Rectangle 395" width="70" height="70" rx="32"
                                          fill="rgba(81,56,238,0.06)"/>
                                    <path id="" data-name="Path 718"
                                          d="M36.3,36.678l-2.951,6.2a.8.8,0,0,1-1.3.207L27.323,38.1a.8.8,0,0,0-.476-.243l-6.809-.891a.8.8,0,0,1-.6-1.175l3.283-6.032a.8.8,0,0,0,.083-.528L21.547,22.48a.8.8,0,0,1,.933-.933L29.231,22.8a.8.8,0,0,0,.528-.083l6.032-3.283a.8.8,0,0,1,1.175.6l.891,6.808a.8.8,0,0,0,.243.476l4.985,4.723a.8.8,0,0,1-.207,1.3l-6.2,2.951a.8.8,0,0,0-.379.379Zm1.063,2.569,1.885-1.885L44.9,43.018,43.017,44.9l-5.656-5.657Z"
                                          transform="translate(3.019 3.019)" fill="#5138ee"/>
                                </svg>
                            </div>
                            <h4>Measure. Optimize</h4>
                            <p>Capib vivamus element senisie Aene vulputa eleifend tellus aenean ligula.</p>
                        </div>
                        <div class="tutor_how_it_work_card">
                            <div class="tutor_how_it_work_card_icon">
                                <svg id="" data-name="1" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
                                     viewBox="0 0 70 70">
                                    <rect id="" data-name="Rectangle 394" width="70" height="70" rx="32"
                                          fill="rgba(249,189,100,0.08)"/>
                                    <path id="" data-name="Path 717"
                                          d="M21.044,19.768,32,17.333l10.956,2.435A1.333,1.333,0,0,1,44,21.069V34.385a8,8,0,0,1-3.563,6.656L32,46.667l-8.437-5.625A8,8,0,0,1,20,34.387V21.069a1.333,1.333,0,0,1,1.044-1.3Zm12.289,9.565V22.667L26.667,32h4v6.667l6.667-9.333Z"
                                          transform="translate(3 3)" fill="#f9bd64"/>
                                </svg>
                            </div>
                            <h4>Flexible Time</h4>
                            <p>Capib vivamus element senisie Aene vulputa eleifend tellus aenean ligula.</p>
                        </div>
                        <div class="tutor_how_it_work_card">
                            <div class="tutor_how_it_work_card_icon">
                                <svg id="" data-name="4" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
                                     viewBox="0 0 70 70">
                                    <rect id="" data-name="Rectangle 393" width="70" height="70" rx="32"
                                          fill="rgba(94,198,232,0.08)"/>
                                    <path id="" data-name="Path 716"
                                          d="M24.929,39.071A10,10,0,1,1,32,42H22ZM28,33a4,4,0,0,0,8,0Z"
                                          transform="translate(3 3)" fill="#5ec6e8"/>
                                </svg>
                            </div>
                            <h4>Sales & Marketing</h4>
                            <p>Capib vivamus element senisie Aene vulputa eleifend tellus aenean ligula.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- how it work:end -->
</div>
