<!-- Header 1 -->
<section class="header-1 position-relative">
  <div class="position-absolute top-50 end-0 translate-middle-y me-5">
    <img src="assets/images/header-illustration-1.svg" class="img-fluid" alt="" />
  </div>
  <div class="container py-5">
    <div class="col-lg-6">
      <div class="mb-4 text-white">
        <h2 class="display-5 text-white">Build the idea with Krait UI</h2>
        <p class="fs-3">Multi-purpose website UI kit</p>
      </div>
      <p class="fs-5 text-white">This is header description where you can put your main idea of the page here. This is header description where you can put your main idea of the page here. </p>
      <div class="mt-5">
        <a href="#" class="btn btn-info btn-icon-text me-sm-2"><span class="text">Explore</span> <i class="bi bi-arrow-right"></i></a>
        <a href="#" class="btn btn-dark btn-icon-text"><i class="bi bi-journal-richtext"></i> <span class="text">Read documentation</span></a>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Header 2 -->
<section class="header-2 position-relative">
  <div class="position-absolute top-50 start-50 translate-middle-y ms-5 mt-5 pt-5 d-none d-lg-block">
    <img src="assets/images/header-illustration-2.svg" class="img-fluid" alt="" />
  </div>
  <div class="container py-5">
    <div class="col-lg-6">
      <h2 class="display-5 text-white mb-4">Digital product design agency</h2>
      <p class="fs-5 text-white">This is header description where you can put your main idea of the page here. This is header description where you can put your main idea of the page here. </p>
      <div class="mt-5">
        <a href="#" class="btn btn-info rounded-pill btn-icon-text btn-animated me-3">
          <span class="btn-animated--shown">Our stories</span> <span class="btn-animated--hidden"><i class="bi bi-arrow-right"></i></span>
        </a>
        <a href="#" class="btn text-white btn-icon-text px-0">
          <i class="bi bi-chat-left-text"></i> 
          <span class="text text-decoration-underline text-decoration-none-hover">Let's talk about your idea</span>
        </a>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Header 3 -->
<section class="header-3 position-relative overflow-hidden">
  <!-- Decorative element -->
  <div class="position-absolute" style="top: -9rem; left: -12rem;">
    <svg width="468" height="518" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
          <stop stop-color="#54F0FF" offset="0%"/>
          <stop stop-color="#5465FF" offset="100%"/>
        </linearGradient>
      </defs>
      <path d="M1684.532 119.188c-91.163 72.003 56.68 72.296 17.53 329.466-39.151 257.17 375.14-6.926 417.158-69.174 70.644-104.659-25.681-140.142-155.52-216.279-129.838-76.136-188.004-116.015-279.168-44.013Z" transform="rotate(-108 1016.82 896.036)" fill="url(#a)" fill-rule="evenodd"/>
    </svg>
  </div>
  <!-- Decorative element -->
  <div class="position-absolute" style="bottom: -12rem;right: -9rem;">
    <svg width="393" height="455" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
          <stop stop-color="#54F0FF" offset="0%"/>
          <stop stop-color="#5465FF" offset="100%"/>
        </linearGradient>
      </defs>
      <path d="M1933.136 669.278c-79.382 69.517 49.356 69.8 15.264 318.093-34.091 248.293 286.77-34.957 329.921-109.042 57.811-99.256 10.965-93.049-102.094-166.557-113.059-73.509-163.708-112.011-243.09-42.494Z" transform="scale(1 -1) rotate(2 32203.941 -54451.203)" fill="url(#a)" fill-rule="evenodd"/>
    </svg>
  </div>
  <div class="container position-relative">
    <!-- App mockup image -->
    <div class="position-lg-absolute top-lg-50 end-lg-0 translate-middle-lg text-center">
      <img src="assets/images/content/app-mockup.png" alt="" />
    </div>
    <div class="container py-5">
      <!-- Left content -->
      <div class="col-lg-7">
        <span class="badge bg-warning">App of the year</span>
        <h2 class="display-3 text-white mb-4">App Landing</h2>
        <p class="fs-3 text-white">This landing page will let you focus on building awesome and useful app. Easy to implement, flexible to customize.</p>
        <!-- Download links -->
        <div class="mt-5 pt-4 hstack gap-3 flex-column flex-lg-row">
          <a href="#" class="btn btn-app-store text-dark bg-white text-start lh-1" style="width: 17rem;">
            <span class="d-flex align-items-center justify-content-center">
              <span class="display-5 me-3"><i class="fab fa-apple"></i></span>
              <span>
                Available on the <span class="d-block fs-3">App Store</span>
              </span>
            </span>
          </a>
          <a href="#" class="btn btn-app-store text-dark bg-white text-start lh-1" style="width: 17rem;">
            <span class="d-flex align-items-center justify-content-center">
              <span class="display-5 me-3"><i class="fab fa-google-play"></i></span>
              <span>
                GET IT ON <span class="d-block fs-3">Google Play</span>
              </span>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

        
<!-- Header 4 -->
<section class="header-4 position-relative">
  <div class="position-absolute top-50 start-50 translate-middle-y ms-5 mt-5 pt-5 d-none d-lg-block">
    <img src="assets/images/header-illustration-3.svg" class="img-fluid" alt="" />
  </div>
  <div class="container py-5">
    <div class="col-lg-6">
      <h2 class="display-3 text-white mb-4">Blockchain project</h2>
      <p class="fs-4 text-white">Landing page for your blockchain project provided by Krait UI, the awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
      <div class="mt-5">
        <a href="#" class="btn btn-info btn-icon-text btn-lg me-4">
          <i class="bi bi-file-earmark-text"></i>
          <span class="text">Download whitepaper</span>
        </a>
        <button class="btn text-white btn-icon-text btn-lg px-0" data-bs-toggle="modal" data-bs-target="#centeredModal">
          <i class="bi bi-play-circle-fill"></i> 
          <span class="text text-decoration-underline text-decoration-none-hover">Project overview</span>
        </button>
        <div class="modal fade" id="centeredModal" tabindex="-1">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/TDGq4aeevgY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

        
      

        
<!-- Header 5 -->
<section class="header-5 position-relative">
  <div class="position-lg-absolute" style="right: 15%; top: 20%;">
    <img src="assets/images/content/profile-photo.png" class="img-fluid" alt="">
  </div>
  <div class="container py-5">
    <div class="col-lg-6">
      <h2 class="fs-4">Hi, I'm Roger Wood</h2>
      <h1 class="display-2 fw-bold">Building digital products and experience</h1>
      <div class="mt-5 hstack gap-3">
        <a href="#contact" class="btn btn-primary btn-sm rounded-pill btn-icon-text btn-animated me-4">
          <span class="btn-animated--shown">Let's talk</span> <span class="btn-animated--hidden"><i class="bi bi-chat-dots"></i></span>
        </a>
        <span class="hstack gap-4">
          <a href="#" class="text-reset"><i class="bi bi-dribbble"></i></a>
          <a href="#" class="text-reset"><i class="bi bi-behance"></i></a>
          <a href="#" class="text-reset"><i class="bi bi-github"></i></a>
          <a href="#" class="text-reset"><i class="bi bi-linkedin"></i></a>
        </span>
      </div>
    </div>
  </div>
</section>

        
      

        
<!-- Header 6 -->
<section class="header-6" style="background-image: url('assets/images/header-6-bg.jpg');">
  <div class="container">
    <div class="inner text-center">
      <!-- Top title -->
      <div class="mb-4 py-4 px-lg-5 d-inline-block" style="background-color: rgba(68,25,90,0.30);">
        <h1 class="display-3 text-white">2022 Music Festival</h1>
        <p class="display-6 text-white">The greatest music festival of the year</p>
      </div>
      <!-- Bottom details -->
      <div class="d-flex justify-content-center flex-lg-row flex-column mb-5">
        <div class="datetime">
          <h2 class="date text-white mx-auto"><span class="day">10</span> <span class="month-year">JAN 2022</span></h2>
          <div class="time">8 AM - 10 PM</div>
        </div>
        <div class="location">
          <h2 class="text-white">Red Rocks Amphitheatre</h2>
          <span>Morrison, CO</span>
        </div>
        <div class="counter">
          <div class="timer" data-target="[2025, 12, 9, 20, 30]"></div>
        </div>
      </div>
      <!-- Buy button -->
      <a href="#tickets" class="btn btn-warning btn-icon-text btn-lg rounded-pill">
        <i class="bi bi-ticket-perferated"></i>
        <span class="text">Buy ticket</span>
      </a>
    </div>
  </div>
  <div class="color-overlay"></div>
</section>

        
      

          
<!-- Header 7 -->
<section class="header-7" style="background-image: url('assets/images/header-7-bg.jpg');">
  <div class="container">
    <div class="inner">
      <div class="row align-items-center">
        <!-- Left content -->
        <div class="col-lg-6 py-3">
          <span class="badge bg-info">Simple and fast process</span>
          <h2 class="display-3 text-white mt-2 mb-4">Flexible and easy loan for everyone</h2>
          <p class="fs-3 text-white mb-5">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
          <span class="fs-5">
            <i class="bi bi-arrow-down-circle text-white me-2"></i>
            <a href="#more" class="text-decoration-underline text-decoration-none-hover text-white">Learn more</a>
          </span>
        </div>
        <!-- Right form -->
        <div class="col-lg-4 offset-lg-2 py-3">
          <div class="card">
            <div class="card-body">
              <h2 class="text-center mb-4 h5">How much do you need?</h2>
              <form action="">
                <div class="mb-4">
                  <label class="sr-only">Amount</label>
                  <div class="input-group mb-3">
                    <span class="input-group-text">$</span>
                    <input type="number" class="form-control" value="500">
                  </div>
                </div>
                <div class="mb-4">
                  <input type="range" class="form-range" min="1" max="12" value="3">
                  <div class="d-flex justify-content-between">
                    <span class="form-text">1 month</span>
                    <span class="form-text">12 months</span>
                  </div>
                </div>
                <hr />
                <div class="mb-4">
                  <div class="row justify-content-between">
                    <div class="col-lg-6">
                      Terms of use
                    </div>
                    <div class="col-lg-6">
                      <span class="d-block text-end">12 months</span>
                    </div>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="row justify-content-between">
                    <div class="col-lg-6">
                      Monthly payment
                    </div>
                    <div class="col-lg-6">
                      <span class="d-block text-end">$1,234</span>
                    </div>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="row justify-content-between">
                    <div class="col-lg-6">
                      Total payback
                    </div>
                    <div class="col-lg-6">
                      <span class="d-block text-end">$234,000</span>
                    </div>
                  </div>
                </div>
                <button type="submit" class="btn btn-primary w-100">Apply for loan</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="color-overlay"></div>
