/* =========================================================
   INFORMASI PUBLIK - MODERN
   Direktorat Jenderal Kesehatan Lanjutan
========================================================= */

/* =========================================================
   ROOT
========================================================= */

.info-publik-page {
	--keslan-teal: #0ab7a3;
	--keslan-teal-dark: #087f76;
	--keslan-green: #7bd63b;
	--keslan-lime: #c8df18;

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

	--border: #e8efed;
	--soft: #f5faf8;

	background: #ffffff;
	color: var(--text);

	overflow: hidden;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.info-breadcrumb {
	padding: 16px 0;

	background: #ffffff;

	border-bottom: 1px solid #edf2f0;
}

.info-breadcrumb .breadcrumb {
	margin: 0;

	padding: 0;

	font-size: 14px;

	background: transparent;
}

.info-breadcrumb .breadcrumb-item {
	color: #82908d;
}

.info-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	color: #a9b5b2;

	content: "/";
}

.info-breadcrumb a {
	color: #0a8f83;

	text-decoration: none;

	transition: color 0.2s ease;
}

.info-breadcrumb a:hover {
	color: var(--keslan-teal-dark);
}

.info-breadcrumb .active {
	color: #344e49;

	font-weight: 600;
}

/* =========================================================
   HERO
========================================================= */

.info-hero {
	position: relative;

	padding: 65px 0 70px;

	background:
		radial-gradient(
			circle at 12% 45%,
			rgba(10, 183, 163, 0.08),
			transparent 30%
		),
		radial-gradient(
			circle at 88% 40%,
			rgba(123, 214, 59, 0.07),
			transparent 28%
		),
		#ffffff;
}

