Categories

<!-- Real Estate category card -->
<article class="card hover-effect-scale bg-primary-subtle border-0 overflow-hidden text-center">

  <!-- Card body: Icon + Title -->
  <div class="card-body pt-sm-5 pb-3">
    <svg class="text-dark-emphasis my-3 mt-sm-0" xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M43.777.231H3.73C1.673.231 0 1.905 0 3.961v22.548c0 2.057 1.673 3.73 3.73 3.73h9.225a.941.941 0 1 0 0-1.882H3.73a1.85 1.85 0 0 1-1.847-1.847V3.961A1.85 1.85 0 0 1 3.73 2.114h40.048a1.85 1.85 0 0 1 1.847 1.847v22.548a1.85 1.85 0 0 1-1.847 1.847h-2.826a.941.941 0 1 0 0 1.882h2.826c2.057 0 3.73-1.673 3.73-3.73V3.961c0-2.056-1.673-3.73-3.73-3.73zm4.22 34.579a1.81 1.81 0 0 0-1.185-1.647h0l-15.567-5.775a2.81 2.81 0 0 0-3.653 3.653l5.761 15.541a1.81 1.81 0 0 0 1.655 1.186l.052.001a1.81 1.81 0 0 0 1.666-1.093l1.593-3.658 3.455 3.456c.983.984 2.584.984 3.567.001l1.333-1.332c.476-.476.739-1.11.739-1.784a2.51 2.51 0 0 0-.738-1.784l-3.411-3.412 3.658-1.633a1.81 1.81 0 0 0 1.077-1.72zm-6.751 2.191a.94.94 0 0 0-.282 1.525l4.378 4.379a.64.64 0 0 1 0 .905l-1.333 1.332c-.121.121-.282.187-.452.187h0a.64.64 0 0 1-.453-.187l-4.431-4.433a.94.94 0 0 0-1.529.29l-2.082 4.781-5.706-15.394c-.198-.535.119-.91.221-1.012.079-.079.319-.285.67-.285a.98.98 0 0 1 .342.064l15.422 5.721-4.765 2.127zm4.911-2.073l.327-.883-.327.883zm-19.352-9.664l-2.659-2.66a.941.941 0 1 0-1.331 1.331l2.66 2.66a.94.94 0 1 0 1.331-1.331zm-2.606 3.1h-3.761a.941.941 0 1 0 0 1.882h3.761a.941.941 0 1 0 0-1.882zm5.398-9.161a.94.94 0 0 0-.941.941v3.761a.941.941 0 1 0 1.882 0v-3.761a.94.94 0 0 0-.941-.941zm7.9 1.748a.94.94 0 0 0-1.331 0l-2.66 2.66a.94.94 0 1 0 1.332 1.331l2.66-2.66a.94.94 0 0 0 0-1.331zM25.716 32.736a.94.94 0 0 0-1.331 0l-2.66 2.66a.94.94 0 1 0 1.331 1.331l2.66-2.66a.94.94 0 0 0 0-1.331zm-9.026-2.495c.521 0 .944-.423.944-.944s-.423-.944-.944-.944-.944.423-.944.944.423.944.944.944zm-.166-16.121c.825-.358 1.323-1.198 1.323-2.475 0-2.21-1.51-2.739-3.128-2.739h-3.004c-.451 0-.887.218-.887.638V19.66c0 .327.342.623.887.623h3.299c1.759 0 3.112-.872 3.112-3.299v-.327c0-1.556-.654-2.163-1.603-2.537zm-3.688-3.439h1.727c.794 0 1.261.498 1.261 1.307 0 .794-.405 1.338-1.245 1.338h-1.743v-2.645zm3.268 6.132c0 1.183-.56 1.696-1.51 1.696h-1.758v-3.595h1.758c.949 0 1.51.436 1.51 1.65v.249zm9.882-7.906c-.514 0-1.012.187-1.012.623v7.283c0 1.214-.638 1.79-1.712 1.79s-1.712-.576-1.712-1.79V9.529c0-.436-.514-.623-1.012-.623-.514 0-1.012.187-1.012.623v7.283c0 2.599 1.634 3.564 3.735 3.564 2.085 0 3.735-.965 3.735-3.564V9.529c0-.436-.514-.623-1.011-.623zm9.352 0c-.327 0-.467.14-.607.405L32.35 13.81l-2.366-4.498c-.14-.28-.296-.405-.623-.405-.545 0-1.338.342-1.338.84a.61.61 0 0 0 .047.202l3.221 5.571a.39.39 0 0 1 .047.202v3.922c0 .42.514.638 1.012.638.514 0 1.012-.218 1.012-.638v-3.922a.39.39 0 0 1 .062-.202l3.206-5.571c.047-.078.047-.156.047-.202 0-.498-.794-.84-1.338-.84z"/></svg>
    <h3 class="h5 mb-0">Buy a property</h3>
  </div>

  <!-- Card footer: Button + Image -->
  <div class="card-footer d-flex flex-column align-items-center gap-4 gap-sm-5 bg-transparent border-0 p-0">
    <a class="btn btn-dark stretched-link mx-4" href="#">Find a home</a>
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target mt-3 mt-sm-0" style="--fn-aspect-ratio: calc(216 / 416 * 100%)">
      <img src="assets/img/home/real-estate/categories/01.png" alt="Image">
    </div>
  </div>
