<style>
    @import url("https://fonts.googleapis.com/css?family=Montserrat");





.testimonial-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 2rem;
  background-color: #fff;
  color: #333;
  border-radius: 15px;
  margin: 0px auto;
  padding: 30px 80px;
  width: 100%;
  /* min-height: 430px; */
  position: relative;
  padding-top:18px;
}

.testimonial-container .stars {
  font-size: 14px;
}

.testimonial-container .testimonial {
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: 900;
  height: 100%;
  line-height: 28px;
  margin: 0;
}

.testimonial-container .user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.testimonial-container .user .user-image {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  object-fit: cover;
}

.testimonial-container .user .user-details {
  text-align: center;
}

.testimonial-container .user .username {
  margin: 0;
  font-size: 14px;
}

.testimonial-container .user .role {
  margin: 0;
  font-size: 12px;
}

.testimonial-container .progress-dots {
  display: flex;
  gap: 5px;
}

.testimonial-container .progress-dot {
  width: 5px;
  height: 5px;
  background-color: #eee;
  border-radius: 50%;
}

.testimonial-container .progress-dot.active {
  background-color: #555;
}

.testimonial-container .btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  font-size: 10px;
  cursor: pointer;
  transition: 0.1s ease;
}

.testimonial-container .btn:hover {
  background-color: #eee;
}

.testimonial-container #btn-prev {
  left: 25px;
}

.testimonial-container #btn-next {
  right: 25px;
}

</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

 <div class="container">
     <div class="row">
        <div class="col-lg-12 py-4">
            <h2 class="mhead text-center">People Says</h2>
            <div class="testimonial-container">
                <div class="btn" id="btn-prev"><i class="fa-solid fa-chevron-left"></i></div>
                <div class="btn" id="btn-next"><i class="fa-solid fa-chevron-right"></i></div>
             
                <p class="testimonial">
                  I've worked with literally hundreds of HTML/CSS developers and I have to
                  say the top spot goes to this guy. This guy is an amazing developer. He
                  stresses on good, clean code and pays heed to the details. I love
                  developers who respect each and every aspect of a throughly thought out
                  design and do their best to put it in code. He goes over and beyond and
                  transforms ART into PIXELS - without a glitch, every time.
                </p>
                
                <div class="user">
                  <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="user" class="user-image" />
                  <div class="user-details">
                    <h4 class="username">Miyah Myles</h4>
                    <p class="role">Marketing</p>
                  </div>
                </div>
                <div class="progress-dots" id="progress-dots"></div>
              
              </div>
        </div>
        
    </div>
</div>
 


<script>
    const testimonialsContainer = document.querySelector(".testimonials-container");
const testimonial = document.querySelector(".testimonial");
const userImage = document.querySelector(".user-image");
const username = document.querySelector(".username");
const role = document.querySelector(".role");
const btnPrev = document.getElementById("btn-prev");
const btnNext = document.getElementById("btn-next");
const progressDots = document.getElementById("progress-dots");

const testimonials = [
  {
    name: "Rohit Sharma",
    position: "Software Engineer",
    photo: "img/testimonial-pic/be-testi-1.jpg",
    text:
      "I can't thank the police force enough for their swift response during an emergency. Their professionalism and dedication to keeping our community safe are truly commendable. Knowing that they are there to protect us gives me peace of mind."
  },
  {
    name: "Vivek Khati",
    position: "Data Entry",
    photo: "img/testimonial-pic/be-testi-2.jpg",
    text:
      "I recently witnessed a situation where the police intervened to help someone in distress. Their quick action and genuine concern for the well-being of others left a lasting impression on me. Thank you, Delhi Police, for your commitment to serving and protecting."
  },
  {
    name: "Himanshu Chauhan",
    position: "Receptionist",
    photo: "img/testimonial-pic/be-testi-3.jpg",
    text:
      "After a break-in at our home, the police were on the scene promptly. Their thorough investigation and support helped us recover our stolen belongings. We are grateful for their empathy and the sense of security they've restored in our lives."
  },
  {
    name: "Govin Shah",
    position: "Accountant",
    photo:
      "img/testimonial-pic/be-testi-4.jpg",
    text:
      "I recently needed assistance from the police, and I was met with compassion and understanding. The officers handled the situation with care and professionalism. I appreciate their dedication to ensuring the well-being of every member of our community."
  },
  {
    name: "Tushar Kumar",
    position: "Director",
    photo: "img/testimonial-pic/be-testi-5.jpg",
    text:
      "The Delhi Police Department's efforts in crime prevention have significantly improved the safety of our streets. Their presence and proactive measures send a clear message that our community is a place where law and order prevail. Thank you for making our neighborhood a safer place."
  }
];

let idx = 0;

testimonials.forEach((testimonial) => {
  const dot = document.createElement("div");
  dot.classList.add("progress-dot");
  progressDots.appendChild(dot);
});

function displayTestimonial() {
  const { name, position, photo, text } = testimonials[idx];

  testimonial.innerHTML = text;
  userImage.src = photo;
  username.innerHTML = name;
  role.innerHTML = position;

  updateProgressDots();
}

function updateProgressDots() {
  const dots = progressDots.children;
  [...dots].forEach((dot) => {
    dot.classList.remove("active");
  });
  dots[idx].classList.add("active");
}

btnNext.addEventListener("click", () => {
  idx === testimonials.length - 1 ? (idx = 0) : idx++;
  console.log(idx);

  displayTestimonial();
});

btnPrev.addEventListener("click", () => {
  idx === 0 ? (idx = testimonials.length - 1) : idx--;
  console.log(idx);

  displayTestimonial();
});

displayTestimonial();

</script>