</section>

          
        

          
<!-- Features 1 -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <div class="d-flex align-content-center flex-wrap h-100">
          <div class="d-flex my-4">
            <i class="bi bi-bootstrap display-6 text-primary"></i>
            <div class="ms-4">
              <h4 class="h5">Bootstrap 5</h4>
              <p class="lh-sm">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
          <div class="d-flex my-4">
            <i class="bi bi-columns-gap display-6 text-primary"></i>
            <div class="ms-4">
              <h4 class="h5">Elements</h4>
              <p class="lh-sm">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
          <div class="d-flex my-4">
            <i class="bi bi-cart-check display-6 text-primary"></i>
            <div class="ms-4">
              <h4 class="h5">eCommerce Ready</h4>
              <p class="lh-sm">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <img src="assets/images/content/app-mockup.png" class="d-block m-auto" alt="">
      </div>
      <div class="col-lg-4">
        <div class="d-flex align-content-center flex-wrap h-100">
          <div class="d-flex my-4">
            <i class="bi bi-palette display-6 text-primary"></i>
            <div class="ms-4">
              <h4 class="h5">Colors</h4>
              <p class="lh-sm">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
          <div class="d-flex my-4">
            <i class="bi bi-code-square display-6 text-primary"></i>
            <div class="ms-4">
              <h4 class="h5">Developer Friendly</h4>
              <p class="lh-sm">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
          <div class="d-flex my-4">
            <i class="bi bi-collection display-6 text-primary"></i>
            <div class="ms-4">
              <h4 class="h5">Pages</h4>
              <p class="lh-sm">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

        
<!-- Features 2 -->
<section class="features-2x page-section">
  <div class="container">
    <div class="row mb-5 gx-lg-5">
      <div class="col-md-4">
        <div class="mb-4">
          <span><i class="bi bi-bootstrap fs-4 text-primary"></i></span>
          <h3 class="h6 mt-3">Bootstrap 5</h3>
          <p class="text-muted mb-0">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="mb-4">
          <span><i class="bi bi-columns-gap fs-4 text-primary"></i></span>
          <h3 class="h6 mt-3">Elements</h3>
          <p class="text-muted mb-0">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="mb-4">
          <span><i class="bi bi-cart-check fs-4 text-primary"></i></span>
          <h3 class="h6 mt-3">eCommerce Ready</h3>
          <p class="text-muted mb-0">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
        </div>
      </div>
    </div>
  </div>
</section>

        
      

          
<!-- Features 3 -->
<section class="page-section">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-5 order-lg-1">
        <div class="mb-4">
          <img src="assets/images/content/14-600x450.png" class="img-fluid rounded-2" alt="">
        </div>
      </div>
      <div class="col-lg-6 order-lg-2">
        <span class="badge bg-warning">Build faster, sell early</span>
        <h3 class="h2 mt-2 mb-4">eCommerce Ready</h3>
        <p class="text-muted lead">Krait UI provides complete pages for online store development. Build your store in confident with pre-built pages and helpful documentation.</p>
        <a href="#" class="btn btn-primary rounded-pill btn-icon-text mt-5"><i class="bi bi-cart"></i> <span class="text">Purchase now</span></a>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Features 4 -->
<section class="page-section">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-5 order-lg-2">
        <div class="mb-4">
          <img src="assets/images/content/15-600x450.png" class="img-fluid rounded-2" alt="">
        </div>
      </div>
      <div class="col-lg-6 order-lg-1">
        <span class="badge bg-primary">Complete solution</span>
        <h3 class="h2 mt-2 mb-4">Admin and dashboard pages to manage your business</h3>
        <p class="text-muted lead">Don't worry about buying another template for admin/dashboard site, Krait UI got you covered.</p>
        <div class="row">
          <div class="col-sm-4">
            <div class="d-grid gap-2">
              <div><i class="bi bi-check2-square text-success me-2"></i> Dashboard</div>
              <div><i class="bi bi-check2-square text-success me-2"></i> Orders</div>
              <div><i class="bi bi-check2-square text-success me-2"></i> Products</div>
              <div><i class="bi bi-check2-square text-success me-2"></i> Add Product</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="d-grid gap-2">
              <div><i class="bi bi-check2-square text-success me-2"></i> Customer</div>
              <div><i class="bi bi-check2-square text-success me-2"></i> Add Customer</div>
              <div><i class="bi bi-check2-square text-success me-2"></i> Blog Posts</div>
              <div><i class="bi bi-check2-square text-success me-2"></i> and more...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Features 5 -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 py-4">
        <div class="mb-4">
          <img src="assets/images/content/feature-illustration-1.svg" class="img-fluid" alt="" />
        </div>
        <h4>Decentralized finance (DeFi)</h4>
        <p>Light be stars for said. Tree very brought and days, all. They're after subdue make own from light unto void.</p>
        <a href="#">Explore</a>
      </div>
      <div class="col-lg-4 py-4">
        <div class="mb-4">
          <img src="assets/images/content/feature-illustration-2.svg" class="img-fluid" alt="" />
        </div>
        <h4>Non-fungible tokens (NFTs)</h4>
        <p>Light be stars for said. Tree very brought and days, all. They're after subdue make own from light unto void.</p>
        <a href="#">Explore</a>
      </div>
      <div class="col-lg-4 py-4">
        <div class="mb-4">
          <img src="assets/images/content/feature-illustration-3.svg" class="img-fluid" alt="" />
        </div>
        <h4>Virtual goods</h4>
        <p>Light be stars for said. Tree very brought and days, all. They're after subdue make own from light unto void.</p>
        <a href="#">Explore</a>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Features 6 -->
<section class="page-section">
  <div class="container">
    <div class="swiper swiper-content">
      <div class="swiper-wrapper">
        <!-- Slide item -->
        <div class="swiper-slide">
          <div class="features-3">
            <div class="container">
              <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 order-lg-1">
                  <div class="mb-3">
                    <img src="assets/images/content/8-600x450.jpg" class="img-fluid rounded-2" alt="">
                  </div>
                </div>
                <div class="col-lg-6 order-lg-2">
                  <span class="badge bg-warning">LINE UP</span>
                  <h3 class="h2 mt-2 mb-4">Toothbrush Attack</h3>
                  <p class="text-muted lead">Dictum orci lacus. Faucibus pretium turpis nam urna. Etiam mattis parturient neque platea risus semper. Curae; feugiat lobortis sed nunc aenean aliquet nascetur non pulvinar accumsan vestibulum amet natoque urna.</p>
                  <a href="#" class="btn btn-outline-primary rounded-pill btn-sm btn-icon-text mt-5"><span class="text">Visit website</span> <i class="bi bi-box-arrow-up-right"></i> </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Slide item -->
        <div class="swiper-slide">
          <div class="features-3">
            <div class="container">
              <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 order-lg-1">
                  <div class="mb-3">
                    <img src="assets/images/content/9-600x450.jpg" class="img-fluid rounded-2" alt="">
                  </div>
                </div>
                <div class="col-lg-6 order-lg-2">
                  <span class="badge bg-warning">LINE UP</span>
                  <h3 class="h2 mt-2 mb-4">Fivedust</h3>
                  <p class="text-muted lead">Dictum orci lacus. Faucibus pretium turpis nam urna. Etiam mattis parturient neque platea risus semper. Curae; feugiat lobortis sed nunc aenean aliquet nascetur non pulvinar accumsan vestibulum amet natoque urna.</p>
                  <a href="#" class="btn btn-outline-primary rounded-pill btn-sm btn-icon-text mt-5"><span class="text">Visit website</span> <i class="bi bi-box-arrow-up-right"></i> </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Slide item -->
        <div class="swiper-slide">
          <div class="features-3">
            <div class="container">
              <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 order-lg-1">
                  <div class="mb-3">
                    <img src="assets/images/content/10-600x450.jpg" class="img-fluid rounded-2" alt="">
                  </div>
                </div>
                <div class="col-lg-6 order-lg-2">
                  <span class="badge bg-warning">LINE UP</span>
                  <h3 class="h2 mt-2 mb-4">Purely Blue</h3>
                  <p class="text-muted lead">Dictum orci lacus. Faucibus pretium turpis nam urna. Etiam mattis parturient neque platea risus semper. Curae; feugiat lobortis sed nunc aenean aliquet nascetur non pulvinar accumsan vestibulum amet natoque urna.</p>
                  <a href="#" class="btn btn-outline-primary rounded-pill btn-sm btn-icon-text mt-5"><span class="text">Visit website</span> <i class="bi bi-box-arrow-up-right"></i> </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation -->
      <div class="swiper-button-next bottom-right"></div>
      <div class="swiper-button-prev bottom-right"></div>
    </div>
  </div>
</section>

          
        

          
<!-- Features 7 -->
<section class="page-section bg-light bg-opacity-25">
  <div class="container">
    <div class="row py-5">
      <div class="col-lg-4 mb-4">
        <div class="card">
          <div class="text-center">
            <div class="px-4 py-5">
              <i class="bi bi-percent display-3 text-light"></i>
            </div>
            <div class="px-5 pb-5">
              <h4 class="h5 text-primary">Low rates</h4>
              <p class="lh-sm mb-0">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mb-4">
        <div class="card">
          <div class="text-center">
            <div class="px-4 py-5">
              <i class="bi bi-lightning-charge-fill display-3 text-light"></i>
            </div>
            <div class="px-5 pb-5">
              <h4 class="h5 text-primary">Fast process</h4>
              <p class="lh-sm mb-0">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mb-4">
        <div class="card">
          <div class="text-center">
            <div class="px-4 py-5">
              <i class="bi bi-ui-checks-grid display-3 text-light"></i>
            </div>
            <div class="px-5 pb-5">
              <h4 class="h5 text-primary">Flexibility</h4>
              <p class="lh-sm mb-0">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Features 8 -->
