.modal-bio {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: center;
  min-height: calc(100% - 0rem);
  background-color: rgba(0, 0, 0, 0.5); /* Dim background */
}

.modal-content-bio{
  margin: 15% auto;
  padding: 20px;
  min-height: 50%;
  max-height: 80%;
  width: 80%; /* Adjust as needed */
  background-color: white;
  border-radius: 10px; /* Optional styling */
  display: flex;
  flex-direction: column;
}

.bio-info-box {
	padding-top: 20px;
	height: 100%;
	display: flex;
	flex-direction: row;
	gap: 20px;
  overflow: hidden;
}


.bio-info-image {
	width: 40%;
	max-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	border-radius: 10px;
}

.bio-info-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}



.bio-info-text {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: scroll;
}


.close-bio {
  color: black;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  text-align: right;
  border-bottom: 0.3px solid var(--border-color);
  margin-bottom: 10px;
   padding-bottom: 10px;
}

.close-bio:hover {
  color: grey; /* Optional hover effect */
}



@media only screen and (max-width: 767px) {

  .bio-info-box {
  overflow: scroll;
}

.bio-info-text {

  overflow: scroll;
}

    .bio-info-text {
      width: 100%;
    }

    .bio-info-image {
      display: none;
    }
  
}