Bootstrap 5 Components

<section class="py-12 py-lg-24">
  <div class="container position-relative">
    <p class="text-center fs-7 fw-medium mb-16">Trusted by 2400+ brands &amp; companies worldwide</p>
    <div class="d-flex flex-wrap gap-12 align-items-center justify-content-center"><img class="img-fluid" src="consulty-assets/logos/logoipsum4.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum1.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum2.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum3.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum5.svg" alt=""></div>
    <div class="position-absolute top-0 start-0 h-100 px-0 px-md-20 px-lg-40" style="background-image: linear-gradient(90deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%);"></div>
    <div class="position-absolute top-0 end-0 h-100 px-0 px-md-20 px-lg-40" style="background-image: linear-gradient(-90deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%,  rgba(255,255,255,0) 100%);"></div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light-light">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <h2 class="font-heading mb-4" style="letter-spacing: -0.96px;">Open Positions</h2>
          <p class="text-dark-light mw-sm mb-0">It is a long established fact that a reader will be distracted by the readable.</p>
        </div>
        <div class="col-12 col-lg-6">
          <p class="text-dark-light fw-medium mb-5">Design</p>
          <div class="bg-white rounded-3 p-5 d-flex flex-column flex-md-row align-items-center justify-content-between flex-wrap gap-6 gap-md-4 mb-2">
            <div>
              <div class="d-flex items-center gap-2 flex-wrap mb-2">
                <p class="fs-7 fw-semibold mb-0">Product Designer</p><span class="d-inline-flex align-items-center px-2 rounded-pill border border-primary bg-primary-light text-primary fs-10 fw-medium">Full Time</span>
              </div>
              <div class="d-flex gap-3 align-items-center">
                <p class="text-dark-light fs-9 mb-0">New York</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                  <circle cx="2" cy="2" r="2" fill="#71717A"></circle>
                </svg>
                <p class="text-dark-light fs-9 mb-0">$60k - $72k</p>
              </div>
            </div><a class="btn btn-sm py-2 d-flex align-items-center btn-outline-dark border-light" href="#"><span class="me-2">Apply Now</span>
              <div>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-3 mb-8 mb-lg-0"><img class="img-fluid d-block w-100 mb-6 rounded-3" style="height: 375px; object-fit: cover;" src="consulty-assets/work/picture1.png" alt=""><img class="img-fluid d-block w-100 rounded-3" style="height: 280px; object-fit: cover;" src="consulty-assets/work/picture2.png" alt=""></div>
      <div class="col-12 col-lg-6 mb-8 mb-lg-0 order-first order-lg-0">
        <div class="position-relative h-100" style="min-height: 375px;"><img class="position-absolute top-0 start-0 w-100 h-100 rounded-3" src="consulty-assets/work/picture3.png" alt="">
          <div class="position-absolute top-0 start-0 w-100 h-100">
            <div class="d-flex flex-column justify-content-between h-100 p-8">
              <div>
                <p class="text-white mb-4">Growth</p>
                <h4 class="font-heading text-white mw-lg mb-0">We helped Flarezo to increase their website conversion rate by 310%</h4>
              </div><a class="btn btn-sm btn-light w-100" href="#">Read Full Story</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-3"><img class="img-fluid d-block w-100 mb-6 rounded-3" style="height: 327px; object-fit: cover;" src="consulty-assets/work/picture4.png" alt=""><img class="img-fluid d-block w-100 rounded-3" style="height: 327px; object-fit: cover;" src="consulty-assets/work/picture5.png" alt=""></div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="consulty-assets/footer/shapes1.svg" alt="">
  <div class="container position-relative">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-2 mb-8 mb-lg-0"><img class="img-fluid" src="consulty-assets/logos/consulty-logo2.svg" alt=""></div>
        <div class="col-12 col-lg-7 mb-8 mb-lg-0">
          <div class="d-flex flex-wrap justify-content-lg-center gap-12">
            <div>
              <p class="fw-medium mb-6">Platform</p>
              <ul class="list-unstyled mb-0 d-flex flex-column gap-6">
                <li><a class="btn-link text-dark-light" href="#">Services</a></li>
                <li><a class="btn-link text-dark-light" href="#">Book A Call</a></li>
                <li><a class="btn-link text-dark-light" href="#">Pricing</a></li>
                <li><a class="btn-link text-dark-light" href="#">Products</a></li>
              </ul>
            </div>
            <div>
              <p class="fw-medium mb-6">Company</p>
              <ul class="list-unstyled mb-0 d-flex flex-column gap-6">
                <li><a class="btn-link text-dark-light" href="#">About</a></li>
                <li><a class="btn-link text-dark-light" href="#">Our Mission</a></li>
                <li>
                  <div class="d-flex align-items-center flex-wrap gap-2"><a class="btn-link text-dark-light" href="#">Careers</a><span class="d-inline-block bg-warning-light rounded-pill px-2 py-1 fs-10 fw-semibold">WE ARE HIRING</span></div>
                </li>

