function openModal1(imageSrc) {
  var modal1 = document.getElementById("imageModal1");
  var modal1Img = document.getElementById("modal1Image");
  modal1.style.display = "block";
  modal1Img.src = imageSrc;
}
function closeModal1() {
  var modal1 = document.getElementById("imageModal1");
  modal1.style.display = "none";
}
document.addEventListener("click", function (event) {
  var modal1 = document.getElementById("imageModal1");
  if (event.target === modal1) {
    closeModal1();
  }
});
const carousel = document.querySelector(".carousel-inner"),
  firstImg = carousel.querySelectorAll("img")[0],
  arrowIcons = document.querySelectorAll(".wrapper i");
const numImages = carousel.querySelectorAll("img").length;
const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
if (numImages > 3) {
  arrowIcons[1].style.display = "block";
} else {
  arrowIcons[0].style.display = "none";
  arrowIcons[1].style.display = "none";
}
let isDragStart = false,
  isDragging = false,
  prevPageX,
  prevScrollLeft,
  positionDiff;
const showHideIcons = () => {
  let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
  arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
  arrowIcons[1].style.display =
    carousel.scrollLeft == scrollWidth ? "none" : "block";
};
arrowIcons.forEach((icon) => {
  icon.addEventListener("click", () => {
    let firstImgWidth = firstImg.clientWidth + 40;
    const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
    carousel.scrollBy({
      left: scrollAmount,
      behavior: "smooth",
    });
    setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
  });
});