Bootstrap 5 Components

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute start-0 top-50 ms-n12 translate-middle-y" src="consulty-assets/contact/shape1.svg" alt="">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <div class="d-flex flex-column justify-content-between gap-12 h-100">
            <div>
              <h1 class="font-heading text-white mb-4" style="letter-spacing: -1.2px;">Contact Us</h1>
              <p class="text-light-dark mw-sm mb-0">Consulty gives you the blocks &amp; components you need to create a truly professional website.</p>
            </div>
            <div class="mw-xl">
              <div class="row">
                <div class="col-12 col-sm-6">
                  <p class="text-white text-opacity-50 fs-9 mb-6">Office Hours</p>
                  <ul class="list-unstyled">
                    <li class="text-white mb-1">8502 Preston Rd. Ingle,</li>
                    <li class="text-white">Maine 98380, USA</li>
                  </ul>
                </div>
                <div class="col-12 col-sm-6">
                  <p class="text-white text-opacity-50 fs-9 mb-6">Get In Touch</p>
                  <ul class="list-unstyled">
                    <li class="text-white mb-1">+1-246-888-0653</li>
                    <li class="text-white">+1-222-632-0194</li>

<section class="py-12 py-md-24 py-xl-40 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="consulty-assets/footer/shapes2.svg" alt="">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-8 mb-20 mb-lg-0">
        <div class="d-flex flex-column justify-content-between gap-8 h-100">
          <div><img class="img-fluid d-block mb-6" src="consulty-assets/logos/consulty-logo.svg" alt="">
            <p class="text-light mw-sm mb-0">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
          </div>
          <div class="d-flex align-items-center gap-2 pb-3 border-bottom border-dark-light mw-xs">
            <input class="w-100 px-0 bg-transparent text-white border-0" type="text" style="outline: none;" placeholder="Enter email address"><a class="flex-shrink-0 btn btn-outline-primary border-0 p-2" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                <path d="M18.75 6.1875V15.9375C18.75 16.1364 18.671 16.3272 18.5303 16.4678C18.3897 16.6085 18.1989 16.6875 18 16.6875C17.8011 16.6875 17.6103 16.6085 17.4697 16.4678C17.329 16.3272 17.25 16.1364 17.25 15.9375V7.99781L6.53062 18.7181C6.38988 18.8589 6.19901 18.9379 5.99999 18.9379C5.80097 18.9379 5.6101 18.8589 5.46936 18.7181C5.32863 18.5774 5.24957 18.3865 5.24957 18.1875C5.24957 17.9885 5.32863 17.7976 5.46936 17.6569L16.1897 6.9375H8.24999C8.05108 6.9375 7.86031 6.85848 7.71966 6.71783C7.57901 6.57718 7.49999 6.38641 7.49999 6.1875C7.49999 5.98859 7.57901 5.79782 7.71966 5.65717C7.86031 5.51652 8.05108 5.4375 8.24999 5.4375H18C18.1989 5.4375 18.3897 5.51652 18.5303 5.65717C18.671 5.79782 18.75 5.98859 18.75 6.1875Z" fill="currentColor"></path>
              </svg></a>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="d-flex flex-wrap justify-content-between gap-12">
          <div>
            <p class="text-dark-light fw-medium mb-6">Solutions</p>
            <ul class="list-unstyled d-flex flex-column gap-4">
              <li><a class="btn-link text-white" href="#">Freelancer</a></li>
              <li><a class="btn-link text-white" href="#">Data Analytics</a></li>
              <li><a class="btn-link text-white" href="#">Small Business</a></li>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <p class="text-dark-light mb-4">Projects</p>
      <h1 class="font-heading mb-14 mb-lg-24">Latest Case Studies</h1>
      <div class="row">
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <div class="position-relative mb-8"><img class="img-fluid d-block w-100 rounded-3" src="consulty-assets/work/picture6.png" alt="">
            <div class="position-absolute bottom-0 end-0 mb-n1 me-n1"><a class="btn bg-white rounded-3 border-0 p-3" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="57" viewBox="0 0 56 57" fill="none">
                  <path d="M22.1667 18.0007L38.5 18.0007M38.5 18.0007L38.5 34.334M38.5 18.0007L17.5 39.0006" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a></div>
          </div>
          <p class="fs-9 fw-medium mb-2">CURVED</p>
          <h6 class="font-heading mw-xs mb-0">How we helped Curved to grow their brand awareness in 2022</h6>
        </div>
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <div class="position-relative mb-8"><img class="img-fluid d-block w-100 rounded-3" src="consulty-assets/work/picture7.png" alt="">
            <div class="position-absolute bottom-0 end-0 mb-n1 me-n1"><a class="btn bg-white rounded-3 border-0 p-3" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="57" viewBox="0 0 56 57" fill="none">
                  <path d="M22.1667 18.0007L38.5 18.0007M38.5 18.0007L38.5 34.334M38.5 18.0007L17.5 39.0006" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a></div>
          </div>
          <p class="fs-9 fw-medium mb-2">CURVED</p>

