/* Container for the entire team grid */
.team-members-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 38px 12px;
}

/* Individual team member card */
.team-member {
  position: relative;
  text-align: left;
}

/* Slight shadow on hover (optional) */
.team-member:hover {
}

/* Team member image */
.team-member-photo {
  position: relative;
  overflow-y: hidden;
}
.team-member-photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
}

.team-member-info {
  padding-top: 24px;
}
/* Name and job title */
.team-member-name {
  margin-bottom: 0.3rem;
}

.team-member-job {
  margin-bottom: 0;
  font-weight: 500;
}

/* Hidden content that appears on hover */
.team-member-hover-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  overflow-y: scroll;
  background: #fff;
  border: 1px solid #34CCB5;
  padding: 32px;
  opacity: 0;
  transition: all .2s cubic-bezier(.3,.15,.18,1);
  pointer-events: none;
}

/* Show hidden content on hover */
.team-member:hover .team-member-hover-content {
  opacity: 1;
  pointer-events: all;
}

/* Optional styling for icons and contact info */
.team-member-contact {
  display: flex;
  gap: 12px;
    align-items: center;
    margin-top: 24px;
}
.team-member-contact .contact-details.team-phone {
  border: solid 2px #34ccb5;
  border-radius: 25px;
  color: #34ccb5;
  height: 37px;
  min-width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  min-width: 145px;
}
.team-member-contact .contact-details:not(.team-phone) a {
  border: solid 2px #34ccb5;
  border-radius: 25px;
  color: #34ccb5;
  height: 37px;
  min-width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s cubic-bezier(.3,.15,.18,1);
}
.team-member-contact .contact-details:not(.team-phone):hover a {
  background: #34ccb5;
  color: #fff;
}
.team-member-contact .contact-details:not(.team-phone) svg path {
    transition: all .2s cubic-bezier(.3,.15,.18,1);
}
.team-member-contact .contact-details:not(.team-phone):hover svg path {
  fill: #fff;
}
.team-member-contact .team-phone {
  gap: 6px;
  padding: 0 8px;
}


/* For Firefox */
.team-member-hover-content {
  scrollbar-width: thin; /* Makes the scrollbar thinner */
  scrollbar-color: #34ccb5 transparent; /* Thumb and track colors */
}

/* For Chrome, Edge, and Safari */
.team-member-hover-content::-webkit-scrollbar {
  width: 6px; /* Adjust width for a thin scrollbar */
}

.team-member-hover-content::-webkit-scrollbar-track {
  background: transparent; /* Optional: background of the track */
}

.team-member-hover-content::-webkit-scrollbar-thumb {
  background-color: #34ccb5; /* The desired thumb color */
  border-radius: 10px;       /* Rounded top and bottom */
}



@media all and (max-width: 1420px) {
.team-member-contact .contact-details.team-phone {
  font-size: 14px;
}
.team-member-contact .contact-details.team-phone .icon svg {
  height: 17px;
}
.team-member-info {
  padding-top: 20px;
}
.team-member-hover-content {
  padding: 24px;
}
.team-member-contact {
  gap: 8px;
}
.team-member-bio {
  font-size: 14px;
}
}

@media all and (max-width: 1280px) {
.team-members-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
}
@media all and (max-width: 923px) {
.team-member-hover-content {
  padding: 20px;
}
.team-members-grid {
  grid-template-columns: 1fr 1fr;
}
}
@media all and (max-width: 640px) {
.team-members-grid {
  grid-template-columns: 1fr;
}
}