Image Section

<!--start coach row-->
<div class="row d-flex align-items-end">
  <div class="col-xl-7 col-lg-12 col-md-12 col-12">
    <div class="row">
      <div class="col-md-4 mb-2 mb-lg-2">
        <!--image-->
        <img src="../assets/images/profile-img-1.png" alt="porfile" class="img-fluid rounded h-100 w-100 img-hover-zoom--basic" />
      </div>
      <div class="col-md-8 mb-2 mb-lg-2">
        <!--image-->
        <img src="../assets/images/profile-img-2.png" alt="profile" class="img-fluid rounded h-100 w-100" />
      </div>
    </div>
  </div>
  <!--col-->
  <div class="col-xl-5 col-lg-12 col-md-12 col-12 mt-3 mt-xl-0">
    <!--para-->
    <p class="mb-9">
      From having a learning disability, which led to being alone and bullied in school, to being sexually abused as a child, to being injured and broke on his sister’s
      couch, The Coach story is the perfect example of how anybody can overcome the obstacles in their life and achieve greatness.
    </p>
    <div class="row">
      <div class="col-lg-6 col-md-6 col-12 mb-2 mb-lg-2">
        <!--image-->
        <img src="../assets/images/profile-img-3.png" alt="profile" class="img-fluid h-100 rounded w-100" />
      </div>
      <div class="col-lg-6 col-md-6 col-12 mb-2 mb-lg-2">
        <!--image-->
        <img src="../assets/images/profile-img-4.png" alt="profile" class="img-fluid h-100 rounded w-100" />
      </div>
    </div>
  </div>
</div>
<!--end of coach row-->

<!--start podcast-->
<section class="py-xxl-16 py-lg-8 py-6 bg-primary">
  <div class="container">
    <!--row-->
    <div class="row d-xl-flex align-items-xl-center gy-4">
      <!--col-->
      <div class="col-lg-6 col-md-12">
        <div class="text-white pe-xl-10 mb-4 mb-xl-0">
          <h2 class="display-4 text-white mb-3">Books, Podcast, Courses & More</h2>
          <!--para-->
          <p class="lead mb-0">
            Ready for more? Listen to the latest podcast episode, see when John is headed to your neck of the woods, stock up on business courses, books, gear, and more.
          </p>
        </div>
      </div>
      <!--col-->
      <div class="col-lg-6 col-md-6">
        <!--image-->
        <div class="img-overlay img-zoom">
          <a href="#">
            <img class="rounded img-fluid w-100" src="../assets/images/course-img-1.png" alt="podcast" />
          </a>
          <!--button-->
          <div class="caption">
            <a href="pages/podcast.html" class="btn btn-outline-white btn-lg">Podcast</a>
          </div>
        </div>
      </div>
      <!--col-->
      <div class="col-lg-6 col-md-6">
        <!--image-->
        <div class="img-overlay img-zoom">
          <a href="#">
            <img class="rounded img-fluid w-100" src="../assets/images/course-img-2.png" alt="events" />
          </a>
          <!--button-->
          <div class="caption">
            <a href="pages/events.html" class="btn btn-outline-white btn-lg">Events</a>
          </div>
        </div>
      </div>
      <!--col-->
      <div class="col-lg-6 col-md-4 d-md-none d-lg-block">
        <!--image-->
        <div class="img-overlay img-zoom">
          <a href="#">
            <img class="rounded img-fluid w-100" src="../assets/images/course-img-3.png" alt="course" />
          </a>
          <!--button-->
          <div class="caption">
            <a href="pages/program-list.html" class="btn btn-outline-white btn-lg">Courses</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--end of podcast-->

<div class="container-fluid">
<div class="row g-0">
  <div class="col-md-3 col-12">
    <!--image-->
    <img src="../assets/images/gallery-img-1.jpg" alt="gallery" class="img-fluid border-end border-white h-lg-100" />
  </div>
    <div class="col-md-3 col-12">
    <!--image-->
    <img src="../assets/images/gallery-img-2.jpg" alt="gallery" class="img-fluid border-bottom border-white h-lg-100" />
    <img src="../assets/images/gallery-img-3.jpg" alt="gallery" class="img-fluid border-bottom border-white h-lg-100" />
  </div>
    <div class="col-md-3 col-12">
    <!--image-->
    <img src="../assets/images/gallery-img-4.jpg" alt="gallery" class="img-fluid border-bottom border-white h-lg-100 border-start" />
    <img src="../assets/images/gallery-img-5.jpg" alt="gallery" class="img-fluid border-bottom border-white h-lg-100 border-start" />
  </div>
  <div class="col-md-3 col-12">
    <img src="../assets/images/gallery-img-6.jpg" alt="gallery" class="img-fluid border-start border-white h-lg-100" />
  </div>
