<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: 400;
  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;
  font-weight: 600;
  
}

.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">
            <b><h2 class="mhead text-center">People Says</h2></b>
            <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",
    
    photo: "img/testimonial-pic/be-testi-1.jpg",
    text:
      "The new highways and roads developed by Bharat Sarkar have made a significant difference in my hometown. Travelling to school and back has become much smoother and faster. I'm impressed with the government's efforts in improving infrastructure for us."
  },
  {
    name: "Vivek Khati",
    
    photo: "img/testimonial-pic/be-testi-2.jpg",
    text:
      "As a frequent traveler, I've noticed the positive changes in road connectivity and facilities along highways. The new toll plazas and rest areas are a big improvement. It shows that Bharat Sarkar is serious about upgrading our infrastructure."
  },
  {
    name: "Himanshu Chauhan",
    
    photo: "img/testimonial-pic/be-testi-3.jpg",
    text:
      "The strategic road developments near the borders have really helped in expanding my business. It's now easier and quicker to transport goods to neighboring countries. Bharat Sarkar's initiatives are boosting trade opportunities."
  },
  {
    name: "Govin Shah",
    
    photo:
      "img/testimonial-pic/be-testi-4.jpg",
    text:
      "Working in infrastructure projects, I've seen firsthand the impact of Bharat Sarkar's sustainable development efforts. Their focus on eco-friendly practices and advanced technology is commendable and sets a high standard."
  },
  {
    name: "Tushar Kumar",
    position: "Director",
    photo: "img/testimonial-pic/be-testi-5.jpg",
    text:
      "The improved transport facilities and smoother roads have saved me a lot of time during my daily commute. It's great to see Bharat Sarkar investing in infrastructure that benefits everyone. It's a step in the right direction."
  }
];

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>