<section>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 24px;" src="consulty-assets/logos/consulty-logo2.svg" alt=""></a>
      <button class="d-lg-none navbar-burger 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>
      </button>
      <div class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav ms-auto">
          <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 class="d-flex align-items-center ms-5 ps-5 border-start border-light"><a class="btn btn-sm py-3 px-5 fw-semibold me-3 btn-outline-dark border-0" 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>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <h2 class="font-heading mb-4" style="letter-spacing: -0.96px;">Our Specialists</h2>
        <p class="text-dark-light mw-sm mb-0">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
      </div>
      <div class="col-12 col-lg-8">
        <div class="row mb-n10">
          <div class="col-12 col-sm-6 col-md-4 col-lg-6 col-xl-4 mb-10"><img class="img-fluid d-block w-100 rounded-3 mb-5" style="height: 365px; object-fit: cover; object-position: top;" src="consulty-assets/team/picture6.png" alt="">
            <p class="fs-7 fw-semibold mb-1">Kristin Watson</p>
            <p class="text-dark-light fs-9 mb-0">Medical Assistant</p>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-6 col-xl-4 mb-10"><img class="img-fluid d-block w-100 rounded-3 mb-5" style="height: 365px; object-fit: cover; object-position: top;" src="consulty-assets/team/picture7.png" alt="">
            <p class="fs-7 fw-semibold mb-1">Darrell Steward</p>
            <p class="text-dark-light fs-9 mb-0">Marketing Coordinator</p>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-6 col-xl-4 mb-10"><img class="img-fluid d-block w-100 rounded-3 mb-5" style="height: 365px; object-fit: cover; object-position: top;" src="consulty-assets/team/picture8.png" alt="">
            <p class="fs-7 fw-semibold mb-1">Jenny Wilson</p>
            <p class="text-dark-light fs-9 mb-0">Dog Trainer</p>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-6 col-xl-4 mb-10"><img class="img-fluid d-block w-100 rounded-3 mb-5" style="height: 365px; object-fit: cover; object-position: top;" src="consulty-assets/team/picture9.png" alt="">
            <p class="fs-7 fw-semibold mb-1">Esther Howard</p>
            <p class="text-dark-light fs-9 mb-0">President of Sales</p>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <h1 class="font-heading display-3 fw-medium mw-xs lh-1 mb-12" style="letter-spacing: -2px;">Our Awards</h1><a class="btn-link d-flex align-items-center fw-semibold" href="#"><span class="me-2">Read Our Story</span>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M4.99984 10H15.4165M15.4165 10L10.4165 5M15.4165 10L10.4165 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div></a>
      </div>
      <div class="col-12 col-lg-8">
        <div class="mw-lg-2xl ms-lg-auto"><a class="btn w-100 px-0 pt-0 pb-8 d-flex align-items-center justify-content-between flex-wrap gap-4 mb-8 mt-lg-40 text-start fw-normal border-0 border-bottom border-light rounded-0" href="#">
            <p class="fs-6 fw-medium mb-0">Business Award</p>
            <p class="text-dark-light mb-0">2014</p></a><a class="btn w-100 px-0 pt-0 pb-8 d-flex align-items-center justify-content-between flex-wrap gap-4 mb-8 text-start fw-normal border-0 border-bottom border-light rounded-0" href="#">
            <p class="fs-6 fw-medium mb-0">Design Award</p>
            <p class="text-dark-light mb-0">2016</p></a><a class="btn w-100 px-0 pt-0 pb-8 d-flex align-items-center justify-content-between flex-wrap gap-4 mb-8 text-start fw-normal border-0 border-bottom border-light rounded-0" href="#">
            <p class="fs-6 fw-medium mb-0">Best Renovation</p>
            <p class="text-dark-light mb-0">2017</p></a><a class="btn w-100 px-0 pt-0 pb-8 d-flex align-items-center justify-content-between flex-wrap gap-4 mb-8 text-start fw-normal border-0 border-bottom border-light rounded-0" href="#">
            <p class="fs-6 fw-medium mb-0">Innovation Award</p>
            <p class="text-dark-light mb-0">2018</p></a><a class="btn w-100 px-0 pt-0 pb-8 d-flex align-items-center justify-content-between flex-wrap gap-4 mb-8 text-start fw-normal border-0 border-bottom border-light rounded-0" href="#">
            <p class="fs-6 fw-medium mb-0">Landscape Design</p>
            <p class="text-dark-light mb-0">2019</p></a></div>
      </div>