<section class="page-section">
  <div class="container">
    <div class="row gx-lg-5">
      <div class="col-lg-4">
        <div class="card text-center mb-3">
          <div class="card-body">
            <div class="py-3">
              <i class="fa fa-headset fs-1 text-primary"></i>
            </div>
            <div class="py-3">
              <h5 class="fs-18px">Help & Support</h5>
              <p class="text-muted mb-0">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
          <div class="card-footer">
            <a href="#">Get support <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card text-center mb-3">
          <div class="card-body">
            <div class="py-3">
              <i class="fa fa-bullhorn fs-1 text-primary"></i>
            </div>
            <div class="py-3">
              <h5 class="fs-18px">Marketing</h5>
              <p class="text-muted mb-0">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
          <div class="card-footer">
            <a href="#">Contact marketing <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card text-center mb-3">
          <div class="card-body">
            <div class="py-3">
              <i class="fa fa-newspaper fs-1 text-primary"></i>
            </div>
            <div class="py-3">
              <h5 class="fs-18px">Media & Press</h5>
              <p class="text-muted mb-0">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
          <div class="card-footer">
            <a href="#">Visit page <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Features 9 -->
<section class="page-section bg-light bg-opacity-10">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 py-2">
        <i class="bi bi-power fs-4 text-primary"></i>
        <h6 class="mt-2"><a href="#">Getting Started</a></h6>
        <p class="text-muted">Mus quisque dis sed sem risus ac posuere sagittis rhoncus.</p>
      </div>
      <div class="col-lg-4 py-2">
        <i class="bi bi-book fs-4 text-primary"></i>
        <h6 class="mt-2"><a href="#">Documentation</a></h6>
        <p class="text-muted">Mus quisque dis sed sem risus ac posuere sagittis rhoncus.</p>
      </div>
      <div class="col-lg-4 py-2">
        <i class="bi bi-journal-medical fs-4 text-primary"></i>
        <h6 class="mt-2"><a href="#">Reference</a></h6>
        <p class="text-muted">Mus quisque dis sed sem risus ac posuere sagittis rhoncus.</p>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Featured Post -->
<section class="header-inner-1 position-relative py-5">
  <!-- Decorative element -->
  <div class="position-absolute" style="top: 0;right: 17rem;">
    <svg width="610" height="618" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="strokeGradient">
          <stop stop-color="#FBDA61" offset="0%"/>
          <stop stop-color="#F76B1C" offset="100%"/>
        </linearGradient>
      </defs>
      <path d="M749.129 3200.872a59.944 59.944 0 0 0-.17 60.264c10.778 18.691 30.781 30.326 52.546 30.562h518.859c21.764-.236 41.768-11.87 52.546-30.562a59.944 59.944 0 0 0-.17-60.264l-259.43-428.093c-11.105-18.096-30.963-29.148-52.376-29.148-21.412 0-41.27 11.052-52.376 29.148l-259.43 428.093Z" transform="rotate(43 4280.733 780.142)" stroke="url(#strokeGradient)" stroke-width="7" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
  <!-- Post -->
  <div class="container">
    <div class="card">
      <div class="card-body p-5">
        <div class="row">
          <div class="col-lg-6 pe-lg-5">
            <span class="text-info d-block mb-2 fw-bold">Development</span>
            <h1 class="h2"><a href="" class="text-reset">A Step-by-Step Guide to Front-end Development</a></h1>
            <span class="text-muted">November 27, 2021</span>
            <div class="d-flex my-3">
              <span class="me-2">
                <img src="assets/images/content/people-1.jpg" alt="" class="img-fluid avatar rounded-circle">
              </span>
              <div>
                <span class="d-block">Jean Hawkins</span>
                <span class="text-muted">Engineer</span>
              </div>
            </div>
            <p class="fs-5">
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <div class="mb-4">
              <a href="#">Read more <i class="bi bi-arrow-right ms-1"></i></a>
            </div>
          </div>
          <div class="col-md-6">
            <span>
              <img src="assets/images/content/1-600x450.jpg" alt="" class="img-fluid rounded-2">
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Blog Post -->
<div class="container">
  <div class="py-5">
    <div class="row align-items-center">
      <div class="col-lg-9">
        <span class="text-info d-block mb-2 fw-bold">Products</span>
        <h1 class="h2"><a href="" class="text-reset">What I Wish I Knew a Year Ago About Application Design</a></h1>
        <span class="text-muted">November 27, 2021</span>
      </div>
      <div class="col-lg-auto">
        <div class="d-flex my-3">
          <span class="me-2">
            <img src="assets/images/content/people-1.jpg" alt="" class="img-fluid avatar rounded-circle">
          </span>
          <div>
            <span class="d-block">Jean Hawkins</span>
            <span class="text-muted">Engineer</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col-md-6 pe-5">
        <p class="fs-5">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <a href="#">Read more <i class="bi bi-arrow-right ms-1"></i></a>
      </div>
      <div class="col-md-6">
        <img src="assets/images/content/2-600x450.jpg" alt="" class="img-fluid rounded-2 shadow-lg w-75">
      </div>
    </div>
  </div>
</div>

          
        

          
<!-- Blog Posts -->
<section class="page-section">
  <div class="container">
    <h5 class="h6 text-center mb-5 text-muted">You may also like</h5>
    <div class="card-group gap-3">
      <div class="card mb-3">
        <img src="assets/images/content/3-600x450.jpg" class="card-img-top" alt="">
        <div class="card-body">
          <span class="badge bg-info mb-2">MARKETING</span>
          <h6 class="card-title"><a href="#" class="stretched-link text-reset">The worst advice you could ever get about marketing</a></h6>
        </div>
      </div>
      <div class="card mb-3">
        <img src="assets/images/content/1-600x450.jpg" class="card-img-top" alt="">
        <div class="card-body">
          <span class="badge bg-info mb-2">BUSINESS</span>
          <h6 class="card-title"><a href="#" class="stretched-link text-reset">Don't make this silly mistake with your manager</a></h6>
        </div>
      </div>
      <div class="card mb-3">
        <img src="assets/images/content/3-600x450.jpg" class="card-img-top" alt="">
        <div class="card-body">
          <span class="badge bg-info mb-2">MANAGEMENT</span>
          <h6 class="card-title"><a href="#" class="stretched-link text-reset">A Step-by-Step guide to development</a></h6>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Comments -->
<div class="container">
  <section class="page-section">
    <h4 class="mb-5">Comments</h4>
    <div>
      <!-- Comment item -->
      <div class="d-flex mb-5">
        <div class="flex-shrink-0">
          <img src="assets/images/content/people-5.jpg" alt="" class="avatar rounded-circle img-fluid">
        </div>
        <div class="flex-grow-1 ms-4">
          <div class="mb-2">
            <h5 class="h6 mb-0">Jean Hawkins</h5>
            <span class="text-muted small">December 2, 2021 </span>
          </div>
          <p class="fs-6">Est enim sapien, cursus nam mollis arcu erat vel facilisi augue molestie. Etiam facilisis conubia rhoncus vivamus fames nulla. Tempor dis augue ridiculus. Vitae dis erat risus vitae integer nullam.</p>
          <div class="hstack gap-3">
            <a href="#" class="text-muted"><i class="bi bi-reply fs-5"></i></a>
            <a href="#" class="text-muted"><i class="bi bi-heart"></i></a>
            <a href="#" class="text-muted"><i class="bi bi-share"></i></a>
          </div>
        </div>
      </div>
      <!-- Comment item -->
      <div class="d-flex mb-5">
        <div class="flex-shrink-0">
          <img src="assets/images/content/people-2.jpg" alt="" class="avatar rounded-circle img-fluid">
        </div>
        <div class="flex-grow-1 ms-4">
          <div class="mb-2">
            <h5 class="h6 mb-0">Jeremy Diaz</h5>
            <span class="text-muted small">December 2, 2021 </span>
          </div>
          <p class="fs-6">Est enim sapien, cursus nam mollis arcu erat vel facilisi augue molestie. Etiam facilisis conubia rhoncus vivamus fames nulla. Tempor dis augue ridiculus. Vitae dis erat risus vitae integer nullam.</p>
          <div class="hstack gap-3">
            <a href="#" class="text-muted"><i class="bi bi-reply fs-5"></i></a>
            <a href="#" class="text-muted"><i class="bi bi-heart"></i></a>
            <a href="#" class="text-muted"><i class="bi bi-share"></i></a>
          </div>
        </div>
      </div>
    </div>
    <!-- Pagination -->
    <nav class="nav">
      <ul class="pagination pagination-sm mx-auto">
        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>
  </section>
