<%- include('./includes/header', {title: 'Home - Pioneer Reality' }) %>
  <main>
    <style>
      .bg-gray {
        background-color: #f9f9f9;
      }

      .site-heading h2 {
        display: block;
        font-weight: 700;
        margin-bottom: 10px;
        text-transform: uppercase;
      }

      .site-heading h2 {
        color: #182b17;
        font-family: "Playfair Display", serif;
      }

      .site-heading h4 {
        display: inline-block;
        padding-bottom: 20px;
        position: relative;
        text-transform: capitalize;
        z-index: 1;
      }

      .site-heading h4::before {
        background: #182B17 none repeat scroll 0 0;
        bottom: 0;
        content: "";
        height: 2px;
        left: 50%;
        margin-left: -25px;
        position: absolute;
        width: 50px;
      }

      .site-heading {
        margin-bottom: 60px;
        overflow: hidden;
        margin-top: -5px;
      }

      .carousel-shadow .owl-stage-outer {
        margin: -15px -15px 0;
        padding: 15px;
      }

      .we-offer-area .our-offer-carousel .owl-dots .owl-dot span {
        background: #ffffff none repeat scroll 0 0;
        border: 2px solid;
        height: 15px;
        margin: 0 5px;
        width: 15px;
      }

      .we-offer-area .our-offer-carousel .owl-dots .owl-dot.active span {
        background: #182B17 none repeat scroll 0 0;
        border-color: #182B17;
      }

      .we-offer-area .item {
        background: #ffffff none repeat scroll 0 0;
        border-left: 2px solid #182B17;
        -moz-box-shadow: 0 0 10px #cccccc;
        -webkit-box-shadow: 0 0 10px #cccccc;
        -o-box-shadow: 0 0 10px #cccccc;
        box-shadow: 0 0 10px #cccccc;
        overflow: hidden;
        padding: 30px;
        position: relative;
        z-index: 1;
      }

      .we-offer-area.text-center .item {
        background: #ffffff none repeat scroll 0 0;
        border: medium none;
        height: 25vw;
      }

      .we-offer-area.text-center .item i {
        background: #182B17 none repeat scroll 0 0;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        color: #ffffff;
        font-size: 40px;
        height: 80px;
        line-height: 80px;
        position: relative;
        text-align: center;
        width: 80px;
        z-index: 1;
        transition: all 0.35s ease-in-out;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        -ms-transition: all 0.35s ease-in-out;
        -o-transition: all 0.35s ease-in-out;
        margin-bottom: 25px;
      }

      .we-offer-area.text-center .item i::after {
        border: 2px solid #182B17;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        content: "";
        height: 90px;
        left: -5px;
        position: absolute;
        top: -5px;
        width: 90px;
        z-index: -1;
        transition: all 0.35s ease-in-out;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        -ms-transition: all 0.35s ease-in-out;
        -o-transition: all 0.35s ease-in-out;
      }

      .we-offer-area.item-border-less .item {
        border: medium none;
      }

      .we-offer-area .our-offer-items.less-carousel .equal-height {
        margin-bottom: 30px;
      }

      .we-offer-area.item-border-less .item .number {
        font-family: "Poppins", sans-serif;
        font-size: 50px;
        font-weight: 900;
        opacity: 0.1;
        position: absolute;
        right: 30px;
        top: 30px;
      }

      .our-offer-carousel.center-active .owl-item:nth-child(2n) .item,
      .we-offer-area.center-active .single-item:nth-child(2n) .item {
        background: #182B17 none repeat scroll 0 0;
      }

      .our-offer-carousel.center-active .owl-item:nth-child(2n) .item i,
      .our-offer-carousel.center-active .owl-item:nth-child(2n) .item h4,
      .our-offer-carousel.center-active .owl-item:nth-child(2n) .item p,
      .we-offer-area.center-active .single-item:nth-child(2n) .item i,
      .we-offer-area.center-active .single-item:nth-child(2n) .item h4,
      .we-offer-area.center-active .single-item:nth-child(2n) .item p {
        color: #ffffff;
      }

      .we-offer-area .item i {
        color: #182B17;
        display: inline-block;
        font-size: 60px;
        margin-bottom: 20px;
      }

      .we-offer-area .item h4 {
        font-weight: 600;
        text-transform: capitalize;
      }

      .we-offer-area .item p {
        margin: 0;
      }

      .we-offer-area .item i,
      .we-offer-area .item h4,
      .we-offer-area .item p {
        transition: all 0.35s ease-in-out;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        -ms-transition: all 0.35s ease-in-out;
        -o-transition: all 0.35s ease-in-out;
      }

      .we-offer-area .item::after {
        background: #182B17 none repeat scroll 0 0;
        content: "";
        height: 100%;
        left: -100%;
        position: absolute;
        top: 0;
        transition: all 0.35s ease-in-out;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        -ms-transition: all 0.35s ease-in-out;
        -o-transition: all 0.35s ease-in-out;
        width: 100%;
        z-index: -1;
      }

      .we-offer-area .item:hover::after {
        left: 0;
      }

      .we-offer-area .item:hover i,
      .we-offer-area .item:hover h4,
      .we-offer-area .item:hover p {
        color: #ffffff !important;
      }

      .we-offer-area.text-center .item:hover i::after {
        border-color: #ffffff !important;
      }

      .we-offer-area.text-center .item:hover i {
        background-color: #ffffff !important;
        color: #182B17 !important;
      }

      .we-offer-area.text-left .item i {
        background: #182B17 none repeat scroll 0 0;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        color: #ffffff;
        display: inline-block;
        font-size: 60px;
        height: 100px;
        line-height: 100px;
        margin-bottom: 30px;
        position: relative;
        width: 100px;
        z-index: 1;
        text-align: center;
      }

      .we-offer-area.text-left .item i::after {
        border: 2px solid #182B17;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        content: "";
        height: 120px;
        left: -10px;
        position: absolute;
        top: -10px;
        width: 120px;
      }







      /* Dropdown Button */
      .dropdown a {
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #f9f9f9;
        transition: background-color 0.3s ease;
      }

      .dropdown a:hover {
        background-color: #e6e6e6;
      }

      .dropdown a i {
        font-size: 16px;
        color: #063900;
        margin: 0 0 0 10px;
      }

      /* Dropdown Menu */



      /* Dropdown Items */
      .dropdown-menu li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }

      .dropdown-menu li:last-child {
        margin-bottom: 0;
      }

      .dropdown-menu span {
        font-size: 14px;
        color: #333;
        font-weight: bold;
      }

      /* Quantity Input Styling */
      .qty-inp {
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .qty-inp input[type="number"] {
        width: 60px;
        padding: 5px;
        text-align: center;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 4px;
        outline: none;
        transition: border-color 0.3s ease;
      }

      .qty-inp input[type="number"]:focus {
        border-color: #007bff;
      }

      /* Price Range Section */
      .price-range {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .price-range span {
        font-size: 14px;
        color: #555;
      }

      .price-range #price-range {
        height: 6px;
        background-color: #ddd;
        border-radius: 4px;
        position: relative;
      }

      /* .price-range #price-range::before,
      .price-range #price-range::after {
        content: '';
        width: 15px;
        height: 15px;
        background-color: #007bff;
        border-radius: 50%;
        position: absolute;
        top: -5px;
      } */

      /* .price-range #price-range::before {
        left: 0;
      }

      .price-range #price-range::after {
        right: 0;
      } */

      /* Price Range Wrapper */
      .price-range {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-family: Arial, sans-serif;
      }

      /* Price Range Label */
      .price-range span {
        font-size: 14px;
        color: #555;
        font-weight: bold;
      }

      /* Price Range Slider */
      #price-range {
        position: relative;
        width: 100%;
        height: 6px;
        background-color: #ddd;
        border-radius: 4px;

      }

      /* #price-range::before,
      #price-range::after {
        content: '';
        position: absolute;
        top: -5px;
        width: 15px;
        height: 15px;
        background-color: #182b17;
        border-radius: 50%;
        cursor: pointer;
      } */
      span.ui-slider-handle.ui-corner-all.ui-state-default {
        background: #182b17;
        border-radius: 25px;
      }

      #price-range::before {
        left: 0;
      }

      #price-range::after {
        right: 0;
      }
    </style>
    <section class="banner">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h2>Pioneer Realty Australia:<br>
              A Trusted Name in Real Estate </h2>
            <p>Welcome to Pioneer Realty Australia – your one-stop for all your real estate needs. Regardless of whether
              you are in the market for purchasing, renting, seeking Melbourne businesses for sale, or if you need an
              accurate property appraisal in Australia, our services are appropriate for your needs.
            </p>
            <form action="/sites/pioneer-reality/filter" method="post">
              <div class="custom-filter mt-4">
                <ul>
                  <li>
                    <input name="address" type="text" placeholder="Search Address or Suburb ">
                  </li>
                  <li class="seperator"></li>
                  <li clas>
                    <span></span>
                    <div class="dropdown mntore">
                      <button style="background-color: transparent;
                  border: none;
                  outline: none;
                  color: #fff;
                  font-size: 18px;
                  font-weight: 500;
                  font-family: 'Inter';" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Select Type <i class="fa-solid fa-chevron-down"></i>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="#" style="color:#000;     font-family: 'Gilroy';"
                            data-value="Rent">For Rent</a></li>
                        <li><a class="dropdown-item" href="#"
                            style="color:#000; border-top: 1px solid #000;     font-family: 'Gilroy';"
                            data-value="Sell">For Sell</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="seperator">

                  </li>
                  <li>
                    <div class="dropdown mntore">
                      <a href="#" role="" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                        Filters <i class="fa-solid fa-chevron-down"></i>
                      </a>

                      <ul class="dropdown-menu search-filter">
                        <li>
                          <span>Beds (min)</span>
                          <div class="qty-inp">
                            <!-- <button class="dec" type="button"><i class="fa-solid fa-minus"></i></button> -->
                            <input type="number" name="beds" min="0" value="0">
                            <!-- <button class="inc" type="button"><i class="fa-solid fa-plus"></i></button> -->
                          </div>
                        </li>
                        <li>
                          <span>Baths (min)</span>
                          <div class="qty-inp">
                            <!-- <button class="dec" type="button"><i class="fa-solid fa-minus"></i></button> -->
                            <input type="number" name="baths" min="0" value="0">
                            <!-- <button class="inc" type="button"><i class="fa-solid fa-plus"></i></button> -->
                          </div>
                        </li>
                        <li>
                          <div style="width: 100%;" class="price-range">
                            <span class="display-values">Price Range: <span id="range"></span></span>
                            <div class="price-slider" id="price-range"></div>
                            <input type="hidden" name="pricerange">
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li class="btn-li"><button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button></li>
                </ul>
              </div>
            </form>
            <button onclick="local()">Request appraisal</button>
          </div>
        </div>
      </div>
    </section>
    <section class="Team">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12 col-md-12">
            <div class="tecture-motive">
              <h4>Team</h4>
              <h2>meet our team</h2>
              <p>Pioneer Realty Australia has a professional and qualified team that ensures that they deliver the best.
                Having drawn significant experience working with the Melbourne housing market and possessing acting
                details on property values, our specialists are aimed at providing accurate services for buyers,
                sellers, investors, and business individuals. </p>
            </div>
          </div>

          <% teams.forEach(item=> { %>
            <div class="col-12 col-md-3">
              <a href="/sites/pioneer-reality/team/<%- item.url %>">
                <div class="custom-profile">
                  <img src="/sites/pioneer-reality<%- item.picture %>" alt="">
                  <h4><%- item.name %></h4>

                  view detail
              </a>
            </div>
        </div>
        <% }) %>

      </div>
      </div>
    </section>
    <section class="explore">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-12 col-md-6">
            <div class="explore-1">
              <h2>Explore</h2>
              <ul>
                <li data-images="/sites/pioneer-reality/images/bg/sidebar.png">
                  <a href="our-mission">Our Mission</a>
                </li>
                <li data-images="/sites/pioneer-reality/images/bg/Group4.png">
                  <a href="services">Our Services</a>
                </li>
                <li data-images="/sites/pioneer-reality/images/bg/0250.png">
                  <a href="team">Our Team</a>
                </li>
              </ul>
              <button onclick="window.location.href='contact-us';">Contact</button>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="explore-2">
              <img id="dynamicImage1" src="/sites/pioneer-reality/images/bg/sidebar.png" class="img-fluid" alt="img">
            </div>
          </div>
        </div>
      </div>
    </section>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Select all list items and the dynamic image
        const listItems = document.querySelectorAll(".explore-1 ul li");
        const dynamicImage = document.getElementById("dynamicImage1");

        // Check if the elements are found
        if (!listItems.length || !dynamicImage) {
          console.error("Required elements not found!");
          return;
        }

        // Add hover event listeners to each list item
        listItems.forEach(item => {
          // Mouse enter: Change image
          item.addEventListener("mouseenter", function () {
            const newImageSrc = item.getAttribute("data-images");
            if (newImageSrc) {
              dynamicImage.src = newImageSrc;
            }
          });

          // Mouse leave: Reset to default image
          item.addEventListener("mouseleave", function () {
            dynamicImage.src = "/sites/pioneer-reality/images/bg/sidebar.png";
          });
        });
      });

    </script>
    <section class="place">
      <div class="container">
        <h2 class="motion-h2">place we love</h2>
        <div class="row g-lg-5 g-4 justify-content-center property-listing">
          <% salesListing?.data?.forEach((item, ind)=> { %>
            <div class="col-12 col-md-4 property-item" style="display: <%- ind < 12 ? 'block' : 'none' %>;">
              <div class="loper-1">
                <a class="mention-cards-1" href="/sites/pioneer-reality/request-appraisal/<%- item.id %>">
                  <div class="custom-place">
                    <% const thumbnail=item?.images?.find((item)=> item.index == 'MAIN') %>
                      <!-- <img src="/sites/pioneer-reality/images/place/1.png" class="img-fluid" alt="img"> -->
                      <img src="<%- thumbnail?.url ? thumbnail?.url : 'images/property-placeholder.png' %>"
                        alt="<%= item.id %>" class="img-fluid thumbnail" alt="img">
                      <!-- <span>$25,854 usd</span> -->
                      <span><%- item.display_price ? item.display_price : 'Price not available' %></span>
                  </div>
                  <div class="custom-place-1">
                    <h4><%- item?.property?.unit %> <%- item?.property?.number %> <%- item?.property?.street_name %> <%-
                              item?.property?.street_type %> <%- item?.property?.suburb %></h4>
                    <div class="desc">
                      <p><%- item.advertising_copy?.heading || 'Property Description Unavailable' %></p>
                    </div>
                    <ul>
                      <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span><%-
                            item?.property?.beds || 0 %> bed(s)</span></li>
                      <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span><%-
                            item?.property?.baths || 0 %> bath(s)</span></li>
                      <li><img src="/sites/pioneer-reality/images/icon/square.png" class="img-fluid" alt="img"><span><%-
                            item?.property?.house_size || 'N/A' %> <%- item?.property?.house_measure || '' %></span>
                      </li>
                    </ul>
                    <script>
                      document.addEventListener("DOMContentLoaded", function () {
                        const loadMoreButton = document.querySelector(".load-more");
                        const propertyItems = document.querySelectorAll(".property-item");
                        const itemsPerClick = 4; // Number of items to show on each click
                        let visibleItems = 12; // Initially visible items (as per your inline style logic)

                        loadMoreButton.addEventListener("click", () => {
                          // Calculate the next set of items to display
                          const nextVisibleItems = visibleItems + itemsPerClick;

                          // Show the next set of items
                          propertyItems.forEach((item, index) => {
                            if (index < nextVisibleItems) {
                              item.style.display = "block";
                            }
                          });

                          // Update the visible items count
                          visibleItems = nextVisibleItems;

                          // Hide the button if all items are visible
                          if (visibleItems >= propertyItems.length) {
                            loadMoreButton.style.display = "none";
                          }
                        });
                      });
                    </script>
                  </div>
                  <div class="place-holder">
                    <ul>
                      <li><span style="text-transform: capitalize;"><%- item.status || 'For Sale' %></span></li>
                      <li>
                        <ul>
                          <!-- <li><a href="<%- item.url %>" target="_blank"><img src="/sites/pioneer-reality/images/icon/next-tap.png" alt="img"></a></li> -->
                          <li><a href="/sites/pioneer-reality/request-appraisal/<%- item.id %>"><img
                                src="/sites/pioneer-reality/images/icon/next-tap.png" alt="img"></a></li>
                          <li><a href="#"><img src="/sites/pioneer-reality/images/icon/copypest.png" alt="img"></a></li>
                          <li>
                            <a href="#"><img src="/sites/pioneer-reality/images/icon/heart.png" class="img-fluid"
                                alt="img"></a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </a>
              </div>
            </div>
            <% }) %>
              <!-- <div class="col-12 col-md-3">
            <div class="custom-place">
              <img src="/sites/pioneer-reality/images/place/2.png" class="img-fluid" alt="img">
              <span>$25,854 usd</span>
            </div>
            <div class="custom-place-1">
              <h4>CKE Buyer Agency</h4>
              <p>10 of Australia’s Economic Powerhouse Cities 2024</p>
              <ul>
                <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span>1 bed</span></li>
                <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span>2 bed</span></li>
                <li><img src="/sites/pioneer-reality/images/icon/square.png" class="img-fluid" alt="img"><span>1200 sqft</span>
                </li>
              </ul>
            </div>
            <div class="place-holder">
  
              <ul>
                <li><span>for sell</span></li>
                <li>
                  <ul>
                    <li><a href="#"><img src="/sites/pioneer-reality/images/icon/next-tap.png" alt="img"></a></li>
                    <li><a href="#"><img src="/sites/pioneer-reality/images/icon/copypest.png" alt="img"></a></li>
                    <li>
                      <a href="#"><img src="/sites/pioneer-reality/images/icon/heart.png" class="img-fluid" alt="img"></a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-3">
            <div class="custom-place">
              <img src="/sites/pioneer-reality/images/place/3.png" class="img-fluid" alt="img">
              <span>$25,854 usd</span>
            </div>
            <div class="custom-place-1">
              <h4>CKE Buyer Agency</h4>
              <p>10 of Australia’s Economic Powerhouse Cities 2024</p>
              <ul>
                <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span>1 bed</span></li>
                <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span>2 bed</span></li>
                <li><img src="/sites/pioneer-reality/images/icon/square.png" class="img-fluid" alt="img"><span>1200 sqft</span>
                </li>
              </ul>
            </div>
            <div class="place-holder">
  
              <ul>
                <li><span>for sell</span></li>
                <li>
                  <ul>
                    <li><a href="#"><img src="/sites/pioneer-reality/images/icon/next-tap.png" alt="img"></a></li>
                    <li><a href="#"><img src="/sites/pioneer-reality/images/icon/copypest.png" alt="img"></a></li>
                    <li>
                      <a href="#"><img src="/sites/pioneer-reality/images/icon/heart.png" class="img-fluid" alt="img"></a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-3">
            <div class="custom-place">
              <img src="/sites/pioneer-reality/images/place/4.png" class="img-fluid" alt="img">
              <span>$25,854 usd</span>
            </div>
            <div class="custom-place-1">
              <h4>CKE Buyer Agency</h4>
              <p>10 of Australia’s Economic Powerhouse Cities 2024</p>
              <ul>
                <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span>1 bed</span></li>
                <li><img src="/sites/pioneer-reality/images/icon/bed.png" class="img-fluid" alt="img"><span>2 bed</span></li>
                <li><img src="/sites/pioneer-reality/images/icon/square.png" class="img-fluid" alt="img"><span>1200 sqft</span>
                </li>
              </ul>
            </div>
            <div class="place-holder">
  
              <ul>
                <li><span>for sell</span></li>
                <li>
                  <ul>
                    <li><a href="#"><img src="/sites/pioneer-reality/images/icon/next-tap.png" alt="img"></a></li>
                    <li><a href="#"><img src="/sites/pioneer-reality/images/icon/copypest.png" alt="img"></a></li>
                    <li>
                      <a href="#"><img src="/sites/pioneer-reality/images/icon/heart.png" class="img-fluid" alt="img"></a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div> -->

              <button class="load-more">Load More</button>

        </div>
      </div>
    </section>
    <section class="we-offer-area text-center ">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="site-heading text-center">
              <h2>Our Services
              </h2>

            </div>
          </div>
        </div>
        <div class="row our-offer-items less-carousel">
          <!-- Single Item -->
          <div class="col-md-4 col-sm-6 equal-height">
            <div class="item">
              <i class="fas fa-pen-fancy"></i>
              <h4>Our Services
              </h4>
              <p>
                Our service for searching properties works well in finding any type of housing from cheap rooms to
                massive houses or apartments for rent across Australia. What would you like to know, the price of your
                home? Need professional tools? We give you the best market solutions you will ever find in the market.


              </p>
            </div>
          </div>
          <!-- End Single Item -->

          <!-- Single Item -->
          <div class="col-md-4 col-sm-6 equal-height">
            <div class="item">
              <i class="fas fa-dharmachakra"></i>
              <h4>Property Management
              </h4>
              <p>
                Improve your profits with our property management solutions; homes for rent in Victoria, rental houses
                in Victoria and housing estates.

              </p>
            </div>
          </div>
          <!-- End Single Item -->

          <!-- Single Item -->
          <div class="col-md-4 col-sm-6 equal-height">
            <div class="item">
              <i class="fas fa-tasks"></i>
              <h4>Real Estate Consultation
              </h4>
              <p>
                First-time buyers, property investment buyers as well as businesses with interests in property ventures
                receive professional guidance from us. Whether the user is interested in acquiring authentic commercial
                property in Victoria or is interested in leasing properties, our knowledge benefits the clients.



              </p>
            </div>
          </div>
          <!-- End Single Item -->

          <!-- Single Item -->
          <div class="col-md-4 col-sm-6 equal-height">
            <div class="item">
              <i class="fas fa-tachometer-alt"></i>
              <h4>Renting and Leasing
              </h4>
              <p>
                Find signature spaces for you or your business, from a beauty room in Melbourne, a house in Victoria or
                newer rentals across the country.

              </p>
            </div>
          </div>
          <!-- End Single Item -->

          <!-- Single Item -->
          <div class="col-md-4 col-sm-6 equal-height">
            <div class="item">
              <i class="fas fa-recycle"></i>
              <h4>Software Update</h4>
              <p>
                We regularly update our platform to enhance property searches, market insights, and transactions with
                the latest technology.
              </p>
            </div>
          </div>
          <!-- End Single Item -->

          <!-- Single Item -->
          <div class="col-md-4 col-sm-6 equal-height">
            <div class="item">
              <i class="fas fa-headset"></i>
              <h4>24/7 Support</h4>
              <p>
                Our team is available anytime to assist with property listings, inquiries, and transactions.
              </p>
            </div>
          </div>
          <!-- End Single Item -->
        </div>
      </div>
    </section>



    <section class="services">
      <div class="container">
        <div class="row">
          <h2 class="loper">Services</h2>
          <div class="col-12 col-md-3">
            <div class="motion-graphic">
              <div class="images-services">
                <img src="/sites/pioneer-reality/images/services/1.png" class="img-fluid" alt="img">
              </div>
              <div class="text-service">
                <h2>real estate sales</h2>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-3">
            <div class="motion-graphic">
              <div class="images-services">
                <img src="/sites/pioneer-reality/images/services/2.png" class="img-fluid" alt="img">
              </div>
              <div class="text-service">
                <h2>Property Management</h2>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-3">
            <div class="motion-graphic">
              <div class="images-services">
                <img src="/sites/pioneer-reality/images/services/3.png" class="img-fluid" alt="img">
              </div>
              <div class="text-service">
                <h2>Short Stays</h2>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-3">
            
              <div class="motion-graphic">
                <div class="images-services">
                  <img src="/sites/pioneer-reality/images/services/4.png" class="img-fluid" alt="img">
                </div>
                <div class="text-service">
                  <h2>Projects</h2>
                </div>
              </div>
            
          </div>
        </div>
      </div>
    </section>
    <section class="services-process">
      <div class="container">
        <div class="row">
          <h2>Simplified Processes for Property Management
          </h2>
          <p class="new-pating">Do you have another agent? There are several ways through which one can easily
            transition to becoming a
            member of Pioneer Realty Australia.
          </p>
          <div class="col-12 col-md-4">
            <div class="custom-cards">
              <h3>Contact Us </h3>
              <p>Let your goals be known whether your rental management goals or your goals of enhancing returns in
                housing estates.

              </p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="custom-cards">
              <h3>Property Evaluation
              </h3>
              <p>Our specialists determine the market value of your property with the latest in valuation technologies
                and analyse strategies fit for its objectives.

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

          <div class="col-12 col-md-4">
            <div class="custom-cards">
              <h3>Maximized Returns
              </h3>
              <p> Get better management and increase the operational efficiencies and profitability of many properties.
              </p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="custom-cards">
              <h3>Maximized Returns
              </h3>
              <p> Get better management and increase the operational efficiencies and profitability of many properties.
              </p>
            </div>
          </div>

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





    <section class="why-choose-us py-5 active">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="finix-text">
              <h6>Pioneer Realty Australia</h6>
              <h2>Why Pioneer Realty Australia?
              </h2>

              <img src="https://i.ibb.co/1qcKv9s/choose.png" alt="">

            </div>
          </div>
          <div class="col-lg-6">
            <div class="row">

              <div class="col-lg-6">
                <div class="feature-box mt-4">
                  <div class="feature-box-content text-center">
                    <div class="fbc-btn">
                      <i class="fas fa-percent"></i>
                    </div>
                    <h3>Local Expertise</h3>
                    <p> Make use of our more extensive knowledge about Melbourne, its properties and housing estates.
                      The information presented is helpful when you need to obtain the proper estimates of the property
                      or its value
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="feature-box">
                  <div class="feature-box-content text-center">
                    <div class="fbc-btn">
                      <i class="fas fa-percent"></i>
                    </div>
                    <h3>Exclusive Listings</h3>
                    <p>Discover premium properties, from luxury apartments and homes to exclusive commercial real estate
                      across Australia. Get access to the best deals before anyone else!

                    </p>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="feature-box">
                  <div class="feature-box-content text-center">
                    <div class="fbc-btn">
                      <i class="fas fa-percent"></i>
                    </div>
                    <h3>24/7 Support </h3>
                    <p> our team is available anytime to assist with property listings, inquiries, and transactions.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="feature-box active-feature">
                  <div class="feature-box-content text-center">
                    <div class="fbc-btn">
                      <i class="fas fa-percent"></i>
                    </div>
                    <h3>Easy Process
                    </h3>
                    <p> We bring convenience to property selling and renting services to ensure pleasant Minimal
                      experiences in property buying and renting.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="our-project">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6">
            <div class="mention-45">
              <h2>Portfolio Highlights </h2>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="mention-78">
              <p>Discover more about our different developments such as luxury apartments in Melbourne for sale and
                characterised as peaceful Doreen Victoria homes. The following are our completed projects, to which we
                are committed to delivering quality and innovativeness in all our projects.
              </p>
            </div>
          </div>
        </div>
        <div class="row mt-5">
          <% project.forEach(item=> { %>
          <div class="col-12 col-md-4">
            <div class="mention-img">
              <img src="/sites/pioneer-reality<%- item.picture %>" class="img-fluid" alt="img">
              <span><a href="/sites/pioneer-reality/project-ex/<%- item.url %>">view properties detail</a></span>
            </div>
          </div>
          <% }) %>

          <!-- <div class="col-12 col-md-4">
            <div class="mention-img">
              <img src="/sites/pioneer-reality/images/project/2.png" class="img-fluid" alt="img">
              <span><a href="/sites/pioneer-reality/projects">view properties detail</a></span>
            </div>
          </div> -->
          <!-- <div class="col-12 col-md-4">
            <div class="mention-img">
              <img src="/sites/pioneer-reality/images/project/3.png" class="img-fluid" alt="img">
              <span><a href="/sites/pioneer-reality/projects">view properties detail</a></span>
            </div>
          </div> -->
        </div>
        <!-- <div class="row mt-5">
          <div class="col-12 col-md-6">
            <div class="mention-img">
              <img src="/sites/pioneer-reality/images/project/4.png" class="img-fluid" alt="img">
              <span><a href="/sites/pioneer-reality/projects">view properties detail</a></span>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="mention-img">
              <img src="/sites/pioneer-reality/images/project/5.png" class="img-fluid" alt="img">
              <span><a href="/sites/pioneer-reality/projects">view properties detail</a></span>
            </div>
          </div>
        </div> -->
      </div>
    </section>
    <section class="main-news-sell-page">
      <div class="container">
        <div class="row pt-4">
          <h2 class="sell802-news">Insights & Industry Updates</h2>
          
          <% if (blogs.length > 0) { %>
            <!-- First uploaded blog as top card -->
            <div class="col-md-4 card-sticky">
              <a href="/sites/pioneer-reality/blog/<%- blogs[0].url %>">
                <div class="nehri-sell loter-routes">
                  <img class="img-fluid roleerr" src="/sites/pioneer-reality<%- blogs[0].picture %>" alt="no-img">
                  <span> <%- blogs[0].title %></span>
                  <h2>
                    <%- blogs[0].disc.split(' ').slice(0, 10).join(' ') %>...
                  </h2>
                  <p><strong>Meet The Maker</strong> September 10</p>
                </div>
              </a>
            </div>
          <% } %>
    
          <!-- Remaining blogs go into the grid -->
          <div class="col-12 col-md-8">
            <div class="row">
              <% for (let i = 1; i < blogs.length; i++) { %>
                <div class="col-12 col-md-6 col-sm-12 mt-5">
              <a href="/sites/pioneer-reality/blog/<%- blogs[i].url %>">
                <div class="nehri-sell">
                  <img class="img-fluid" src="/sites/pioneer-reality<%- blogs[i].picture %>" alt="no-img">
                  <span>FEATURED NEWS</span>
                  <h2>
                    <%- blogs[i].disc.split(' ').slice(0, 10).join(' ') %>...
                  </h2>
                  <p><strong>Meet The Maker</strong> September 10</p>
                </div>
              </a>
                </div>
              <% } %>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    

    <section class="t-bq-section" id="paul">
      <h2>What Our Clients Say </h2>
      <div class="t-bq-wrapper t-bq-wrapper-boxed">
        <div class="t-bq-quote t-bq-quote-paul">
          <div class="t-bq-quote-paul-userpic"></div>
          <div class="t-bq-quote-paul-qmark">
            &#10077;
          </div>
          <div class="t-bq-quote-paul-pattern">
          </div>
          <div class="t-bq-quote-paul-base">
            <blockquote class="t-bq-quote-paul-text" cite="Strugatsky Brothers">
              Pioneer Realty Australia the team there made it very easy to finally purchase our first home. This is why
              their property valuations were accurate and their advice a boosting factor to have in the busy world
            </blockquote>
            <div class="t-bq-quote-paul-meta">
              <div class="t-bq-quote-paul-meta-info">
                <div class="t-bq-quote-paul-author"><cite>– Sarah T. </cite></div>
                <div class="t-bq-quote-paul-source"><span>Hard to Be a God</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="lopper">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-12">
            <div class="loter">
              <img id="dynamic-image-1" src="/sites/pioneer-reality/images/Group-5420.png" class="img-fluid" alt="img">
              <h2>Explore</h2>
              <ul>
                <li data-main-image="/sites/pioneer-reality/images/bg/local-1.png">
                  <a href="our-mission">The Pioneer Mission</a>
                </li>
                <li data-main-image="/sites/pioneer-reality/images/bg/local-2.png">
                  <a href="services">Services</a>
                </li>
                <li data-main-image="/sites/pioneer-reality/images/bg/local-3.png">
                  <a href="career">Careers</a>
                </li>
                <li data-main-image="/sites/pioneer-reality/images/bg/local-4.png">
                  <a href="#">Foundation</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const dynamicImage = document.getElementById("dynamic-image-1");
        const listItems = document.querySelectorAll(".loter ul li");

        listItems.forEach((item) => {
          item.addEventListener("mouseover", function () {
            const newImageSrc = this.getAttribute("data-main-image");
            if (newImageSrc) {
              dynamicImage.src = newImageSrc;
            }
          });

          item.addEventListener("mouseout", function () {
            // Reset to the default image on mouse out
            dynamicImage.src = "/sites/pioneer-reality/images/Group-5420.png";
          });
        });
      });
    </script>




    <%- include('./includes/footer') %>
      <script>
        document.querySelectorAll(".dropdown-item").forEach(item => {
          item.addEventListener("click", function () {
            // Remove selected class from all items
            document.querySelectorAll(".dropdown-item").forEach(el => el.classList.remove("selected"));

            // Add selected class to clicked item
            this.classList.add("selected");

            // Update dropdown button text
            document.getElementById("dropdownMenuButton").innerHTML = this.innerText + ' <i class="fa-solid fa-chevron-down"></i>';
          });
        });
      </script>

      <style>
        .dropdown-item.selected::after {
          content: " ✓";
          /* Checkmark */
          float: left;
          color: #172a16;
          font-weight: bold;
        }
      </style>
  </main>