<div class="position-fixed top-0 start-0 w-100">
  <div class="py-4 px-12 px-sm-20 bg-primary position-relative overflow-hidden" style="background-image: url('consulty-assets/alerts/shapes-background1.png')">
    <p class="text-white fs-9 fw-medium text-center mb-0"><span>A quick announcement goes here.</span><a class="btn-link p-0 text-white" href="#">Add your quick alert here</a></p>
    <div class="position-absolute end-0 me-5 top-50 translate-middle-y"><a class="btn p-0" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4 12L12 4M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a></div>
  </div>
</div>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 col-xl-7 mb-12 mb-lg-0">
          <p class="text-dark-light mb-2">Contact us</p>
          <h1 class="font-heading mb-14" style="letter-spacing: -1.2px;">Get In Touch</h1>
          <form action="#">
            <div class="mw-xl">
              <div class="row mb-3">
                <div class="col-12 col-sm-6 mb-3 mb-sm-0">
                  <label class="d-block mb-3 fs-9 fw-medium">Your name</label>
                  <input class="form-control w-100" type="text" placeholder="John Doe">
                </div>
                <div class="col-12 col-sm-6">
                  <label class="d-block mb-3 fs-9 fw-medium">Email</label>
                  <input class="form-control w-100" type="email" placeholder="john@email.com">
                </div>
              </div>
              <label class="d-block mb-3 fs-9 fw-medium">Subject</label>
              <input class="form-control w-100 mb-3" type="text" placeholder="Add a subject">
              <label class="d-block mb-3 fs-9 fw-medium">Message</label>
              <textarea class="form-control rounded-3 w-100 mb-3" rows="5" style="resize: none;" placeholder="Write your message"></textarea>
              <button class="btn btn-dark d-inline-flex align-items-center" type="submit"><span class="me-2">Send Message</span>

<section class="py-12 py-lg-32 py-xl-52 bg-dark position-relative overflow-hidden">
  <div class="position-absolute stary-0 top-0 w-100 h-100 opacity-25"><img class="img-fluid d-block h-100 mx-auto opacity-25" src="consulty-assets/stats/shapes1.svg" alt=""></div>
  <div class="container position-relative">
    <div class="position-relative">
      <div class="row">
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <h2 class="font-heading display-3 fw-medium text-center mb-6 text-white">5.2M</h2>
          <p class="text-center text-white fs-7 fw-semibold mb-4">Fund Raised</p>
          <p class="text-dark-light text-center mw-xs mx-auto">It is a long established fact that a reader will be that the distracted by the readable content of a page when looking.</p>
        </div>
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <h2 class="font-heading display-3 fw-medium text-center mb-6 text-white">17k</h2>
          <p class="text-center text-white fs-7 fw-semibold mb-4">Case Solved</p>
          <p class="text-dark-light text-center mw-xs mx-auto">It is a long established fact that a reader will be that the distracted by the readable content of a page when looking.</p>
        </div>
        <div class="col-12 col-lg-4">
          <h2 class="font-heading display-3 fw-medium text-center mb-6 text-white">99%</h2>
          <p class="text-center text-white fs-7 fw-semibold mb-4">Success Rate</p>
          <p class="text-dark-light text-center mw-xs mx-auto">It is a long established fact that a reader will be that the distracted by the readable content of a page when looking.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-5">
          <div class="d-flex flex-column justify-content-between gap-8 h-100">
            <div>
              <h1 class="font-heading mb-8 mw-sm mw-md-lg" style="letter-spacing: -1.2px;">Get help from the industry experts.</h1>
              <p class="text-dark-light fs-7 mb-8 mw-lg">We are passionate about transforming spaces into extraordinary experiences. With a seamless fusion of architecture and interior design.</p><a class="btn btn-dark d-inline-flex align-items-center justify-content-center gap-2" href="#"><span>Book A Free Call</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-6 pb-8 pt-14 position-relative">
              <div class="position-absolute top-0 start-0 w-100 border-top" style="transform: scaleX(3);"></div>
              <div>
                <h1 class="font-heading mb-0">159%</h1>
                <div>
                  <p class="fs-7 fw-semibold mb-1">Average Revenue</p>
                  <p class="text-dark-light mb-0">From customers worldwide</p>
                </div>
              </div>
            </div>
          </div>

