/* =========================================================
   MODERN SITEMAP
   Direktorat Jenderal Kesehatan Lanjutan
   ========================================================= */

:root {
	--sitemap-primary: #0ab7a3;
	--sitemap-primary-dark: #087f76;
	--sitemap-secondary: #387ea3;

	--sitemap-text-dark: #183b36;
	--sitemap-text: #344e49;
	--sitemap-muted: #71817d;

	--sitemap-border: #e6efec;
	--sitemap-soft: #f6faf9;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.sitemap-page-header {
	position: relative;
	overflow: hidden;
}

.sitemap-page-header::before {
	content: "";

	position: absolute;

	width: 330px;
	height: 330px;

	right: -110px;
	top: -150px;

	border-radius: 50%;

	background: rgba(10, 183, 163, 0.08);
}

.sitemap-page-header::after {
	content: "";

	position: absolute;

	width: 180px;
	height: 180px;

	right: 100px;
	bottom: -110px;

	border-radius: 50%;

	border: 1px solid rgba(10, 183, 163, 0.14);
}

.sitemap-page-header .page-header-content {
	position: relative;
	z-index: 2;
}

/* =========================================================
   MAIN SECTION
   ========================================================= */

.sitemap-section {
	padding: 75px 0 90px;

	background: #ffffff;
}

/* =========================================================
   INTRO
   ========================================================= */

.sitemap-intro {
	max-width: 760px;

	margin: 0 auto 55px;

	text-align: center;
}

.sitemap-eyebrow {
	display: inline-block;

	margin-bottom: 12px;

	color: var(--sitemap-primary);

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 2px;
}

.sitemap-intro h2 {
	margin: 0 0 15px;

	color: var(--sitemap-text-dark);

	font-size: 32px;

	line-height: 1.25;

	font-weight: 700;

	letter-spacing: -0.5px;
}

.sitemap-intro h2 span {
	color: var(--sitemap-primary);
}

.sitemap-intro p {
	max-width: 680px;

	margin: 0 auto;

	color: var(--sitemap-muted);

	font-size: 14px;

	line-height: 1.85;
}

/* =========================================================
   GRID
   ========================================================= */

.sitemap-grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 22px;

	max-width: 1150px;

	margin: 0 auto;
}

/* =========================================================
   CARD
   ========================================================= */

