       <!-- Why learn our courses -->
        <section class="layout-pt-lg layout-pb-lg bg-dark-2">
        <div class="container">
          
          <div class="row d-flex justify-content-center text-center">
            <div class="col-auto">
              <div class="sectionTitle">
                <h2
                  class="sectionTitle__title text-white aos-init aos-animate"
                  data-aos="fade-up"
                  data-aos-duration="800"
                >
                  Why learn with our courses?
                </h2>

                <p
                  class="sectionTitle__text text-white aos-init aos-animate"
                  data-aos="fade-up"
                  data-aos-duration="800"
                >
                  Lorem ipsum dolor sit amet, consectetur.
                </p>
              </div>
            </div>
          </div>

          <div class="row y-gap-30 pt-50">
            
            <!-- Step 01 -->
            <div
              class="col-lg-4 col-md-6 aos-init aos-animate"
              data-aos="fade-up"
              data-aos-duration="400"
            >
              <div class="stepCard -type-1 -stepCard-hover">
                <div class="stepCard__content">
                  <div class="stepCard__icon">
                    <i class="icon-online-learning-4 text-64 text-green-1"></i>
                  </div>
                  <h4 class="stepCard__title">01. Learn</h4>
                  <p class="stepCard__text">
                    Lorem ipsum dolor sit amet, consectetur dolorili adipiscing elit.
                    Felis donec massa aliqua.
                  </p>
                </div>
              </div>
            </div>

            <!-- Step 02 -->
            <div
              class="col-lg-4 col-md-6 aos-init aos-animate"
              data-aos="fade-up"
              data-aos-duration="800"
            >
              <div class="stepCard -type-1 -stepCard-hover">
                <div class="stepCard__content">
                  <div class="stepCard__icon">
                    <i class="icon-graduation-1 text-64 text-green-1"></i>
                  </div>
                  <h4 class="stepCard__title">02. Graduate</h4>
                  <p class="stepCard__text">
                    Lorem ipsum dolor sit amet, consectetur dolorili adipiscing elit.
                    Felis donec massa aliqua.
                  </p>
                </div>
              </div>
            </div>

            <!-- Step 03 -->
            <div
              class="col-lg-4 col-md-6 aos-init aos-animate"
              data-aos="fade-up"
              data-aos-duration="1200"
            >
              <div class="stepCard -type-1 -stepCard-hover">
                <div class="stepCard__content">
                  <div class="stepCard__icon">
                    <i class="icon-working-at-home-2 text-64 text-green-1"></i>
                  </div>
                  <h4 class="stepCard__title">03. Work</h4>
                  <p class="stepCard__text">
                    Lorem ipsum dolor sit amet, consectetur dolorili adipiscing elit.
                    Felis donec massa aliqua.
                  </p>
                </div>
              </div>
            </div>

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