@charset "utf-8";
/* Container for flex cards */
.flex-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: stretch; /* Ensure all cards match height */
	margin: 1em;
}
/* Base card styling */
.flex-card {
	background-color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 1em;
	border-radius: 30px;
	box-sizing: border-box;
	flex: 0 1 100%; /* Default for small screens: 1 per row */
	border-bottom: solid 2px rgba(37,157,92,0.7)
}
/* Title and description block wrappers */

.card-title,
.card-description {
	display: block;
	text-align: center;
	min-height: 4em;
	margin-bottom: 0.5em;
}
.card-description {
	padding-bottom: 1em;
}
/* Top-align inner text */
.card-title h2,
.card-description p {
	text-align: center;
	display: block;
	margin: 0;
}
.flex-card h2 {
	font-size: 1.8em;
}
.flex-card p {
	font-size: 1.3em;
	color: #696969;
}
.flex-card h2,
.flex-card p {
	text-align: center !important;
}
.flex-card img {
	width: 100%;
	margin: 0.25em auto;
}
.flex-button {
	display: inline-block;
	padding: 0.5em 1em;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-radius: 30px;
	font-family: "Questrial", Arial, Helvetica, sans-serif;
	font-size: 1.4rem;
	color: white;
	background-color: #159FDF;
	border: 1px solid #159FDF;
	transition: background-color 0.4s ease-in-out;
}
.flex-button:hover {
	color: #159FDF;
	background-color: white;
}

/* Responsive widths */

/* ≥600px: 2 per row */
@media only screen and (min-width: 600px) {
.flex-card {
	flex: 0 1 calc((100% - 10px) / 2);
}
}

/* ≥770px: 3 per row */
@media only screen and (min-width: 770px) {
.flex-card {
	flex: 0 1 calc((100% - 20px) / 3);
}
}

/* ≥1100px: 4 per row */
@media only screen and (min-width: 1100px) {
.flex-card {
	flex: 0 1 calc((100% - 30px) / 4);
}
}

/* ≥1800px: 5 per row */
@media only screen and (min-width: 1800px) {
.flex-container {
	gap: 15px;
}
.flex-card {
	flex: 0 1 calc((100% - 60px) / 5);
}
}

/* ≥2400px: 6 per row */
@media only screen and (min-width: 2400px) {
.flex-container {
	gap: 20px;
}
.flex-card {
	flex: 0 1 calc((100% - 100px) / 6);
}
}