<section class="py-24 pb-md-44 pt-md-36 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="consulty-assets/cta/shapes.svg" alt=""><img class="position-absolute top-0 start-50 translate-middle-x" style="height: 530px;" src="consulty-assets/cta/avatar-lines.png" alt="">
  <div class="container position-relative">
    <h1 class="text-center text-white mb-6 mw-md-5xl mx-auto">Stop wasting time, start scaling your business with Consulty.</h1>
    <p class="text-center text-dark-light fs-7 mb-10">Grow faster with a website that helps you convert more customers.</p>
    <div class="d-flex justify-content-center"><a class="btn btn-light d-flex align-items-center" href="#"><span class="me-2">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.66663H7.33333C4.38781 6.66663 2 9.05444 2 12V13.3333M14 6.66663L10 10.6666M14 6.66663L10 2.66663" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a></div>
  </div>
</section>

<section class="pb-52 pt-12 pb-md-12 py-lg-24">
  <div class="container">
    <div class="position-relative"><img class="d-none d-lg-block img-fluid" src="consulty-assets/testimonials/shape1.svg" alt=""><img class="d-none d-lg-block position-absolute bottom-0 end-0 me-xl-20 px-10 px-xl-0 mw-xs mw-xl-sm" src="consulty-assets/testimonials/picture1.png" alt="">
      <div class="d-none d-lg-block position-absolute top-0 start-0 pb-12 pt-8 px-12 p-xl-14">
        <div class="row">
          <div class="col-12 col-md-6 col-lg-8 col-xl-7">
            <div class="flex-shrink-0 w-full">
              <p class="fs-6 mb-4 mb-xl-8 mw-5xl">“Thanks to their expertise, our website traffic tripled to within to three months. A game-changer for our business! The intuitive and then interface and powerful on that collaboration and the features are on streamlined our workflow and away eliminated to the bottlenecks. Their team understands the intricacies of our industry, and it's reflected in the targeted campaigns they run”.</p>
              <p class="fs-7 fw-semibold mb-1">Marvin McKinney</p>
              <p class="fs-9 text-dark-light mb-6 mb-xl-24">Founder, BrainX</p>
            </div>
            <div class="d-flex flex-wrap gap-4"><a class="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><a class="btn p-0 btn-outline-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>
        </div>
      </div>
      <div class="d-lg-none pb-40 px-8 px-md-14 pt-14 p-md-14 bg-light-light bg-opacity-25 rounded-3 position-relative">
        <div class="row">
          <div class="col-12 col-lg-6 col-xl-7">