</div>

          
        

          
<!-- Testimonial 1 -->
<section class="page-section">
  <div class="container">
    <div class="swiper swiper-multiview">
      <div class="swiper-wrapper">
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="card box-shadow-lg">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div>
                  <img src="assets/images/content/people-1.jpg" class="img-fluid avatar rounded-circle" alt="" />
                </div>
                <div class="ms-3">
                  <h6 class="mb-0">Jean Hawkins</h6>
                  <small class="text-muted">CEO of Wonderful Company</small>
                </div>
              </div>
              <p class="mt-3 mb-0">
                This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
              </p>
            </div>
          </div>
        </div>
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="card box-shadow-lg">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div>
                  <img src="assets/images/content/people-2.jpg" class="img-fluid avatar rounded-circle" alt="" />
                </div>
                <div class="ms-3">
                  <h6 class="mb-0">Philip Brown</h6>
                  <small class="text-muted">CEO of Wonderful Company</small>
                </div>
              </div>
              <p class="mt-3 mb-0">
                This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
              </p>
            </div>
          </div>
        </div>
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="card box-shadow-lg">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div>
                  <img src="assets/images/content/people-3.jpg" class="img-fluid avatar rounded-circle" alt="" />
                </div>
                <div class="ms-3">
                  <h6 class="mb-0">Harold Willis</h6>
                  <small class="text-muted">CEO of Wonderful Company</small>
                </div>
              </div>
              <p class="mt-3 mb-0">
                This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
              </p>
            </div>
          </div>
        </div>
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="card box-shadow-lg">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div>
                  <img src="assets/images/content/people-4.jpg" class="img-fluid avatar rounded-circle" alt="" />
                </div>
                <div class="ms-3">
                  <h6 class="mb-0">Jeremy Diaz</h6>
                  <small class="text-muted">CEO of Wonderful Company</small>
                </div>
              </div>
              <p class="mt-3 mb-0">
                This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
              </p>
            </div>
          </div>
        </div>
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="card box-shadow-lg">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div>
                  <img src="assets/images/content/people-5.jpg" class="img-fluid avatar rounded-circle" alt="" />
                </div>
                <div class="ms-3">
                  <h6 class="mb-0">Anna Chavez</h6>
                  <small class="text-muted">CEO of Wonderful Company</small>
                </div>
              </div>
              <p class="mt-3 mb-0">
                This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
              </p>
            </div>
          </div>
        </div>
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="card box-shadow-lg">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div>
                  <img src="assets/images/content/people-6.jpg" class="img-fluid avatar rounded-circle" alt="" />
                </div>
                <div class="ms-3">
                  <h6 class="mb-0">Christopher Bailey</h6>
                  <small class="text-muted">CEO of Wonderful Company</small>
                </div>
              </div>
              <p class="mt-3 mb-0">
                This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- Slide Pagination -->
      <div class="mt-5 position-relative">
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Testimonial 2 -->
<section class="page-section">
  <div class="container">
    <div class="swiper swiper-multiview">
      <div class="swiper-wrapper">
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="mb-3">
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
          </div>
          <h6 class="mb-0">Reliable app</h6>
          <p class="mt-2 mb-0">
            This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
          </p>
        </div>
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="mb-3">
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-half text-warning"></i>
          </div>
          <h6 class="mb-0">Useful and easy to use</h6>
          <p class="mt-2 mb-0">
            This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
          </p>
        </div>
        <!-- Testimonial item -->
        <div class="swiper-slide p-4">
          <div class="mb-3">
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star"></i>
          </div>
          <h6 class="mb-0">Awesome support</h6>
          <p class="mt-2 mb-0">
            This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
          </p>
        </div>
      </div>
      <!-- Slider pagination -->
      <div class="mt-5 position-relative">
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Testimonial 3 -->
<section class="page-section">
  <div class="container">
    <div class="row row-cols-lg-3 row-cols-1 g-4">
      <!-- Testimonial item -->
      <div class="col">
        <div class="card box-shadow-lg">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div>
                <img src="assets/images/content/people-1.jpg" class="img-fluid avatar rounded-circle" alt="" />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Jean Hawkins</h6>
                <small class="text-muted">CEO of Wonderful Company</small>
              </div>
            </div>
            <p class="mt-3 mb-0">
              This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
            </p>
          </div>
        </div>
      </div>
      <!-- Testimonial item -->
      <div class="col">
        <div class="card box-shadow-lg">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div>
                <img src="assets/images/content/people-2.jpg" class="img-fluid avatar rounded-circle" alt="" />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Philip Brown</h6>
                <small class="text-muted">CEO of Wonderful Company</small>
              </div>
            </div>
            <p class="mt-3 mb-0">
              This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
            </p>
          </div>
        </div>
      </div>
      <!-- Testimonial item -->
      <div class="col">
        <div class="card box-shadow-lg">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div>
                <img src="assets/images/content/people-3.jpg" class="img-fluid avatar rounded-circle" alt="" />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Harold Willis</h6>
                <small class="text-muted">CEO of Wonderful Company</small>
              </div>
            </div>
            <p class="mt-3 mb-0">
              This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
            </p>
          </div>
        </div>
      </div>
      <!-- Testimonial item -->
      <div class="col">
        <div class="card box-shadow-lg">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div>
                <img src="assets/images/content/people-4.jpg" class="img-fluid avatar rounded-circle" alt="" />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Jeremy Diaz</h6>
                <small class="text-muted">CEO of Wonderful Company</small>
              </div>
            </div>
            <p class="mt-3 mb-0">
              This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
            </p>
          </div>
        </div>
      </div>
      <!-- Testimonial item -->
      <div class="col">
        <div class="card box-shadow-lg">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div>
                <img src="assets/images/content/people-5.jpg" class="img-fluid avatar rounded-circle" alt="" />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Anna Chavez</h6>
                <small class="text-muted">CEO of Wonderful Company</small>
              </div>
            </div>
            <p class="mt-3 mb-0">
              This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
            </p>
          </div>
        </div>
      </div>
      <!-- Testimonial item -->
      <div class="col">
        <div class="card box-shadow-lg">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div>
                <img src="assets/images/content/people-6.jpg" class="img-fluid avatar rounded-circle" alt="" />
              </div>
              <div class="ms-3">
                <h6 class="mb-0">Christopher Bailey</h6>
                <small class="text-muted">CEO of Wonderful Company</small>
              </div>
            </div>
            <p class="mt-3 mb-0">
              This is an awesome UI kit built with Bootstrap 5 to speed up your design and front-end development. Beautiful design, lots of components and developer friendly. Totally recommend it!
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- CTA 1 -->
<section class="bg-primary bg-gradient py-5">
  <div class="container">
    <div class="row py-3">
      <div class="col-lg-6">
        <h3 class="display-2 text-white">Join our growing ecosystem</h3>
      </div>
      <div class="col-lg-6">
        <p class="fs-4 text-white">Life from waters creature gathering Dry us kind fly moving fruitful god own. Created won't yielding be land female herb.</p>
        <a href="#" class="btn text-dark bg-white btn-icon-text">
          <span class="text">Meet the community</span> <i class="bi bi-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- CTA 2 -->
<section class="page-section">
  <div class="container">
    <div class="text-center mb-5">
      <h3 class="h6 text-muted">Take a step</h3>
      <p class="h2 w-lg-50 mx-auto mb-5">Nunc parturient commodo sollicitudin platea faucibus eros quam.</p>
      <a href="#" class="btn btn-primary btn-lg">Apply for loan</a>
    </div>
  </div>
</section>

          
        

          
<!-- CTA 3 -->
<section class="bg-light bg-opacity-25 py-5">
  <div class="container">
    <div class="row align-items-center justify-content-center py-3">
      <div class="col-lg-4">
        <h3 class="text-lg-end pe-5">Have questions in mind?</h3>
      </div>
      <div class="col-lg-4">
        <p>Lacus elementum nulla mi mattis dolor tempor. Nascetur pellentesque ad purus. Nonummy proin cum enim neque diam massa nunc porta.</p>
        <a href="#" class="btn btn-primary btn-icon-text btn-animated">
          <span class="btn-animated--shown">Contact us</span> <span class="btn-animated--hidden"><i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Contact 1 -->
<section class="page-section">
  <div class="container">
    <div class="mb-5 text-center">
      <h3>Send us your idea</h3>
      <p class="lead w-lg-50 m-auto">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
    </div>
    <div class="col-lg-8 offset-lg-2">
      <form class="m-auto">
        <div class="row">
          <div class="col-lg-6">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="firstNameValue" placeholder="Your first name">
              <label for="firstNameValue">First Name</label>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="lastNameValue" placeholder="Your last name">
              <label for="lastNameValue">Last Name</label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="emailValue" placeholder="Your email address">
              <label for="emailValue">Email address</label>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="phoneValue" placeholder="Your phone number">
              <label for="phoneValue">Phone number</label>
            </div>
          </div>
        </div>
        <div class="form-floating mb-3">
          <input type="text" class="form-control" id="subjectValue" placeholder="Subject">
          <label for="subjectValue">Subject</label>
        </div>
        <div class="form-floating mb-3">
          <textarea class="form-control" id="messageValue" style="height: 200px" placeholder="Tell us your idea"></textarea>
          <label for="messageValue">Tell us your idea</label>
        </div>
        <div class="text-center">
          <button type="submit" class="btn btn-primary btn-icon-text"><i class="bi bi-send-fill"></i> Send message</button>
        </div>
      </form>
    </div>
  </div>
</section>

          
        

          
<!-- Contact 2 -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <h2 class="display-2 fw-bold mb-5">Let's talk</h2>
        <p class="lead">Velit id litora ad praesent class laoreet torquent dignissim auctor pharetra nulla ullamcorper cum egestas curae; ultrices nulla eu suscipit suspendisse praesent. Habitasse, magnis adipiscing lacinia pede sapien etiam. Facilisis, magnis curabitur diam et metus. Lacus senectus venenatis eleifend hac.</p>
      </div>
      <div class="col-lg-7 offset-lg-1">
        <form>
          <div class="row">
            <div class="col-lg-6">
              <div class="form-floating mb-3">
                <input type="text" class="form-control" id="firstNameValue" placeholder="Your first name">
                <label for="firstNameValue">First Name</label>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-floating mb-3">
                <input type="text" class="form-control" id="lastNameValue" placeholder="Your last name">
                <label for="lastNameValue">Last Name</label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-6">
              <div class="form-floating mb-3">
                <input type="email" class="form-control" id="emailValue" placeholder="Your email address">
                <label for="emailValue">Email address</label>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-floating mb-3">
                <input type="text" class="form-control" id="phoneValue" placeholder="Your phone number">
                <label for="phoneValue">Phone number</label>
              </div>
            </div>
          </div>
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="subjectValue" placeholder="Subject">
            <label for="subjectValue">Subject</label>
          </div>
          <div class="form-floating mb-3">
            <textarea class="form-control" id="messageValue" style="height: 200px" placeholder="Tell us your idea"></textarea>
            <label for="messageValue">Tell us your idea</label>
          </div>
          <button type="submit" class="btn btn-primary btn-icon-text"><i class="bi bi-send-fill"></i> Send message</button>
        </form>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Job -->
