/* Slides */
.carousel-item {
	height: auto;
	/* min-height: 300px; */
	background: no-repeat scroll center scroll;
	background-size: cover;
	-webkit-background-size: cover;
}

/* Captions */
.carousel-caption {
	top: 31%;
	text-align: center;
	position: absolute;
}

.carousel-caption h5 {
	font-size: 24px;
	font-weight: 400;
	color: white;
}

.slider-button {
	margin: 30px;
}

.slider-button .button {
	background-color: #eb1c24;
	border: none;
	padding: 0.5rem 2rem;
	font-size: 16px;
	font-weight: 300;
	margin-right: 15px;
	border-radius: 5px;
}

.slider-button .button a {
	color: #ffffff;
	text-decoration: none;
}

.slider-button .button a:visited {
	color: #ffffff;
	text-decoration: none;
}


/* ====================================== DROPDOWNS ====================================== */
/* Dropdown headings */
div.dropdown-container {
	display: flex;
	justify-content: center;
}

div.dropdown-center {
	display: flex;
	align-items: center;
}

p.filter-by {
	color: black;
	font-size: 16px;
	flex: 1;
	margin: 15px;
}

div.btn-group {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 75%;
}

button.dropdown-btn {
	/* width: 100%; */
	padding: 16px;
	color: black;
	font-size: 20px;
	font-weight: 400;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: white;
}

button.dropdown-btn:hover {
	color: #eb1c24;
	background-color: white;
}

button.dropdown-btn:active {
	background-color: white;
	color: #eb1c24;
	border: none;
	outline: none;
}

/* Dropdown content */
.dropdown {
	width: calc(100%/3);
}

/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display: block;
}

.filterDiv {
	display: none; 
}

/* The "show" class is added to the filtered elements */
.show {
	display: block;
}

/* Style the buttons */
button.dropdown-item {
	text-align: left;
	color: black;
	font-size: 16px !important;
	font-weight: 300 !important;
}

/* Add a light grey background on mouse-over */
button.btn:hover {
	color: #eb1c24;
}

/* Add a dark background to the active button */
button.btn.active {
	/* background-color: #666; */
	color: #eb1c24;
}

/* ============================= CASE STUDY CARDS ============================= */

.case-study-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 20px auto;
	width: 75%;
	overflow: hidden;
}

.case-study {
	margin: 0.5em 0.5em;
	flex: 1 0 25%;
	text-align: center;
	border-radius: 10px;
	border: none;
	box-shadow: 0px 0px 7px 1px rgba(211, 211, 211, 0.5);
	padding-bottom: 1.75em;
	min-width: 20em;
	max-width: 22.5em;
}

.case-study-content {
	flex: 1;
	margin: 15px 20px 25px;
}

p.cs-client {
	color: black;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 7px;
}

p.cs-tags {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 400;
	color: black;
}

p.cs-testimonial {
	font-size: 16px;
	font-weight: 300;
	color: black;
}

div.cs-img-wrapper {
	min-height: 13em;
}

img.cs-img {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	flex: 1;
	height: 12.5em;
	width: 100%;
	object-fit: cover;
}

a.cs-link {
	color: black;
	text-decoration: underline;
}

a.cs-link:hover {
	color: #eb1c24 !important;
}

a.cs-link:visited {
	color: black;
}

a.card-link {
	color: black;
	text-decoration: none;
	width: 25%;
	margin: 0 auto;
	min-height: 100%;
}

a.card-link:visited {
	color: black;
	text-decoration: none;
}

.cards-wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20px auto;
	padding: 20px;
}

.card {
	margin: 0.5em;
	border: none;
	border-radius: 10px;
	box-shadow: 0px 0px 7px 1px rgba(211, 211, 211, 0.5);
	text-align: center;
	min-height: 400px;
	max-width: 500px;
}

.image-wrapper {
	height: 6vw;
	margin-top: 20px;
	display: flex;
	align-items: center;
	padding: 1em;
	padding-top: 1.5em;
}

.image-wrapper img {
	max-width: 80%;
	max-height: 100%;
	margin: auto;
}

.software-header {
	font-size: 20px;
	font-weight: 500;
	margin: 10px auto;
}

.card-text {
	font-size: 16px;
	font-weight: 300;
	padding: 0 20px;
}

.case-study-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin: 20px auto;
	width: 75%;
}

.case-study {
	margin: 0.5em 0.5em;
	flex: 1 0 25%;
	text-align: center;
	border-radius: 10px;
	border: none;
	box-shadow: 0px 0px 7px 1px rgba(211, 211, 211, 0.5);
	padding-bottom: 1.75em;
}

.case-study-content {
	flex: 1;
	margin: 15px 20px 25px;
}

p.cs-client {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 7px;
}

p.cs-tags {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 400;
	color: black;
}

p.cs-testimonial {
	font-size: 16px;
	font-weight: 300;
	color: black;
}

div.cs-img-wrapper {
	min-height: 13em;
	/* padding: 0; */
}

img.cs-img {
	/* border: 1px solid #788188; */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	flex: 1;
	height: 12.5em;
	width: 100%;
	object-fit: cover;
}

a.cs-link {
	color: black;
}

a.cs-link:visited {
	color: black;
}

#sticky-header.elementor-section {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}