.info-hero-wrapper {
	min-height: 410px;

	display: flex;

	align-items: center;

	gap: 75px;

	max-width: 1150px;

	margin: 0 auto;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.info-hero-visual {
	position: relative;

	flex: 0 0 470px;

	width: 470px;

	height: 390px;

	display: flex;

	align-items: center;

	justify-content: center;
}

/*
 * Lingkaran dekorasi di belakang icon.
 */

.info-hero-orbit {
	position: absolute;

	width: 330px;

	height: 330px;

	border-radius: 50%;

	background: radial-gradient(
		circle at 35% 30%,
		rgba(218, 249, 242, 0.95),
		rgba(210, 246, 239, 0.65) 45%,
		rgba(185, 236, 226, 0.35) 100%
	);

	box-shadow: 0 20px 60px rgba(10, 183, 163, 0.08);
}

/*
 * Lingkaran kecil dekorasi.
 */

.info-hero-orbit::before {
	content: "";

	position: absolute;

	width: 70px;

	height: 70px;

	right: -20px;

	top: 25px;

	border-radius: 50%;

	background: rgba(123, 214, 59, 0.12);
}

.info-hero-orbit::after {
	content: "";

	position: absolute;

	width: 28px;

	height: 28px;

	left: 25px;

	bottom: 35px;

	border-radius: 50%;

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

/*
 * ICON BULAT.
 *
 * Tidak diberikan background kotak.
 * Tidak dipaksa border-radius 10px.
 */

.info-hero-icon {
	position: relative;

	z-index: 2;

	width: 360px;

	height: 360px;

	object-fit: contain;

	display: block;

	filter: drop-shadow(0 16px 25px rgba(10, 183, 163, 0.1));
}

/* =========================================================
   HERO CONTENT
========================================================= */

.info-hero-content {
	flex: 1;

	max-width: 560px;
}

.info-eyebrow {
	display: inline-block;

	margin-bottom: 13px;

	color: var(--keslan-teal);

	font-size: 13px;

	font-weight: 700;

	letter-spacing: 2px;
}

.info-hero-content h1 {
	margin: 0 0 20px;

	color: var(--text-dark);

	font-size: clamp(38px, 4vw, 56px);

	line-height: 1.08;

	font-weight: 700;

	letter-spacing: -0.8px;
}

.info-hero-content p {
	max-width: 540px;

	margin: 0;

	color: var(--text-muted);

	font-size: 17px;

	line-height: 1.8;
}

.info-hero-line {
	width: 55px;

	height: 3px;

	margin: 27px 0 15px;

	border-radius: 10px;

	background: linear-gradient(90deg, var(--keslan-teal), var(--keslan-green));
}

.info-hero-caption {
	color: #8a9895;

	font-size: 13px;

	font-weight: 500;
}

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

.info-intro {
	padding: 55px 0 40px;

	background: #f8fbfa;
}

.info-intro-content {
	max-width: 760px;

	margin: auto;

	text-align: center;
}

.info-section-label {
	display: block;

	margin-bottom: 10px;

	color: var(--keslan-teal);

	font-size: 12px;

	font-weight: 700;

	letter-spacing: 1.8px;
}

.info-intro-content h2 {
	margin: 0 0 14px;

	color: var(--text-dark);

	font-size: 31px;

	font-weight: 700;
}

.info-intro-content p {
	margin: 0;

	color: var(--text-muted);

	font-size: 15px;

	line-height: 1.8;
}

/* =========================================================
   CATEGORY
========================================================= */

.info-category {
	padding: 60px 0;

	background: #ffffff;
}

.info-category + .info-category {
	border-top: 1px solid #edf2f0;
}

.info-category-last {
	padding-bottom: 90px;
}

/* =========================================================
   CATEGORY HEADING
   STYLE MENGIKUTI HEADING BERANDA
========================================================= */

.info-category-heading {
	position: relative;

	max-width: 900px;

	margin-bottom: 38px;

	padding-left: 42px;
}

/*
 * GARIS PENDEK LIME
 */

.info-category-heading::before {
	content: "";

	position: absolute;

	left: 0;

	top: 17px;

	width: 27px;

	height: 5px;

	border-radius: 20px;

	background: #cbdc22;
}

/*
 * JUDUL
 */

.info-category-heading h2 {
	margin: 0 0 10px;

	color: #123f54;

	font-size: 36px;

	line-height: 1.15;

	font-weight: 800;

	letter-spacing: -0.8px;
}

/*
 * BAGIAN TEAL
 */

.info-category-heading h2 span {
	color: #0ab7a3;
}

/*
 * DESKRIPSI
 */

.info-category-heading p {
	max-width: 760px;

	margin: 0;

	color: #6c8490;

	font-size: 16px;

	line-height: 1.65;
}

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

.info-item-grid {
	display: grid;

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

	gap: 22px;
}

/* =========================================================
   ITEM
========================================================= */

/* =========================================================
   INFO ITEM - PARALLAX
========================================================= */

.info-item {
	position: relative;

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;

	padding: 22px 16px 24px;

	color: inherit;

	text-decoration: none;

	border-radius: 18px;

	background: transparent;

	/*
     * Nilai awal sebelum JavaScript bekerja
     */
	--item-x: 0px;
	--item-scale: 1;
	--item-opacity: 1;
	--item-y: 0px;

	transform: translate3d(var(--item-x), var(--item-y), 0)
		scale(var(--item-scale));

	/*
     * Jangan menggunakan transition transform.
     * Posisi mengikuti scroll secara langsung.
     */
	will-change: transform, opacity;

	transition: background 0.25s ease;
}

/* =========================================================
   ITEM VISUAL
========================================================= */

.info-item-visual {
	width: 155px;

	height: 155px;

	display: flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 17px;
}

/*
 * Sangat penting:
 *
 * Tidak ada background kotak.
 * Icon tetap mengikuti bentuk bulat/aslinya.
 */

.info-item-visual img {
	width: 100%;

	height: 100%;

	object-fit: contain;

	display: block;

	border: 0;

	background: transparent;

	box-shadow: none;

	border-radius: 50%;

	transition:
		transform 0.3s ease,
		filter 0.3s ease;
}

.info-item:hover .info-item-visual img {
	transform: scale(1.035);

	filter: drop-shadow(0 10px 20px rgba(10, 183, 163, 0.12));
}

/* =========================================================
   ITEM TEXT
========================================================= */

.info-item-text h3 {
	margin: 0 0 6px;

	color: var(--text-dark);

	font-size: 16px;

	line-height: 1.4;

	font-weight: 700;
}

.info-item-text span {
	color: var(--keslan-teal);

	font-size: 12px;

	font-weight: 600;

	transition: color 0.2s ease;
}

.info-item:hover .info-item-text span {
	color: var(--keslan-teal-dark);
}

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

@media (max-width: 1199px) {
	.info-hero-wrapper {
		gap: 45px;
	}

	.info-hero-visual {
		flex-basis: 400px;

		width: 400px;

		height: 360px;
	}

	.info-hero-icon {
		width: 330px;

		height: 330px;
	}

	.info-hero-orbit {
		width: 300px;

		height: 300px;
	}

	.info-item-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

@media (max-width: 991px) {
	.info-hero {
		padding: 45px 0 55px;
	}

	.info-hero-wrapper {
		min-height: auto;

		gap: 30px;
	}

	.info-hero-visual {
		flex-basis: 350px;

		width: 350px;

		height: 320px;
	}

	.info-hero-icon {
		width: 290px;

		height: 290px;
	}

	.info-hero-orbit {
		width: 270px;

		height: 270px;
	}

	.info-hero-content h1 {
		font-size: 42px;
	}

	.info-hero-content p {
		font-size: 15px;
	}

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

		gap: 15px;
	}

	.info-category {
		padding: 50px 0;
	}
}

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

@media (max-width: 767px) {
	.info-breadcrumb {
		padding: 13px 0;
	}

	.info-breadcrumb .breadcrumb {
		font-size: 12px;

		white-space: nowrap;

		overflow: hidden;

		text-overflow: ellipsis;
	}

	.info-hero {
		padding: 25px 0 45px;
	}

	.info-hero-wrapper {
		flex-direction: column;

		gap: 15px;

		text-align: center;
	}

	.info-hero-visual {
		order: 1;

		flex: none;

		width: 100%;

		height: 300px;

		transform: translate3d(var(--info-x, -100px), 0, 0)
			scale(var(--info-scale, 1.12));
	}

	.info-hero-orbit {
		width: 240px;

		height: 240px;
	}

	.info-hero-icon {
		width: 255px;

		height: 255px;
	}

	.info-hero-content {
		order: 2;

		max-width: 100%;
	}

	.info-eyebrow {
		font-size: 11px;

		letter-spacing: 1.5px;
	}

	.info-hero-content h1 {
		margin-bottom: 14px;

		font-size: 34px;

		letter-spacing: -0.4px;
	}

	.info-hero-content p {
		font-size: 14px;

		line-height: 1.75;
	}

	.info-hero-line {
		margin: 20px auto 12px;
	}

	.info-intro {
		padding: 40px 0 30px;
	}

	.info-intro-content h2 {
		font-size: 24px;
	}

	.info-intro-content p {
		font-size: 14px;
	}

	.info-category {
		padding: 42px 0;
	}

	.info-category-last {
		padding-bottom: 65px;
	}

	.info-category-heading {
		gap: 13px;

		margin-bottom: 25px;
	}

	.info-category-heading h2 {
		margin-top: 1px;

		font-size: 20px;
	}

	.info-category-heading p {
		font-size: 13px;

		line-height: 1.65;
	}

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

		gap: 7px;
	}

	.info-item {
		padding: 15px 8px 18px;

		border-radius: 14px;
	}

	.info-item-visual {
		width: 125px;

		height: 125px;

		margin-bottom: 12px;
	}

	.info-item-text h3 {
		font-size: 13px;

		line-height: 1.35;
	}

	.info-item-text span {
		font-size: 11px;
	}
}

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

@media (max-width: 400px) {
	.info-hero-visual {
		height: 260px;
	}

	.info-hero-orbit {
		width: 215px;

		height: 215px;
	}

	.info-hero-icon {
		width: 225px;

		height: 225px;
	}

	.info-hero-content h1 {
		font-size: 31px;
	}

	.info-item-visual {
		width: 105px;

		height: 105px;
	}

	.info-item {
		padding-left: 5px;

		padding-right: 5px;
	}
}

/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.info-hero-visual {
		transform: none !important;

		opacity: 1 !important;

		transition: none !important;
	}

	.info-item,
	.info-item-visual img {
		transition: none !important;
	}
}

/* =========================================================
   PARALLAX DIRECTION
========================================================= */

/*
 * Item dengan class parallax-left
 * akan masuk dari kiri.
 */

.info-item.parallax-left {
	--item-x: -170px;
}

/*
 * Item dengan class parallax-right
 * akan masuk dari kanan.
 */

.info-item.parallax-right {
	--item-x: 170px;
}

