! function() {
        let testimonials = [{"id":65,"user_id":25,"name":"David","title":"Recent customer","quote":"No puedo elogiar lo suficiente a Cristina. Se esforz\u00f3 al m\u00e1ximo para ayudarme a vender mi casa. Dio consejos excelentes y siempre estuvo disponible para responder mis preguntas. Gracias a su trabajo duro y dedicaci\u00f3n, logramos vender r\u00e1pidamente y a un buen precio. Recomiendo mucho a Cristina a cualquiera que quiera comprar o vender una casa.","image":"https:\/\/res.cloudinary.com\/dscqcqtjn\/image\/upload\/v1682642813\/Apps\/Testimonials\/review_ivgsth.png","created_at":"2024-02-23T15:42:07.000000Z","updated_at":"2024-02-23T15:48:20.000000Z"},{"id":64,"user_id":25,"name":"Julia Martinez","title":"Recent customer","quote":"Trabajar con Cristina fue un verdadero placer. Fue sumamente profesional, paciente y se tom\u00f3 el tiempo para entender realmente mis necesidades y preferencias. Me ayud\u00f3 a encontrar la casa de mis sue\u00f1os y negoci\u00f3 un excelente acuerdo para m\u00ed. Sin duda, volver\u00eda a trabajar con ella en el futuro.","image":"https:\/\/res.cloudinary.com\/dscqcqtjn\/image\/upload\/v1682642813\/Apps\/Testimonials\/review_ivgsth.png","created_at":"2024-02-23T15:42:07.000000Z","updated_at":"2024-02-23T15:47:39.000000Z"},{"id":63,"user_id":25,"name":"Juan P\u00e9rez","title":"Recent customer","quote":"Trabaj\u00e9 con Cristina como mi agente inmobiliaria y fue genial. Sab\u00eda mucho, siempre respond\u00eda y se preocupaba por lo mejor para m\u00ed. Me ayud\u00f3 a encontrar la casa perfecta y hizo todo muy f\u00e1cil. Recomiendo mucho a cualquiera que quiera comprar o vender una casa!","image":"https:\/\/res.cloudinary.com\/dscqcqtjn\/image\/upload\/v1682642813\/Apps\/Testimonials\/review_ivgsth.png","created_at":"2024-02-23T15:42:07.000000Z","updated_at":"2024-02-23T15:47:22.000000Z"}];
        let html = `
    <div class="testimonials-wrapper-container">
        <div class="testimonial-slider">
            <div class="testimonials-wrapper">
                <div class="testimonial-container active" id="testimonial-container"></div>
            </div>
            <div class="button-container">
            <button id="prev">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 25px; height: 25px;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                </svg>
            </button>
            <button id="next">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 25px; height: 25px;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
            </button>
        </div>
        </div>
        
  </div>
  `;

        let arrowClick;


        document.currentScript.insertAdjacentHTML('afterend', `<style>.testimonials-wrapper-container {
    position: relative;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonials-wrapper,
.testimonials-wrapper-container button {
    display: flex;
    background-color: #fff;
    position: absolute
}

.testimonials-wrapper {
    /* width: 50vw; */
    max-width: 41em;
    min-height: 500px;
    border-radius: .6em;

    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    overflow: hidden;
    position: relative;
}

.testimonial-container {
    width: 85%;
    height: 100%;
    position: relative;
    margin: auto;
    padding: 1.8em 1.2em;
    font-family: inherit
}

.testimonials-wrapper-container button {
    height: 50px;
    width: 50px;
    align-items: center;
    justify-content: center;
    margin: auto;
    top: 0;
    bottom: 0;
    border: none;
    color: #0a69ed;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    cursor: pointer;
    border-radius: 50%
}


.button-container {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
}

.testimonial-slider {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

#prev {
    left: -25px;
}

#next {
    right: -25px;
}

.testimonial-container p {
    margin-top: 0;
    color: inherit;
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .05em
}

.testimonial-container img {
    display: block;
    margin: 20px auto;
    border-radius: 100%;
    width: 50px
}

.testimonial-container h3 {
    margin-bottom: 6px;
    color: #2d3d67;
    font-size: 18px;
    text-align: center
}

@media screen and (max-width: 480px) {
    .testimonials-wrapper {
        overflow: hidden;
        position: relative;
        /* height: 350px; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
}





@media (min-width:768px) {
    .testimonials-wrapper {
        /* min-height: auto; */
    }

    .testimonial-container p {
        font-size: 16px
    }

    .testimonial-container img {
        width: 100px
    }

    .testimonial-container h3 {
        font-size: 20px;
        text-align: center
    }
}

.testimonial-container h6 {
    color: #bcc4da;
    font-size: .9em;
    letter-spacing: .03em;
    font-weight: 400;
    text-align: center
}

@media screen and (max-width:1024px) {
    .testimonials-wrapper {
        font-size: 14px;
        width: 85vw
    }

    .testimonial-container p {
        line-height: 1.2
    }
}

.fade-out-left {
    animation: fadeOutLeft 0.2s;
}

.fade-out-right {
    animation: fadeOutRight 0.2s;
}

.exit-right {
    animation: exitRight 0.2s;
}

.exit-left {
    animation: exitLeft 0.2s;
}

@keyframes exitLeft {
    from {
        left: 0%;
    }

    to {
        left: -100%;
    }
}

@keyframes exitRight {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}


@keyframes fadeOutLeft {
    from {
        left: 100%;
    }

    to {
        left: 0%;
    }
}

@keyframes fadeOutRight {
    from {
        left: -100%;
    }

    to {
        left: 0%;
    }
}</style>` + html);
        //Current Slide
        let i = 0;

        //Total Slides
        let j = testimonials.length;
        let testimonialsWrapper = document.querySelector(
            ".testimonial-container"
        );

        let testimonialContainer = document.getElementById(
            "testimonial-container"
        );
        let nextBtn = document.getElementById("next");
        let prevBtn = document.getElementById("prev");

        nextBtn.addEventListener("click", () => {
            testimonialContainer.classList.add("exit-left");
            arrowClick = "next";
            setTimeout(() => {
                testimonialContainer.classList.remove("exit-left");
                i = (j + i + 1) % j;
                displayTestimonial();
            }, 150);
        });
        prevBtn.addEventListener("click", () => {
            testimonialContainer.classList.add("exit-right");
            arrowClick = "prev";
            setTimeout(() => {
                i = (j + i - 1) % j;
                displayTestimonial();
                testimonialContainer.classList.remove("exit-right");
            }, 150);
        });

        let displayTestimonial = () => {
            let position = "";
            if (testimonials[i].title) {
                position = `<p>${testimonials[i].title}</p>`;
            }
            testimonialContainer.innerHTML = `
                <p>${testimonials[i].quote}</p>
                <img src=${testimonials[i].image} alt="representative image of the customer providing the review">
                <h3>${testimonials[i].name}</h3>
                ${position}
            `;
            if (arrowClick === "next") {
                testimonialsWrapper.classList.add("fade-out-left");
            } else if (arrowClick === "prev") {
                testimonialsWrapper.classList.add("fade-out-right");
            }
            setTimeout(() => {
                testimonialsWrapper.classList.remove(
                    "fade-out-left",
                    "fade-out-right"
                );
            }, 200);
        };

        displayTestimonial();

    }();