<section class="pt-12 pt-md-24 pb-56 position-relative overflow-hidden"><img class="img-fluid d-block mb-12 mb-md-24 w-100" src="consulty-assets/http-codes/error-list.png" alt="">
  <div class="container">
    <h1 class="font-heading text-center mb-4 mw-lg mw-lg-2xl mx-auto" style="letter-spacing: -1.2px;">The page you are looking for is not found</h1>
    <p class="text-center text-dark-light fs-7 mw-md mx-auto mb-8">The page you are looking for either doesn’t exist or currently not available</p>
    <div class="d-flex justify-content-center"><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>
</section>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <h1 class="font-heading text-white text-center mb-6" style="letter-spacing: -1.2px;">How we work</h1>
      <p class="text-center text-light fs-7 mb-16">We consider all the drivers of change gives you the blocks of &amp; you need professional website.</p>
      <div class="row">
        <div class="col-12 col-lg-4 mb-6 mb-lg-0">
          <div class="h-100 bg-dark-light bg-opacity-50 rounded-3 border border-dark-light border-opacity-50 px-8 py-7">
            <div class="bg-dark-light bg-opacity-75 rounded-2 d-flex align-items-center justify-content-center mb-28" style="width: 40px; height: 40px;"><span class="fw-semibold text-white">1</span></div>
            <p class="text-white fs-6 fw-semibold mw-xs mb-0">Book a free meeting with experts to get started.</p>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-6 mb-lg-0">
          <div class="h-100 rounded-3 border border-dark-light px-8 py-7 position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="consulty-assets/how-it-works/shapes.svg" alt="">
            <div class="bg-dark-light bg-opacity-75 rounded-2 d-flex align-items-center justify-content-center mb-28" style="width: 40px; height: 40px;"><span class="fw-semibold text-white">2</span></div>
            <p class="text-white fs-6 fw-semibold mw-xs mb-0">Understand the details of financial requirements.</p>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="h-100 bg-dark-light bg-opacity-50 rounded-3 border border-dark-light border-opacity-50 px-8 py-7">
            <div class="bg-dark-light bg-opacity-75 rounded-2 d-flex align-items-center justify-content-center mb-28" style="width: 40px; height: 40px;"><span class="fw-semibold text-white">3</span></div>
            <p class="text-white fs-6 fw-semibold mw-xs mb-0">Save extra costs &amp; grow any business fast.</p>
          </div>
        </div>