</div>
</div>

<!--start who we are-->
<section class="py-xxl-15 py-lg-8 pb-8 bg-shape" style="background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 102.23%), #f4f4f5">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-12 col-12">
        <!--heading-->
        <div class="mb-8">
          <h2 class="h1 mb-3">Who we are</h2>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non accumsan in, tempor.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid mb-8">
    <div class="row d-flex align-items-center">
      <div class="col-xl-9 col-lg-9 col-12 ps-lg-0">
        <!--image-->
        <div>
          <img src="../assets/images/hero-slide-2.jpg" alt="image" class="img-fluid" />
        </div>
      </div>
      <div class="offset-xl-7 col-xl-4 offset-lg-5 col-lg-6 col-12 ps-lg-0">
        <!--card-->
        <div class="card border-0 shadow mt-xl-n23 mt-lg-n23 mt-n5">
          <!--card body-->
          <div class="card-body p-7 border-top border-primary border-4 rounded-top">
            <!--heading-->
            <h3 class="mb-4">We know the intensity, focus, and commitment it takes to be a successful entrepreneur and CEO.</h3>
            <p>
              The CEO Coaching team has decades of experience building and selling successful businesses, leading fast-growing organizations, and driving sales and revenue to create
              industry-leading results.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non accumsan in, tempor dictum neque. In hac habitasse platea dictumst.</p>
            <p class="text-dark">
              <span class="me-2">Contact us</span>
              <span>call 1-123-456-7890</span>
            </p>
            <!--button-->
            <a href="about-me.html" class="btn btn-primary">Read More About us</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- features -->
  <div class="container mt-lg-14 mb-lg-12">
    <div class="row">
      <!--col-->
      <div class="col-lg-3 col-md-6 col-12">
        <!--card-->
        <div class="card mb-lg-0 mb-4 border-0">
          <!--card body-->
          <div class="card-body p-4">
            <i class="fas fa-chart-line fa-fw text-primary font-28 mb-4"></i>
            <h4>CEO's Growth</h4>
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus tempor.</p>
          </div>
        </div>
      </div>
      <!--col-->
      <div class="col-lg-3 col-md-6 col-12">
        <!--card-->
        <div class="card mb-lg-0 mb-4 border-0">
          <!--card body-->
          <div class="card-body p-4">
            <i class="fas fa-mountain fa-fw text-primary font-28 mb-4"></i>
            <h4>Sales Performance</h4>
            <p class="mb-0">Proin malesuada maximus eros, nec posuere neque pellemen tum egestas.</p>
          </div>
        </div>
      </div>
      <!--col-->
      <div class="col-lg-3 col-md-6 col-12">
        <!--card-->
        <div class="card mb-lg-0 mb-4 border-0">
          <!--card body-->
          <div class="card-body p-4">
            <i class="fas fa-trophy fa-fw text-primary font-28 mb-4"></i>
            <h4>Meaningful Exits</h4>
            <p class="mb-0">In imperdiet imperdiet enim, quis vestibulum feugiat lao reet niorci porta eget.</p>
          </div>
        </div>
      </div>
      <!--col-->
      <div class="col-lg-3 col-md-6 col-12">
        <!--card-->
        <div class="card mb-lg-0 mb-4 border-0">
          <!--card body-->
          <div class="card-body p-4">
            <i class="fas fa-star-half-alt fa-fw text-primary font-28 mb-4"></i>
            <h4>Experience</h4>
            <p class="mb-0">Suspendisse eu orci con vallis, gravida urna feugiat laoreet nisl hendrerit lacus.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--end of whoo we are-->