</article>

<!-- Real Estate city card -->
<article class="card hover-effect-scale bg-transparent">

  <!-- Image -->
  <div class="card-img-top bg-body-tertiary overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(230 / 306 * 100%)">
      <img src="assets/img/home/real-estate/cities/01.jpg" alt="Image">
    </div>
  </div>

  <!-- Card body: Title -->
  <div class="card-body text-center p-3">
    <h3 class="h5 mb-0">
      <a class="hover-effect-underline stretched-link" href="#">New York</a>
    </h3>
  </div>

  <!-- Card footer: Stats -->
  <div class="card-footer d-flex bg-transparent border-0 pt-0 pb-3 px-3 mt-n1">
    <div class="w-50 text-center pe-1">
      <i class="fi-zap mb-1"></i>
      <div class="fs-sm">for sale <span class="fw-semibold">1739</span></div>
    </div>
    <hr class="vr my-0 mx-2">
    <div class="w-50 text-center ps-1">
      <i class="fi-tag mb-1"></i>
      <div class="fs-sm">for rent <span class="fw-semibold">3845</span></div>
    </div>
  </div>
</article>

<!-- Cars category card: Variant 1 -->
<article class="card hover-effect-scale bg-body-tertiary border-0">
  <div class="card-body text-center px-3">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(80 / 164 * 100%)">
      <img src="assets/img/home/cars/body-type/mpv.svg" alt="Image">
    </div>
    <h3 class="h6 pt-3 mb-1">
      <a class="hover-effect-underline stretched-link" href="#">Family MPV</a>
    </h3>
    <p class="fs-sm text-body-secondary mb-2">582 offers</p>
  </div>
</article>

<!-- Cars category card: Variant 2 -->
<article class="hover-effect-scale position-relative text-center" style="max-width: 200px">
  <div class="bg-body-tertiary rounded-circle overflow-hidden mx-auto" style="width: 132px">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio ratio-1x1 hover-effect-target">
      <img src="assets/img/home/cars/categories/04.jpg" alt="Image">
    </div>
  </div>
  <h3 class="h6 pt-3 mb-0">
    <a class="hover-effect-underline stretched-link" href="#">Off-road cars</a>
  </h3>
</article>

