/* ===================================
   PAGE WRAPPER
   =================================== */
.container-program-works {
	background: #f8f9fa;
}

/* ===================================
   CONTENT CARD
   =================================== */
.container-program-works .program-works-content {
	padding-top: 0;
}

.container-program-works .program-works-content h1 {
	line-height: 1.25;
	margin-bottom: 0;
	font-family: "raleway-bold", sans-serif;
	color: #fff;
}

.container-program-works .contents {
	background: #fff;
	border-radius: 1rem;
	padding: 2.5rem;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.03);
}

/* ===================================
   HEADER / HERO BAND
   =================================== */
.container-program-works .program-works-content > h1 {
	background: linear-gradient(135deg, #2c2c49 0%, #3a3a5c 100%);
	margin-left: -15px;
	margin-right: -15px;
	padding: 3.5rem 3rem 3rem;
	border-radius: 0;
	position: relative;
}

/* ===================================
   TYPOGRAPHY
   =================================== */
.container-program-works .program-works-content p {
	font-size: 1rem;
	margin-bottom: 1.2rem;
	line-height: 1.85;
	color: #444;
}

.container-program-works .program-works-content p:last-child {
	margin-bottom: 0;
}

.container-program-works .program-works-content .date {
	color: #888;
	font-family: "raleway-medium", sans-serif;
	font-size: 0.9rem;
	margin-top: 2rem;
}

.container-program-works .program-works-content h2 {
	font-size: 1.35rem;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-family: "raleway-bold", sans-serif;
	color: #2c2c49;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid rgba(0, 164, 239, 0.15);
}

.container-program-works .program-works-content h2:first-child {
	margin-top: 0;
}

/* ===================================
   LISTS
   =================================== */
.container-program-works .program-works-content ol,
.container-program-works .program-works-content ul {
	padding-left: 0;
	margin-bottom: 1.5rem;
	list-style: none;
}

.container-program-works .program-works-content ul li,
.container-program-works .program-works-content ol li {
	position: relative;
	padding: 0.6rem 0 0.6rem 1.6rem;
	font-size: 0.95rem;
	line-height: 1.75;
	color: #555;
	border-bottom: 1px solid #f0f0f0;
}

.container-program-works .program-works-content ul li:last-child,
.container-program-works .program-works-content ol li:last-child {
	border-bottom: none;
}

.container-program-works .program-works-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.1rem;
	width: 6px;
	height: 6px;
	background: linear-gradient(135deg, #00a4ef 0%, #0077b6 100%);
	border-radius: 50%;
}

.container-program-works .program-works-content ol {
	counter-reset: list-counter;
}

.container-program-works .program-works-content ol li {
	counter-increment: list-counter;
}

.container-program-works .program-works-content ol li::before {
	content: counter(list-counter) ".";
	position: absolute;
	left: 0;
	top: 0.6rem;
	font-family: "raleway-bold", sans-serif;
	font-size: 0.85rem;
	color: #00a4ef;
	min-width: 1.2rem;
}

/* ===================================
   RESPONSIVE
   =================================== */
@media all and (min-width: 100px) {
	.container-program-works {
		padding: 0 0 3rem;
	}
	.container-program-works .program-works-content h1 {
		font-size: 1.4rem;
		padding: 5.5rem 1.5rem 2rem;
		margin-left: -15px;
		margin-right: -15px;
	}
	.container-program-works .contents {
		padding: 1.8rem 1.2rem;
		border-radius: 0.8rem;
		margin-top: -0.8rem;
		position: relative;
		z-index: 1;
	}
	.container-program-works .program-works-content p {
		font-size: 0.92rem;
	}
}

@media all and (min-width: 576px) {
	.container-program-works {
		padding: 0 0 3.5rem;
	}
	.container-program-works .program-works-content h1 {
		font-size: 1.55rem;
		padding: 6rem 2rem 2.2rem;
	}
	.container-program-works .contents {
		padding: 2rem 1.5rem;
	}
	.container-program-works .program-works-content p {
		font-size: 0.95rem;
	}
}

@media all and (min-width: 768px) {
	.container-program-works {
		padding: 0 0 4rem;
	}
	.container-program-works .program-works-content h1 {
		font-size: 1.75rem;
		padding: 6.5rem 2.5rem 2.5rem;
	}
	.container-program-works .contents {
		padding: 2.5rem 2rem;
		margin-top: -1rem;
	}
	.container-program-works .program-works-content p {
		font-size: 1rem;
	}
}

@media all and (min-width: 992px) {
	.container-program-works {
		padding: 0 0 4.5rem;
	}
	.container-program-works .program-works-content h1 {
		font-size: 1.9rem;
		padding: 7rem 3rem 2.8rem;
	}
	.container-program-works .contents {
		padding: 2.8rem 2.5rem;
	}
}

@media all and (min-width: 1200px) {
	.container-program-works {
		padding: 0 0 5rem;
	}
	.container-program-works .program-works-content h1 {
		font-size: 2rem;
	}
	.container-program-works .contents {
		padding: 3rem 2.8rem;
	}
}

@media all and (min-width: 1440px) {
	.container-program-works {
		padding: 0 0 5.5rem;
	}
	.container-program-works .program-works-content h1 {
		font-size: 2.1rem;
		padding: 7.5rem 3rem 3rem;
	}
	.container-program-works .contents {
		padding: 3.2rem 3rem;
	}
}

@media all and (min-width: 1920px) {
	.container-program-works {
		padding: 0 0 6rem;
	}
	.container-program-works .program-works-content h1 {
		font-size: 2.3rem;
		padding: 8rem 3rem 3.2rem;
	}
	.container-program-works .contents {
		padding: 3.5rem;
	}
	.container-program-works .program-works-content p {
		font-size: 1.05rem;
	}
}

@media all and (max-width: 767px) {
	.container-program-works .program-works-content h2 {
		font-size: 1.15rem;
		margin-top: 2rem;
	}
}