.crop {
  width: 350px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  /* width: 400px;
  height: 300px; */
  margin: -75px 0 0 -100px;
    }

.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 */
}