/*
 * Saat JavaScript belum aktif,
 * item tetap terlihat normal.
 */

.info-item.parallax-ready {
	opacity: var(--item-opacity);
}

@media (max-width: 991px) {
	.info-category-heading {
		padding-left: 36px;

		margin-bottom: 30px;
	}

	.info-category-heading::before {
		top: 14px;

		width: 24px;

		height: 4px;
	}

	.info-category-heading h2 {
		font-size: 30px;
	}

	.info-category-heading p {
		font-size: 15px;
	}
}

@media (max-width: 767px) {
	.info-category-heading {
		padding-left: 32px;

		margin-bottom: 25px;
	}

	.info-category-heading::before {
		left: 0;

		top: 11px;

		width: 21px;

		height: 4px;
	}

	.info-category-heading h2 {
		font-size: 25px;

		line-height: 1.2;

		letter-spacing: -0.3px;
	}

	.info-category-heading p {
		font-size: 13px;

		line-height: 1.65;
	}
}

/* =========================================================
   INFORMASI SETIAP SAAT
   HERO ACTION
========================================================= */

.info-hero-action {
	margin-top: 25px;
}

.info-primary-button {
	display: inline-flex;

	align-items: center;

	gap: 12px;

	padding: 12px 20px;

	border: 1px solid #d1d342;

	border-radius: 30px;

	background: #ffffff;

	color: #0a9f8e;

	font-size: 14px;

	font-weight: 700;

	text-decoration: none;

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

.info-primary-button span {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 24px;

	height: 24px;

	border-radius: 50%;

	color: #0a9f8e;

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

.info-primary-button:hover {
	background: #0ab7a3;

	border-color: #0ab7a3;

	color: #ffffff;

	text-decoration: none;

	transform: translateY(-2px);

	box-shadow: 0 8px 22px rgba(10, 183, 163, 0.15);
}

.info-primary-button:hover span {
	background: rgba(255, 255, 255, 0.2);

	color: #ffffff;
}

/* =========================================================
   INFORMASI SETIAP SAAT - HERO ICON
========================================================= */

.info-setiap-icon {
	width: 330px;

	height: 330px;

	object-fit: contain;
}

@media (max-width: 991px) {
	.info-setiap-icon {
		width: 290px;

		height: 290px;
	}
}

/* =========================================================
   INFORMASI SETIAP SAAT - MOBILE HERO
========================================================= */

@media (max-width: 767px) {
	.info-setiap-hero {
		padding-top: 20px;
		padding-bottom: 40px;
	}

	/*
     * Area visual diperkecil supaya judul
     * tidak terlalu jauh ke bawah.
     */

	.info-setiap-hero .info-hero-visual {
		width: 100%;

		height: 225px;

		flex: none;

		margin: 0 auto;

		display: flex;

		align-items: center;

		justify-content: center;

		overflow: visible;

		transform: none;

		opacity: 1;
	}

	/*
     * Lingkaran background
     */

	.info-setiap-hero .info-hero-orbit {
		width: 195px;

		height: 195px;
	}

	/*
     * GAMBAR UTAMA
     */

	.info-setiap-icon {
		width: 195px;

		height: 195px;

		max-width: 195px;

		max-height: 195px;

		object-fit: contain;

		display: block;

		margin: 0 auto;
	}

	/*
     * Konten langsung setelah gambar
     */

	.info-setiap-hero .info-hero-content {
		width: 100%;

		max-width: 100%;

		text-align: center;
	}

	.info-setiap-hero .info-eyebrow {
		margin-bottom: 10px;

		font-size: 10px;

		letter-spacing: 1.6px;
	}

	.info-setiap-hero .info-hero-content h1 {
		margin-bottom: 13px;

		font-size: 31px;

		line-height: 1.12;
	}

	.info-setiap-hero .info-hero-content p {
		max-width: 340px;

		margin-left: auto;

		margin-right: auto;

		font-size: 13.5px;

		line-height: 1.7;
	}

	.info-setiap-hero .info-hero-line {
		margin: 18px auto 12px;
	}

	.info-setiap-hero .info-hero-caption {
		font-size: 11px;
	}

	.info-hero-action {
		margin-top: 20px;
	}

	.info-primary-button {
		padding: 10px 17px;

		font-size: 12.5px;
	}
}

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

.info-service-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));

	max-width: 1050px;

	margin: 0 auto;
}

@media (max-width: 991px) {
	.info-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		max-width: 700px;
	}
}

@media (max-width: 767px) {
	.info-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 8px;
	}
}

/* =========================================================
   CLOSING
========================================================= */

.info-closing {
	padding: 65px 0 85px;

	background: #f8fbfa;

	border-top: 1px solid #edf2f0;
}

.info-closing-content {
	max-width: 720px;

	margin: auto;

	text-align: center;
}

.info-closing-content h2 {
	margin: 0 0 12px;

	color: #123f54;

	font-size: 28px;

	font-weight: 800;

	letter-spacing: -0.4px;
}

.info-closing-content p {
	margin: 0;

	color: #71817d;

	font-size: 14px;

	line-height: 1.8;
}

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

	.info-closing-content h2 {
		font-size: 23px;
	}

	.info-closing-content p {
		font-size: 13px;

		line-height: 1.7;
	}
}

@media (max-width: 400px) {
	.info-setiap-hero .info-hero-visual {
		height: 205px;
	}

	.info-setiap-hero .info-hero-orbit {
		width: 175px;

		height: 175px;
	}

	.info-setiap-icon {
		width: 175px;

		height: 175px;

		max-width: 175px;

		max-height: 175px;
	}

	.info-setiap-hero .info-hero-content h1 {
		font-size: 29px;
	}

	.info-setiap-hero .info-hero-content p {
		font-size: 13px;

		padding: 0 5px;
	}
}

/* =========================================================
   INFORMASI SERTA MERTA
========================================================= */

/* =========================================================
   HERO
========================================================= */

.info-serta-hero {
	padding-top: 55px;
	padding-bottom: 65px;
}

.info-serta-icon {
	width: 350px;

	height: 350px;

	object-fit: contain;

	display: block;
}

/* =========================================================
   HERO ACTION
========================================================= */

.info-serta-hero .info-hero-action {
	margin-top: 25px;
}

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

.info-serta-list {
	padding: 65px 0 80px;

	background: #ffffff;
}

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

.info-serta-items {
	display: flex;

	flex-direction: column;

	gap: 28px;

	max-width: 1080px;

	margin: 0 auto;
}

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

