<div class="bg-primary">
                                <div class="container">
                                    <!-- Hero Section -->
                                    <div class="row align-items-center no-gutters">
                                        <div class="col-xl-5 col-lg-6 col-md-12">
                                            <div class="py-5 py-lg-0">
                                                <h1 class="text-white display-4 fw-bold">Welcome to Geeks UI Learning Application
                                                </h1>
                                                <p class="text-white-50 mb-4 lead">
                                                    Hand-picked Instructor and expertly crafted courses, designed for the modern students and entrepreneur.
                                                </p>
                                                <a href="pages/course-filter-list.html" class="btn btn-success">Browse Courses</a>
                                                <a href="pages/sign-in.html" class="btn btn-white">Are You Instructor?</a>
                                            </div>
                                        </div>
                                        <div class=" col-xl-7 col-lg-6 col-md-12 text-lg-right text-center">
                                            <img src="../assets/images/hero/hero-img.png" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>
    

    <div class="py-lg-18 py-10 bg-auto" style="background: url(../assets/images/hero/hero-graphics.svg)no-repeat , linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), rgba(221, 218, 255, 0.3) ; background-size: cover; background-position: top center">
                                    <div class="container">
                                      <!-- Hero Section -->
                                      <div class="row justify-content-center">
                                        <div class="col-xl-7 col-lg-7 col-md-12">
                                          <div class="py-8 py-lg-0 text-center">
                                            <h1 class="display-2 fw-bold mb-3 text-primary"><span class="text-dark px-3 px-md-0">Build Better</span> <span class="headingTyped text-primary"></span>
                                            </h1>
                                            <p class="mb-6 h2 text-dark">
                                              Build skills with courses Join Geeks to watch, play, learn, make, and discover, uscipit esi viimentum
                                              laoreet non et odio.
                                            </p>
                                            <a href="../pricing.html" class="btn btn-primary me-2">View Plans</a>
                                            <a href="../sign-up.html" class="btn btn-outline-primary">Try for Free</a>
                                            <div class="mt-8 mb-0">
                                              <ul class="list-inline">
                                                <li class="list-inline-item text-dark fw-semi-bold lh-1 fs-5 me-3 mb-2 mb-md-0"><span class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><i class="mdi mdi-check text-success "></i></span><span class="align-middle">30,000 online courses</span></li>
                                                <li class="list-inline-item text-dark fw-semi-bold lh-1 fs-5  me-3  mb-2 mb-md-0"><span class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><i class="mdi mdi-check text-success "></i></span><span class="align-middle">Expert instruction</span></li>
                                                <li class="list-inline-item text-dark fw-semi-bold lh-1 fs-5"><span class="icon-shape icon-xs rounded-circle bg-light-success text-center me-2"><i class="mdi mdi-check text-success "></i></span><span class="align-middle">Lifetime access</span></li>
                                              </ul>
                                            </div>
                                          </div>
                                        </div>

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

