<footer>
  <div class="container">
    <div class="row g-5 align-items-start">
      <div class="col-12 col-md-4">
        <div class="main-logo-footer">
          <img src="/sites/pioneer-reality/images/bg/footer-logo.png" class="img-fluid" alt="img">
          <h3>Stay Informed</h3>
          <p>Receive the latest property updates, lifestyle content and industry insight</p>
         <form action="/sites/pioneer-reality/send" method="post">
          <input type="text" placeholder="Email" name="email">
          <button type="submit">submit</button>
         </form>
        </div>
      </div>
      <div class="col-12 col-md-2"></div>
      <div class="col-12 col-md-2">
        <div class="main-nav">
          <h4>Buy</h4>
          <ul>
            <li><a href="buy">Find a property</a></li>
            <li><a href="projects">Projects</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-2">
        <div class="main-nav">
          <h4>Sell</h4>
          <ul>
            <!-- <li><a href="#">Why sell with us</a></li> -->
            <li><a href="buy">Find an agent</a></li>
            <!-- <li><a href="#">Request appraisal</a></li> -->
            <!-- <li><a href="#">Sold properties</a></li> -->
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-2 d-flex flex-column justify-content-end">
        <div class="main-nav">
          <h4>Lease</h4>
          <ul>
            <li><a href="buy">Find a property</a></li>
            <li><a href="lease">Lease my property</a></li>
            <!-- <li><a href="sell">Lease my property</a></li> -->

          </ul>
        </div>
      </div>
    </div>



    <div class="row g-5 align-items-start">
      <div class="col-12 col-md-4">
        <div class="main-logo-footer">
          <div class="icon-ul">
            <ul>
              <li><a href="https://www.instagram.com/pioneerrealty_australia/" target="_blank"><i
                    class="fa-brands fa-instagram"></i></a></li>
            
            </ul>
          </div>
          <div class="main-ul-terms">
            <ul>
              <!-- <li>© Pioneer Realty 2024.</li>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Disclaimer</a></li> -->
            </ul>
            <p>Do you have inquiries about businesses available for sale in Melbourne, the cheapest houses in Australia,
              or a property estimation appointment? 
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-2"></div>
      <div class="col-12 col-md-2">
        <div class="main-nav">
          <h4>About Us</h4>
          <ul>
            <li><a href="about-us">about us</a></li>
            <!-- <li><a href="#">services</a></li> -->
            <li><a href="career">Careers</a></li>
            <!-- <li><a href="#">Foundation</a></li> -->
            <li><a href="terms-condition#">privacy policy</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-2">
        <div class="main-nav">
          <h4>Contact Us</h4>
          <ul>
            <li><a href="/sites/pioneer-reality/buy">Find an office</a></li>
            <!-- <li><a href="#">Sign Up for alerts</a></li>
            <li><a href="#">General enquiry</a></li> -->

          </ul>
        </div>
      </div>
      <div class="col-12 col-md-2 d-flex flex-column justify-content-end">
        <div class="main-nav">
          <h4>insights</h4>
          <ul>
            <!-- <li><a href="#">The Report FY25</a></li>
            <li><a href="#">Suburb Insights</a></li> -->
            <li><a href="allblogs">Articles</a></li>

          </ul>
        </div>
      </div>
    </div>

  </div>
  <section class="bottom">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-12">
          <div class="footer-bottom">
            <p>Copyright @ 2025.All Right Reserved.</p>
          </div>
        </div>
        <div class="col-12 col-md-6"></div>
      </div>
    </div>
  </section>


<style>
  footer .main-nav ul li a{
    text-transform: capitalize;
    transition: 0.3s;
    font-weight: 500;
    font-family: 'Gilroy';
  }
  footer .main-nav ul li a:hover{
    color: #182b17;
  }
  .main-logo-footer button{
    background-color: #182b17;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    font-family: 'Gilroy';
    padding: 10px 10px;
    margin:0 0px 0 10px;
  }
</style>
</footer>



<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Include Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Include Fancybox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>


