.hpc-card {
	display: flex;
	background: #102B37;
	transition: all 0.3s ease;
	text-decoration: none;
	color: #fff;
	border: 1px solid #102B37;
    height: 100%;
}

.hpc-card:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.hpc-image-wrapper {
	position: relative;
	min-height: 200px;
    width: 40%;
}

.hpc-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.hpc-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	background: rgba(94, 107, 126, 0.9);
	color: #fff;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 20px;
    z-index: 10;
}

.hpc-content {
	padding: 35px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
    width: 60%;
}

.hpc-meta {
	font-size: 13px;
	color: #888;
	margin-bottom: 10px;
}

.hpc-title {
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.3;
    font-weight: 600;
}

.hpc-title a {
	color: inherit;
	text-decoration: none;
}

.hpc-excerpt {
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
	margin-bottom: 25px;
    font-size: 15px;
}

.hpc-read-more {
    margin-top: auto;
}

.hpc-button {
	display: inline-block;
	font-weight: 700;
	color: #00B1D2;
	font-size: 14px;
	text-decoration: none;
}

/* Mobile responsive handling */
@media (max-width: 767px) {
	.hpc-card.hpc-mobile-column {
		flex-direction: column !important;
	}
	.hpc-card.hpc-mobile-column-reverse {
		flex-direction: column-reverse !important;
	}
	.hpc-card.hpc-mobile-column .hpc-image-wrapper,
	.hpc-card.hpc-mobile-column-reverse .hpc-image-wrapper,
	.hpc-card.hpc-mobile-column .hpc-content,
	.hpc-card.hpc-mobile-column-reverse .hpc-content {
		width: 100% !important;
	}
}