<!-- City Guide category -->
<article class="hover-effect-scale position-relative text-center" style="max-width: 164px">
  <div class="position-relative d-flex align-items-end justify-content-center text-primary mx-auto" style="width: 88px; height: 88px">
    <svg class="position-relative z-1" style="backface-visibility: hidden" xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M47.725 18.275L46.5 17.049V7.164c0-3.95-3.213-7.163-7.163-7.163-1.625 0-3.125.545-4.328 1.46-5.303-2.604-11.905-1.704-16.31 2.701-4.717 4.717-5.414 11.954-2.093 17.417l-5.371 5.371H8.966a.94.94 0 0 0-.937.938v1.72h-1.72a.94.94 0 0 0-.937.938v1.72h-1.72a.94.94 0 0 0-.937.938v1.72H.994a.94.94 0 0 0-.663.275l-.057.057c-.176.176-.275.414-.275.663v6.083a.94.94 0 0 0 .937.938h6.196a.94.94 0 0 0 .663-.275l10.341-10.341a.94.94 0 0 0 0-1.326.94.94 0 0 0-1.326 0L6.745 41.062h-4.87v-4.265h1.777a.94.94 0 0 0 .937-.937v-1.72h1.72a.94.94 0 0 0 .938-.937v-1.72h1.72a.94.94 0 0 0 .938-.937v-1.72h1.72a.94.94 0 0 0 .663-.275l5.415-5.415a14.38 14.38 0 0 0 .998 1.108c2.537 2.537 5.864 3.994 9.426 4.145v15.674c0 2.171 1.766 3.937 3.937 3.937h12c2.171 0 3.937-1.766 3.937-3.937V18.937a.94.94 0 0 0-.275-.663zM39.337 1.876c2.916 0 5.288 2.372 5.288 5.288v8.011l-1.686-1.686c-.008-.008-.017-.015-.026-.023-.175-3.387-1.552-6.723-4.133-9.304-.617-.616-1.276-1.164-1.969-1.643a5.26 5.26 0 0 1 2.526-.643zm-5.288 7.951v-2.07a2.26 2.26 0 0 1 1.34 2.07 2.26 2.26 0 0 1-.666 1.607c-.886.886-2.328.886-3.214 0s-.886-2.328 0-3.214c.198-.198.424-.349.665-.458v2.065a.94.94 0 0 0 .938.938.94.94 0 0 0 .937-.938zM28.74 26.521a12.29 12.29 0 0 1-8.715-3.604c-4.805-4.805-4.805-12.624 0-17.429 2.328-2.328 5.423-3.61 8.715-3.61a12.3 12.3 0 0 1 4.865.995 7.13 7.13 0 0 0-1.292 2.886c-.781.153-1.526.531-2.13 1.135-1.617 1.617-1.617 4.248 0 5.866.809.809 1.871 1.213 2.933 1.213s2.124-.404 2.933-1.213a4.12 4.12 0 0 0 1.215-2.933 4.12 4.12 0 0 0-1.215-2.933A4.12 4.12 0 0 0 34.22 5.83a5.27 5.27 0 0 1 1.075-2.07 12.42 12.42 0 0 1 2.161 1.728 12.24 12.24 0 0 1 3.61 8.715 12.24 12.24 0 0 1-3.61 8.715c-2.403 2.403-5.558 3.604-8.715 3.604zm17.385 17.541c0 1.137-.925 2.063-2.062 2.063h-12c-1.137 0-2.063-.925-2.063-2.062V28.346a14.09 14.09 0 0 0 8.78-4.103c2.307-2.306 3.651-5.216 4.036-8.225l3.308 3.308v24.736zM23.965 9.429a.94.94 0 0 0 0-1.326.94.94 0 0 0-1.326 0 8.64 8.64 0 0 0 0 12.198c.183.183.423.275.663.275s.48-.092.663-.275a.94.94 0 0 0 0-1.326 6.76 6.76 0 0 1 0-9.547zm2.982 11.291a.94.94 0 1 0-.257 1.84.94.94 0 0 0 .901-.68.94.94 0 0 0-.644-1.159zm15.1 20.342h-7.969a.94.94 0 0 0-.937.938.94.94 0 0 0 .938.938h7.969a.94.94 0 0 0 .938-.937.94.94 0 0 0-.937-.937zM20.542 28.591c-.174-.174-.416-.275-.663-.275s-.488.1-.663.275-.275.416-.275.663.1.488.275.663.416.275.663.275.488-.1.663-.275a.94.94 0 0 0 0-1.326z"/></svg>
    <span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-primary-subtle rounded-circle" style="--fn-transform-scale: 1.1"></span>
  </div>
  <h3 class="h6 fw-normal pt-3 pt-sm-4 mb-0">
    <a class="hover-effect-underline stretched-link" href="#">Accommodation</a>
  </h3>
</article>