<script src="/sites/pioneer-reality/js/jquery-3.6.3.min.js"></script>
<script src="/sites/pioneer-reality/js/bootstrap.bundle.min.js"></script>
<script src="/sites/pioneer-reality/js/aos.js"></script>
<script src="/sites/pioneer-reality/js/fancybox.min.js"></script>
<script src="/sites/pioneer-reality/js/owl.carousel.min.js"></script>
<script src="/sites/pioneer-reality/js/jquery-ui.js"></script>

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> -->
<script src="/sites/pioneer-reality/js/gsap/gsap.min.js"></script>
<script src="/sites/pioneer-reality/js/gsap/ScrollTrigger.min.js"></script>
<script src="/sites/pioneer-reality/js/gsap/ScrollSmoother.min.js"></script>
<script src="/sites/pioneer-reality/js/custom.js"></script>
<script>

  const info = [
    { "text": "A calming and tranquil color, linked to serenity, trust, and stability. It often represents the sky, water, and feelings of peace or coolness." },
    { "text": "A rich, luxurious color that blends the calm of blue and the energy of red. It symbolizes royalty, mystery, spirituality, and creativity." },
    { "text": "A bold and intense color, often associated with passion, energy, love, and danger. It evokes strong emotions and symbolizes power and excitement." },
    { "text": "A refreshing, natural color that symbolizes growth, health, and harmony. It’s often associated with nature, renewal, and balance." },
    { "text": "A bright and cheerful color that represents happiness, optimism, and warmth. It often symbolizes sunshine, creativity, and positivity." },
    { "text": "A vibrant, energetic color that combines the warmth of red and the cheerfulness of yellow. It often signifies enthusiasm, fun, and vitality." },
  ]

  //duplicate cards
  const grid = document.querySelector(".cards")
  const card = document.querySelector(".card")

  for (let i = 1; i < info.length; i++) {
    const newCard = card.cloneNode(true);
    grid.appendChild(newCard)
  }

  var cards = document.querySelectorAll('.card')

  cards.forEach((item, i) => {
    item.querySelector('h1').innerHTML = Number(i + 1)
    item.querySelector('p').innerHTML = info[i].text
  })

  const cursorCont = document.querySelector(".cursor-container")
  const cursor = document.querySelector(".cursor")
  const root = document.documentElement;

  document.addEventListener("mousemove", (event) => {
    x = event.pageX
    y = event.pageY

    cursorCont.style.transform = `translate(${x}px,${y}px) scale(1)`
  })

  //hover
  var cardInner = document.querySelectorAll('.card .inner-shadow')
  var cardCursorWrapper = document.querySelectorAll('.card .cursor-blur-wrapper')
  var cardCursor = document.querySelectorAll('.card .cursor-blur')

  window.addEventListener("mousemove", (event) => {
    cards.forEach((item, i) => {
      const rect = item.getBoundingClientRect();
      let x = event.clientX - rect.left;
      let y = event.clientY - rect.top;
      let count = 0;

      if (x < 0) {
        x = 0
        translate()
      } else if (x > rect.width) {
        x = rect.width
        translate()
      }
      if (y < 0) {
        y = 0
        translate()
      } else if (y > rect.height) {
        y = rect.height
        translate()
      }
      function translate() {
        cardCursorWrapper[i].style.transform = `translate(${x}px,${y}px)`
      }

      item.onmouseover = function () {
        cursor.style.backgroundColor = `var(--animate${i + 1})`
        cardCursor[i].style.backgroundColor = `var(--animate${i + 1})`
        cardInner[i].style.color = `var(--animate${i + 1})`
      };
      item.onmouseout = function () {
        cursor.style.backgroundColor = 'var(--initial)'
        cardCursor[i].style.backgroundColor = 'var(--initial)'
        cardInner[i].style.color = 'var(--initial)'
      };
    })
  })
  let currentlyShown = 12
  $(".load-more").click(function () {
    const properties = $(this).parents('.property-listing').find('.property-item')
    currentlyShown += 8
    if (currentlyShown >= properties.length) {
      $(this).slideUp()
    }
    $(properties).each((ind, elem) => {
      if (ind < currentlyShown) {
        $(elem).slideDown()
      }
    })
  })

  // Get all list items with data-images attribute
  const listItems1 = document.querySelectorAll("a[data-images]");

  // Get the dynamic image tag
  const dynamicImage1 = document.getElementById("dynamic-image-1");

  // Add hover event listeners
  listItems1.forEach((item) => {
    item.addEventListener("mouseover", () => {
      const newImage = item.getAttribute("data-images");
      dynamicImage1.src = newImage; // Change the image source
    });

    item.addEventListener("mouseout", () => {
      dynamicImage1.src = "/sites/pioneer-reality/images/bg/sidebar.png"; // Reset to default image
    });
  });
  function scrollToAboutUs() {
    window.location.href = 'about-us';
  }
</script>
<script>
  $(".price-range .price-slider").each((ind, elem) => {
    $(elem).slider({
      range: true,
      min: 0,
      max: 15000000,
      step: 500,
      values: [0, 15000000],
      slide: function (event, ui) {
        $(elem).siblings("[name='pricerange']").val(ui.values[0] + "-" + ui.values[1]);
        $(elem).siblings('.display-values').children().html("$" + ui.values[0] + " - $" + ui.values[1])
      }
    });
    $(elem).siblings("[name='pricerange']").val($("#price-range").slider("values", 0) + "-" + $("#price-range").slider("values", 1));
    $(elem).siblings('.display-values').children().html("$" + $("#price-range").slider("values", 0) + " - $" + $("#price-range").slider("values", 1))
  })
</script>
</body>

</html>