<%- 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;
        }
        </style>
    <style>
    header .navbar {

        filter: brightness(0.5) invert(1) !important;

    }

    .thumbnail-bg img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .custom-btn {
        position: relative;
        z-index: 3;
    }

    /* General Section Styling */
    .lition-rootes {
        position: relative;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* Thumbnail Background */
    .thumbnail-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000;
        z-index: 0;
    }

    .thumbnail-bg img {
        max-width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Video Styling */
    .video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    /* Button Styling */
    .custom-btn {
        background-color: #182B17;
        color: white;
        border: none;
        padding: 25px 30px;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .custom-btn:hover {
        background-color: darkgreen;
        transform: scale(1.05);
    }
    </style>

    <section class="banner-tursted ">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-md-5">
                    <div class="trusted-img">
                        <img src="/sites/pioneer-reality/<%- team.picture %>" class="img-fluid" alt="<%- team.name %>">
                    </div>
                </div>
                <div class="col-12 col-md-7">
                    <div class="custom-text-trusted">
                        <h2>Your Trusted Partners in Real Estate</h2>
                        <p><%- team.disc %></p>
                        <h3><%- team.name %> </h3>
                        <h6>Director</h6>
                        <!-- <button class="view-more">view detail <span></span></button> -->
                        <ul class="mention-tursted">
                            <li><a href="#"><span><i class="fa-solid fa-phone"></i></span><%- team.num %>
                        </a></li>
                            <li><a href="#"><span><i
                                            class="fa-solid fa-envelope"></i></span><%- team.email %></a></li>
                        </ul>
                        <ul class="loper-turseted">
                            <!-- <li class="trust-1"><button onclick="scrollToSec('#consultant-now')">Request Appraisal</button></li> -->
                            <!-- <li class="trust-2"><button>Request Appraisal</button></li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <section class="about-urested">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-12 col-md-6">
                    <div class="turst-abut">
                        <h2>About Ryan Fong</h2>
                        <p>Our team is 100% committed to help you achieve your dreams and goals, with our experts
                            accompanying you from search to settlement, anytime and anywhere. We are a local Melbourne
                            real estate one-stop shop, providing a full range of services.</p>
                        <button class="button-theme">read more</button>
                    </div>
                </div>
                <div class=" col-12 col-md-6">
                    <div class="tursted-profiles">
                        <div class="turst-images">
                            <img src="/sites/pioneer-reality/images/bg/15group.png" class="img-fluid" alt="img">
                        </div>
                        <div class="turst-text-profiles">
                            <h2>charles lam</h2>
                            <p>director</p>
                            <ul>
                                <li><a href="#"><span><i class="fa-solid fa-phone"></i>0490307717</span></a></li>
                                <li><a href="#"><span><i class="fa-solid fa-envelope"></i>
                                            info@pioneerrealty.com.au</span></a></li>
                            </ul>

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

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

    <!-- <section class="lition-rootes">
        <div class="container-fluid p-0">
            <div class="row justify-content-center align-items-center vh-100">
                <div class="col-12 text-center">
                
                    <div class="thumbnail-bg">
                        <img src="/sites/pioneer-reality/images/bg/thumnails.png" alt="Video Thumbnail" class="img-fluid" />
                    </div>
                 
                    <video class="video-bg" autoplay muted loop>
                        <source src="/sites/pioneer-reality/images/services/React-Planner.mp4" type="video/mp4">

                    </video>
             
                    <button id="playButton" class="custom-btn"><i class="fa-solid fa-play"></i></button>
                </div>
            </div>
        </div>
    </section> -->
    <section class="landing-form" id="consultant-now">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-md-6">
                    <div class="form-banner">
                        <h5 class="form-heading">We Are Here For You<br>
                            <span>Fill Out The Form! </span>
                        </h5>
                        <hr>
                        <form action="/sites/pioneer-reality/send" method="POST">
                            <div class="input-field">
                                <label for="">Name</label>
                                <input type="text" name="Name">
                            </div>
                            <div class="input-field">
                                <label for="">Email</label>
                                <input type="email" name="Email">
                            </div>
                            <div class="input-field">
                                <label for="">Phone</label>
                                <input type="tel" name="Phone">
                            </div>
                            <div class="input-field">
                                <label for="">Message</label>
                                <textarea name="Message"></textarea>
                            </div>

                            <div class="button-field">
                                <button class="button-theme" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>

                </div>
                <div class="col-12 col-md-6">
                    <div class="refunded">
                        <h5>contact with us</h5>
                        <h2>reach out to us via contact details</h2>
                        <p>Our team is 100% committed to help you achieve your dreams and goals, with our experts
                            accompanying you&nbsp;from search to settlement, anytime and anywhere.&nbsp;We are a local Melbourne
                            real estate one-stop shop,&nbsp;providing a full range of services.</p>
                    </div>
                    <div class="row">

                        <div class="col-12 col-md-6">
                            <div class="text-form">
                                <span>1</span>
                                <h4>Client Centric Approach</h4>
                                <p> At our core, we are dedicated to putting our clients first. Every decision we
                                    make is guided by your needs, goals, and aspirations. From personalized property
                                    recommendations to tailored solutions, we ensure a seamless and stress-free
                                    experience. Your satisfaction is our priority, and we strive to exceed your
                                    expectations at every step of your real estate journey.</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="text-form">
                                <span>2</span>
                                <h4>Integrity &amp; Transparency</h4>
                                <p>We operate with unwavering integrity and complete transparency. Our clients trust
                                    us because we provide honest advice, clear communication, and full disclosure at
                                    every step. Your real estate journey is guided by ethical practices and a
                                    commitment to your best interests.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <section class="sellpage-place mt-0 buypsge9763" id="selling-req">
        <div class="container">
            <div class="row g-5">

                <h2>Property listings</h2>
                <p class="h2-down-heading">Current Listings Sold Properties</p>
                <div class="col-12 col-md-4">
                    <div class="buy-custom-place">
                        <img src="/sites/pioneer-reality/images/sell/buy-56.png" class="img-fluid" alt="img">
                        <a href="#">For Sale</a>
                    </div>
                    <div class="custom-place-1 buy-page-951">
                        <h4 class="sing-sell">110/25-33 Wills Street, Melbourne VIC 3000</h4>
                        <p><i class="fa-sharp fa-solid fa-location-dot"></i>&nbsp;Wills Court, 25-33, Wills Street,
                            Melbourne, City of Melbourne, Victoria, 3000, Australia</p>
                        <h5 class="sing-sell">From $375,000- $395,000</h5>
                        <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 class="sell-place-holder buy-pageeees-951">

                            <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>
                <div class="col-12 col-md-4">
                    <div class="buy-custom-place">
                        <img src="/sites/pioneer-reality/images/sell/buy-56.png" class="img-fluid" alt="img">
                        <a href="#">For Sale</a>
                    </div>
                    <div class="custom-place-1 buy-page-951">
                        <h4 class="sing-sell">110/25-33 Wills Street, Melbourne VIC 3000</h4>
                        <p><i class="fa-sharp fa-solid fa-location-dot"></i>&nbsp;Wills Court, 25-33, Wills Street,
                            Melbourne, City of Melbourne, Victoria, 3000, Australia</p>
                        <h5 class="sing-sell">From $375,000- $395,000</h5>
                        <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 class="sell-place-holder buy-pageeees-951">

                            <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>
                <div class="col-12 col-md-4">
                    <div class="buy-custom-place">
                        <img src="/sites/pioneer-reality/images/sell/buy-56.png" class="img-fluid" alt="img">
                        <a href="#">For Sale</a>
                    </div>
                    <div class="custom-place-1 buy-page-951">
                        <h4 class="sing-sell">110/25-33 Wills Street, Melbourne VIC 3000</h4>
                        <p><i class="fa-sharp fa-solid fa-location-dot"></i>&nbsp;Wills Court, 25-33, Wills Street,
                            Melbourne, City of Melbourne, Victoria, 3000, Australia</p>
                        <h5 class="sing-sell">From $375,000- $395,000</h5>
                        <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 class="sell-place-holder buy-pageeees-951">

                            <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>
            </div>
        </div>
    </section>


    <section class="tursted-reviews">
        <div class="container">
            <div class="row g-5">
                <div class="col-12 col-md-4">
                    <div class="custom-next-reviews">
                    <span class="arrow-trust"><img src="/sites/pioneer-reality/images/roper-78/arrow.png" class="img-fluid" alt="img"></span>
                        <h3>pioneerrealty.com.au</h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                            <span class="trested"><img src="/sites/pioneer-reality/images/roper-78/carwon.png" class="img-fluid" alt="img"></span>
                    </div>
                    <div class="main-reviews-profiles">
                        <div class="reviews-img">
                        <img src="/sites/pioneer-reality/images/roper-78/profile-1.png" class="img-fluid" alt="img">
                        </div>
                        <div class="reviews-text">
                            <h4>Alex James</h4>
                            <p>clients</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="custom-next-reviews">
                        <span class="arrow-trust"><img src="/sites/pioneer-reality/images/roper-78/arrow.png" class="img-fluid" alt="img"></span>
                        <h3>pioneerrealty.com.au</h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                            <span class="trested"><img src="/sites/pioneer-reality/images/roper-78/carwon.png" class="img-fluid" alt="img"></span>
                    </div>
                    <div class="main-reviews-profiles">
                        <div class="reviews-img">
                            <img src="/sites/pioneer-reality/images/roper-78/profile-2.png" class="img-fluid" alt="img">
                        </div>
                        <div class="reviews-text">
                            <h4>Lisa</h4>
                            <p>clients</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="custom-next-reviews">
                    <span class="arrow-trust"><img src="/sites/pioneer-reality/images/roper-78/arrow.png" class="img-fluid" alt="img"></span>
                        <h3>pioneerrealty.com.au</h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                            <span class="trested"><img src="/sites/pioneer-reality/images/roper-78/carwon.png" class="img-fluid" alt="img"></span>
                    </div>
                    <div class="main-reviews-profiles">
                        <div class="reviews-img">
                        <img src="/sites/pioneer-reality/images/roper-78/profile-3.png" class="img-fluid" alt="img">
                        </div>
                        <div class="reviews-text">
                            <h4>Maria</h4>
                            <p>clients</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    

    <section class="Enquiry" id="tusted-enqiry">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8">
                    <div class="main-enquiry">
                        <h2>Make an Enquiry</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi.</p>
                            <ul>
                                <li><button>I'm thinking of selling</button></li>
                                <li><button class="center">I need a property manager</button></li>
                                <li><button>General enquiry</button></li>
                            </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class=" main-news-sell-page">
        <div class="container">
            <div class="row pt-4">
                <h2 class="sell802-news">News &amp; Insights</h2>
                <div class="col-md-4">
                    <div class="nehri-sell">
                        <img class="img-fluid" src="/sites/pioneer-reality/images/sell/main-image.png" alt="no-img">
                        <span>FEATURED NEWS</span>
                        <h2>The art of designing romantic gardens with Ashley James</h2>
                        <p><strong>Meet The Maker</strong> September 10</p>
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="row">
                        <div class="col-6">
                            <div class="nehri-sell">
                                <img class="img-fluid" src="/sites/pioneer-reality/images/sell/image1.png" alt="no-img">
                                <span>FEATURED NEWS</span>
                                <h2>Behind the design: A maximalist house by Flack Studio</h2>
                                <p><strong>Meet The Maker</strong> September 10</p>
                            </div>

                        </div>
                        <div class="col-6">
                            <div class="nehri-sell">
                                <img class="img-fluid" src="/sites/pioneer-reality/images/sell/image2.png" alt="no-img">
                                <span>FEATURED NEWS</span>
                                <h2>How to create a focal point in a space</h2>
                                <p><strong>Meet The Maker</strong> September 10</p>
                            </div>

                        </div>


                    </div>
                    <div class="row" style="margin-top: 45px;">
                        <div class="col-6">
                            <div class="nehri-sell">
                                <img class="img-fluid" src="/sites/pioneer-reality/images/sell/image3.png" alt="no-img">
                                <span>FEATURED NEWS</span>
                                <h2>Behind the design: A maximalist house by Flack Studio</h2>
                                <p><strong>Meet The Maker</strong> September 10</p>
                            </div>

                        </div>
                        <div class="col-6">
                            <div class="nehri-sell">
                                <img class="img-fluid" src="/sites/pioneer-reality/images/sell/image4.png" alt="no-img">
                                <span>FEATURED NEWS</span>
                                <h2>How to create a focal point in a space</h2>
                                <p><strong>Meet The Maker</strong> September 10</p>
                            </div>

                        </div>


                    </div>

                </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
            });
        });
    </script>


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