<section class="py-12 py-lg-24">
  <div class="container">
    <p class="text-dark-light mb-32">Our services</p>
    <div class="pb-8 border-bottom"><a class="btn d-block pt-8 px-0 pb-0 mb-8 text-start border-0 border-top rounded-0 position-relative" href="#">
        <div class="d-flex gap-5 justify-content-between align-items-center">
          <div class="d-flex align-items-start gap-7">
            <p class="fw-medium mb-0 lh-1">01.</p>
            <h1 class="font-heading lh-1 mb-0">Business Plan</h1>
          </div><span class="text-warning align-self-end">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
              <path d="M28 10L42 24M42 24L28 38M42 24L6 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div>
        <div class="position-absolute top-0 end-0 me-20 translate-middle-y"><img class="img-fluid d-none d-lg-block h-100" style="max-height: 220px;" src="consulty-assets/services/picture2.png" alt=""></div></a><a class="btn d-block pt-8 px-0 pb-0 mb-8 text-start border-0 border-top rounded-0" href="#">
        <div class="d-flex justify-content-between align-items-center position-relative">
          <div class="d-flex align-items-start gap-7">
            <p class="fw-medium text-light-dark mb-0 lh-1">02.</p>
            <h1 class="font-heading text-light-dark lh-1 mb-0">Consultancy</h1>
          </div>
        </div></a><a class="btn d-block pt-8 px-0 pb-0 text-start border-0 border-top rounded-0" href="#">
        <div class="d-flex justify-content-between align-items-center position-relative">
          <div class="d-flex align-items-start gap-7">
            <p class="fw-medium text-light-dark mb-0 lh-1">03.</p>
            <h1 class="font-heading text-light-dark lh-1 mb-0">Growth Strategy</h1>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container position-relative">
    <div class="row">
      <div class="col-12 col-lg-6 mb-16 mb-lg-0">
        <p class="text-white fs-5 fw-medium mw-xs mb-0">Trusted by 2400+ brands &amp; companies worldwide</p>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row mx-lg-n6 align-items-center">
          <div class="col-6 col-sm-4 px-lg-6 mb-7"><img class="img-fluid d-block mx-auto" src="consulty-assets/logos/logoipsum-white1.svg" alt=""></div>
          <div class="col-6 col-sm-4 px-lg-6 mb-7"><img class="img-fluid d-block mx-auto" src="consulty-assets/logos/logoipsum-white2.svg" alt=""></div>
          <div class="col-6 col-sm-4 px-lg-6 mb-7"><img class="img-fluid d-block mx-auto" src="consulty-assets/logos/logoipsum-white3.svg" alt=""></div>
          <div class="col-6 col-sm-4 px-lg-6 mb-7"><img class="img-fluid d-block mx-auto" src="consulty-assets/logos/logoipsum-white4.svg" alt=""></div>
          <div class="col-6 col-sm-4 px-lg-6 mb-7"><img class="img-fluid d-block mx-auto" src="consulty-assets/logos/logoipsum-white5.svg" alt=""></div>
          <div class="col-6 col-sm-4 px-lg-6 mb-7"><img class="img-fluid d-block mx-auto" src="consulty-assets/logos/logoipsum-white6.svg" alt=""></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-6 mb-20 mb-lg-0">
          <p class="text-dark-light fw-medium mb-6">Fun facts</p>
          <h1 class="font-heading mw-md mw-xl-lg mb-0">Well established &amp; experienced in many fields.</h1>
        </div>
        <div class="col-12 col-lg-6">
          <div class="d-flex flex-wrap mw-sm px-14 mw-sm-none px-sm-0 gap-6 justify-content-center justify-content-xl-end">
            <div>
              <div class="position-relative bg-light-light rounded-pill px-10 mb-4" style="height: 460px;">
                <div class="position-absolute bottom-0 start-0 w-100">
                  <div class="bg-black py-40 rounded-pill position-relative">
                    <div class="position-absolute top-0 start-0 h-100 w-100">
                      <div class="mt-56" style="rotate: -90deg;">
                        <p class="text-white fw-medium mb-0" style="white-space: nowrap;">Year of experiences</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <p class="fs-6 fw-medium text-center">70%</p>
            </div>

<section class="position-relative overflow-hidden pt-32 pb-80 pb-sm-52 pb-lg-40">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 mb-8 mb-md-0">
        <p class="mb-16">About</p>
        <p class="fs-6 mw-lg mb-0">It is a long established fact that a reader will be content distracted by the readable content of a page when it looking at its layout. The point of using is that it has the many variations.</p>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-sm px-6 px-sm-10 ms-sm-auto me-md-auto">
          <h2 class="font-heading text-primary display-1 fw-normal text-center mb-0">20</h2>
          <p class="text-center px-6 fs-6 fw-medium mb-12">years of architecture, design and planning</p>
          <h2 class="font-heading text-primary display-1 fw-normal text-center mb-0">85</h2>
          <p class="text-center px-6 fs-6 fw-medium mb-12">realized projects</p>
        </div>
      </div>
    </div>
    <div class="position-absolute bottom-0 mb-sm-14 start-0"><img class="img-fluid" src="consulty-assets/about/shapes.svg" alt=""></div>
  </div>
</section>