<div class="py-md-20 py-12 bg-dark ">
                                        <div class="container">
                                          <!-- Hero Section -->
                                          <div class="row">
                                            <div class="col-xl-6 col-lg-6 col-md-12">
                                              <div class="mb-4 mb-xl-0 text-center text-md-start">
                                                 <!-- Caption -->
                                                <h1 class="display-2 fw-bold mb-3 text-white ls-sm ">Become a Vanilla JavaScript Developer </h1>
                                                <p class="mb-4 lead text-white-50">
                                                  In this tutorial, we are going to learn about JavaScript (Vanilla JS) - for building
                                                  incredible, powerful JavaScript applications.
                                                </p>
                                                 <!-- List -->
                                                <div class="mb-6 mb-0">
                                                  <ul class="list-unstyled fs-5 ">
                                                    <li class="mb-2 text-white-50"><span class="me-2 "><i class="fe fe-clock text-warning "></i></span><span class="align-top">4 Hours</span></li>
                                                    <li class="mb-2 text-white-50"><span class="me-2 "><i class="fe fe-video text-warning "></i></span><span class="align-top">12 Videos</span></li>
                                                    <li class="mb-2 text-white-50"><span class="me-2 "><i class="fe fe-users text-warning "></i></span><span class="align-top">10,234+ Enrolled</span></li>
                                                  </ul>
                                                </div>
                                                <a href="https://www.youtube.com/watch?v=JRzWRZahOVU" class="popup-youtube btn btn-white btn-lg fs-5">Watch Preview</a>
                                              </div>
                                            </div>
                                            <div class="offset-xl-1 col-xl-5 col-lg-6 col-md-12">
                                               <!-- Card -->
                                              <div class="card" style="z-index: 1;">
                                                <!-- Card body -->
                                                <div class="card-body p-6">
                                                  <div class="mb-4">
                                                    <h1 class="mb-4 lh-1 fw-bold h2">Create Free Account</h1>
                                                    <div class="mt-3 mb-5 d-grid d-md-block">
                                                       <!-- btn group -->
                                                      <div class="btn-group mb-2 mb-md-0" role="group" aria-label="socialButton">
                                                        <button type="button" class="btn btn-outline-white shadow-sm"><i class="mdi mdi-google me-2 text-danger"></i>Google</button>
                                                      </div>
                                                       <!-- btn group -->
                                                      <div class="btn-group mb-2 mb-md-0" role="group" aria-label="socialButton">
                                                        <button type="button" class="btn btn-outline-white shadow-sm"><i class="mdi mdi-twitter text-info me-2"></i>Twitter</button>
                                                      </div>
                                                       <!-- btn group -->
                                                      <div class="btn-group" role="group" aria-label="socialButton">
                                                        <button type="button" class="btn btn-outline-white shadow-sm"><i class="mdi mdi-facebook text-primary me-2"></i>Facebook</button>
                                                      </div>
                                                    </div>
                                                  </div>
                                                  <div class="mb-4">
                                                    <div class="border-bottom"></div>
                                                    <div class="text-center mt-n2  lh-1">
                                                      <span class="bg-white px-2 fs-6">OR</span>
                                                    </div>
                                                  </div>
                                                  <!-- Form -->
                                                  <form>
                                                    <!-- Username -->
                                                    <div class="mb-2">
                                                      <label for="email" class="form-label sr-only">Email</label>
                                                      <input type="email" id="email" class="form-control" name="email" placeholder="Email" required="">
                                                    </div>
                                                    <!-- Password -->
                                                    <div class="mb-2">
                                                      <label for="password" class="form-label sr-only">Password</label>
                                                      <input type="password" id="password" class="form-control" name="password" placeholder="Password" required="">
                                                    </div>
                                                    <!-- Button -->
                                                    <button type="submit" class="btn btn-primary btn-block">Start Courses for Free</button>
                                                  </form>
                                                </div>
                                                 <!-- Card Footer -->
                                                <div class="card-footer bg-white px-6 py-4">
                                                  <p class="mb-0">By continuing you accept the <a href="#" class="text-inherit fw-semi-bold">Terms of Use</a>,<a href="#" class="text-inherit fw-semi-bold"> Privacy
                                                      Policy</a>, and <a href="#" class="text-inherit fw-semi-bold">Data Policy</a>
                                                  </p>
                                                </div>
                                              </div>
                                               <!-- Pattern -->
                                              <div class="position-absolute bottom-0 end-0 me-md-n3 mb-md-n6 me-lg-n4 mb-lg-n4 me-xl-n6 mb-xl-n8 d-none d-md-block  ">
                                                <img src="../../assets/images/pattern/dots-pattern.svg" alt="">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>

<div class="pt-md-14 pt-12 pb-14">
                                        <div class="container">
                                          <!-- Hero Section -->
                                          <div class="row">
                                            <div class="offset-xl-2 col-xl-8 col-lg-12 col-md-12">
                                              <div class="mb-4 mb-xl-0 text-center">
                                                  <span class="badge bg-light-success badge-pill fs-5 text-dark"><span class=" fw-bold">Beta-v2.0.0 </span>- Just shipped version
                                                </span>
                                                 <!-- Caption -->
                                                <h1 class="display-2 ls-sm mt-2 fw-bold ">Request Access for Product </h1>
                                                <p class="mb-6 h2 text-muted px-md-8">
                                                    Geeks is a customizable, Bootstrap based UI Kits and
                                                    Templates for Developers.
                                                </p>
                                                <form class="row px-lg-16 px-md-14">
                                                    <div class="mb-3 col-md-8 col-12 pl-md-0">
                                                      <input type="email" class="form-control" placeholder="Work Email" required="">
                                                    </div>
                                                    <div class="d-grid mb-3 col-md-4 col-12 ps-md-0">
                                                      <button class="btn btn-dark" type="submit">Request Access</button>
                                                    </div>
                                                    <div class="text-start col-12 fw-medium ps-md-0">Rated 5 Stars <span class="text-muted">by over</span><span class="text-primary"> 100+ Users</span></div>

                                                  </form>

                                              </div>
                                            </div>
                                            <div class="offset-xl-1 col-xl-10 col-12 mt-12">
                                                <div class="card bg-gradient-mix-shade px-md-5 pt-md-5 px-4 pt-4 rounded-3">
                                                  <img src="../assets/images/background/analytics.jpg" alt="" class="rounded-3 mb-n5 img-fluid shadow">

                                                </div>
                                            </div>

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