@extends('front-cms.layouts.main')
@section('main-section')
        <section>
            <div class="container">
                <img src="images/banner300.jpg" alt="">
            </div>
        </section>
        <!-- Browse By Subjects -->
        <section class=" pt-140 pb-90 browseBySubjects">

            <div class="container">
                <h2 class="section-title mb-20 text-center">Browse By Subjects</h2>
                <p class="text-center">Request tutor, Then easily schedule demo class and pay for online and recorded
                    classes.</p>
                <div class="row align-items-center mt-5">
                    <div class="col-xl-2 col-lg-2 hiwCol">
                        <div class="hiwImg">
                            <img src="images/icons/degree.png" alt="">
                        </div>
                        <div class="belowArea">
                            <h5>Academics</h5>
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-2 hiwCol">
                        <div class="hiwImg">
                            <img src="images/icons/language.png" alt="">
                        </div>
                        <div class="belowArea">
                            <h5>Language</h5>
                        </div>
                    </div>


                    <div class="col-xl-2 col-lg-2 hiwCol">
                        <div class="hiwImg">
                            <img src="images/icons/music.png" alt="">
                        </div>
                        <div class="belowArea">
                            <h5>Music</h5>
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-2 hiwCol">
                        <div class="hiwImg">
                            <img src="images/icons/art.png" alt="">
                        </div>
                        <div class="belowArea">
                            <h5>Art</h5>
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-2 hiwCol">
                        <div class="hiwImg">
                            <img src="images/icons/health.png" alt="">
                        </div>
                        <div class="belowArea">
                            <h5>Health</h5>
                        </div>
                    </div>

                    <div class="col-xl-2 col-lg-2 hiwCol">
                        <div class="hiwImg">
                            <img src="images/icons/IT.png" alt="">
                        </div>
                        <div class="belowArea">
                            <h5>IT</h5>
                        </div>
                    </div>
                </div>
               
            </div>
        </section>

        <!-- end  -->

@endsection