<section class="py-8 bg-primary position-relative overflow-hidden">
  <div class="d-flex align-items-center gap-8 gap-md-24 justify-content-center"><img class="img-fluid" style="height: 36px;" src="consulty-assets/logos/logoipsum-white1.svg" alt=""><img class="img-fluid" style="height: 36px;" src="consulty-assets/logos/logoipsum-white2.svg" alt=""><img class="img-fluid" style="height: 36px;" src="consulty-assets/logos/logoipsum-white3.svg" alt=""><img class="img-fluid" style="height: 36px;" src="consulty-assets/logos/logoipsum-white4.svg" alt=""><img class="img-fluid" style="height: 36px;" src="consulty-assets/logos/logoipsum-white5.svg" alt=""><img class="img-fluid" style="height: 36px;" src="consulty-assets/logos/logoipsum-white6.svg" alt=""></div>
</section>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="bg-primary-light bg-opacity-50 rounded-3 py-10 px-6 px-sm-10 h-full">
            <div class="bg-white rounded-pill d-flex align-items-center justify-content-center mb-10" style="width: 80px; height: 80px;">
              <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none">
                <path d="M19 6.89411C20.1605 5.57928 21.8584 4.75 23.75 4.75C27.2478 4.75 30.0833 7.58553 30.0833 11.0833C30.0833 14.5811 27.2478 17.4167 23.75 17.4167C21.8584 17.4167 20.1605 16.5874 19 15.2726M23.75 33.25H4.75V31.6667C4.75 26.42 9.00329 22.1667 14.25 22.1667C19.4967 22.1667 23.75 26.42 23.75 31.6667V33.25ZM23.75 33.25H33.25V31.6667C33.25 26.42 28.9967 22.1667 23.75 22.1667C22.0196 22.1667 20.3973 22.6293 19 23.4376M20.5833 11.0833C20.5833 14.5811 17.7478 17.4167 14.25 17.4167C10.7522 17.4167 7.91667 14.5811 7.91667 11.0833C7.91667 7.58553 10.7522 4.75 14.25 4.75C17.7478 4.75 20.5833 7.58553 20.5833 11.0833Z" stroke="#FF8A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <p class="fs-7 fw-semibold mb-4">Consultancy</p>
            <p class="text-dark-light mw-xs mb-0">It is a long established fact that a reader will be content distracted by the readable many content of a page when it looking.</p>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="bg-info-light bg-opacity-50 rounded-3 py-10 px-6 px-sm-10 h-full">
            <div class="bg-white rounded-pill d-flex align-items-center justify-content-center mb-10" style="width: 80px; height: 80px;">
              <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none">
                <path d="M14.25 19H23.75M14.25 25.3333H23.75M26.9166 33.25H11.0833C9.33439 33.25 7.91663 31.8322 7.91663 30.0833V7.91667C7.91663 6.16776 9.33439 4.75 11.0833 4.75H19.9275C20.3474 4.75 20.7501 4.91682 21.047 5.21375L29.6195 13.7863C29.9165 14.0832 30.0833 14.4859 30.0833 14.9058V30.0833C30.0833 31.8322 28.6655 33.25 26.9166 33.25Z" stroke="#FF8A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <p class="fs-7 fw-semibold mb-4">Audit &amp; assurance</p>
            <p class="text-dark-light mw-xs mb-0">It is a long established fact that a reader will be content distracted by the readable many content of a page when it looking.</p>