.sitemap-card {
	position: relative;

	height: 100%;

	padding: 25px 24px 23px;

	background: #ffffff;

	border: 1px solid var(--sitemap-border);

	border-radius: 18px;

	box-shadow: 0 7px 25px rgba(24, 59, 54, 0.045);

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

.sitemap-card:hover {
	transform: translateY(-4px);

	border-color: #cfe5df;

	box-shadow: 0 15px 38px rgba(24, 59, 54, 0.08);
}

/* =========================================================
   CARD HEADER
   ========================================================= */

.sitemap-card-header {
	display: flex;

	align-items: center;

	gap: 15px;

	margin-bottom: 19px;

	padding-bottom: 17px;

	border-bottom: 1px solid #edf2f0;
}

/* Icon */

.sitemap-card-icon {
	flex: 0 0 48px;

	width: 48px;
	height: 48px;

	display: flex;

	align-items: center;
	justify-content: center;

	border-radius: 14px;

	background: #edf9f7;

	color: var(--sitemap-primary);

	font-size: 18px;

	transition:
		background 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.sitemap-card:hover .sitemap-card-icon {
	background: var(--sitemap-primary);

	color: #ffffff;

	transform: translateY(-2px);
}

/* Label */

.sitemap-card-label {
	display: block;

	margin-bottom: 4px;

	color: var(--sitemap-primary);

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.5px;
}

/* Title */

.sitemap-card-header h3 {
	margin: 0;

	color: var(--sitemap-text-dark);

	font-size: 17px;

	line-height: 1.3;

	font-weight: 700;
}

/* =========================================================
   LIST
   ========================================================= */

.sitemap-list {
	list-style: none;

	padding: 0;

	margin: 0;
}

.sitemap-list li {
	margin: 0;

	padding: 0;

	border-bottom: 1px solid #f0f4f3;
}

.sitemap-list li:last-child {
	border-bottom: none;
}

/* =========================================================
   LINK
   ========================================================= */

.sitemap-list li a {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 15px;

	min-height: 40px;

	padding: 8px 0;

	color: #60716e;

	font-size: 12.5px;

	line-height: 1.5;

	text-decoration: none;

	transition:
		color 0.2s ease,
		padding-left 0.25s ease;
}

.sitemap-list li a span {
	flex: 1;
}

.sitemap-list li a > i {
	flex: 0 0 auto;

	color: #a8b8b4;

	font-size: 11px;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

/* Hover */

.sitemap-list li a:hover {
	color: var(--sitemap-primary);

	padding-left: 5px;

	text-decoration: none;
}

.sitemap-list li a:hover > i {
	color: var(--sitemap-primary);

	transform: translateX(3px);
}

/* External */

.sitemap-list li a i.fa-external-link {
	font-size: 9px;
}

/* =========================================================
   SUBTLE CATEGORY ACCENT
   ========================================================= */

.sitemap-card:nth-child(3n + 2) .sitemap-card-icon {
	background: #eef6fa;

	color: var(--sitemap-secondary);
}

.sitemap-card:nth-child(3n + 2) .sitemap-card-label {
	color: var(--sitemap-secondary);
}

.sitemap-card:nth-child(3n + 3) .sitemap-card-icon {
	background: #f3f7e9;

	color: #819d28;
}

.sitemap-card:nth-child(3n + 3) .sitemap-card-label {
	color: #819d28;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
	.sitemap-section {
		padding: 60px 0 70px;
	}

	.sitemap-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 17px;
	}

	.sitemap-intro {
		margin-bottom: 42px;
	}

	.sitemap-intro h2 {
		font-size: 28px;
	}

	.sitemap-card {
		padding: 22px 20px;
	}
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.sitemap-section {
		padding: 45px 0 60px;
	}

	/* Intro */

	.sitemap-intro {
		margin-bottom: 32px;
	}

	.sitemap-eyebrow {
		font-size: 10px;

		letter-spacing: 1.7px;
	}

	.sitemap-intro h2 {
		font-size: 24px;

		line-height: 1.25;
	}

	.sitemap-intro h2 span {
		display: inline;
	}

	.sitemap-intro p {
		font-size: 12.5px;

		line-height: 1.75;
	}

	/* Grid */

	.sitemap-grid {
		grid-template-columns: 1fr;

		gap: 12px;
	}

	/* Card */

	.sitemap-card {
		padding: 20px 18px;

		border-radius: 15px;
	}

	.sitemap-card:hover {
		transform: none;
	}

	/* Header */

	.sitemap-card-header {
		gap: 12px;

		margin-bottom: 13px;

		padding-bottom: 13px;
	}

	.sitemap-card-icon {
		flex: 0 0 43px;

		width: 43px;
		height: 43px;

		border-radius: 12px;

		font-size: 16px;
	}

	.sitemap-card-label {
		font-size: 7.5px;

		letter-spacing: 1.3px;
	}

	.sitemap-card-header h3 {
		font-size: 15px;
	}

	/* List */

	.sitemap-list li a {
		min-height: 38px;

		padding: 7px 0;

		font-size: 12px;
	}

	.sitemap-list li a > i {
		font-size: 10px;
	}
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {
	.sitemap-section {
		padding-top: 40px;
	}

	.sitemap-intro h2 {
		font-size: 22px;
	}

	.sitemap-intro p {
		font-size: 12px;
	}

	.sitemap-card {
		padding: 18px 16px;
	}

	.sitemap-card-icon {
		flex-basis: 40px;

		width: 40px;
		height: 40px;
	}

	.sitemap-card-header h3 {
		font-size: 14px;
	}

	.sitemap-list li a {
		font-size: 11.5px;
	}
}