<!-- Contractors category -->
<article class="hover-effect-scale position-relative d-inline-flex align-items-center gap-3">
  <div class="position-relative d-flex align-items-center justify-content-center text-secondary-emphasis" style="width: 56px; height: 56px">
    <svg class="position-relative z-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"><path d="M15.853 5.586h-.815v-.75a.5.5 0 0 0-.5-.5h-.75V2.985h.957a.5.5 0 1 0 0-1.001h-.957v-1.4a.5.5 0 0 0-.5-.5h-2.751a.5.5 0 0 0-.5.5v1.401H8.952L7.165.151A.5.5 0 0 0 6.806 0H4.072a.5.5 0 1 0 0 1.001h2.524l1.787 1.833a.5.5 0 0 0 .358.151h1.294v1.351h-.75a.5.5 0 0 0-.5.5v.75h-.636a6.64 6.64 0 0 0-6.628 6.628V23.5a.5.5 0 0 0 .5.5h3.502a.5.5 0 0 0 .5-.5V12.214a2.13 2.13 0 0 1 2.126-2.126h1.136 5.253 1.315a2.13 2.13 0 0 1 2.126 2.126v1.376a.5.5 0 0 0 .5.5h3.502a.5.5 0 0 0 .5-.5v-1.376a6.64 6.64 0 0 0-6.628-6.628zM8.784 9.088h-.636a3.13 3.13 0 0 0-3.127 3.127V23h-2.5V12.214c0-3.103 2.525-5.628 5.628-5.628h.636v2.501h0zm2.251-8.004h1.751v.9h-1.751v-.9zm0 1.901h1.751v1.351h-1.751V2.985zm3.001 6.103H9.785V5.336h.75 2.751.75v3.752zm7.444 4.002h-2.501v-.875a3.13 3.13 0 0 0-3.127-3.127h-.815V6.587h.815c3.103 0 5.628 2.525 5.628 5.628v.875h0zm-1.327 3.835a.5.5 0 0 0-.394.192c-.268.344-1.607 2.107-1.607 3.059 0 1.103.898 2.001 2.001 2.001s2.001-.898 2.001-2.001c0-.953-1.338-2.715-1.607-3.059a.5.5 0 0 0-.394-.192zm0 4.252a1 1 0 0 1-1.001-1c0-.326.468-1.152 1.001-1.91.532.758 1 1.584 1 1.91a1 1 0 0 1-1 1zm-16.38-2.884a.5.5 0 0 0-.5.5v3.055a.5.5 0 1 0 1.001 0v-3.055a.5.5 0 0 0-.5-.5zm0-2.907a.5.5 0 0 0-.5.5v.834a.5.5 0 1 0 1.001 0v-.834a.5.5 0 0 0-.5-.5z"/></svg>
    <span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-body-secondary rounded-circle" style="--fn-transform-scale: 1.1"></span>
  </div>
  <h3 class="h6 fw-normal mb-0">
    <a class="hover-effect-underline stretched-link" href="#">Plumbing</a>
  </h3>
</article>

<!-- Doctors directory card -->
<article class="card hover-effect-scale">

  <!-- Image -->
  <div class="card-img-top bg-body-tertiary overflow-hidden">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio hover-effect-target" style="--fn-aspect-ratio: calc(230 / 416 * 100%)">
      <img src="assets/img/home/doctors/consultation/01.jpg" alt="Image">
    </div>
  </div>

  <!-- Card body: Title + Description -->
  <div class="card-body p-3">
    <h3 class="h4 pt-1 mb-2">
      <a class="hover-effect-underline stretched-link" href="#">Optometrist</a>
    </h3>
    <p class="fs-sm mb-0">Providing comprehensive eye exams, vision correction, and eye health services to ensure optimal visual performance and eye care.</p>
  </div>

  <!-- Card footer: Price + Booking button -->
  <div class="card-footer d-flex flex-wrap justify-content-between gap-3 bg-transparent border-0 pt-1 pt-sm-2 pt-xl-3 pb-3 px-3">
    <div class="d-flex align-items-center gap-2">
      <div class="h4 mb-0">$50.00</div>
      <del class="fs-sm text-body-secondary">$75.00</del>
    </div>
    <button type="button" class="btn btn-outline-primary position-relative z-2">
      Book an appointment
    </button>
  </div>
</article>