<section class="py-12 py-lg-24">
  <div class="container">
    <h1 class="font-heading text-center mb-6" style="letter-spacing: -1.2px;">Choose your plan</h1>
    <p class="text-dark-light fs-7 mb-20 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="d-flex justify-content-center align-items-center gap-6 flex-wrap mb-12">
      <p class="fs-7 fw-medium mb-0">Monthly billing</p>
      <div class="d-inline-flex p-1 bg-warning rounded-pill" style="height: 32px; width: 56px;">
        <div class="position-relative">
          <input class="opacity-0 position-absolute top-0 start-0" type="checkbox" style="width: 56px; height: 32px;">
          <div class="position-absolute top-50 translate-middle-y start-0 bg-white rounded-pill" style="width: 24px; height: 24px;"></div>
        </div>
      </div>
      <p class="fs-7 fw-medium mb-0">Annual billing</p><span class="d-inline-block rounded-pill bg-warning-light px-4 py-1 fw-bold">25% OFF</span>
    </div>
    <div class="row">
      <div class="col-4">
        <div class="border border-light rounded-3 h-100">
          <div class="p-8 border-bottom border-light">
            <p class="fs-7 fw-semibold mb-2">Free</p>
            <p class="text-dark-light mb-32">Get started with the basic features, but grow as fast as others.</p>
            <h2 class="font-heading mb-2">$0</h2>
            <p class="text-dark-light mb-12">No credit card required</p><a class="btn btn-outline-light text-dark w-100" href="#">Book A Free Call</a>
          </div>
          <div class="p-8">

<section class="py-12 py-lg-24 bg-light-light">
  <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="row">
      <div class="col-12 col-lg-6 mb-6">
        <div class="bg-white rounded-3 p-5">
          <p class="fs-6 fw-semibold mb-1">Senior Product Designer</p>
          <p class="text-dark-light fs-9 mw-xs mb-10">It is a long established fact that a reader will be distracted by the readable.</p>
          <div class="d-flex align-items-end flex-wrap justify-content-between gap-4">
            <div class="d-flex flex-wrap align-items-center gap-3">
              <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">Full Time</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><a class="btn d-flex align-items-center btn-sm btn-outline-dark border-light" href="#"><span class="me-2">Apply Now</span>
              <div>
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<div class="position-fixed top-0 start-0 w-100 p-6">
  <div class="container">
    <div class="bg-white rounded-3 px-6 py-10 px-sm-10 mw-sm mx-auto"><img class="img-fluid d-block mx-auto mb-6" src="consulty-assets/cookies/cookie-icon.svg" alt="">
      <p class="text-center fs-7 mb-8">This website uses cookies to ensure you get the best experience on our website.</p><a class="btn w-100 py-3 mb-4 btn-sm btn-dark" href="#">Allow Cookie</a><a class="btn w-100 py-3 btn-sm btn-outline-dark border-light" href="#">Decline</a>
    </div>
  </div>
</div>

<section class="py-12 py-lg-24">
  <div class="container">
    <h1 class="font-heading mb-16" style="letter-spacing: -1.2px;">Our services</h1>
    <div class="mw-sm mw-md-none mx-auto">
      <div class="row">
        <div class="col-12 col-md-6 col-xl-3 mb-6 mb-xl-0">
          <div class="rounded-3 bg-light-light p-8 position-relative" style="height: 420px;">
            <p class="fs-5 fw-semibold mw-xs mb-4">Branding &amp; designing</p>
            <div class="position-absolute bottom-0 end-0 m-6"><a class="btn p-0 btn-light d-flex align-items-center justify-content-center" href="#" style="width: 44px; height: 44px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M10 3.33325V16.6666M16.6667 9.99992L3.33337 9.99992" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a></div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 mb-6 mb-xl-0">
          <div class="rounded-3 bg-dark p-8 position-relative overflow-hidden" style="height: 420px;">
            <p class="fs-5 fw-semibold text-white mw-xs mb-4">Product Development</p>
            <p class="text-light mw-xs">It is a long established fact that a reader will be readable by the content. There are many of the variations of passages.</p>
            <div class="position-absolute bottom-0 end-0 m-6"><a class="btn p-0 btn-light d-flex align-items-center justify-content-center" href="#" style="width: 44px; height: 44px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
                  <path d="M10.2859 10.286L19.714 19.714M19.714 10.286L10.2859 19.714" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a></div>
            <div class="position-absolute start-0 bottom-0"><img class="img-fluid" src="consulty-assets/services/shapes.svg" alt=""></div>
          </div>