<section class="py-12 py-md-24">
  <div class="container">
    <div class="bg-light-light rounded-3 px-8 px-md-16 py-16 py-md-32">
      <div class="row align-items-center">
        <div class="col-12 col-lg-7 mb-10 mb-lg-0"><img class="img-fluid pe-lg-8" src="consulty-assets/http-codes/404-image.png" alt=""></div>
        <div class="col-12 col-lg-5">
          <h1 class="font-heading mb-4"><span class="d-block">Oops!</span><span>Page not found</span></h1>
          <p class="text-dark-light fs-7 mb-8 mw-md">The page you are looking for either doesn’t exist or currently not available</p><a class="btn btn-dark fs-9 d-inline-flex align-items-center" href="#"><span class="me-2">Go Back to Home</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24">
  <div class="container">
    <h1 class="font-heading text-center mb-6" style="letter-spacing: -1.2px;">Get started with 3 steps</h1>
    <p class="text-center text-dark-light fs-7 mb-20">There are many variations of passages of available</p>
    <div class="row">
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="position-relative rounded-3 overflow-hidden" style="height: 518px;"><img class="position-absolute top-0 start-0 w-100 h-100" src="consulty-assets/how-it-works/picture1.png" alt="">
          <div class="position-absolute top-0 end-0 mt-8 me-8">
            <div class="bg-white rounded-pill d-flex align-items-center justify-content-center" style="width: 56px; height: 56px;">
              <p class="fs-7 fw-semibold mb-0">01</p>
            </div>
          </div>
          <div class="position-absolute bottom-0 mb-8 start-0 ms-8">
            <p class="text-white fs-6 fw-semibold mb-2">Book Time</p>
            <p class="text-light-light mw-xs mb-0">It is a long established fact that a reader will be distracted by the readable</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="position-relative rounded-3 overflow-hidden" style="height: 518px;"><img class="position-absolute top-0 start-0 w-100 h-100" src="consulty-assets/how-it-works/picture2.png" alt="">
          <div class="position-absolute top-0 end-0 mt-8 me-8">
            <div class="bg-white rounded-pill d-flex align-items-center justify-content-center" style="width: 56px; height: 56px;">
              <p class="fs-7 fw-semibold mb-0">02</p>
            </div>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="mw-md mw-md-none mx-auto">
      <div class="row">
        <div class="col-12 col-xl-4 mb-14 mb-xl-0">
          <div class="d-flex flex-column justify-content-between mw-3xl mx-auto mx-xl-0 gap-4 h-100">
            <p class="text-white">Our services</p>
            <div>
              <h5 class="text-white font-heading mb-4">Vision &amp; direction</h5>
              <p class="text-dark-light mb-6 mw-xs">There are many variations of passages you the blocks needed to create a truly professional website for your template.</p><a class="btn btn-outline-light" href="#">Explore All Services</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-8">
          <div class="d-flex justify-content-lg-center justify-content-xl-end" style="height: 600px;">
            <div class="flex-shrink-0 me-2">
              <div class="d-flex h-100"><img class="d-none d-md-block img-fluid" src="consulty-assets/services/picture1.png" alt=""><a class="btn d-flex flex-column justify-content-between gap-5 p-0 pe-8 border-0 border-end border-dark-light border-opacity-75 rounded-0" href="#">
                  <div class="text-white me-n14 me-lg-n16">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                      <path d="M36 10.5L16.5 10.5C16.1022 10.5 15.7206 10.6581 15.4393 10.9394C15.158 11.2207 15 11.6022 15 12C15 12.3979 15.158 12.7794 15.4393 13.0607C15.7206 13.342 16.1022 13.5 16.5 13.5L32.3794 13.5L10.9387 34.9388C10.6573 35.2203 10.4992 35.602 10.4992 36C10.4992 36.3981 10.6573 36.7798 10.9387 37.0613C11.2202 37.3428 11.602 37.5009 12 37.5009C12.398 37.5009 12.7798 37.3428 13.0612 37.0613L34.5 15.6207L34.5 31.5001C34.5 31.8979 34.658 32.2794 34.9393 32.5607C35.2206 32.842 35.6022 33.0001 36 33.0001C36.3978 33.0001 36.7794 32.842 37.0607 32.5607C37.342 32.2794 37.5 31.8979 37.5 31.5001L37.5 12C37.5 11.6022 37.342 11.2207 37.0607 10.9394C36.7794 10.6581 36.3978 10.5 36 10.5Z" fill="currentColor"></path>
                    </svg>
                  </div>
                  <div class="d-md-none d-flex mb-16 gap-4 align-items-center me-n14" style="rotate: -90deg;">
                    <h1 class="font-heading text-white lh-0">01</h1>

