.row {
	display: flex;
}
.leadership-content {
	display: flex;
    flex-wrap: wrap;
}
.leadership-card {
	padding: 0px 16px;
	margin-bottom: 60px;
	cursor: pointer;
}
.leadership-card img {
	width: 100%;
	height: auto;
}
.leadership-card h4 {
	font-size: 1.2rem;
}
.leadership-card .position {
	font-size: 1rem
}
.d-none {
	display: none;
}
.leadership-sidebar {
	padding-right: 8%;
}
.leadership-sidebar .employee_name {
	color: var(--heading-color, var(--heading-4-color, var(--headings-color)));
	font-size: 1.2rem;
	font-weight: bold;
}
.leadership-sidebar .bio {
	margin-top: 20px;
}
.leadership-card {
    position: relative;
}

/* Create a container within the .leadership-card for the image and the dark mask */
.leadership-card .img-container {
    position: relative;
    z-index: 1;
    /* max-width: 280px; */
}

/* Style the img tag */
.leadership-card .img-container img {
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;
}

/* Add a hover effect to the .img-container */
.leadership-card:hover .img-container::before {
    content: ''; /* Create a pseudo-element for the dark mask */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark background with 50% opacity */
    opacity: 1; /* Initially, the mask is transparent */
    transition: opacity 0.3s ease; /* Add a smooth transition effect to opacity */
    z-index: 10;
}
/* Ensure the image remains on top */
.leadership-card .img-container img {
    position: relative;
    z-index: 2; /* Set a higher z-index to keep the image above the mask */
}
.img-container .arrow {
	position: absolute !important;
    width: 20px;
    left: 15px;
    bottom: 10px;
    display: none;
}
.img-container .arrow.left{
	display: none;
}
.img-container .arrow.down{
	display: none;
	width: 30px;
}
.leadership-content .bio {
	max-width: 280px;
	/*margin-right: -100%;*/
    width: auto;
    display: none !important;
}
.leadership-content .leadership-card:nth-child(even) .bio {
    /*margin-left: calc(-30px - 100%);*/
    margin-right: 0px;
}
.leadership-sidebar-fixed {
	position: sticky;
    width: fit-content;
    top:30%;
}
@media only screen and (max-width: 999px) {
	.leadership-sidebar {
		display: none;
	}
	.leadership-card {
		width: 50%;
	}
	.leadership-content .leadership-card:hover .img-container .arrow.down {
	    display: block;
	    z-index: 200;
	}
	.leadership-content {
	    justify-content: center;
	}
	.leadership-content .bio.d-block {
		display: block !important;
	}
}

@media only screen and (max-width: 768px) {
	.leadership-sidebar {
		display: none;
	}
	.leadership-card {
		width: 100%;
	}
	.leadership-content {
		justify-content: center;
	}
	.leadership-content .leadership-card:hover .img-container .arrow.down {
	    display: block;
	    z-index: 200;
	}
	.leadership-content .bio.d-block {
		display: block !important;
	}
	.leadership-content .bio, .leadership-content .leadership-card:nth-child(even) .bio {
		margin-left: 0px;
		margin-right: 0px;
	}

}



@media (min-width: 999px) {
	.col-lg-4 {
		width: 33.33333%;
	}
	.col-lg-8 {
		width: 66.66666%;
	}
	.leadership-card {
		width:33.33333%
	}

	.leadership-content .leadership-card:hover .img-container .arrow.left {
	    display: block;
	    z-index: 200;
	}
}