.photo-crop {
  width: var(--crop-width);
  height: var(--crop-height);
  overflow: hidden;
  position: relative;
}
.photo-crop img {
  position: absolute;
  left: calc(var(--crop-x) * -1);
  top: calc(var(--crop-y) * -1);
  transform: scale(var(--scale));
  transform-origin: top left;
}

.thumbnail-img {
  cursor: pointer;
  transition: border 0.3s ease;
}
.thumbnail-img:hover {
  border: 2px solid #5a8dee;
}
.main-img {
  max-height: 500px;
  object-fit: cover;
}
.card-img-top {
cursor: pointer;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.card-img-top:hover {
opacity: 0.8;
transform: scale(1.00);
}
/* Custom modal size */
.modal-dialog {
width: 70%; /* Set the width to 90% of the viewport width */
height: 50%; /* Set the height to 90% of the viewport height */
max-width: 70%; /* Ensure the modal doesn't exceed 90% of the screen width */
margin: 2% auto; /* Center the modal horizontally */
}

.modal-content {
height: 100%; /* Ensure the modal content fills the full height of the modal */
}

.modal-body {
height: calc(90% - 60px); /* Subtract space for the footer (if any) */
overflow-y: auto; /* Allow scrolling within the body if content exceeds available height */
}

.modal-header, .modal-footer {
flex: 0 0 auto; /* Ensure the header and footer do not stretch */
}
#modalImage {
max-width: 100%;
max-height: 80vh; /* Adjust the height to fit within the viewport */
object-fit: contain; /* Ensure the image maintains its aspect ratio */
}