<section class="page-section bg-light bg-opacity-25">
  <div class="container">
    <h2 class="mb-4 text-center">Apply for this job</h2>
    <form class="m-auto">
      <div class="row">
        <div class="col-lg-6">
          <div class="mb-3">
            <label for="firstNameValue" class="form-label">First name</label>
            <input type="text" class="form-control" id="firstNameValue" placeholder="Your first name">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mb-3">
            <label for="lastNameValue" class="form-label">Last name</label>
            <input type="text" class="form-control" id="lastNameValue" placeholder="Your last name">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6">
          <div class="mb-3">
            <label for="emailValue" class="form-label">Email address</label>
            <input type="email" class="form-control" id="emailValue" placeholder="Your email address">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mb-3">
            <label for="formFile" class="form-label">Upload resume</label>
            <input class="form-control" type="file" id="formFile">
          </div>
        </div>
      </div>
      <div class="mb-3">
        <label for="messageValue" class="form-label">Cover letter</label>
        <textarea class="form-control" id="messageValue" rows="7" placeholder="Write your cover letter"></textarea>
      </div>
      <div class="text-center">
        <button type="submit" class="btn btn-primary btn-icon-text"><i class="bi bi-send-fill"></i> Submit application</button>
      </div>
    </form>
  </div>
</section>

          
        

          
<!-- Comment -->
<section class="page-section">
  <div class="container">
    <h4 class="mb-5">Write comment</h4>
    <form class="m-auto">
      <div class="row">
        <div class="col-lg-6">
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Your name">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mb-3">
            <label for="emailValue" class="form-label">Email address</label>
            <input type="email" class="form-control" id="emailValue" placeholder="Your email address">
          </div>
        </div>
      </div>
      <div class="mb-3">
        <label for="messageValue" class="form-label">Comment</label>
        <textarea class="form-control" id="messageValue" rows="7" placeholder="What's on your mind?"></textarea>
      </div>
      <div class="text-center">
        <button type="submit" class="btn btn-primary btn-icon-text"><i class="bi bi-send-fill"></i> Submit comment</button>
      </div>
    </form>
  </div>
</section>

          
        

          
<!-- Address -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 offset-lg-2">
        <form action="">
          <div class="container">
            <div class="mb-3">
              <label class="form-label">Address Line 1</label>
              <input type="text" class="form-control">
            </div>
            <div class="mb-3">
              <label class="form-label">Address Line 2</label>
              <input type="text" class="form-control">
            </div>
            <div class="row">
              <div class="col-lg-6">
                <div class="mb-3">
                  <label class="form-label">Country</label>
                  <select class="select2 form-control" data-select2-placeholder="Select country">
                    <option></option>
                    <option value="AF">Afghanistan</option>
                    <option value="BS">Bahamas</option>
                    <option value="KH">Cambodia</option>
                    <option value="DK">Denmark</option>
                    <option value="TL">East Timor</option>
                    <option value="GM">Gambia</option>
                  </select>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="mb-3">
                  <label class="form-label">State</label>
                  <select class="select2 form-control" data-select2-placeholder="Select state">
                    <option></option>
                    <option value="AL">Alabama</option>
                    <option value="CA">California</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="KS">Kansas</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-6">
                <div class="mb-3">
                  <label class="form-label">City</label>
                  <select class="select2 form-control" data-select2-placeholder="Select city">
                    <option></option>
                    <option value="b">Bangkok</option>
                    <option value="d">Dubai</option>
                    <option value="h">Hong Kong</option>
                    <option value="k">Kuala Lumpur</option>
                    <option value="l">London</option>
                    <option value="n">New York City</option>
                    <option value="m">Macau</option>
                    <option value="p">Paris</option>
                  </select>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="mb-3">
                  <label class="form-label">ZIP code</label>
                  <input type="text" class="form-control">
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Supports -->
<header class="header-inner-1 text-center pb-0">
  <div class="container">
    <span class="text-muted">SUPPORTS</span>
    <h1>How can we help?</h1>
    <p class="lead w-lg-75 mx-auto">Aliquet porta at nec lorem primis, sagittis habitant nonummy aenean.</p>
    <div class="position-relative w-lg-75 mx-auto mb-3">
      <span class="position-absolute start-0 top-50 translate-middle-y ms-3"><i class="bi bi-search fs-5"></i></span>
      <input class="form-control form-control-lg px-5 " type="text" placeholder="Search your question...">
    </div>
    <p class="small">Popular searches: <a href="#">Tracking my order delivery</a>, <a href="#">Check order status</a></p>
  </div>
</header>

          
        

          
<!-- Subscribe -->
<section class="bg-light bg-opacity-25 py-5">
  <div class="container">
    <div class="mb-4 text-center">
      <h3>Get weekly updates</h3>
      <p class="lead w-lg-50 m-auto">Stay updated with our latest blog posts and news.</p>
    </div>
    <div class="input-group flex-nowrap w-lg-50 m-auto">
      <input type="text" class="form-control" placeholder="Your email address">
      <button class="btn btn-primary" type="button">Subscribe</button>
    </div>
  </div>
</section>

          
        

          
<!-- Gallery -->
<div class="row gx-0">
  <div class="col-lg-6">
    <img src="assets/images/content/gallery/moment-4-wide.jpg"alt="" class="img-fluid img-fit-cover">
  </div>
  <div class="col-lg-3">
    <img src="assets/images/content/gallery/moment-1.jpg" alt="" class="img-fluid img-fit-cover">
  </div>
  <div class="col-lg-3">
    <img src="assets/images/content/gallery/moment-2.jpg" alt="" class="img-fluid img-fit-cover">
  </div>
  <div class="col-lg-3">
    <img src="assets/images/content/gallery/moment-3.jpg" alt="" class="img-fluid img-fit-cover">
  </div>
  <div class="col-lg-6">
    <img src="assets/images/content/gallery/moment-5-wide.jpg" alt="" class="img-fluid img-fit-cover">
  </div>
  <div class="col-lg-3">
    <div class="d-flex align-content-center flex-wrap h-100 p-5 bg-dark text-white">
      <h4 class="text-white">Experience your moments</h4>
      <p class="mb-4">Nullam proin vestibulum congue Tortor dapibus metus feugiat. Nonummy convallis nam auctor mauris elit, dictumst.</p>
      <a href="#tickets" class="btn btn-warning btn-icon-text rounded-pill">
        <i class="bi bi-ticket-perferated"></i>
        <span class="text">Buy ticket</span>
      </a>
    </div>
  </div>
</div>

          
        

          
<!-- Gallery 2 -->
<section class="page-section bg-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-4">
        <h3 class="text-center text-lg-left">App screenshots</h3>
        <p class="text-center ead">Beautiful design, lots of components and developer friendly.</p>
        <div class="mt-5 vstack gap-3">
          <a href="#" class="btn btn-app-store text-white bg-dark text-start lh-1 mx-auto" style="width: 17rem;">
            <span class="d-flex align-items-center justify-content-center">
              <span class="display-5 me-3"><i class="fab fa-apple"></i></span>
              <span>
                Available on the <span class="d-block fs-3">App Store</span>
              </span>
            </span>
          </a>
          <a href="#" class="btn btn-app-store text-white bg-dark text-start lh-1 mx-auto" style="width: 17rem;">
            <span class="d-flex align-items-center justify-content-center">
              <span class="display-5 me-3"><i class="fab fa-google-play"></i></span>
              <span>
                GET IT ON <span class="d-block fs-3">Google Play</span>
              </span>
            </span>
          </a>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="swiper swiper-centered-auto" style="width: 100%; height: 100%;">
          <div class="swiper-wrapper">
            <div class="swiper-slide p-2 text-center">
              <img src="assets/images/content/app-mockup.png" alt="">
            </div>
            <div class="swiper-slide p-2 text-center">
              <img src="assets/images/content/app-mockup.png" alt="">
            </div>
            <div class="swiper-slide p-2 text-center">
              <img src="assets/images/content/app-mockup.png" alt="">
            </div>
            <div class="swiper-slide p-2 text-center">
              <img src="assets/images/content/app-mockup.png" alt="">
            </div>
            <div class="swiper-slide p-2 text-center">
              <img src="assets/images/content/app-mockup.png" alt="">
            </div>
          </div>
          <div class="mt-5 position-relative">
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Product Images -->
<div class="col-lg-4 offset-lg-4">
  <div class="gallery-image-zoom mb-4">
    <img src="assets/images/content/1-800x800.jpg" alt="" class="img-fluid img-zoom">
    <div id="gallery" class="d-flex">
      <a class="me-2 p-1 border rounded-1" href="#" data-image="../../assets/images/content/1-800x800.jpg" data-zoom-image="../../assets/images/content/1-800x800.jpg">
        <img src="assets/images/content/1-800x800.jpg" width="50"/>
      </a>
      <a class="me-2 p-1" href="#" data-image="../../assets/images/content/2-800x800.jpg" data-zoom-image="../../assets/images/content/2-800x800.jpg">
        <img src="assets/images/content/2-800x800.jpg" width="50"/>
      </a>
    </div>
  </div>
</div>

          
        

          
<!-- Works -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="card bg-dark bg-primary-hover transition-all text-white mb-4">
          <img src="assets/images/content/6-800x600.jpeg" class="card-img opacity-25" alt="">
          <div class="card-img-overlay p-5 w-lg-75 d-flex flex-column justify-content-end">
            <h3 class="card-title text-white">Workbench and tools</h3>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            <span><a href="#" class="btn btn-xs btn-secondary">Read more <i class="bi bi-arrow-right"></i></a></span>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="card bg-dark bg-primary-hover transition-all text-white mb-4">
          <img src="assets/images/content/9-800x600.jpeg" class="card-img opacity-25" alt="">
          <div class="card-img-overlay p-5 w-lg-75 d-flex flex-column justify-content-end">
            <h3 class="card-title text-white">Workspace</h3>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            <span><a href="#" class="btn btn-xs btn-secondary">Read more <i class="bi bi-arrow-right"></i></a></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Product Slider -->