<section>
  <nav class="navbar navbar-expand-xl navbar-light">
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid me-2" style="height: 24px;" src="consulty-assets/logos/consulty-logo2.svg" alt=""><span class="d-none d-sm-inline-block px-2 py-1 lh-sm fs-10 fw-medium text-primary bg-primary-subtle border border-primary-light rounded-pill">We are hiring!</span></a>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#"><span>Products</span>
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.8479 6L8.18119 10.6667L3.51453 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a></li>
          <li class="nav-item"><a class="nav-link" href="#">Case Studies</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Resources</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-flex align-items-center ms-auto"><a class="btn btn-sm py-3 px-5 fw-semibold me-4 btn-outline-dark border-light" href="#">Sign In</a><a class="btn btn-sm py-3 px-5 fw-semibold btn-dark border-light" href="#"><span class="me-2">Get A Free Consultation</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 6.66667H7.33333C4.38781 6.66667 2 9.05449 2 12V13.3333M14 6.66667L10 10.6667M14 6.66667L10 2.66667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <button class="d-xl-none navbar-burger ms-5 border-0 bg-transparent" type="button" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>

<div class="position-fixed bottom-0 start-0 w-100 p-6">
  <div class="container">
    <div class="mw-5xl mx-auto bg-black rounded-3 p-6 position-relative overflow-hidden d-flex align-items-center justify-content-between gap-4">
      <p class="text-white mb-0"><span>We use cookies to enhance your browser experience. By using this website you agree to our</span><a class="btn-link ms-1 p-0 text-white text-decoration-underline" href="#">Cookie Policy.</a></p>
      <div class="position-absolute bottom-0 start-0 w-100">
        <div class="bg-primary w-100" style="height: 4px;"></div>
      </div>
      <div class="position-absolute top-0 end-0 h-100 me-8"><img class="img-fluid d-block h-100" src="consulty-assets/cookies/shapes1.svg" alt=""></div>
      <button class="btn p-0 position-relative">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M6 18L18 6M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<section class="py-12 py-lg-24 position-relative" style="background-image: url('consulty-assets/testimonials/background1.png'); background-size: cover;">
  <div class="container"><img class="img-fluid d-block mb-8 mx-auto" src="consulty-assets/testimonials/quote-icon.svg" alt="">
    <div class="d-flex flex-wrap flex-sm-nowrap align-items-center justify-content-center justify-content-sm-between gap-10 gap-sm-4 mb-14"><a class="order-last order-sm-0 flex-shrink-0 btn p-0 btn-outline-light-dark d-flex align-items-center justify-content-center" href="#" style="width: 60px; height: 60px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
      <div class="overflow-hidden">
        <div class="mw-4xl mx-auto px-4 text-center">
          <p class="text-white fs-4 text-center mb-0">There are many variations of passages of Ipsum available, but the majority have suffered alteration in some It is a long established fact that a reader will be distracted by the readable content of a page its layout.</p>
        </div>
      </div><a class="order-last order-sm-0 flex-shrink-0 btn p-0 btn-outline-light-dark d-flex align-items-center justify-content-center" href="#" style="width: 60px; height: 60px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </div>
    <div class="overflow-hidden">
      <div class="border-top border-white border-opacity-25 pt-6 d-flex align-items-center justify-content-center gap-3 flex-wrap mw-3xl mx-auto"><img class="img-fluid" src="consulty-assets/testimonials/avatar1.png" alt="">
        <p class="fs-7 fw-medium mb-0"><span class="text-white">Cameron Williamson</span><span class="text-white text-opacity-50">- Project Manager</span></p>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-5 mb-16 mb-lg-0">
        <div class="d-flex flex-column justify-content-between gap-4 h-100">
          <div>
            <h2 class="font-heading mw-sm" style="letter-spacing: -0.96px;">Frequently Asked Questions</h2>
            <p class="text-dark-light mb-0">Get to know our most common questions &amp; answers.</p>
          </div>
          <div>
            <p class="fs-7 fw-medium mb-4">Still have more questions?</p><a class="btn btn-dark d-inline-flex align-items-center justify-content-center" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M13.3333 1.66663H6.66663C3.33329 1.66663 1.66663 3.33329 1.66663 6.66663V17.5C1.66663 17.9583 2.04163 18.3333 2.49996 18.3333H13.3333C16.6666 18.3333 18.3333 16.6666 18.3333 13.3333V6.66663C18.3333 3.33329 16.6666 1.66663 13.3333 1.66663ZM11.6666 12.7083H5.83329C5.49163 12.7083 5.20829 12.425 5.20829 12.0833C5.20829 11.7416 5.49163 11.4583 5.83329 11.4583H11.6666C12.0083 11.4583 12.2916 11.7416 12.2916 12.0833C12.2916 12.425 12.0083 12.7083 11.6666 12.7083ZM14.1666 8.54163H5.83329C5.49163 8.54163 5.20829 8.25829 5.20829 7.91663C5.20829 7.57496 5.49163 7.29163 5.83329 7.29163H14.1666C14.5083 7.29163 14.7916 7.57496 14.7916 7.91663C14.7916 8.25829 14.5083 8.54163 14.1666 8.54163Z" fill="white"></path>
              </svg><span class="ms-2 fs-9 fw-semibold text-white">Talk to us</span></a>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="mw-lg-2xl ms-lg-auto">
          <p class="text-dark-light fw-medium mb-6">General</p>
          <div class="border border-light rounded-3 mb-8 overflow-hidden">
            <div class="bg-light-light px-7 py-5 border-bottom border-light">
              <div class="d-flex align-items-center justify-content-between gap-3">
                <p class="fs-7 fw-semibold mb-0">How Consulty can help us grow?</p>