.info-serta-card {
	display: grid;

	grid-template-columns: 340px minmax(0, 1fr);

	min-height: 250px;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid #e7efec;

	border-radius: 22px;

	box-shadow: 0 10px 35px rgba(24, 59, 54, 0.055);

	will-change: transform, opacity;

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

.info-serta-card:hover {
	border-color: #cfe5df;

	box-shadow: 0 18px 45px rgba(24, 59, 54, 0.1);
}

/* =========================================================
   IMAGE
========================================================= */

.info-serta-card-image {
	position: relative;

	min-height: 250px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	background: linear-gradient(135deg, #effaf7, #f8fbfa);
}

.info-serta-card-image::after {
	content: "";

	position: absolute;

	width: 170px;

	height: 170px;

	border-radius: 50%;

	background: rgba(10, 183, 163, 0.07);

	pointer-events: none;
}

.info-serta-card-image img {
	position: relative;

	z-index: 1;

	width: 85%;

	height: 210px;

	object-fit: contain;

	display: block;

	transition: transform 0.35s ease;
}

.info-serta-card:hover .info-serta-card-image img {
	transform: scale(1.035);
}

/* =========================================================
   CONTENT
========================================================= */

.info-serta-card-content {
	position: relative;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	justify-content: center;

	padding: 35px 42px;
}

/* =========================================================
   NUMBER
========================================================= */

.info-serta-card-number {
	display: inline-block;

	margin-bottom: 10px;

	color: #0ab7a3;

	font-size: 12px;

	font-weight: 800;

	letter-spacing: 1.5px;
}

/* =========================================================
   TITLE
========================================================= */

.info-serta-card-content h3 {
	margin: 0 0 12px;

	color: #123f54;

	font-size: 24px;

	line-height: 1.3;

	font-weight: 800;

	letter-spacing: -0.3px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.info-serta-card-content p {
	max-width: 650px;

	margin: 0 0 22px;

	color: #71817d;

	font-size: 14px;

	line-height: 1.8;
}

/* =========================================================
   BUTTON ARTIKEL
   MENGIKUTI STYLE BERANDA
========================================================= */

.info-detail-button {
	display: inline-flex;

	align-items: center;

	gap: 12px;

	padding: 11px 18px;

	border: none;

	border-radius: 30px;

	background: #0ab7a3;

	color: #ffffff;

	font-size: 13px;

	font-weight: 700;

	line-height: 1;

	text-decoration: none;

	white-space: nowrap;

	transition:
		background 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

/*
 * PANAH
 */

.info-detail-button span {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 25px;

	height: 25px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.18);

	color: #ffffff;

	font-size: 16px;

	line-height: 1;

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

/*
 * HOVER
 */

.info-detail-button:hover {
	background: #08a894;

	color: #ffffff;

	text-decoration: none;

	transform: translateY(-2px);

	box-shadow: 0 8px 20px rgba(10, 183, 163, 0.18);
}

.info-detail-button:hover span {
	transform: translateX(3px);

	background: rgba(255, 255, 255, 0.25);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.info-empty-state {
	padding: 60px 30px;

	text-align: center;

	border: 1px dashed #dbe8e4;

	border-radius: 18px;

	background: #f8fbfa;
}

.info-empty-state h3 {
	margin: 0 0 8px;

	color: #123f54;

	font-size: 20px;
}

.info-empty-state p {
	margin: 0;

	color: #71817d;

	font-size: 14px;
}

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

@media (max-width: 991px) {
	.info-serta-hero {
		padding-top: 45px;

		padding-bottom: 55px;
	}

	.info-serta-icon {
		width: 290px;

		height: 290px;
	}

	.info-serta-card {
		grid-template-columns: 270px minmax(0, 1fr);

		min-height: 220px;
	}

	.info-serta-card-image {
		min-height: 220px;
	}

	.info-serta-card-image img {
		height: 185px;
	}

	.info-serta-card-content {
		padding: 28px 30px;
	}

	.info-serta-card-content h3 {
		font-size: 21px;
	}
}

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

@media (max-width: 767px) {
	.info-detail-button {
		padding: 10px 15px;

		gap: 9px;

		font-size: 12px;
	}

	.info-detail-button span {
		width: 23px;

		height: 23px;

		font-size: 15px;
	}
}

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

@media (max-width: 400px) {
	.info-serta-hero .info-hero-visual {
		height: 205px;
	}

	.info-serta-hero .info-hero-orbit {
		width: 175px;

		height: 175px;
	}

	.info-serta-icon {
		width: 175px;

		height: 175px;

		max-width: 175px;

		max-height: 175px;
	}

	.info-serta-hero .info-hero-content h1 {
		font-size: 29px;
	}

	.info-serta-card-image {
		height: 190px;

		min-height: 190px;
	}

	.info-serta-card-image img {
		height: 165px;
	}

	.info-serta-card-content {
		padding: 20px 18px 22px;
	}

	.info-serta-card-content h3 {
		font-size: 18px;
	}
}

/* =========================================================
   WBS KEMENKES
========================================================= */

/* =========================================================
   HERO
========================================================= */

.wbs-hero {
	padding: 30px 0 40px;

	background:
		radial-gradient(
			circle at 15% 30%,
			rgba(10, 183, 163, 0.1),
			transparent 28%
		),
		radial-gradient(
			circle at 85% 70%,
			rgba(209, 211, 66, 0.1),
			transparent 28%
		),
		#f8fbfa;
}

.wbs-hero-content {
	max-width: 850px;

	margin: 0 auto;

	text-align: center;
}

.wbs-hero-content h1 {
	margin: 12px 0 22px;

	color: #123f54;

	font-size: 48px;

	line-height: 1.12;

	font-weight: 800;

	letter-spacing: -1px;
}

.wbs-hero-content h1 span {
	color: #0ab7a3;
}

.wbs-hero-content p {
	max-width: 760px;

	margin: 0 auto;

	color: #71817d;

	font-size: 16px;

	line-height: 1.85;
}

.wbs-hero-line {
	width: 55px;

	height: 4px;

	margin: 25px auto;

	border-radius: 10px;

	background: #d1d342;
}

/* =========================================================
   BUTTON
========================================================= */

.wbs-primary-button {
	display: inline-flex;

	align-items: center;

	gap: 12px;

	margin-top: 8px;

	padding: 12px 18px;

	border-radius: 30px;

	background: #0ab7a3;

	color: #ffffff;

	font-size: 13px;

	font-weight: 700;

	text-decoration: none;

	transition:
		transform 0.25s ease,
		background 0.25s ease,
		box-shadow 0.25s ease;
}

.wbs-primary-button span {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 25px;

	height: 25px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.18);

	transition: transform 0.25s ease;
}

.wbs-primary-button:hover {
	color: #ffffff;

	background: #08a894;

	text-decoration: none;

	transform: translateY(-2px);

	box-shadow: 0 10px 25px rgba(10, 183, 163, 0.18);
}

.wbs-primary-button:hover span {
	transform: translateX(3px);
}

/* =========================================================
   CONTENT
========================================================= */

.wbs-content-section {
	padding: 35px 0;

	background: #ffffff;
}

.wbs-content-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.5fr)
		minmax(280px, 0.8fr);

	gap: 55px;

	align-items: start;

	max-width: 1100px;

	margin: 0 auto;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.wbs-section-heading {
	margin-bottom: 28px;
}

.wbs-section-heading > span {
	position: relative;

	display: inline-block;

	margin-bottom: 10px;

	padding-left: 17px;

	color: #0ab7a3;

	font-size: 11px;

	font-weight: 800;

	letter-spacing: 1.7px;
}

.wbs-section-heading > span::before {
	content: "";

	position: absolute;

	left: 0;

	top: 50%;

	width: 7px;

	height: 7px;

	border-radius: 50%;

	background: #d1d342;

	transform: translateY(-50%);
}

.wbs-section-heading h2 {
	margin: 0;

	color: #123f54;

	font-size: 31px;

	line-height: 1.25;

	font-weight: 800;

	letter-spacing: -0.5px;
}

.wbs-section-heading p {
	max-width: 700px;

	margin: 13px 0 0;

	color: #71817d;

	font-size: 14px;

	line-height: 1.8;
}

/* =========================================================
   TEXT
========================================================= */

.wbs-text p {
	margin-bottom: 18px;

	color: #687b78;

	font-size: 14px;

	line-height: 1.9;
}

.wbs-text p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   NOTE
========================================================= */

.wbs-content-note {
	padding: 30px;

	border-radius: 20px;

	background: linear-gradient(145deg, #eefaf7, #f8fbfa);

	border: 1px solid #e1efeb;
}

.wbs-note-label {
	display: block;

	margin-bottom: 10px;

	color: #0ab7a3;

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 1.5px;
}

.wbs-content-note h3 {
	margin: 0 0 12px;

	color: #123f54;

	font-size: 22px;

	line-height: 1.4;

	font-weight: 800;
}

.wbs-content-note p {
	margin: 0 0 20px;

	color: #71817d;

	font-size: 13px;

	line-height: 1.7;
}

.wbs-note-link {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	color: #0a9f8e;

	font-size: 13px;

	font-weight: 700;

	text-decoration: none;
}

.wbs-note-link span {
	transition: transform 0.25s ease;
}

.wbs-note-link:hover {
	color: #08a894;

	text-decoration: none;
}

.wbs-note-link:hover span {
	transform: translateX(4px);
}

/* =========================================================
   KRITERIA
========================================================= */

.wbs-criteria-section {
	padding: 40px 0;

	background: #f8fbfa;
}

.wbs-criteria-section .wbs-section-heading {
	max-width: 760px;

	margin-left: auto;

	margin-right: auto;

	text-align: center;
}

.wbs-criteria-section .wbs-section-heading > span {
	padding-left: 0;
}

.wbs-criteria-section .wbs-section-heading > span::before {
	display: none;
}

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

.wbs-criteria-list {
	max-width: 900px;

	margin: 35px auto 0;

	border-top: 1px solid #dfeae7;
}

.wbs-criteria-item {
	display: grid;

	grid-template-columns: 55px minmax(0, 1fr);

	gap: 18px;

	align-items: center;

	padding: 22px 10px;

	border-bottom: 1px solid #dfeae7;

	transition:
		padding-left 0.25s ease,
		background 0.25s ease;
}

.wbs-criteria-item:hover {
	padding-left: 18px;

	background: rgba(255, 255, 255, 0.65);
}

.wbs-criteria-number {
	color: #0ab7a3;

	font-size: 13px;

	font-weight: 800;

	letter-spacing: 1px;
}

.wbs-criteria-item p {
	margin: 0;

	color: #526a66;

	font-size: 14px;

	line-height: 1.7;
}

/* =========================================================
   BANNER
========================================================= */

.wbs-banner-section {
	padding: 75px 0;

	background: #ffffff;
}

.wbs-banner {
	max-width: 1050px;

	margin: 0 auto;

	overflow: hidden;

	border-radius: 22px;

	box-shadow: 0 15px 45px rgba(18, 63, 84, 0.1);

	border: 1px solid #e7efec;
}

.wbs-banner img {
	width: 100%;

	height: auto;

	display: block;
}

/* =========================================================
   CLOSING
========================================================= */

.wbs-closing {
	padding: 40px 0 40px;

	background: linear-gradient(135deg, #eefaf7, #f8fbfa);

	border-top: 1px solid #e5efec;
}

.wbs-closing-content {
	max-width: 700px;

	margin: 0 auto;

	text-align: center;
}

.wbs-closing-content h2 {
	margin: 10px 0 12px;

	color: #123f54;

	font-size: 30px;

	font-weight: 800;
}

.wbs-closing-content p {
	max-width: 600px;

	margin: 0 auto 20px;

	color: #71817d;

	font-size: 14px;

	line-height: 1.8;
}

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

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

	.wbs-hero-content h1 {
		font-size: 40px;
	}

	.wbs-content-grid {
		grid-template-columns: 1fr;

		gap: 35px;

		max-width: 760px;
	}

	.wbs-content-note {
		max-width: 600px;
	}

	.wbs-banner-section {
		padding: 60px 0;
	}
}

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

@media (max-width: 767px) {
	.wbs-hero {
		padding: 45px 0 55px;
	}

	.wbs-hero-content {
		padding: 0 8px;
	}

	.wbs-hero-content h1 {
		margin-top: 10px;

		font-size: 31px;

		line-height: 1.18;

		letter-spacing: -0.5px;
	}

	.wbs-hero-content p {
		font-size: 13.5px;

		line-height: 1.75;
	}

	.wbs-hero-line {
		margin: 20px auto;
	}

	.wbs-primary-button {
		padding: 10px 16px;

		font-size: 12px;
	}

	.wbs-primary-button span {
		width: 23px;

		height: 23px;

		font-size: 14px;
	}

	.wbs-content-section {
		padding: 50px 0;
	}

	.wbs-content-grid {
		gap: 30px;
	}

	.wbs-section-heading h2 {
		font-size: 25px;
	}

	.wbs-section-heading p {
		font-size: 13px;

		line-height: 1.7;
	}

	.wbs-text p {
		font-size: 13px;

		line-height: 1.8;
	}

	.wbs-content-note {
		padding: 24px;

		border-radius: 17px;
	}

	.wbs-content-note h3 {
		font-size: 20px;
	}

	.wbs-criteria-section {
		padding: 0px 0;
	}

	.wbs-criteria-list {
		margin-top: 25px;
	}

	.wbs-criteria-item {
		grid-template-columns: 38px minmax(0, 1fr);

		gap: 10px;

		padding: 18px 4px;
	}

	.wbs-criteria-item:hover {
		padding-left: 4px;
	}

	.wbs-criteria-number {
		font-size: 11px;
	}

	.wbs-criteria-item p {
		font-size: 13px;

		line-height: 1.7;
	}

	.wbs-banner-section {
		padding: 45px 0;
	}

	.wbs-banner {
		border-radius: 14px;

		box-shadow: 0 10px 30px rgba(18, 63, 84, 0.08);
	}

	.wbs-closing {
		padding: 50px 0 60px;
	}

	.wbs-closing-content h2 {
		font-size: 24px;
	}

	.wbs-closing-content p {
		font-size: 13px;

		line-height: 1.7;
	}
}

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

@media (max-width: 400px) {
	.wbs-hero-content h1 {
		font-size: 28px;
	}

	.wbs-section-heading h2 {
		font-size: 23px;
	}

	.wbs-content-note {
		padding: 20px;
	}

	.wbs-criteria-item {
		grid-template-columns: 32px minmax(0, 1fr);
	}
}

/* =========================================================
   SP4N - LAPOR
========================================================= */

/* =========================================================
   HERO
========================================================= */

.lapor-hero {
	padding: 70px 0 80px;

	background:
		radial-gradient(
			circle at 10% 40%,
			rgba(10, 183, 163, 0.1),
			transparent 30%
		),
		radial-gradient(
			circle at 90% 60%,
			rgba(209, 211, 66, 0.1),
			transparent 28%
		),
		#f8fbfa;
}

.lapor-hero-grid {
	display: grid;

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

	gap: 70px;

	align-items: center;

	max-width: 1100px;

	margin: 0 auto;
}

/* =========================================================
   HERO VISUAL
========================================================= */

.lapor-hero-visual {
	position: relative;

	min-height: 350px;

	display: flex;

	align-items: center;

	justify-content: center;
}

.lapor-hero-glow {
	position: absolute;

	width: 330px;

	height: 330px;

	border-radius: 50%;

	background: radial-gradient(
		circle,
		rgba(10, 183, 163, 0.1),
		rgba(10, 183, 163, 0.02) 60%,
		transparent 70%
	);
}

.lapor-hero-image {
	position: relative;

	z-index: 1;

	width: min(100%, 560px);

	max-height: 360px;

	object-fit: contain;

	display: block;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.lapor-hero-content h1 {
	margin: 12px 0 4px;

	color: #123f54;

	font-size: 58px;

	line-height: 1;

	font-weight: 800;

	letter-spacing: -1.5px;
}

.lapor-hero-content h1 span {
	color: #0ab7a3;
}

.lapor-hero-content h2 {
	margin: 0 0 20px;

	color: #123f54;

	font-size: 22px;

	line-height: 1.4;

	font-weight: 700;
}

.lapor-hero-content p {
	max-width: 570px;

	margin: 0;

	color: #71817d;

	font-size: 15px;

	line-height: 1.85;
}

.lapor-hero-line {
	width: 55px;

	height: 4px;

	margin: 25px 0;

	border-radius: 10px;

	background: #d1d342;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.lapor-primary-button {
	display: inline-flex;

	align-items: center;

	gap: 12px;

	padding: 12px 18px;

	border-radius: 30px;

	background: #0ab7a3;

	color: #ffffff;

	font-size: 13px;

	font-weight: 700;

	line-height: 1;

	text-decoration: none;

	transition:
		transform 0.25s ease,
		background 0.25s ease,
		box-shadow 0.25s ease;
}

.lapor-primary-button span {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 25px;

	height: 25px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.18);

	transition: transform 0.25s ease;
}

.lapor-primary-button:hover {
	background: #08a894;

	color: #ffffff;

	text-decoration: none;

	transform: translateY(-2px);

	box-shadow: 0 10px 25px rgba(10, 183, 163, 0.18);
}

.lapor-primary-button:hover span {
	transform: translateX(3px);
}

/* =========================================================
   SECTION HEADING
========================================================= */

.lapor-section-heading {
	max-width: 780px;

	margin: 0 auto 38px;

	text-align: center;
}

.lapor-section-heading > span {
	display: inline-block;

	margin-bottom: 10px;

	color: #0ab7a3;

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 1.7px;
}

.lapor-section-heading h2 {
	margin: 0;

	color: #123f54;

	font-size: 34px;

	line-height: 1.25;

	font-weight: 800;

	letter-spacing: -0.6px;
}

.lapor-section-heading h2 span {
	color: #0ab7a3;
}

.lapor-section-heading p {
	max-width: 650px;

	margin: 13px auto 0;

	color: #71817d;

	font-size: 14px;

	line-height: 1.8;
}

/* =========================================================
   ABOUT
========================================================= */

.lapor-about {
	padding: 80px 0;

	background: #ffffff;
}

.lapor-about-content {
	max-width: 900px;

	margin: 0 auto;
}

.lapor-about-content p {
	margin: 0 0 18px;

	color: #687b78;

	font-size: 14px;

	line-height: 1.9;
}

.lapor-about-content p:last-child {
	margin-bottom: 0;
}

.lapor-about-content strong {
	color: #123f54;

	font-weight: 700;
}

/* =========================================================
   PURPOSE
========================================================= */

.lapor-purpose {
	padding: 80px 0;

	background: #f8fbfa;
}

.lapor-purpose-grid {
	display: grid;

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

	gap: 22px;

	max-width: 1050px;

	margin: 0 auto;
}

.lapor-purpose-item {
	padding: 30px;

	border: 1px solid #e2eeeb;

	border-radius: 20px;

	background: #ffffff;

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

.lapor-purpose-item:hover {
	transform: translateY(-5px);

	border-color: #cfe5df;

	box-shadow: 0 15px 35px rgba(18, 63, 84, 0.07);
}

.lapor-purpose-number {
	display: block;

	margin-bottom: 15px;

	color: #0ab7a3;

	font-size: 12px;

	font-weight: 800;

	letter-spacing: 1.5px;
}

.lapor-purpose-item h3 {
	margin: 0 0 10px;

	color: #123f54;

	font-size: 19px;

	line-height: 1.35;

	font-weight: 800;
}

.lapor-purpose-item p {
	margin: 0;

	color: #71817d;

	font-size: 13px;

	line-height: 1.75;
}

/* =========================================================
   ACCESS
========================================================= */

.lapor-access {
	padding: 70px 0;

	background: #ffffff;
}

.lapor-access-box {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		240px;

	align-items: center;

	gap: 40px;

	max-width: 900px;

	margin: 0 auto;

	padding: 40px 45px;

	border-radius: 25px;

	background: linear-gradient(135deg, #eefaf7, #f8fbfa);

	border: 1px solid #dfefea;
}

.lapor-access-content h2 {
	margin: 8px 0 5px;

	color: #123f54;

	font-size: 34px;

	font-weight: 800;
}

.lapor-access-content h2 span {
	color: #ed2224;
}

.lapor-access-content p {
	margin: 0 0 18px;

	color: #71817d;

	font-size: 14px;
}

.lapor-access-visual {
	display: flex;

	align-items: center;

	justify-content: center;
}

.lapor-access-visual img {
	width: 150px;

	max-width: 100%;

	height: auto;

	display: block;

	transition: transform 0.3s ease;
}

.lapor-access-visual img:hover {
	transform: scale(1.06);
}

/* =========================================================
   MEDIA
========================================================= */

.lapor-media {
	padding: 80px 0;

	background: #f8fbfa;
}

.lapor-media-grid {
	display: grid;

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

	gap: 25px;

	max-width: 1080px;

	margin: 0 auto;
}

.lapor-media-card,
.lapor-video-card {
	padding: 20px;

	border-radius: 20px;

	background: #ffffff;

	border: 1px solid #e3eeeb;

	box-shadow: 0 8px 25px rgba(18, 63, 84, 0.045);
}

.lapor-media-card-heading {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 17px;
}

.lapor-media-card-heading span {
	color: #0ab7a3;

	font-size: 11px;

	font-weight: 800;

	letter-spacing: 1px;
}

.lapor-media-card-heading h3 {
	margin: 0;

	color: #123f54;

	font-size: 18px;

	font-weight: 800;
}

/* =========================================================
   ALUR IMAGE
========================================================= */

.lapor-media-image {
	overflow: hidden;

	border-radius: 14px;

	background: #f5f8f7;
}

.lapor-media-image img {
	width: 100%;

	height: auto;

	display: block;
}

/* =========================================================
   VIDEO
========================================================= */

.lapor-video-column {
	display: flex;

	flex-direction: column;

	gap: 20px;
}

.lapor-video-wrapper {
	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	border-radius: 14px;

	background: #edf3f1;
}

.lapor-video-wrapper iframe {
	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	border: 0;
}

/* =========================================================
   CLOSING
========================================================= */

.lapor-closing {
	padding: 30px 0 30px;

	background: linear-gradient(135deg, #eefaf7, #f8fbfa);

	border-top: 1px solid #e3efec;
}

.lapor-closing-content {
	max-width: 700px;

	margin: 0 auto;

	text-align: center;
}

.lapor-closing-content h2 {
	margin: 8px 0 12px;

	color: #123f54;

	font-size: 32px;

	font-weight: 800;
}

.lapor-closing-content p {
	max-width: 580px;

	margin: 0 auto 22px;

	color: #71817d;

	font-size: 14px;

	line-height: 1.8;
}

@media (max-width: 991px) {
	.lapor-hero {
		padding: 55px 0 65px;
	}

	.lapor-hero-grid {
		gap: 40px;
	}

	.lapor-hero-content h1 {
		font-size: 45px;
	}

	.lapor-hero-content h2 {
		font-size: 20px;
	}

	.lapor-hero-content p {
		font-size: 14px;
	}

	.lapor-purpose-grid {
		grid-template-columns: 1fr;

		max-width: 650px;
	}

	.lapor-access-box {
		max-width: 750px;
	}
}

@media (max-width: 767px) {
	/* =====================================================
       HERO
    ====================================================== */

	.lapor-hero {
		padding: 35px 0 50px;
	}

	.lapor-hero-grid {
		grid-template-columns: 1fr;

		gap: 25px;

		text-align: center;
	}

	.lapor-hero-visual {
		min-height: 210px;

		order: 1;
	}

	.lapor-hero-glow {
		width: 210px;

		height: 210px;
	}

	.lapor-hero-image {
		width: 90%;

		max-height: 220px;
	}

	.lapor-hero-content {
		order: 2;
	}

	.lapor-hero-content h1 {
		font-size: 38px;

		line-height: 1;

		letter-spacing: -0.8px;
	}

	.lapor-hero-content h2 {
		margin-top: 10px;

		font-size: 19px;

		line-height: 1.4;
	}

	.lapor-hero-content p {
		font-size: 13px;

		line-height: 1.75;
	}

	.lapor-hero-line {
		margin: 20px auto;
	}

	.lapor-primary-button {
		padding: 10px 16px;

		font-size: 12px;
	}

	.lapor-primary-button span {
		width: 23px;

		height: 23px;
	}

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

	.lapor-about,
	.lapor-purpose,
	.lapor-media {
		padding: 50px 0;
	}

	.lapor-section-heading {
		margin-bottom: 28px;
	}

	.lapor-section-heading h2 {
		font-size: 26px;

		line-height: 1.25;
	}

	.lapor-section-heading p {
		font-size: 13px;

		line-height: 1.7;
	}

	.lapor-about-content p {
		font-size: 13px;

		line-height: 1.8;
	}

	/* =====================================================
       PURPOSE
    ====================================================== */

	.lapor-purpose-grid {
		grid-template-columns: 1fr;

		gap: 14px;
	}

	.lapor-purpose-item {
		padding: 23px;

		border-radius: 17px;
	}

	.lapor-purpose-item:hover {
		transform: none;
	}

	.lapor-purpose-item h3 {
		font-size: 18px;
	}

	.lapor-purpose-item p {
		font-size: 13px;
	}

	/* =====================================================
       ACCESS
    ====================================================== */

	.lapor-access {
		padding: 45px 0;
	}

	.lapor-access-box {
		grid-template-columns: 1fr;

		gap: 20px;

		padding: 28px 22px;

		text-align: center;

		border-radius: 19px;
	}

	.lapor-access-content h2 {
		font-size: 30px;
	}

	.lapor-access-content p {
		font-size: 13px;
	}

	.lapor-access-visual {
		order: -1;
	}

	.lapor-access-visual img {
		width: 120px;
	}

	/* =====================================================
       MEDIA
    ====================================================== */

	.lapor-media-grid {
		grid-template-columns: 1fr;

		gap: 18px;
	}

	.lapor-media-card,
	.lapor-video-card {
		padding: 14px;

		border-radius: 16px;
	}

	.lapor-media-card-heading h3 {
		font-size: 16px;
	}

	.lapor-video-column {
		gap: 18px;
	}

	/* =====================================================
       CLOSING
    ====================================================== */

	.lapor-closing {
		padding: 30px 0 30px;
	}

	.lapor-closing-content h2 {
		font-size: 26px;
	}

	.lapor-closing-content p {
		font-size: 13px;

		line-height: 1.7;
	}
}

@media (max-width: 400px) {
	.lapor-hero-content h1 {
		font-size: 34px;
	}

	.lapor-hero-content h2 {
		font-size: 18px;
	}

	.lapor-hero-image {
		width: 95%;

		max-height: 200px;
	}

	.lapor-section-heading h2 {
		font-size: 23px;
	}

	.lapor-access-content h2 {
		font-size: 27px;
	}
}

/* =========================================================
   INFORMASI SERTA MERTA
   MOBILE CARD FIX
========================================================= */

@media (max-width: 767px) {
	/* -----------------------------------------
       LIST
    ----------------------------------------- */

	.info-serta-list {
		padding: 45px 0 60px;
	}

	.info-serta-items {
		width: 100%;
		max-width: 100%;
		gap: 20px;
	}

	/* -----------------------------------------
       CARD
       Desktop : 340px + content
       Mobile  : 1 kolom
    ----------------------------------------- */

	.info-serta-card {
		width: 100%;
		max-width: 100%;

		display: grid;
		grid-template-columns: 1fr;

		min-height: auto;

		border-radius: 18px;

		transform-origin: center center;

		/* mencegah card melebar */
		box-sizing: border-box;
	}

	/* -----------------------------------------
       IMAGE
    ----------------------------------------- */

	.info-serta-card-image {
		width: 100%;

		min-height: 0;
		height: 185px;

		padding: 15px;

		box-sizing: border-box;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info-serta-card-image img {
		width: 100%;
		height: 155px;

		max-width: 100%;
		object-fit: contain;
	}

	.info-serta-card-image::after {
		width: 130px;
		height: 130px;
	}

	/* -----------------------------------------
       CONTENT
    ----------------------------------------- */

	.info-serta-card-content {
		width: 100%;

		min-width: 0;

		padding: 22px 20px 24px;

		box-sizing: border-box;

		align-items: flex-start;
	}

	/* -----------------------------------------
       NUMBER
    ----------------------------------------- */

	.info-serta-card-number {
		margin-bottom: 8px;

		font-size: 11px;
	}

	/* -----------------------------------------
       TITLE
    ----------------------------------------- */

	.info-serta-card-content h3 {
		width: 100%;

		margin-bottom: 10px;

		font-size: 19px;

		line-height: 1.35;

		overflow-wrap: break-word;
		word-break: normal;
	}

	/* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

	.info-serta-card-content p {
		width: 100%;

		max-width: 100%;

		margin-bottom: 17px;

		font-size: 13px;

		line-height: 1.75;

		overflow-wrap: break-word;
	}

	/* -----------------------------------------
       BUTTON
    ----------------------------------------- */

	.info-detail-button {
		padding: 10px 15px;

		gap: 9px;

		font-size: 12px;
	}

	.info-detail-button span {
		width: 23px;
		height: 23px;

		font-size: 15px;
	}
}

/* =========================================================
   INFORMASI SERTA MERTA
   CENTER HERO IMAGE - TABLET & MOBILE
========================================================= */

@media (max-width: 991px) {
	.info-serta-hero .info-hero-visual {
		width: 100%;
		flex: none;

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

		margin-left: auto;
		margin-right: auto;

		text-align: center;

		/* PENTING:
           membatalkan transform mobile dari
           .info-hero-visual */
		transform: none;
	}

	.info-serta-hero .info-serta-icon {
		display: block;

		margin-left: auto;
		margin-right: auto;

		object-fit: contain;
	}
}

/* =========================================================
   INFORMASI SERTA MERTA
   FINAL MOBILE CENTER FIX
========================================================= */

@media (max-width: 767px) {
	.info-serta-hero .info-hero-visual {
		width: 100%;
		height: 300px;

		flex: none;

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

		margin: 0 auto;

		/* Membatalkan parallax mobile */
		transform: none !important;

		opacity: 1 !important;

		overflow: visible;
	}

	.info-serta-hero .info-hero-orbit {
		position: absolute;

		left: 50%;
		top: 50%;

		transform: translate(-50%, -50%);

		width: 240px;
		height: 240px;
	}

	.info-serta-hero .info-serta-icon {
		position: relative;
		z-index: 2;

		width: 255px;
		height: 255px;

		max-width: 255px;
		max-height: 255px;

		display: block;

		margin: 0 auto;

		object-fit: contain;

		transform: none;
	}
}

@media (max-width: 400px) {
	.info-serta-hero .info-hero-visual {
		width: 100%;
		height: 235px;

		margin: 0 auto;

		transform: none !important;
	}

	.info-serta-hero .info-hero-orbit {
		width: 190px;
		height: 190px;
	}

	.info-serta-hero .info-serta-icon {
		width: 190px;
		height: 190px;

		max-width: 190px;
		max-height: 190px;

		margin: 0 auto;
	}
}