#team-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    padding: 20px;
    width: 80%;
    max-width: 600px;
    position: relative;
    margin: auto;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
}

body.modal-open {
    overflow: hidden !important;
}


/* Ensure the Team Member image container is positioned relatively */
.team-hover-view .et_pb_team_member_image {
    position: relative;
    display: inline-block;
}

/* Style the fixed square containing the arrow, increased to 60px */
.team-hover-view .et_pb_team_member_image::before {
    content: '\203A'; /* Unicode for a right chevron, matching AFP style */
    position: absolute;
    bottom: 0; /* No space at the bottom of the image */
    right: 0; /* No space on the right of the image */
    background: #21409A; /* Blue background matching AFP */
    color: white;
    font-size: 32px; /* Slightly larger font size for the arrow to fit the bigger square */
    font-weight: normal; /* AFP uses a normal weight for the arrow */
    border-radius: 0px; /* Slight border radius to match AFP */
    opacity: 1; /* Always visible */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Increased width for the square */
    height: 60px; /* Increased height for the square */
    line-height: 1; /* Ensure proper alignment of the arrow */
}

/* Create a pseudo-element for the "Learn More" text that slides out on hover, adjusted for the larger square */
.team-hover-view .et_pb_team_member_image::after {
    content: 'View Profile'; /* The "Learn More" text */
    position: absolute;
    bottom: 0; /* Align with the bottom of the image */
    right: 60px; /* Positioned to the left of the larger arrow square */
    background: #21409A; /* Same blue background */
    color: white;
    padding: 0 15px; /* Padding for the "Learn More" text */
    font-size: 18px; /* Slightly larger font size to match the bigger square */
    font-weight: bold; /* "Learn More" text is bold */
    border-radius: 0px; /* Rounded corners on the left side */
    opacity: 0; /* Hidden by default */
    transform: translateX(60px); /* Start at the left edge of the larger arrow square */
    transition: all 0.3s ease-in-out; /* Smooth transition for sliding effect */
    z-index: 1;
    display: flex;
    align-items: center;
    height: 60px; /* Match the height of the larger arrow square */
}

/* On hover over the entire module, slide the "Learn More" text out */
.team-hover-view:hover .et_pb_team_member_image::after {
    opacity: 1; /* Show the "Learn More" text */
    transform: translateX(0); /* Slide to the left of the arrow square */
}

/* Remove image dimming effect */
.team-hover-view .et_pb_team_member_image img {
    transition: none;
}

.team-hover-view:hover .et_pb_team_member_image img {
    opacity: 1; /* No dimming on image hover */
}

/* Add padding to the title and text */
.team-hover-view .et_pb_team_member_description {
    padding: 20px; /* Consistent padding */
    position: relative; /* For positioning */
}

/* Ensure text is properly positioned */
.team-hover-view .et_pb_team_member_description h4,
.team-hover-view .et_pb_team_member_description .et_pb_member_position {
    position: relative;
    z-index: 1;
}