<section class="py-12 py-lg-24">
  <div class="container">
    <h2 class="font-heading mb-4" style="letter-spacing: -0.96px;">Start doing work that matters</h2>
    <p class="text-dark-light mw-xl mb-16">It is a long established fact that a reader will be distracted by the readable. It is a long established fact that a reader will be distracted by the readable.</p>
    <div class="w-100 border-bottom border-light mb-16"></div>
    <div class="mw-sm mx-auto mw-md-none">
      <div class="row mb-16">
        <div class="col-12 col-lg-6 mb-8 mb-lg-0">
          <p class="fs-7 fw-semibold mb-2">Design</p>
          <p class="text-dark-light mw-xs mb-0">A reader will be distracted by the readable. It is a long established fact</p>
        </div>
        <div class="col-12 col-lg-6">
          <div class="bg-white border border-light rounded-3 p-5 d-flex flex-column flex-md-row align-items-center justify-content-between flex-wrap gap-6 gap-md-4 mb-2">
            <div>
              <div class="d-flex items-center gap-2 flex-wrap mb-2">
                <p class="fs-7 fw-semibold mb-0">Product Designer</p><span class="d-inline-flex align-items-center px-2 rounded-pill border border-primary bg-primary-light text-primary fs-10 fw-medium">Full Time</span>
              </div>
              <div class="d-flex gap-3 align-items-center">
                <p class="text-dark-light fs-9 mb-0">New York</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                  <circle cx="2" cy="2" r="2" fill="#71717A"></circle>
                </svg>
                <p class="text-dark-light fs-9 mb-0">$60k - $72k</p>
              </div>