<section class="page-section">
  <div class="container">
    <h2 class="h5 pb-5 text-center">Best Sellers</h2>
    <div class="swiper swiper-products">
      <div class="swiper-wrapper">
        <div class="swiper-slide px-4">
          <div class="card text-center">
            <div class="py-5 px-4">
              <img src="assets/images/content/1-185x160.png" alt="" class="img-fluid mb-4">
              <h3 class="fs-6 text-truncate"><a href="#" class="stretched-link text-reset">Smartphone 5G Black 12GB RAM+512GB NEW</a></h3>
              <span class="text-success">$799.00</span>
            </div>
          </div>
        </div>
        <div class="swiper-slide px-4">
          <div class="card text-center position-relative">
            <div class="py-5 px-4">
              <img src="assets/images/content/2-185x160.png" alt="" class="img-fluid mb-4">
              <h3 class="fs-6 text-truncate"><a href="#" class="stretched-link text-reset">Wireless Headphones with Noise Cancellation Tru Bass Bluetooth HiFi</a></h3>
              <span class="text-success">$250.00</span> <del class="text-muted">$250</del>
            </div>
            <div class="bg-danger text-white small position-absolute end-0 top-0 px-2 py-2 lh-1 text-center">
              <span class="d-block">25%</span>
              <span class="d-block">OFF</span>
            </div>
          </div>
        </div>
        <div class="swiper-slide px-4">
          <div class="card text-center">
            <div class="py-5 px-4">
              <img src="assets/images/content/3-185x160.png" alt="" class="img-fluid mb-4">
              <h3 class="fs-6 text-truncate"><a href="#" class="stretched-link text-reset">Smartwatch IP68 Waterproof GPS and Bluetooth Support</a></h3>
              <span class="text-success">$29.00</span>
            </div>
          </div>
        </div>
        <div class="swiper-slide px-4">
          <div class="card text-center">
            <div class="py-5 px-4">
              <img src="assets/images/content/4-185x160.png" alt="" class="img-fluid mb-4">
              <h3 class="fs-6 text-truncate"><a href="#" class="stretched-link text-reset">Men's Running Shoes</a></h3>
              <span class="text-success">$110.00</span>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-next translate-middle-y"></div>
      <div class="swiper-button-prev translate-middle-y"></div>
    </div>
  </div>
</section>

          
        

          
<!-- Reviews -->
<section>
  <h2 class="h5 mb-3">Customer Reviews (34)</h2>
  <!-- Rating stars -->
  <div class="mb-3">
    <span class="me-2">
      <i class="bi bi-star-fill fs-5 text-warning"></i>
      <i class="bi bi-star-fill fs-5 text-warning"></i>
      <i class="bi bi-star-fill fs-5 text-warning"></i>
      <i class="bi bi-star-fill fs-5 text-warning"></i>
      <i class="bi bi-star-half fs-5 text-warning"></i>
    </span>
    <strong class="text-dark">4.6 out of 5</strong>
  </div>
  <!-- Rating details -->
  <div class="mb-4">
    <div class="row align-items-center mb-2">
      <div class="col-3 col-lg-2">
        5 stars
      </div>
      <div class="col-7 col-lg-8">
        <div class="progress" style="height: 30px;">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="col-2 text-end">
        80%
      </div>
    </div>
    <div class="row align-items-center mb-2">
      <div class="col-3 col-lg-2">
        4 stars
      </div>
      <div class="col-7 col-lg-8">
        <div class="progress" style="height: 30px;">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 11%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="col-2 text-end">
        11%
      </div>
    </div>
    <div class="row align-items-center mb-2">
      <div class="col-3 col-lg-2">
        3 stars
      </div>
      <div class="col-7 col-lg-8">
        <div class="progress" style="height: 30px;">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 4%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="col-2 text-end">
        4%
      </div>
    </div>
    <div class="row align-items-center mb-2">
      <div class="col-3 col-lg-2">
        2 stars
      </div>
      <div class="col-7 col-lg-8">
        <div class="progress" style="height: 30px;">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 2%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="col-2 text-end">
        2%
      </div>
    </div>
    <div class="row align-items-center mb-2">
      <div class="col-3 col-lg-2">
        1 star
      </div>
      <div class="col-7 col-lg-8">
        <div class="progress" style="height: 30px;">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 3%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <div class="col-2 text-end">
        3%
      </div>
    </div>
  </div>
  <!-- Review comments -->
  <ul class="list-group list-group-flush mb-4">
    <li class="list-group-item py-4 px-0">
      <div class="row">
        <div class="col-6">
          <div class="d-flex align-items-center mb-2">
            <div class="me-2">
              <img src="assets/images/content/people-2.jpg" class="img-fluid avatar rounded-circle" alt="" />
            </div>
            <h6 class="mb-0">Philip Brown</h6>
          </div>
        </div>
        <div class="col-6 text-end">
          <div>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-half text-warning"></i>
          </div>
          <small class="text-muted">Today</small>
        </div>
      </div>
      <div>
        <p class="small">Blandit lacus semper dignissim id orci. Nam phasellus penatibus tortor sapien urna risus ac eleifend hac habitant malesuada magna elit lacus massa accumsan aenean tempor mus arcu odio tellus. Nisl.</p>
      </div>
      <div class="small">
        <span>245 people find this helpful</span>
        <div class="hstack gap-3 mt-2">
          <a href="#">Helpful</a>
          <div class="vr"></div>
          <a href="" class="text-reset">Report</a>
        </div>
      </div>
    </li>
    <li class="list-group-item py-4 px-0">
      <div class="row">
        <div class="col-6">
          <div class="d-flex align-items-center mb-2">
            <div class="me-2">
              <img src="assets/images/content/people-1.jpg" class="img-fluid avatar rounded-circle" alt="" />
            </div>
            <h6 class="mb-0">Jenny</h6>
          </div>
        </div>
        <div class="col-6 text-end">
          <div>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-fill text-warning"></i>
            <i class="bi bi-star-half text-warning"></i>
          </div>
          <small class="text-muted">October 22, 2021</small>
        </div>
      </div>
      <div>
        <p class="small">Blandit lacus semper dignissim id orci. Nam phasellus penatibus tortor sapien urna risus ac eleifend hac habitant malesuada magna elit lacus massa accumsan aenean tempor mus arcu odio tellus. Nisl.</p>
      </div>
      <div class="small">
        <span>98 people find this helpful</span>
        <div class="hstack gap-3 mt-2">
          <a href="#">Helpful</a>
          <div class="vr"></div>
          <a href="" class="text-reset">Report</a>
        </div>
      </div>
    </li>
  </ul>
  <!-- Pagination -->
  <nav class="nav">
    <ul class="pagination pagination-sm mx-auto">
      <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