<!--start this program-->
<section class="pt-xxl-16 pt-lg-8 py-6" id="program">
  <div class="container">
    <!-- This Program-->
    <div class="row align-items-center">
      <div class="col-lg-6 col-md-12 col-sm-6 col-12">
        <!--heading-->
        <h2 class="mb-4">Why This Program</h2>
        <p>
          Suspendisse potenti. Integer porta diam magna. Donec sapien nisl, mattis eget maximus ravida tortor, ac euismod magna. In hac habitasse platea dictumst. Nullam
          fermentum ante ut porta vestibulum.
        </p>

        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-12 mt-4">
            <div class="mb-4">
              <!--heading-->
              <h4 class="h5">
                <span class="text-danger me-2">01</span>
                Identify your “base-level”
              </h4>
              <p>Suspendisse potenti. Integer porta dimus eu finibus sed ipsum.</p>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-12 mt-4">
            <div class="mb-4">
              <!--heading-->
              <h4 class="h5">
                <span class="text-danger me-2">02</span>
                Be guided through powerful
              </h4>
              <p>Aliquam felis arcu, auctor et amet quam uisque nec sem enim.</p>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-12 mt-3">
            <div class="mb-4">
              <!--heading-->
              <h4 class="h5">
                <span class="text-danger me-2">03</span>
                Explore the characteristics
              </h4>
              <p>Donec ultrices egestas ultrices. Fusce sed venenatis nisl.</p>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-12 mt-3">
            <div class="mb-4">
              <!--heading-->
              <h4 class="h5">
                <span class="text-danger me-2">04</span>
                Discover the root cause
              </h4>
              <p>Maecenas elementum velit sit amet venenatis vitae est vitae.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-md-12 col-sm-6 col-12">
        <div class="row justify-content-center g-xxl-0">
          <!--col-->
          <div class="col-6 me-n4 me-xl-n9 me-xxl-n12 ms-xxl-8">
            <!--image-->
            <img src="../assets/images/showcase-img-1.jpg" alt="showcase" class="img-fluid mb-3 rounded" />

            <img src="../assets/images/showcase-img-2.jpg" alt="showcase" class="img-fluid rounded" />
          </div>
          <!--col-->
          <div class="col-6">
            <!--image-->
            <img src="../assets/images/showcase-img-3.jpg" alt="showcase" class="img-fluid mb-3 rounded" />

            <img src="../assets/images/showcase-img-4.jpg" alt="showcase" class="img-fluid rounded" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--end of this program-->

<!--start image gallery-->
<div class="container-fluid">
  <div class="d-flex">
    <!--image-->
    <div class="w-25 me-2">
      <img src="../assets/images/coach-img-1.jpg" alt="coach" class="w-100 rounded" />
    </div>
    <!--image-->
    <div class="w-25 me-2">
      <img src="../assets/images/coach-img-2.jpg" alt="coach" class="w-100 rounded" />
    </div>
    <!--image-->
    <div class="w-25 me-2">
      <img src="../assets/images/coach-img-3.jpg" alt="coach" class="w-100 rounded" />
    </div>
    <!--image-->
    <div class="w-25 me-2">
      <img src="../assets/images/coach-img-4.jpg" alt="coach" class="w-100 rounded" />
    </div>
    <!--image-->
    <div class="w-25 me-2">
      <img src="../assets/images/coach-img-5.jpg" alt="coach" class="w-100 rounded" />
    </div>
  </div>
</div>
<!--end of image gallary-->

<div class="row">
<div class="offset-xxl-1 col-xxl-10 col-md-12 col-12 mb-lg-18 mb-8">
  <div class="row align-items-center">
    <div class="col-lg-6 col-12 mb-6 mb-lg-0">
      <div class="pe-xl-6 mb-4 mb-md-0">
        <!-- number -->
        <span class="text-uppercase fw-bold">
          <span class="text-primary">#1</span>
          Trainer in Country
        </span>
        <!-- heading -->
        <h2 class="mb-3 display-5 mt-2">About Deena Nichols</h2>
        <!-- para -->
        <p class="fs-3">Donec sollicitudin augue ipsum, id su sem cursus epurus sapien, consequat at pretium volutunt ultricies tristique.</p>
        <!-- para -->
        <p class="lead mb-4">Donec sollicitudin augue ipsum, id suscipit sem cursus epurus sapien, consequat at pretium volutunt ultricies tristique.</p>
        <!-- button -->
        <a href="#" class="btn btn-primary">Start Free Class</a>
      </div>
    </div>
    <div class="col-lg-6 col-12">
      <!-- row -->
      <div class="row g-3">
        <div class="col-md-6">
          <!-- img -->
          <img src="../assets/images/fitness/fitness-img-3.jpg" alt="fitness" class="img-fluid w-100 rounded-3" />
        </div>
        <!-- img -->
        <div class="col-md-6">
          <!-- img -->
          <img src="../assets/images/fitness/fitness-img-2.jpg" alt="fitness" class="img-fluid mb-3 w-100 rounded-3" />
          <!-- img -->
          <img src="../assets/images/fitness/fitness-img-1.jpg" alt="fitness" class="img-fluid w-100 rounded-3" />
        </div>
      </div>
    </div>
  </div>
</div>
</div>