<section class="py-12 py-lg-24">
  <div class="container-fluid">
    <h1 class="font-heading text-center mb-6 mw-sm mw-md-2xl mx-auto" style="letter-spacing: -1.2px;">Choose the plan that’s right for your business</h1>
    <p class="text-dark-light fs-7 mb-16 text-center mw-xl mx-auto">Established fact that a reader will be distracted by the way readable content of a page when looking at its layout.</p>
    <div class="mw-8xl mx-auto">
      <div class="overflow-auto px-4 pb-5">
        <div class="w-100" style="min-width: max-content;">
          <div class="d-flex justify-content-xl-center gap-6">
            <div class="flex-shrink-0 w-100 mw-xs">
              <div class="d-flex align-items-end bg-light-light bg-opacity-50 rounded-top-3 px-8 pb-7 pt-8" style="height: 144px;">
                <p class="fs-6 fw-medium mb-0">Features</p>
              </div>
              <div class="d-flex justify-content-center align-items-center px-6 border-bottom border-light" style="height: 60px;">
                <p class="fw-medium mb-0">Personal manager</p>
              </div>
              <div class="d-flex justify-content-center align-items-center px-6 border-bottom border-light" style="height: 60px;">
                <p class="fw-medium mb-0">Car insurance</p>
              </div>
              <div class="d-flex justify-content-center align-items-center px-6 border-bottom border-light" style="height: 60px;">
                <p class="fw-medium mb-0">Travel insurance</p>
              </div>
              <div class="d-flex justify-content-center align-items-center px-6 border-bottom border-light" style="height: 60px;">
                <p class="fw-medium mb-0">Health insurance</p>
              </div>

<div class="position-fixed bottom-0 start-0 w-100 p-6">
  <div class="bg-white rounded-3 p-6 mw-sm">
    <p class="fs-7 mb-8 mw-xs">We use cookies to improve your browsing experience. Learn about our Privacy policy here.</p>
    <div class="d-flex flex-wrap gap-2"><a class="btn btn-sm btn-outline-dark border-light" href="#">Decline</a><a class="btn btn-sm btn-dark" href="#">Allow Cookie</a></div>
  </div>
</div>

<div class="position-fixed top-0 start-0 w-100">
  <div class="py-4 px-12 px-sm-20 bg-dark position-relative" style="background-image: url('consulty-assets/alerts/shapes-background1.png')">
    <div class="d-flex align-items-center justify-content-between gap-4 flex-wrap">
      <p class="text-white fs-9 fw-medium mb-0"><span>A quick announcement goes here.</span><a class="btn-link p-0 text-white" href="#">Add your quick alert here</a></p><a class="btn btn-sm py-1 btn-light" href="#">Explore Offer</a>
    </div>
    <div class="position-absolute end-0 me-5 top-50 translate-middle-y"><a class="btn p-0" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4 12L12 4M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a></div>
  </div>
</div>