</section>

          
        

          
<!-- Payment -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-7 offset-lg-3">
        <div class="accordion" id="accordionPayment">
          <div class="accordion-item mb-3">
            <h2 class="h5 px-4 py-3 accordion-header d-flex justify-content-between align-items-center">
              <div class="form-check w-100" data-bs-toggle="collapse" data-bs-target="#collapseCC">
                <input class="form-check-input" type="radio" name="payment" id="payment1">
                <label class="form-check-label pt-2" for="payment1">
                  Credit Card
                </label>
              </div>
              <span>
                <svg width="34" height="25" xmlns="http://www.w3.org/2000/svg">
                  <g fill-rule="nonzero" fill="#333840">
                    <path d="M29.418 2.083c1.16 0 2.101.933 2.101 2.084v16.666c0 1.15-.94 2.084-2.1 2.084H4.202A2.092 2.092 0 0 1 2.1 20.833V4.167c0-1.15.941-2.084 2.102-2.084h25.215ZM4.203 0C1.882 0 0 1.865 0 4.167v16.666C0 23.135 1.882 25 4.203 25h25.215c2.321 0 4.203-1.865 4.203-4.167V4.167C33.62 1.865 31.739 0 29.418 0H4.203Z"/>
                    <path d="M4.203 7.292c0-.576.47-1.042 1.05-1.042h4.203c.58 0 1.05.466 1.05 1.042v2.083c0 .575-.47 1.042-1.05 1.042H5.253c-.58 0-1.05-.467-1.05-1.042V7.292Zm0 6.25c0-.576.47-1.042 1.05-1.042H15.76c.58 0 1.05.466 1.05 1.042 0 .575-.47 1.041-1.05 1.041H5.253c-.58 0-1.05-.466-1.05-1.041Zm0 4.166c0-.575.47-1.041 1.05-1.041h2.102c.58 0 1.05.466 1.05 1.041 0 .576-.47 1.042-1.05 1.042H5.253c-.58 0-1.05-.466-1.05-1.042Zm6.303 0c0-.575.47-1.041 1.051-1.041h2.101c.58 0 1.051.466 1.051 1.041 0 .576-.47 1.042-1.05 1.042h-2.102c-.58 0-1.05-.466-1.05-1.042Zm6.304 0c0-.575.47-1.041 1.051-1.041h2.101c.58 0 1.05.466 1.05 1.041 0 .576-.47 1.042-1.05 1.042h-2.101c-.58 0-1.05-.466-1.05-1.042Zm6.304 0c0-.575.47-1.041 1.05-1.041h2.102c.58 0 1.05.466 1.05 1.041 0 .576-.47 1.042-1.05 1.042h-2.101c-.58 0-1.05-.466-1.05-1.042Z"/>
                  </g>
                </svg>
              </span>
            </h2>
            <div id="collapseCC" class="accordion-collapse collapse" data-bs-parent="#accordionPayment">
              <div class="accordion-body">
                <div class="mb-3">
                  <label class="form-label">Card Number</label>
                  <input type="text" class="form-control" placeholder="">
                </div>
                <div class="row">
                  <div class="col-lg-6">
                    <div class="mb-3">
                      <label class="form-label">Name on card</label>
                      <input type="text" class="form-control" placeholder="">
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="mb-3">
                      <label class="form-label">Expiry date</label>
                      <input type="text" class="form-control" placeholder="MM/YY">
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="mb-3">
                      <label class="form-label">CVV Code</label>
                      <input type="password" class="form-control">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="accordion-item mb-3 border">
            <h2 class="h5 px-4 py-3 accordion-header d-flex justify-content-between align-items-center">
              <div class="form-check w-100" data-bs-toggle="collapse" data-bs-target="#collapsePP">
                <input class="form-check-input" type="radio" name="payment" id="payment2">
                <label class="form-check-label pt-2" for="payment2">
                  PayPal
                </label>
              </div>
              <span>
                <svg width="103" height="25" xmlns="http://www.w3.org/2000/svg">
                  <g fill="none" fill-rule="evenodd">
                    <path d="M8.962 5.857h7.018c3.768 0 5.187 1.907 4.967 4.71-.362 4.627-3.159 7.187-6.87 7.187h-1.872c-.51 0-.852.337-.99 1.25l-.795 5.308c-.052.344-.233.543-.505.57h-4.41c-.414 0-.561-.317-.452-1.003L7.74 6.862c.105-.68.478-1.005 1.221-1.005Z" fill="#009EE3"/>
                    <path d="M39.431 5.542c2.368 0 4.553 1.284 4.254 4.485-.363 3.805-2.4 5.91-5.616 5.919h-2.81c-.404 0-.6.33-.705 1.005l-.543 3.455c-.082.522-.35.779-.745.779h-2.614c-.416 0-.561-.267-.469-.863l2.158-13.846c.106-.68.362-.934.827-.934h6.263Zm-4.257 7.413h2.129c1.331-.051 2.215-.973 2.304-2.636.054-1.027-.64-1.763-1.743-1.757l-2.003.009-.687 4.384Zm15.618 7.17c.239-.217.482-.33.447-.062l-.085.642c-.043.335.089.512.4.512h2.323c.391 0 .581-.157.677-.762l1.432-8.982c.072-.451-.039-.672-.38-.672H53.05c-.23 0-.343.128-.402.48l-.095.552c-.049.288-.18.34-.304.05-.433-1.026-1.538-1.486-3.08-1.45-3.581.074-5.996 2.793-6.255 6.279-.2 2.696 1.732 4.813 4.279 4.813 1.848 0 2.674-.543 3.605-1.395l-.007-.005Zm-1.946-1.382c-1.542 0-2.616-1.23-2.393-2.738.223-1.507 1.665-2.737 3.206-2.737 1.542 0 2.616 1.23 2.394 2.737-.223 1.508-1.664 2.738-3.207 2.738Zm11.685-7.971h-2.355c-.486 0-.683.362-.53.808l2.925 8.561-2.868 4.075c-.241.34-.054.65.284.65h2.647a.81.81 0 0 0 .786-.386l8.993-12.898c.277-.397.147-.814-.308-.814H67.6c-.43 0-.602.17-.848.527l-3.75 5.435-1.676-5.447c-.098-.33-.342-.511-.793-.511h-.002Z" fill="#113984"/>
                    <path d="M79.768 5.542c2.368 0 4.553 1.284 4.254 4.485-.363 3.805-2.4 5.91-5.616 5.919h-2.808c-.404 0-.6.33-.705 1.005l-.543 3.455c-.082.522-.35.779-.745.779h-2.614c-.417 0-.562-.267-.47-.863l2.162-13.85c.107-.68.362-.934.828-.934h6.257v.004Zm-4.257 7.413h2.128c1.332-.051 2.216-.973 2.305-2.636.054-1.027-.64-1.763-1.743-1.757l-2.004.009-.686 4.384Zm15.618 7.17c.239-.217.482-.33.447-.062l-.085.642c-.044.335.089.512.4.512h2.323c.391 0 .581-.157.677-.762l1.431-8.982c.073-.451-.038-.672-.38-.672h-2.55c-.23 0-.343.128-.403.48l-.094.552c-.049.288-.181.34-.304.05-.433-1.026-1.538-1.486-3.08-1.45-3.582.074-5.997 2.793-6.256 6.279-.199 2.696 1.732 4.813 4.28 4.813 1.847 0 2.673-.543 3.604-1.395l-.01-.005Zm-1.944-1.382c-1.542 0-2.616-1.23-2.393-2.738.222-1.507 1.665-2.737 3.206-2.737 1.542 0 2.616 1.23 2.393 2.737-.223 1.508-1.665 2.738-3.206 2.738Zm10.712 2.489h-2.681a.317.317 0 0 1-.328-.362l2.355-14.92a.462.462 0 0 1 .445-.363h2.682a.317.317 0 0 1 .327.362l-2.355 14.92a.462.462 0 0 1-.445.367v-.004Z" fill="#009EE3"/>
                    <path d="M4.572 0h7.026c1.978 0 4.326.063 5.895 1.45 1.049.925 1.6 2.398 1.473 3.985-.432 5.364-3.64 8.37-7.944 8.37H7.558c-.59 0-.98.39-1.147 1.449l-.967 6.159c-.064.399-.236.634-.544.663H.565c-.48 0-.65-.362-.525-1.163L3.156 1.17C3.28.377 3.717 0 4.572 0Z" fill="#113984"/>
                    <path d="m6.513 14.629 1.226-7.767c.107-.68.48-1.007 1.223-1.007h7.018c1.161 0 2.102.181 2.837.516-.705 4.776-3.793 7.428-7.837 7.428H7.522c-.464.002-.805.234-1.01.83Z" fill="#172C70"/>
                  </g>
                </svg>
              </span>
            </h2>
            <div id="collapsePP" class="accordion-collapse collapse" data-bs-parent="#accordionPayment">
              <div class="accordion-body">
                <div class="px-2 col-lg-6 mb-3">
                  <label class="form-label">Email address</label>
                  <input type="email" class="form-control">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Pricing -->
<section class="page-section">
  <div class="container">
    <div class="mb-5 text-center">
      <h3>Tickets</h3>
      <p class="lead w-lg-50 m-auto">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
    </div>
    <div class="row gx-lg-5">
      <!-- Pricing item -->
      <div class="col-lg-4">
        <div class="card mb-3">
          <div class="card-body text-center py-5">
            <div class="d-flex align-items-center justify-content-center fs-1 rounded-circle bg-light bg-opacity-25 mx-auto mb-4" style="width: 7rem; height: 7rem;">
              <i class="bi bi-ticket"></i>
            </div>
            <h4 class="h5">Festival</h4>
            <p class="display-3 text-primary">$49</p>
            <p class="mb-5 px-4">Tristique aptent duis magnis. Phasellus suscipit vel primis parturient nascetur interdum ornare.</p>
            <button class="btn btn-warning rounded-pill">Buy ticket</button>
          </div>
        </div>
      </div>
      <!-- Pricing item -->
      <div class="col-lg-4">
        <div class="card mb-3">
          <div class="card-body text-center py-5">
            <div class="d-flex align-items-center justify-content-center fs-1 rounded-circle bg-light bg-opacity-25 mx-auto mb-4" style="width: 7rem; height: 7rem;">
              <i class="bi bi-ticket-perferated"></i>
            </div>
            <h4 class="h5">Tribune</h4>
            <p class="display-3 text-primary">$79</p>
            <p class="mb-5 px-4">Tristique aptent duis magnis. Phasellus suscipit vel primis parturient nascetur interdum ornare.</p>
            <button class="btn btn-warning rounded-pill">Buy ticket</button>
          </div>
        </div>
      </div>
      <!-- Pricing item -->
      <div class="col-lg-4">
        <div class="card mb-3">
          <div class="card-body text-center py-5">
            <div class="d-flex align-items-center justify-content-center fs-1 rounded-circle bg-light bg-opacity-25 mx-auto mb-4" style="width: 7rem; height: 7rem;">
              <i class="bi bi-ticket-detailed"></i>
            </div>
            <h4 class="h5">VIP</h4>
            <p class="display-3 text-primary">$99</p>
            <p class="mb-5 px-4">Tristique aptent duis magnis. Phasellus suscipit vel primis parturient nascetur interdum ornare.</p>
            <button class="btn btn-warning rounded-pill">Buy ticket</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Team -->
<section class="page-section">
  <div class="container">
    <div class="row gx-lg-5">
      <div class="col-lg-4">
        <div class="card mb-5">
          <img src="assets/images/content/people-2.jpg" class="card-img-top" alt="">
          <div class="card-body text-center">
            <h5 class="card-title">Philip Brown</h5>
            <span>CEO</span>
            <div class="hstack gap-4 justify-content-center mt-4">
              <a href="#"><i class="bi bi-twitter text-muted"></i></a>
              <a href="#"><i class="bi bi-github text-muted"></i></a>
              <a href="#"><i class="bi bi-linkedin text-muted"></i></a>
              <a href="#"><i class="bi bi-dribbble text-muted"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card mb-5">
          <img src="assets/images/content/people-1.jpg" class="card-img-top" alt="">
          <div class="card-body text-center">
            <h5 class="card-title">Jean Hawkins</h5>
            <span>CTO</span>
            <div class="hstack gap-4 justify-content-center mt-4">
              <a href="#"><i class="bi bi-twitter text-muted"></i></a>
              <a href="#"><i class="bi bi-github text-muted"></i></a>
              <a href="#"><i class="bi bi-linkedin text-muted"></i></a>
              <a href="#"><i class="bi bi-dribbble text-muted"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card mb-5">
          <img src="assets/images/content/people-3.jpg" class="card-img-top" alt="">
          <div class="card-body text-center">
            <h5 class="card-title">Jeremy Diaz</h5>
            <span>Product Director</span>
            <div class="hstack gap-4 justify-content-center mt-4">
              <a href="#"><i class="bi bi-twitter text-muted"></i></a>
              <a href="#"><i class="bi bi-github text-muted"></i></a>
              <a href="#"><i class="bi bi-linkedin text-muted"></i></a>
              <a href="#"><i class="bi bi-dribbble text-muted"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Jobs -->
