<%- include('./includes/header', {title: 'Home - Pioneer Reality' }) %>

    <main>
        <style>
            .header-main nav .navbar-brand img {
                width: 200px;
                height: 95px;
                /* filter: brightness(1.5) invert(3) !important; */
                object-fit: contain;
                object-fit: cover;
            }

            .form-banner {
                position: relative;
                background-color: #fff;
                color: #000;
                border-radius: 25px;
                padding: 30px 20px;
                width: 80%;
                box-shadow: 0 0 17px rgb(0 0 0 / 20%);
            }

            .form-banner .input-field {
                background-color: #fff;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
                padding: 8px 15px;
                margin-bottom: 8px;
                border-radius: 0;
                font-size: 14px;
                margin: 0 0 35px 0;
                border-radius: 30px;
            }
        </style>
        <style>
            /*.home-banner .form-banner::before{*/
            /*  content: '';*/
            /*  position: absolute;*/
            /*  background-image: url(../images/form-before-img.png);*/
            /*  bottom: 0;*/
            /*  right: 100%;*/
            /*  height: 380px;*/
            /*  width: 170px;*/
            /*  background-size: contain;*/
            /*  background-repeat: no-repeat;*/
            /*  background-position: center right;*/
            /*  transform: translateY(80px);*/
            /*}*/
            .form-banner .tag-img {
                position: absolute;
                right: 0;
                top: -30px;
                z-index: 1;
                width: 175px;
            }

            .form-banner form {
                padding-top: 15px;
            }

            .form-banner .input-field {
                background-color: #fff;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
                padding: 8px 15px;
                margin-bottom: 8px;
                border-radius: 0;
                font-size: 14px;
                margin: 0 0 35px 0;
                border-radius: 30px;
            }

            .form-banner .input-field label {
                color: #666;
            }

            .form-banner .input-field input,
            .form-banner .input-field textarea {
                display: block;
                width: 100%;
                border: none;
                outline: none;
                padding: 3px 0;
                color: #000;
            }

            .home-banner .form-banner .input-field textarea {
                height: 60px;
                resize: none;
            }

            .home-banner .form-banner .button-field {
                padding-top: 20px;
                display: block;
            }

            .home-banner .form-banner .button-field button {
                padding: 5px;
                width: 100%;
            }

            .accordion-item {
                border-bottom: 1px solid #ccc;
            }

            .accordion-item-header {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                padding: 30px 0px;
            }

            .accordion-item-header.active img {
                transform: rotate(360deg);
            }

            .accordion-item-header h2 {
                font-family: "Montserrat", sans-serif;
                font-size: 18px;
                font-weight: 500;
                line-height: 24px;
            }

            .accordion-item-header img {
                height: 15px;
                width: 15px;
                object-fit: contain;
                transform: rotate(180deg);
                transition: transform 0.2s ease;
            }

            .accordion-item-body {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
            }

            .accordion-item-body-content {
                padding: 5px 80px 30px 0px;
                display: flex;
                flex-direction: column;
                gap: 35px;
            }

            .accordion-item-body-content p {
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                text-align: left;
            }

            .header-main nav .navbar-brand img {
                width: 200px;
                height: 95px;
                /* filter: brightness(1.5) invert(3) !important; */
                object-fit: contain;
                object-fit: cover;
            }

            .page {
                background: #f1f1f1;
                display: flex;
                flex-wrap: wrap;
            }

            .col {
                flex: 1;
                height: 100vh;
                position: relative;
            }

            .middle h2 {
                color: #182b17;
                font-family: 'Gilroy';
                padding: 0 20px;
                font-size: 40px;
                text-transform: capitalize;
            }

            .countdown-col {
                background: url(./images/background-green.png) no-repeat center;
                background-size: cover;
            }

            .time {
                color: #fff;
                text-transform: uppercase;
                width: 90%;
                display: flex;
                justify-content: center;
            }

            .middle {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
            }

            .time span {
                padding: 0 14px;
                font-size: 10px;
            }

            .time span div {
                font-size: 40px;
            }

            .newslatter {
                width: 90%;
            }

            .newslatter h4 {
                font-style: italic;
                font-size: 12px;
            }

            .newslatter input,
            .newslatter button {
                display: block;
                margin: 12px auto;
                width: 100%;
                max-width: 400px;
                box-sizing: border-box;
                padding: 14px 20px;
                border-radius: 30px;
                border: 1px solid #ddd;
                outline: none;
            }

            .newslatter-button {
                background: linear-gradient(125deg, #182b17, #182b17);
                color: #fff;
                cursor: pointer;
                transition: 0.4s;
            }


            .newslatter-button:hover {
                opacity: 0.7;
            }


            @media screen and (max-width: 900px) {
                .col {
                    flex: 100%;
                }
            }
        </style>
        <section class="sell-banner">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-12">
                        <h2>Personalised property management services</h2>


                        <div class="">
                            <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>
                        </div>



                        <ul class="mentro-loop">
                            <li>
                                <a href="#">

                                    I'm looking<BR> to rent

                                </a>
                            </li>
                            <li>
                                <a href="#">


                                    I'm currently <BR> renting

                                </a>
                            </li>
                            <li>
                                <a href="#">


                                    I'm a rental <BR> provider

                                </a>
                            </li>
                            <li>
                                <a href="#">


                                    I’m looking for a <BR> holiday rental

                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section class="sell-page-lopper">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="loter">
                            <img src="/sites/pioneer-reality/images/sell/seling-expection.png" class="img-fluid"
                                alt="img" />
                            <h2>Explore</h2>
                            <ul>
                                <li data-image="/sites/pioneer-reality/images/sell/4-fotor-2025012152813.png">The Pioneer Mission</li>
                                <li data-image="/sites/pioneer-reality/images/sell/GettyImages-734165127-d1c854-1440x960-fotor-2025012154211.png">Services</li>
                                <li data-image="/sites/pioneer-reality/images/sell/noted-fotor-2025012153050.png">Careers</li>
                                <li data-image="/sites/pioneer-reality/images/sell/contact-support-fotor-2025012153316.png">Foundation</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <script>
            document.querySelectorAll(".loter ul li").forEach((item) => {
                item.addEventListener("mouseover", () => {
                    const img = document.querySelector(".loter img");
                    const newImage = item.getAttribute("data-image");
                    img.src = newImage;
                });

                item.addEventListener("mouseout", () => {
                    const img = document.querySelector(".loter img");
                    img.src = "/sites/pioneer-reality/images/sell/seling-expection.png"; // Reset to default image
                });
            });
            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>


        <%- include('./includes/footer') %>

    </main>