<section class="py-12 py-lg-24">
  <div class="mw-lg mw-lg-5xl mw-xl-8xl mx-auto px-5">
    <h1 class="font-heading mw-sm mw-md-xl mb-20">Read the latest post from our resources.</h1>
    <div class="row">
      <div class="col-12 col-lg-6 col-xl-4 mb-12 mb-xl-0">
        <div class="position-relative mb-8" style="height: 380px;"><img class="position-absolute top-0 end-0 w-100 h-100" src="consulty-assets/blog/picture4.png" alt="">
          <div class="position-absolute bottom-0 end-0"><a class="btn d-flex align-items-center justify-content-center btn-light-light rounded-2" href="#" style="width: 75px; height: 75px;">
              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                <path d="M21.875 7V18.375C21.875 18.6071 21.7828 18.8296 21.6187 18.9937C21.4546 19.1578 21.2321 19.25 21 19.25C20.7679 19.25 20.5454 19.1578 20.3813 18.9937C20.2172 18.8296 20.125 18.6071 20.125 18.375V9.11203L7.61906 21.6191C7.45488 21.7832 7.23219 21.8755 7 21.8755C6.7678 21.8755 6.54512 21.7832 6.38094 21.6191C6.21675 21.4549 6.12451 21.2322 6.12451 21C6.12451 20.7678 6.21675 20.5451 6.38094 20.3809L18.888 7.875H9.625C9.39293 7.875 9.17037 7.78281 9.00628 7.61872C8.84219 7.45462 8.75 7.23206 8.75 7C8.75 6.76794 8.84219 6.54538 9.00628 6.38128C9.17037 6.21719 9.39293 6.125 9.625 6.125H21C21.2321 6.125 21.4546 6.21719 21.6187 6.38128C21.7828 6.54538 21.875 6.76794 21.875 7Z" fill="currentColor"></path>
              </svg></a></div>
        </div><span class="d-inline-block rounded-pill px-2 py-1 border border-light text-dark-light fs-9 fw-medium mb-4">News, Resource</span>
        <div class="mw-sm"><a class="btn-link text-dark fw-semibold text-decoration-none fs-5" href="#">Making this the variations of all passages of the majority</a></div>
      </div>
      <div class="col-12 col-lg-6 col-xl-4 mb-12 mb-xl-0">
        <div class="position-relative mb-8" style="height: 380px;"><img class="position-absolute top-0 end-0 w-100 h-100" src="consulty-assets/blog/picture5.png" alt="">
          <div class="position-absolute bottom-0 end-0"><a class="btn d-flex align-items-center justify-content-center btn-primary rounded-2" href="#" style="width: 75px; height: 75px;">
              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                <path d="M21.875 7V18.375C21.875 18.6071 21.7828 18.8296 21.6187 18.9937C21.4546 19.1578 21.2321 19.25 21 19.25C20.7679 19.25 20.5454 19.1578 20.3813 18.9937C20.2172 18.8296 20.125 18.6071 20.125 18.375V9.11203L7.61906 21.6191C7.45488 21.7832 7.23219 21.8755 7 21.8755C6.7678 21.8755 6.54512 21.7832 6.38094 21.6191C6.21675 21.4549 6.12451 21.2322 6.12451 21C6.12451 20.7678 6.21675 20.5451 6.38094 20.3809L18.888 7.875H9.625C9.39293 7.875 9.17037 7.78281 9.00628 7.61872C8.84219 7.45462 8.75 7.23206 8.75 7C8.75 6.76794 8.84219 6.54538 9.00628 6.38128C9.17037 6.21719 9.39293 6.125 9.625 6.125H21C21.2321 6.125 21.4546 6.21719 21.6187 6.38128C21.7828 6.54538 21.875 6.76794 21.875 7Z" fill="currentColor"></path>
              </svg></a></div>
        </div><span class="d-inline-block rounded-pill px-2 py-1 border border-light text-dark-light fs-9 fw-medium mb-4">News, Resource</span>
        <div class="mw-sm"><a class="btn-link text-dark fw-semibold text-decoration-none fs-5" href="#">Making this the variations of all passages of the majority</a></div>
      </div>
      <div class="col-12 col-lg-6 col-xl-4">
        <div class="position-relative mb-8" style="height: 380px;"><img class="position-absolute top-0 end-0 w-100 h-100" src="consulty-assets/blog/picture6.png" alt="">