<section class="page-section">
  <div class="container">
    <div class="card mb-3">
      <div class="card-body">
        <div class="d-flex flex-column flex-lg-row">
          <span class="avatar avatar-text rounded-3 me-4 mb-2">FD</span>
          <div class="row flex-fill">
            <div class="col-sm-5">
              <h4 class="h5">Junior Frontend Developer</h4>
              <span class="badge bg-secondary">WORLDWIDE</span> <span class="badge bg-success">$60K - $100K</span>
            </div>
            <div class="col-sm-4 py-2">
              <span class="badge bg-secondary">REACT</span>
              <span class="badge bg-secondary">NODE</span>
              <span class="badge bg-secondary">TYPESCRIPT</span>
              <span class="badge bg-secondary">JUNIOR</span>
            </div>
            <div class="col-sm-3 text-lg-end">
              <a href="#" class="btn btn-primary stretched-link">Apply</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="card-body">
        <div class="d-flex flex-column flex-lg-row">
          <span class="avatar avatar-text rounded-3 me-4 bg-warning mb-2">BE</span>
          <div class="row flex-fill">
            <div class="col-sm-5">
              <h4 class="h5">Senior Backend Engineer</h4>
              <span class="badge bg-secondary">US</span> <span class="badge bg-success">$90K - $180K</span>
            </div>
            <div class="col-sm-4 py-2">
              <span class="badge bg-secondary">GOLANG</span>
              <span class="badge bg-secondary">SENIOR</span>
              <span class="badge bg-secondary">ENGINEER</span>
              <span class="badge bg-secondary">BACKEND</span>
            </div>
            <div class="col-sm-3 text-lg-end">
              <a href="#" class="btn btn-primary stretched-link">Apply</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="card-body">
        <div class="d-flex flex-column flex-lg-row">
          <span class="avatar avatar-text rounded-3 me-4 bg-info mb-2">PM</span>
          <div class="row flex-fill">
            <div class="col-sm-5">
              <h4 class="h5">Director of Product Marketing</h4>
              <span class="badge bg-secondary">WORLDWIDE</span> <span class="badge bg-success">$150K - $210K</span>
            </div>
            <div class="col-sm-4 py-2">
              <span class="badge bg-secondary">PRODUCT MARKETING</span>
              <span class="badge bg-secondary">MARKETING</span>
              <span class="badge bg-secondary">EXECUTIVE</span>
              <span class="badge bg-secondary">ECOMMERCE</span>
            </div>
            <div class="col-sm-3 text-lg-end">
              <a href="#" class="btn btn-primary stretched-link">Apply</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Clients -->
<section class="page-section-sm">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-2 col-md-3 col-5 text-center py-3">
        <img src="assets/images/content/client-airbnb.png" alt="">
      </div>
      <div class="col-lg-2 col-md-3 col-5 text-center py-3">
        <img src="assets/images/content/client-netflix.png" alt="">
      </div>
      <div class="col-lg-2 col-md-3 col-5 text-center py-3">
        <img src="assets/images/content/client-paypal.png" alt="">
      </div>
      <div class="col-lg-2 col-md-3 col-5 text-center py-3">
        <img src="assets/images/content/client-reddit.png" alt="">
      </div>
      <div class="col-lg-2 col-md-3 col-5 text-center py-3">
        <img src="assets/images/content/client-spotify.png" alt="">
      </div>
      <div class="col-lg-2 col-md-3 col-5 text-center py-3">
        <img src="assets/images/content/client-stripe.png" alt="">
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Stat -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 py-3">
        <div class="text-center">
          <span class="icon-wrapper text-white rounded-circle p-2 bg-success bg-gradient m-auto mb-3">
            <i class="bi bi-briefcase-fill"></i>
          </span>
          <span class="d-block display-6 text-dark">54</span>
          <span class="d-block text-muted fs-5">Completed Projects</span>
        </div>
      </div>
      <div class="col-lg-3 py-3">
        <div class="text-center">
          <span class="icon-wrapper text-white rounded-circle p-2 bg-warning bg-gradient m-auto mb-3">
            <i class="bi bi-people-fill"></i>
          </span>
          <span class="d-block display-6 text-dark">27</span>
          <span class="d-block text-muted fs-5">Satisfied Clients</span>
        </div>
      </div>
      <div class="col-lg-3 py-3">
        <div class="text-center">
          <span class="icon-wrapper text-white rounded-circle p-2 bg-dark bg-gradient m-auto mb-3">
            <i class="bi bi-arrow-up-right"></i>
          </span>
          <span class="d-block display-6 text-dark">35%</span>
          <span class="d-block text-muted fs-5">Growth Rate</span>
        </div>
      </div>
      <div class="col-lg-3 py-3">
        <div class="text-center">
          <span class="icon-wrapper text-white rounded-circle p-2 bg-danger bg-gradient m-auto mb-3">
            <i class="bi bi-cloud-download-fill"></i>
          </span>
          <span class="d-block display-6 text-dark">986+</span>
          <span class="d-block text-muted fs-5">Downloads</span>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Stat 2 -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 offset-lg-4">
        <div class="vstack gap-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <span class="icon-wrapper text-white rounded-circle p-2 bg-warning bg-gradient">
                  <i class="bi bi-window-sidebar"></i>
                </span>
                <div class="ms-3">
                  <h4 class="h6 mb-0">Digital Illustration</h4>
                  <small class="text-muted">24 projects</small>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <span class="icon-wrapper text-white rounded-circle p-2 bg-primary bg-gradient">
                  <i class="bi bi-palette-fill"></i>
                </span>
                <div class="ms-3">
                  <h4 class="h6 mb-0">SaaS UI Design</h4>
                  <small class="text-muted">56 projects</small>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <span class="icon-wrapper text-white rounded-circle p-2 bg-success bg-gradient">
                  <i class="bi bi-code-square"></i>
                </span>
                <div class="ms-3">
                  <h4 class="h6 mb-0">Mobile App Development</h4>
                  <small class="text-muted">12 projects</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- FAQ -->
<section class="page-section">
  <div class="container">
    <div class="text-center mb-5">
      <h3 class="h6 text-muted">Frequently Asked Questions</h3>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <div class="accordion accordion-flush">
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingOne">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                <h6 class="mb-0"><i class="bi bi-bag me-2"></i> How to purchase the item?</h6>
              </button>
            </h2>
            <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne">
              <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingTwo">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                <h6 class="mb-0"><i class="bi bi-truck me-2"></i> How is shipping delivery calculated?</h6>
              </button>
            </h2>
            <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo">
              <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingThree">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                <h6 class="mb-0"><i class="bi bi-chat me-2"></i> How to contact support?</h6>
              </button>
            </h2>
            <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree">
              <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
            </div>
          </div>
        </div>
      </div>
      <div class="d-lg-none"><hr class="m-0"></div>
      <div class="col-lg-6">
        <div class="accordion accordion-flush">
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingOne">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne2" aria-expanded="false" aria-controls="flush-collapseOne">
                <h6 class="mb-0"><i class="bi bi-bag me-2"></i> How to purchase the item?</h6>
              </button>
            </h2>
            <div id="flush-collapseOne2" class="accordion-collapse collapse" aria-labelledby="flush-headingOne">
              <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingTwo2">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo2" aria-expanded="false" aria-controls="flush-collapseTwo">
                <h6 class="mb-0"><i class="bi bi-truck me-2"></i> How is shipping delivery calculated?</h6>
              </button>
            </h2>
            <div id="flush-collapseTwo2" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo2">
              <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingThree2">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree2" aria-expanded="false" aria-controls="flush-collapseThree">
                <h6 class="mb-0"><i class="bi bi-chat me-2"></i> How to contact support?</h6>
              </button>
            </h2>
            <div id="flush-collapseThree2" class="accordion-collapse collapse" aria-labelledby="flush-headingThree">
              <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<section class="process-1 page-section">
  <div class="container">
    <div class="row gx-lg-5">
      <div class="col-md-3 py-3">
        <div class="process-item">
          <span class="icon d-inline-block fs-1 mb-3">
            <i class="bi bi-search text-primary"></i>
          </span>
          <span class="number">1</span>
          <h3>Research</h3>
          <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col-md-3 py-3">
        <div class="process-item">
          <span class="icon d-inline-block fs-1 mb-3">
            <i class="bi bi-people text-primary"></i>
          </span>
          <span class="number">2</span>
          <h3>Collaboration</h3>
          <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col-md-3 py-3">
        <div class="process-item">
          <span class="icon d-inline-block fs-1 mb-3">
            <i class="bi bi-bezier2 text-primary"></i>
          </span>
          <span class="number">3</span>
          <h3>Planning</h3>
          <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="process-item">
          <span class="icon d-inline-block fs-1 mb-3">
            <i class="bi bi-send-check text-primary"></i>
          </span>
          <span class="number">4</span>
          <h3>Delivery</h3>
          <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Info -->
<section class="page-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <div class="mb-3">
          <h3>More info</h3>
          <p class="lead">The awesome UI kit built with Bootstrap 5 to speed up your design and front-end development</p>
        </div>
      </div>
      <div class="col-lg-7 offset-lg-1">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <p class="lead">Follow our social accounts</p>
              <div class="hstack gap-5">
                <a href="#"><i class="bi bi-instagram fs-3"></i></a>
                <a href="#"><i class="bi bi-facebook fs-3"></i></a>
                <a href="#"><i class="bi bi-twitter fs-3"></i></a>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <p class="lead">Hotline</p>
              <span class="display-5 lh-1 text-dark">310-803-2465</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          
        

          
<!-- Info 2 -->
<section class="page-section">
  <div class="container">
    <div class="hstack justify-content-center flex-column flex-lg-row">
      <div class="col-lg-4 text-center mb-3">
        <h5 class="fs-18px">Get Social</h5>
        <p class="w-75 mx-auto mb-1">Follow our social media to get the latest updates</p>
        <div class="hstack gap-5 justify-content-center">
          <a href="#"><i class="bi bi-instagram"></i></a>
          <a href="#"><i class="bi bi-facebook"></i></a>
          <a href="#"><i class="bi bi-twitter"></i></a>
        </div>
      </div>
      <span class="vr"></span>
      <div class="col-lg-4 text-center mb-3">
        <h5 class="fs-18px">General communication</h5>
        <p class="w-75 mx-auto">For general queries, including sponsorship, please send your email to <a href="mailto:info@yourdomain.com">info@yourdomain.com</a></p>
      </div>
    </div>
  </div>
</section>