.modalImage {
  display: none;
  position: fixed;
  z-index: 9999 !important; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.modalImage img {
  max-width: 90%;
  max-height: 100vh;
  object-fit: contain;
}

.clickable-image:hover {
  cursor: zoom-in;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}