#imageModal .modal-dialog {
  max-width: 90vw;  /* Limit the modal width to 90% of the viewport width */
  width: 100%;      /* On mobile, make sure it uses full width */
}

#imageModal .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;         /* Remove padding for better image alignment */
  height: 80vh;       /* Limit height to 80% of the viewport height */
}

#imageContainer {
  display: flex;
  justify-content: center;  /* Center the image horizontally */
  align-items: center;      /* Center the image vertically */
  height: 100%;             /* Full height for the container */
  width: 100%;              /* Full width for the container */
}

#imageContainer img {
  max-width: 100%;          /* Ensure the image doesn't exceed the modal width */
  max-height: 100%;         /* Ensure the image doesn't exceed the modal height */
  object-fit: contain;      /* Keep aspect ratio intact */
}

@media (max-width: 768px) {
  #imageModal .modal-dialog {
    max-width: 95vw;   /* On smaller screens, allow the modal to take more width */
  }

  #imageModal .modal-body {
    height: 70vh;      /* Slightly smaller modal height on mobile */
  }

  #imageContainer img {
    max-width: 95%;    /* Ensure the image fits well on mobile */
    max-height: 70vh;  /* Limit the height more aggressively for smaller devices */
  }
}