/*.bg-header-jss {
      background-image: url(https://jss.jogjakota.go.id/v5/assets/media/custom/batik.svg),
          linear-gradient(
              44deg,
              #009ef7 20%,
              #009ef7 100%,
              #009ef7 30%
          ) !important;
      linear-gradient(
              44deg,
              rgb(25 133 114 / 100%) 100%,
              rgba(95, 201, 181, 1) 100%,
              rgba(95, 201, 181, 1) 10%
          ) !important; 
  }
  .bg-jss-linear-gradient {
      background-image: var(--jss-linear-gradient);*/
/* }*/

/* Style untuk modal */

/*niko */

.list-group {
	width: 480px !important;
	margin-left: -20px;
}

.list-group-item {
	margin-top: 5px;
	border-radius: 5%;
	background: #fff;
	opacity: 0.7;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.list-group-item:hover {
	transform: scaleX(1.1);
}

.check {
	opacity: 0;
	transition: all 0.6s ease-in-out;
}

.list-group-item:hover .check {
	opacity: 1;
}

.about span {
	font-size: 12px;
	margin-right: 10px;
}

input[type="checkbox"] {
	position: relative;
	cursor: pointer;
}
input[type="checkbox"]:before {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0px;
	left: 0;
	border: 1px solid #10a3f9;
	border-radius: 3px;
	background-color: white;
}
input[type="checkbox"]:checked:after {
	content: "";
	display: block;
	width: 7px;
	height: 12px;
	border: solid #007bff;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 2px;
	left: 6px;
}

input[type="checkbox"]:checked + .check {
	opacity: 1;
}

/*niko */

.urgent-wd {
	width: 40%;
}
.logo-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px; /* Menambahkan jarak antar logo */
}

.logo-container i {
	font-size: 26px; /* Atur ukuran ikon */
	margin-bottom: 5px; /* Jarak antara ikon dan teks */
	color: #1a516f;
}

.logo-container a {
	text-decoration: none; /* Menghilangkan garis bawah pada teks link */
	color: black; /* Mengatur warna teks */
	font-size: 16px; /* Mengatur ukuran teks */
	text-align: center;
}

.logo-container a:hover {
	color: red;
}

.advent-pro {
	font-family: "Advent Pro", sans-serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
	font-size: 130px !important;
}

.gradient-text {
	font-weight: 600;
	/* Membuat gradient lebih panjang dengan menambahkan lebih banyak warna mirip di awal dan akhir */
	background: linear-gradient(
		90deg,
		#c1121f,
		#ffbe0b,
		#fb5607,
		#fb8b24,
		#fb5607,
		#ffbe0b,
		#c1121f
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	/* Menyesuaikan background-size untuk membuat ruang lebih banyak bagi gradient untuk bergerak */
	background-size: 300% 100%;
	animation: moveGradient 3s linear infinite, revealTextClip 5s ease forwards,
		smoothMoveGradient 10s linear infinite;
	display: inline-block;
}

@keyframes moveGradient {
	0%,
	100% {
		background-position: 200% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
}

@keyframes smoothMoveGradient {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

@keyframes revealTextClip {
	0% {
		clip-path: inset(0 100% 0 0); /* Mulai dengan teks sepenuhnya tersembunyi */
	}
	100% {
		clip-path: inset(0 0% 0 0); /* Mengungkap teks sepenuhnya */
	}
}

.search-box {
	position: relative;
	width: 650px;
	max-width: 100%;
	display: flex; /* Mengaktifkan Flexbox */
	align-items: center;
}

.search-box input[type="text"] {
	width: 100%;
	padding: 10px 20px 10px 40px;
	font-size: 18px;
	border: 2px solid #ddd;
	border-radius: 50px;
	background-color: white;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
	outline: none;
	flex-grow: 1;
}

.search-box-detail input[type="text"] {
	width: 100%;
	padding: 10px 20px 10px 40px;
	font-size: 18px;
	border: 2px solid #ddd;
	border-radius: 50px;
	background-color: white;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
	outline: none;
	flex-grow: 1;
	color: black;
}

.form-control {
	flex: 1; /* Membuat input teks mengisi ruang yang tersedia */
	margin-right: 8px; /* Tambahkan margin kanan jika diperlukan */
}

.search-box .search-btn {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
}

.search-box .search-btn img {
	width: 20px;
	height: 20px;
}

.search-aduan {
	position: relative;
	height: 80px;
	max-width: 100%;
	display: flex;
	align-items: center;
}

.search-aduan input[type="text"] {
	width: 100%;
	padding: 10px 20px 10px 20px; /* Sesuaikan padding kiri agar tidak bertabrakan dengan ikon */
	border: 2px solid #ddd;
	border-radius: 50px;
	background-color: white;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
	outline: none;
	flex-grow: 1;
}

.search-btn-aduan {
	position: relative; /* Perubahan dari absolute ke relative */
	margin-left: -40px; /* Sesuaikan jarak dengan input */
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.survey-pelatihan {
	font-size: 25px;
	padding: 10px;
	margin-bottom: 20px;
}

@media only screen and (max-width: 767px) and (min-width: 360px) {
	.survey-pelatihan {
		font-size: 15px;
		padding: 10px;
		margin-bottom: 20px;
	}
}

.fixed-bottom-scroll {
	position: fixed;
	bottom: 15px !important;
	left: 50%; /* Move to 50% from the left side of the viewport */
	transform: translateX(
		-50%
	); /* Shift it back to the left by half its own width */
	background-color: white;
	z-index: 2001 !important;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0; /* Add some padding */
	width: 30% !important; /* Set the width of the div to be 50% of the viewport */
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.7);
}

.fixed-bottom-scroll i {
	max-width: 100%; /* Ensure images do not exceed half of their container's width */
	height: auto; /* Maintain aspect ratio */
	transition: width 0.3s ease; /* Smooth transition for resizing */
}

.logo-fixed-top {
	/* margin-top:-150px; */
	justify-content: center;
	align-items: center;
}

.card-height {
	height: 100px !important;
}

.nav-overlay .prev {
	left: 130px;
}
.nav-overlay .next {
	right: 130px;
}

.bottom-45 {
	bottom: 45%;
}

.nav-overlay .prev,
.nav-overlay .next {
	position: absolute;
	top: 36%;
	transform: translateY(-50%);
	display: block !important;
	border: 0px solid black;
	color: #75c9bb;
}

.logo-fixed-top {
	justify-content: center; /* Menengahkan konten secara horizontal */
	align-items: center; /* Menengahkan konten secara vertikal */
	width: 100%; /* Memastikan container memenuhi lebar parent-nya */
	height: 100px; /* Contoh tinggi, sesuaikan sesuai kebutuhan */
}
.modal-backdrop {
	z-index: 100;
}
.niko-riawan {
	margin-top: 1000px;
	/*background-color: #caf0f8 !important;*/
	background: url("../img/bg_biru.png") center / cover no-repeat;
	background-size: 100% 100%;

	position: absolute;
	z-index: 1000;
	width: 100%;
}

.niko-riawan-cah-pbg {
	background-color: #caf0f8 !important;
	position: relative;
	z-index: 1000;
}

/* Style untuk loading screen */
.loading-screen {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Style untuk loader */
.loader {
	border: 4px solid #f3f3f3; /* Light grey */
	border-top: 4px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 2s linear infinite;
}

/* Animasi spin */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.center-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px; /* Or any other height depending on your design */
	margin-bottom: 15px;
}

.icon-text-link {
	display: flex;
	flex-direction: column; /* Stack items vertically */
	justify-content: center; /* Center items along the main axis */
	align-items: center; /* Center items along the cross axis */
	text-align: center; /* Center the text */
	text-decoration: none; /* Optional: removes underline from the link */
	color: inherit; /* Optional: link uses the text color of its parent */
}

.icon-background {
	background-color: #076499; /* Your desired background color */
	border-radius: 5px; /* Border radius */
	padding: 10px; /* Add some padding around the icon */
	display: inline-flex; /* Use inline-flex to keep the layout inline but allow flexbox properties */
	justify-content: center; /* Center the icon horizontally */
	align-items: center; /* Center the icon vertically */
}

/* Apply the animation to the FontAwesome icon on hover */
.elementor:hover {
	transform: rotate(20deg);
}

.elementor {
	transition: transform 0.5s ease;
	display: inline-block;
}

.desktop {
	display: block;
}

.android {
	display: none;
}

.mt-search {
	margin-top: -45px !important;
}

.survey-kepuasan {
	margin-top: 0px;
}

.aduan-atas {
	margin-top: 130px;
}

.font-aduan-h1 {
	font-size: 30px;
	color: #fff;
}

.font-aduan-span {
	font-size: 15px;
	color: #fff;
}

.menu-utama-icon {
	color: white;
	font-size: 30px;
	padding: 4px;
}

.menu-utama-icon-android {
	color: white;
}
.menu-utama-gambar-android {
	width: 32px;
}

.menu-utama-image {
	width: 40px;
}

#triggerLoad {
	height: 1px;
}

@media only screen and (max-width: 768px) {
	.survey-kepuasan {
		margin-top: -30px;
	}
	.aduan-atas {
		margin-top: 180px !important;
	}
	.desktop {
		display: none;
	}
	.android {
		display: block;
		bottom: 0 !important;
		width: 100% !important;
		height: 70px;
		background-color: rgba(255, 255, 255);
		border-radius: 0;
	}
	.search-box {
		width: 95vw;
	}
	::placeholder {
		font-size: 15px;
	}
	.search-box input[type="text"] {
		height: 10vw;
	}
	.gradient-text {
		font-size: 45px !important;
	}
	.khs-android {
		margin-top: -36px;
		margin-bottom: 300px;
	}
	.mt-search {
		margin-top: 0px !important;
	}
	.center-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 25px;
		margin-left: 25px;
		margin-bottom: 50px;
	}
	.icon-background {
		background-color: white !important;
	}
	.elementor {
		color: #1a516f !important;
	}
	.modal-content {
		width: 100% !important;
		top: 20%;
	}

	.modal-content-widget {
		margin-top: -70px !important;
	}

	.modal-content-layanan {
		margin-top: -10px !important;
	}

	.slider-event img {
		height: 300px !important;
	}
	#toggleButtonEvent {
		padding: 5px;
		font-size: 15px;
		top: 8%;
	}
	#toggleButtonDarurat {
		padding: 5px;
		font-size: 15px;
		top: 3%;
	}
	.mt-search {
		margin-top: -20px;
	}
}

.slider-x > .slick-prev,
.slick-next {
	display: none !important;
}
.modal-layanan {
	width: 100% !important;
}
.modal {
	display: none; /* Sembunyikan modal secara default */
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0); /* Fallback */
	background-color: rgba(0, 0, 0, 0.4); /* Warna latar belakang */
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease; /* Smooth transition for opacity */
	z-index: 2002;
}

.slider-event img {
	height: 450px; /* Menetapkan tinggi gambar */
	width: auto; /* Menyesuaikan lebar gambar secara otomatis */
	object-fit: contain; /* Memastikan gambar menutupi area tanpa distorsi, mungkin memotong bagian dari gambar */
	display: block; /* Menghilangkan ruang di bawah gambar */
}

.slider-event {
	height: 450px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%; /* Sesuaikan lebar */
}
.modal-header {
	padding: 0px;
}
/* Style untuk konten modal */
.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 7px;
	border: 1px solid #888;
	width: 100%;
	transform: translateX(-100%);
	animation: slideIn 0.5s forwards;
	/* top: 5%; */
}

/* Animasi slideIn */
@keyframes slideIn {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

/* Style untuk tombol close */
.close {
	color: black;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

#toggleButtonEvent {
	position: fixed; /* Menggunakan fixed position agar selalu di viewport */
	top: 15%; /* Menengahkan tombol secara vertikal */
	right: -2px; /* Jarak dari sisi kanan layar */
	transform: translateY(-50%); /* Ajustmen untuk menengahkan secara vertikal */
	background-color: #d00000; /* Warna untuk keadaan non-aktif, jika perlu */
	z-index: 2003; /* Pastikan tombol di atas elemen lain */
	color: white;
	padding: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	cursor: pointer;
	font-weight: 700;
}

#toggleButtonDarurat {
	position: fixed; /* Menggunakan fixed position agar selalu di viewport */
	top: 22%; /* Menengahkan tombol secara vertikal */
	right: -2px; /* Jarak dari sisi kanan layar */
	transform: translateY(-50%); /* Ajustmen untuk menengahkan secara vertikal */
	z-index: 2003; /* Pastikan tombol di atas elemen lain */
	background-color: #d00000; /* Warna untuk keadaan non-aktif, jika perlu */
	color: white;
	padding: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	cursor: pointer;
	font-weight: 700;
}

#toggleButtonEvent.active {
	background-color: #ffbe0b; /* Warna untuk keadaan aktif */
	color: white;
}

#toggleButtonEvent.inactive {
	background-color: #d00000; /* Warna untuk keadaan non-aktif, jika perlu */
}

#toggleButtonDarurat.active {
	background-color: #ffbe0b; /* Warna untuk keadaan aktif */
	color: white;
}

#toggleButtonDarurat.inactive {
	background-color: #d00000; /* Warna untuk keadaan non-aktif, jika perlu */
}

body {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
	font-style: normal !important; /* Pastikan font tidak italic */
	padding-right: 0px !important;
	scroll-behavior: smooth;
}

/* Tambahkan ini jika ada elemen lain yang mungkin menggunakan gaya italic */
* {
	font-style: normal !important;
}
::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: grey !important;
	opacity: 1 !important; /* Firefox */
}

/* Internet Explorer and Edge */
:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: black !important;
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	color: black !important;
}

/* Your custom CSS styles can go here */
.slider {
	width: 100%; /* Adjust the width as needed */
	margin: 0 auto;
}
.slick-slide img {
	width: 100%;
}
.slick-slide {
	height: auto !important;
}

*/ :root {
	--app-title-hex: #2c4964;
	--light-hex: #07c5a9;
	--info-hex: #07b3a7;
	--border-app: 1px solid #5fc9b5;
	--sm-border-app: 3px solid #f3f3f3;
	--jss-color-light: 3px solid var(--light-hex);
	--border-radius: 20px;
	--border-radius-md: 12.5px;
	--border-radius-sm: 10px;
	--app-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
	--bg-liner-gradient: linear-gradient(
		0deg,
		rgb(240, 245, 255, 0.9) 0%,
		rgba(240, 245, 255, 0.8) 20%,
		rgba(240, 245, 255, 0) 100%
	);
	--scrollbarBG: #cfd8dc;
	--thumbBG: #90a4ae;
	--inner-shadow: linear-gradient(
		0deg,
		rgba(12, 17, 26, 0.7) 0%,
		rgba(20, 29, 43, 0.6) 10%,
		rgba(189, 195, 196, 0.2) 100%
	);

	--jss-hover-hex: #4aaf9c;
	--jss-color-rgba-opacity: rgba(8, 167, 139, 0.75);
	--jss-color-light-rgba: rgba(95, 201, 181, 1);
	--jss-color-rgba: rgba(8, 167, 139, 1);
	--jss-color: #08a78b;
	--jss-color-light: #5fc9b5;
	--jss-color-bg-text: #c9f4eb;
	--jss-color-bg-text-light: #c9f4eb;
	--jss-linear-gradient: linear-gradient(
		44deg,
		#8bccf1 20%,
		rgb(95 148 201 / 92%) 95%,
		rgba(95, 148, 201, 0.9) 30%
	) !important;
}
.carousel-container {
	/**
      * Slider configuartion, you can edit these
      **/
	--column-count: 3;
	--gap: 20px;
	--scroll-speed: 20s;
	--image-aspect-ratio: 1/1;
	/** 
      * Set up variables for data attribute, if you anticipate
      * more than 20 slides, incease this
      **/
	position: relative;
	overflow-x: hidden;
	overflow-y: visible;
	width: 100%;
	/**
      * Math Setup, Do Not Edit
      */
	--image-width: calc(100% / var(--column-count));
	--carousel-width: calc(var(--image-width) * var(--slide-count));
}
@media (min-width: 700px) {
	.carousel-container {
		--column-count: 6;
	}
}
.carousel-container[data-slide-count="1"] {
	--slide-count: 1;
}
.carousel-container[data-slide-count="2"] {
	--slide-count: 2;
}
.carousel-container[data-slide-count="3"] {
	--slide-count: 3;
}
.carousel-container[data-slide-count="4"] {
	--slide-count: 4;
}
.carousel-container[data-slide-count="5"] {
	--slide-count: 5;
}
.carousel-container[data-slide-count="6"] {
	--slide-count: 6;
}
.carousel-container[data-slide-count="7"] {
	--slide-count: 7;
}
.carousel-container[data-slide-count="8"] {
	--slide-count: 8;
}
.carousel-container[data-slide-count="9"] {
	--slide-count: 9;
}
.carousel-container[data-slide-count="10"] {
	--slide-count: 10;
}
.carousel-container[data-slide-count="11"] {
	--slide-count: 11;
}
.carousel-container[data-slide-count="12"] {
	--slide-count: 12;
}
.carousel-container[data-slide-count="13"] {
	--slide-count: 13;
}
.carousel-container[data-slide-count="14"] {
	--slide-count: 14;
}
.carousel-container[data-slide-count="15"] {
	--slide-count: 15;
}
.carousel-container[data-slide-count="16"] {
	--slide-count: 16;
}
.carousel-container[data-slide-count="17"] {
	--slide-count: 17;
}
.carousel-container[data-slide-count="18"] {
	--slide-count: 18;
}
.carousel-container[data-slide-count="19"] {
	--slide-count: 19;
}
.carousel-container[data-slide-count="20"] {
	--slide-count: 20;
}
.carousel-container .carousel {
	display: flex;
	animation: scroll var(--scroll-speed) linear infinite;
}
.carousel-container .carousel:hover {
	animation-play-state: paused;
}
.carousel-container .carousel .logo {
	flex: 0 0 auto;
	width: calc(var(--image-width) - var(--gap));
}
.carousel-container .carousel .logo + .logo {
	margin-left: var(--gap);
}
.carousel-container .carousel .logo:hover img {
	transform: scale(1.1);
}
.carousel-container .carousel .logo img {
	aspect-ratio: var(--image-aspect-ratio);
	width: 100%;
	object-fit: contain;
	transition: transform 0.2s ease-in-out;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-1 * var(--carousel-width)));
	}
}
.berita-tns {
	height: 370px;
}

#tns3-iw {
	margin: 0px 0px 0px 0px !important;
}
#berita .tns-ovh {
	height: auto !important;
	min-height: 425px !important;
}

@media (min-width: 992px) {
	#berita .tns-ovh {
		height: auto !important;
		min-height: 450px !important;
	}
}

#tns2-mw {
	height: 760px;
}
.shadow-box {
	margin-bottom: 50px;
	/* box-shadow: 0px 5px 15px rgb(0 0 0 / 40%); */
}
.shadow-bsc {
	box-shadow: 0px 5px 15px rgb(0 0 0 / 50%);
}
#tns4-ow {
	height: 270px;
}

#profil {
	background: url("../img/bg_profil.png") center / cover no-repeat;

	/*background: url("../img/bg_biru.png") center / cover no-repeat;*/
	background-size: 100% 100%;
}

.bg-lapak {
	background-color: #f9d1d3;
	padding: 20px;
	border-radius: 5px;
}
.shadow-box-lapak {
	background: url("../img/bg_lapak.png") center / cover no-repeat;
	height: 350px;
	/* background-color: #f6bebf; */
}

.shadow-box-stakeholder {
	background: url("../img/bg_stakeholder.png") center / cover no-repeat;
	height: 500px;
	/* background-color: #f6bebf; */
}

.zoom-in {
	animation: transform 0.7s ease-out;
	transform: transform 0.5s ease-out, box-shadow 0.5s ease-out;
	/* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); */
}

.overlay-wrapper {
	position: relative;
	width: 100%; /* Ensures the div takes the full width of its parent */
	padding-top: 56.25%; /* Aspect ratio of 16:9; adjust as needed */
	background-size: cover; /* Cover the entire area of the div */
	background-position: center; /* Center the background image */
}

.card-xl-stretch {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Distributes space above and below the content */
}

/* Adjust the minimum height for larger screens if necessary */
@media (min-width: 768px) {
	.overlay-wrapper {
		padding-top: 30%; /* Adjust based on your design needs */
	}
}

.zoom-in:hover {
	transform: scale(1.1);
	transition: transform 0.7s ease-out;
	/* box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4); */
}

.fade-in {
	opacity: 0; /* Start with the div being invisible */
	animation: fadeInAnimation ease 2s; /* Complete the animation in 2 seconds */
	animation-fill-mode: forwards; /* Retain the style values set by the last keyframe */
}

@keyframes fadeInAnimation {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.scrolltop {
	background-color: #00b4d8;
}

.scrolltop:hover {
	background-color: #3a86ff;
}

@media screen and (max-width: 600px) {
	.scrolltop {
		margin-bottom: 50px;
	}
}
.profil-gambar-responsive {
	width: 150px;
	height: 150px;
}

.responsive-profil {
	padding: 20px;
}

.gap-profil {
	gap: 100px;
}

.pasti-center-flex {
	display: flex;
	justify-content: center;
}

.pasti-center-grid {
	display: grid;
	justify-content: center;
}

.shadow-image {
	display: inline-block;
	filter: drop-shadow(0px 4px 4px rgba(0 0 0 /50%));
}

.hover-shadow-image:hover {
	display: inline-block;
	filter: drop-shadow(0px 4px 4px rgba(0 0 0 /50%));
}

@media (max-width: 768px) {
	.responsive-header {
		margin: 20px !important;
	}
	.responsive-h1 {
		font-size: 30px !important;
	}

	.responsive-h3 {
		font-size: 20px !important;
	}
	.h-70px {
		height: 50px;
	}
	.bg-lapak {
		background-color: #f9d1d3;
		padding: 20px;
		border-radius: 5px;
	}

	.shadow-box-lapak {
		background: url("../img/bg_lapak.png") center / cover no-repeat;
		height: 500px;
		margin-top: -150px;
	}
	.lapak-responsive {
		width: 50px;
		height: 50px !important;
	}
	.profil-gambar-responsive {
		width: 100px;
		height: 100px !important;
	}
	.gap-profil {
		gap: 0;
	}
}

/* @media (max-width: 991px) {
	#hero {
		min-height: 339px !important;
	}
} */

#hero {
	width: 100%;
	min-height: 1700px;
	background: url("../img/bupati_wabub.png") center / cover no-repeat;
	/* background-color: #000; */
	position: fixed;
	padding: 0;
}
#hero .container {
	position: relative; /* Ensure the container is positioned relative to the hero */
	z-index: 1; /* Ensure the container is above the overlay */
}
#hero:before {
	content: "";
	background: rgba(255, 255, 255, 0.1);
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
}
/* #hero:after {
	content: "";
	background: linear-gradient(to bottom, #ff7e5f, #feb47b);
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
} */

@media only screen and (min-width: 1920px) {
	#hero .row {
		margin: 350px 0 40ds0px 0 !important; /* Adjust as needed */
	}

	#hero {
		min-height: 1920px;
	}
}
#hero h1,
#hero h3 {
	margin-top: 10px;
	font-weight: bold;
	text-align: center;
	color: #495057 !important;
	position: relative; /* Ensure text is positioned relative to the container */
	z-index: 1; /* Ensure the text is above the overlay */
}
#hero h1 {
	font-size: 50px;
}
#hero h3 {
	font-size: 40px;
}
#hero h1 span {
	color: #fff;
	border-bottom: 4px solid #fbff00d8;
}
#hero h2 {
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 40px;
	font-size: 24px;
}
#hero .btn-get-started {
	font-family: "Poppins";
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	display: inline-block;
	padding: 10px 30px;
	border-radius: 50px;
	transition: 0.5s;
	color: #fff;
	background: #fbff00d8;
}
#hero .btn-get-started:hover {
	background: #d9ff00b4;
}
#hero .animated {
	animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
@media (min-width: 1024px) {
	#hero {
		background-attachment: fixed;
	}
}
@media (max-width: 991px) {
	#hero {
		padding-top: 80px;
		min-height: 830px;
	}
	#hero .animated {
		-webkit-animation: none;
		animation: none;
	}
	#hero .hero-img {
		text-align: center;
		margin-left: 35%;
	}
	#hero .hero-img img {
		max-width: 50%;
	}
	#hero .hero-img .lottie-player {
		max-width: 70%;
	}
	#hero h1 {
		font-size: 28px;
		line-height: 32px;
		margin-bottom: 10px;
	}
	#hero h2 {
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 30px;
	}
}
.hero-wave-container {
	width: 100%; /* Full width of its parent */
	overflow: hidden; /* Ensures no part of the SVG spills out */
}

svg.hero-waves {
	width: 100%;
	height: auto; /* Maintains aspect ratio */
	display: block; /* Removes any unwanted space below the SVG */
}
@media (max-width: 575px) {
	#hero .hero-img img {
		width: 80%;
	}
}
@keyframes waveAnimation {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.wave1,
.wave2,
.wave3 {
	animation: waveAnimation 10s linear infinite;
}

.wave2 {
	animation-delay: -2s; /* Slightly offsets the animations for a more dynamic effect */
}

.wave3 {
	animation-delay: -4s;
}

.swiper-slide {
	display: grid;
	justify-content: center;
}

.swiper-slide img {
	height: 459px !important;
	justify-content: center;
	display: grid;
	justify-items: center;
}

.swiper-slide .img-bawah {
	height: 359px !important;
	justify-content: center;
	display: grid;
	justify-items: center;
}

#toggle2 {
	/* or #toggle1 if that's your intended target */
	transition: transform 0.3s ease;
	/* Adjust time and easing function as desired */
}

#dalam_darurat > strong {
	color: #fff;
	background-color: #ed1c24;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.25rem;
}

.kotak-menu > strong {
	color: #fff;
	background-color: #ed1c24;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.25rem;
}

.kotak-menu-sub > strong {
	color: #fff;
	background-color: #ed1c24;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.25rem;
}

strong > i {
	color: #fff;
}

/* .menu-darurat {
	display: flex;
	flex-direction: row;
	position: fixed;
	top: 10%;
	right: 0;
	z-index: 9999;
} */

.menu-event {
	display: flex;
	flex-direction: row;
	position: fixed;
	top: 3%;
	right: 0;
	z-index: 9999;
}

.toggle-darurat {
	/* background-color: #d00000; */
	height: 45px;
	width: 45px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 1s;
	cursor: pointer;
	position: fixed;
	z-index: 9999;
	top: 12%;
	flex-direction: row;
	right: 10px;
	cursor: pointer;
	/* border: 0.5px solid #fff; */
}

.toggle-menulainnya {
	/* background-color: #d00000; */
	/* height: 45px; */
	/* width: 45px; */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 1s;
	cursor: pointer;
	position: fixed;
	top: 3%;
	z-index: 9999;
	flex-direction: row;
	right: 10px;
	cursor: pointer;
	/* border: 0.5px solid #fff; */
}

.toggle-event {
	/* background-color: #d00000; */
	height: 45px;
	width: 45px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 6%;
	/* top: 21%; */
	transition: 1s;
	cursor: pointer;
	position: fixed;
	z-index: 9999;
	right: 10px;
	cursor: pointer;
	/* border: 0.5px solid #fff; */
}

.toggle-kembali {
	background-color: #d00000;
	height: 45px;
	width: 45px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 1s;
	position: absolute;
	top: 3%;
	right: 20px;
	cursor: pointer;
	border: 0.5px solid #fff;
	position: fixed;
}

.gambar-gif-menu {
	width: 70px;
}

.position-gif-menu {
	position: absolute;
	right: 1px;
	top: 35px;
}
.position-gif-event {
	position: absolute;
	right: 1px;
	top: 45px;
	background-color: white;
	border-radius: 10px;
}
.position-gif-darurat {
	position: absolute;
	right: 1px;
	top: -10px;
}

.backgorund-icon-depan {
	position: absolute;
	right: 9px;
	top: 5px;
	background-color: white;
	border-radius: 10px;
}

.image-icon {
	width: 70px;
}
.font-icon-android-atas {
	text-align: center;
}
.font-icon-android {
	color: #076499;
	text-align: center;
}
@media (max-width: 575.98px) {
	.image-icon {
		width: 50px;
	}
	.font-icon-android-atas {
		font-size: 12px;
		text-align: center;
	}
	.font-icon-android {
		font-size: 10px;
		text-align: center;
	}
	.position-gif-menu {
		position: absolute;
		right: 1px;
		top: 30px;
	}
	.position-gif-event {
		position: absolute;
		right: 1px;
		top: 40px;
	}
	.position-gif-darurat {
		position: absolute;
		right: 0px;
		top: 0px;
	}
	.gambar-gif-menu {
		width: 50px;
	}
	.toggle-event {
		top: 3% !important;
		/* top: 13% !important; */
	}
	.toggle-darurat {
		top: 7% !important;
	}
	.toggle-menulainnya {
		top: 1% !important;
	}
	.items-menulainnya {
		top: 1% !important;
	}
	.items-darurat {
		top: 7% !important;
	}
}
.toggle-kembali {
	z-index: 100;
}
.img-loker {
	width: 655px;
	margin-bottom: 50px;
}

@media (max-width: 575.98px) {
	.img-loker {
		width: 350px;
		margin-bottom: 50px;
	}
}

/* .items {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
	width: 100%;
	overflow: hidden;
	right: 44px;
	position: relative;
	transform: scaleX(0);
	white-space: nowrap;
} */

.menu-darurat > .items {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s ease, opacity 0.5s ease;
	opacity: 0; /* Awalnya tidak terlihat */
	visibility: hidden; /* Sembunyikan ketika opacity 0 untuk menghindari interaksi */
	width: calc(0px); /* Lebar awal */
	pointer-events: none; /* Mencegah interaksi ketika ditutup */
	right: 0;
	position: relative; /* Menjaga elemen tetap pada posisi tetap */
}

.menu-darurat .items .expanded {
	transform: scaleX(1);
	opacity: 1; /* Menjadi sepenuhnya terlihat */
	visibility: visible; /* Pastikan terlihat saat diperluas */
	/* width: calc(100%); Lebar saat diperluas */
	pointer-events: all; /* Mengizinkan interaksi ketika dibuka */
	right: 45px; /* Sesuaikan jika diperlukan */
	top: 10%;
	transition: transform 0.5s ease, opacity 0.5s ease;
	position: fixed;
	width: calc(350px);
}

.items > div {
	display: flex;
	background-color: #fff;
	height: 42px;
	width: auto;
	color: #b2b2b2;
	text-decoration: none;
	align-items: center;
	justify-content: left;
	border: 0.5px solid #d00000;
	padding: 5px;
}

/* Style untuk overlay */
.image-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 30000;
}

/* Style untuk menutup overlay */
.close-overlay {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 30px;
	color: white;
	cursor: pointer;
}

.swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
	display: grid !important;
	justify-items: center !important;
}

.two-lines {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 18px !important; /* Adjust as needed */
	line-height: 1.4; /* Adjust based on your font size for exact two-line fit */
	max-height: 2.8em; /* This should be roughly line-height * number of lines */
}

.slick-slide {
	margin: 0 10px;
}

.slick-row {
	margin-bottom: 20px;
}

.slider-info {
	margin: 0 -10px;
}

.display-grid {
	display: grid !important;
}

.flight-schedule {
	font-family: Arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

.flight-header,
.flight-row {
	display: flex;
	text-align: left;
	padding: 12px;
	border-bottom: 1px solid #ddd;
}
.header-item {
	font-weight: 600;
}
.header-item,
.row-item {
	flex: 1;
}

.flight-header {
	background-color: #f2f2f2;
	font-weight: bold;
	text-align: center;
}

.flight-row {
	background-color: #f2f2f2;
}

.row-item {
	padding: 8px;
}

.data-container {
	max-height: 260px;
	overflow-y: auto;
	background-color: white;
	position: relative;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.blink {
	animation: blink 1s linear infinite;
}

.img-info {
	width: 302px !important;
	cursor: pointer;
}

.really-center {
	place-items: center;
	display: grid;
}

.center-text {
	display: grid;
	justify-content: center;
}

.height-berita {
	height: 220px;
}

.infografis-container {
	/* display: flex; */
	flex-wrap: wrap;
	gap: 20px;
	/* padding: 20px; */
}

.infografis-item {
	/* flex-basis: calc(50% - 20px); */
	/* background-color: white; */
	/* Secara default, dua item per baris untuk layar kecil */
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px; */
	overflow: hidden;
	transition: transform 0.3s ease;
}

.infografis-item:hover {
	transform: translateY(-5px);
}

.infografis-link {
	display: block;
	/* padding: 15px; */
	color: #333;
	text-decoration: none;
}

.infografis-title {
	margin: 0;
	font-size: 25px;
	text-align: left;
	color: white;
}

.infografis-title:hover {
	color: #d62828;
}

.infografis-empty {
	text-align: center;
	width: 100%;
}

.table {
	width: 100%;
	border-collapse: collapse;
	/* margin-top: 20px; */
}

.thead-dark {
	background-color: #343a40;
	color: #ffffff;
}

th,
td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

th {
	height: 50px;
}

tbody > tr:hover {
	background-color: #e9c46a !important;
	color: black;
}

td.detail:hover {
	background-color: #e9c46a !important;
	color: white !important;
}

.fa-caret-up {
	color: #dc3545;
}

.fa-caret-down {
	color: #28a745;
}

/* Custom styling for specific cases */
/* Adjust these styles as needed */
.harga-sekarang[style*="color: green"] {
	color: #dc3545; /* Bootstrap success color */
}

.harga-sekarang[style*="color: red"] {
	color: #28a745; /* Bootstrap danger color */
}

.harga-sekarang[style*="color: black"] {
	color: #000000; /* Keeping it black, but you can choose any color */
}

td[colspan="5"] {
	text-align: center;
}

/* Optional: Responsive table */
@media screen and (max-width: 600px) {
	.table,
	thead,
	tbody,
	th,
	td,
	tr {
		display: block;
	}
	.table-respon {
		padding: 5px !important;
		text-align: center !important;
	}
	.thead-dark {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	tr {
		border: 1px solid #ccc;
		margin-bottom: 10px;
	}
	td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
		text-align: right;
	}
	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
	}
	/* Label the data */
	td:nth-of-type(1):not(:last-child):before {
		content: "Nama";
	}
	td:nth-of-type(2):not(:last-child):before {
		content: "Harga Kemarin";
	}
	td:nth-of-type(3):not(:last-child):before {
		content: "Harga Sekarang";
	}
	td:nth-of-type(4):not(:last-child):before {
		content: "Perubahan";
	}
}

.items-darurat {
	position: fixed;
	top: 12%;
	right: 55px;
	transition: transform 0.5s ease 0s, width 0.5s ease 0s, opacity 0.5s ease 0s;
	transform-origin: right center;
	z-index: 9999;
	transform: scaleX(0);
	width: 0px;
	opacity: 0;
}

.detail-harga-pokok {
	color: black;
}
.detail-harga-pokok:hover {
	color: #3a86ff;
	text-decoration: underline;
	border-bottom: 1px solid;
}

#tns1-mw {
	width: 100%;
}

.tns.tns-default [data-controls="next"] {
	right: 0;
}

.container .title {
	color: #1a1a1a;
	text-align: center;
	margin-bottom: 10px;
}

.content {
	position: relative;
	width: 90%;
	max-width: 400px;
	margin: auto;
	margin-top: -10px;
	overflow: hidden;
}

.content .content-overlay {
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	height: 40%;
	width: 100%;
	left: 0;
	top: 80;
	bottom: 0;
	right: 0;
	opacity: 0;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay {
	opacity: 1;
}

.content-image {
	width: 100%;
}

.content-details {
	position: absolute;
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
	width: 100%;
	top: 50%;
	left: 50%;
	opacity: 0;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
	top: 80%;
	left: 50%;
	opacity: 1;
}

.content-details h3 {
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.15em;
	margin-bottom: 0.5em;
	text-transform: uppercase;
}

.content-details p {
	color: #fff;
	font-size: 0.8em;
}

.fadeIn-bottom {
	top: 80%;
}

.fadeIn-top {
	top: 20%;
}

.fadeIn-left {
	left: 20%;
}

.fadeIn-right {
	left: 80%;
}

.toggle-event-initial {
	background-color: #d00000;
	height: 35px;
	width: 245px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 1s;
	cursor: pointer;
	position: absolute;
	right: 5px;
	top: 115px;
	cursor: pointer;
	border-radius: 5px;
	z-index: 9999;
}

.toggle-darurat-initial {
	/* background-color: #d00000; */
	height: 35px;
	width: 260px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 1s;
	cursor: pointer;
	position: fixed;
	right: 4px;
	top: 115px;
	cursor: pointer;
	border-radius: 5px;
	z-index: 9999;
}

.gif-darurat {
	width: 100%;
	min-height: 1700px;
	background: url("../img/sirine.gif") center / cover no-repeat;
	/* background-color: #000; */
	position: fixed;
	padding: 0;
}

.toggle-menulainnya-initial {
	/* background-color: #d00000; */
	height: 35px;
	width: 80px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 1s;
	cursor: pointer;
	position: fixed;
	right: 5px;
	top: 5px;
	cursor: pointer;
	border-radius: 5px;
	z-index: 9999;
}

.shadow-hover:hover {
	box-shadow: 0px 5px 15px rgb(0 0 0 / 50%);
	border-radius: 20px;
}

.text-shadow:hover {
	text-shadow: 2px 2px 4px #000000;
}

.responsive-gmbr-dimas {
	width: 100%;
}

.center-pojok {
	display: grid;
	justify-content: center;
}

.teks-profil-responsive {
	color: white !important;
}

.title-profil h2 {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	position: relative;
}

@media screen and (max-width: 600px) {
	.toggle-darurat-initial {
		top: 85px;
	}
	.center-gmbr-dimas {
		display: grid;
		justify-items: center;
	}
	.responsive-gmbr-dimas {
		display: flex;
		justify-content: center;
		width: 50%;
	}
	.position-berita-next {
		right: -350px !important;
	}
	.position-produk-next {
		right: -350px !important;
	}
	.lebar-android {
		width: 100%;
	}
	.lebar-kotak-android {
		width: 380px;
	}
	.teks-profil-responsive {
		margin-bottom: 0;
	}
	.modal-content {
		max-width: 340px !important;
	}

	.swiper-slide img {
		height: 350px !important;
	}
	#modal-menu {
		width: 300px !important;
		left: 14% !important;
		top: 18% !important;
	}
	.modal-darurat {
		width: 300px !important;
		left: 14% !important;
		top: 18% !important;
	}
	.modal-darurat .modal-body .row > * {
		width: 40%;
	}
}

@media screen and (width: 1366px) {
	.position-berita-next {
		right: -1049px !important;
	}
	.position-produk-next {
		right: -1049px !important;
	}
	.height-berita {
		height: 250px;
	}
	.header-produk {
		height: 130px !important;
	}
	.modal-content {
		width: 40% !important;
	}
	.kotak-layanan {
		height: 120px !important;
	}
}

@media screen and (min-width: 1080px) and (max-width: 1320px) {
	.height-berita {
		height: 300px;
	}
	.header-produk {
		height: 130px !important;
	}
	.modal-content {
		width: 40% !important;
	}
	.kotak-layanan {
		height: 120px !important;
	}
}

.fade-in-section {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s linear, visibility 0.5s linear;
}

.fade-in-section.is-visible {
	opacity: 1;
	visibility: visible;
}

.position-produk-prev {
	position: relative;
	top: -210px;
}

.position-produk-next {
	position: relative;
	top: -245px;
	right: -1230px;
}

.position-berita-prev {
	position: relative;
	top: -270px;
}

.position-berita-next {
	position: relative;
	top: -305px;
	right: -1230px;
}

.treeview ul {
	list-style: none;
	padding-left: 1em;
}

.treeview li {
	margin: 0;
	padding: 0.5em;
	position: relative;
}

.treeview li:before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: -1em;
	border-left: 3px solid #ccc;
	height: calc(100% - 1.6em);
}

/* .treeview li:last-child:before {
	height: 1.2em;
}

.treeview li:last-child:before,
.treeview li:last-child:after {
	display: none;
} */

.treeview li:after {
	content: "";
	position: absolute;
	top: 0;
	left: -1em;
	border-top: 3px solid #ccc;
	width: 1em;
}

.treeview a {
	text-decoration: none;
	color: #333;
}

.treeview h3 {
	margin: 0;
	padding: 0;
	display: inline;
}
.jumlah-desa {
	background-color: #3a86ff;
	padding: 3px;
	font-weight: 700;
	color: white;
	border-radius: 5px;
}

.center-pojok {
	display: grid;
	justify-content: center;
	background: url("assets/img/bg_stakeholder.png") center / cover no-repeat;
	background-size: 100% 100%;
}

.modal-content {
	background: url("../img/bg-batik.png") center / cover no-repeat;
	background-color: white;
}

.modal-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 95%);
	z-index: 1;
}

.modal-header {
	z-index: 2;
}

.modal-body {
	z-index: 2;
}

.bg-card-header {
	background: url("../img/bg-pinggir.png") center / cover no-repeat;
	/* background-size: 100% 100%; */
	background-size: cover;
	background-repeat: no-repeat;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.bg-card-header > h2 {
	font-size: 18px;
	color: black;
	text-align: center;
	margin: 0;
}

.col-stakeholder {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* background: linear-gradient(to top, #2c4964, #4776a3); */
	border: 1px solid white;
}

.col-stakeholder-active {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: linear-gradient(to top, #2c4964, #64a0d9);
	border: 1px solid white;
	color: white;
}

.tablinks {
	margin: 2px;
	color: black;
	cursor: pointer;
}

.tab {
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

.tabcontent {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

.active-tab {
	color: white; /* Change this to the desired color */
}

.card-stakeholder {
	width: 100%;
	height: 100%;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 600px) {
	.card-stakeholder {
		width: 100%;
		height: 100%;
	}
}
.tampilan-desktop {
	display: block;
}

.tampilan-android {
	display: none;
}

@media screen and (max-width: 600px) {
	.tampilan-android {
		display: block;
	}

	.tampilan-desktop {
		display: none;
	}
}
.stakeholder-card {
	justify-content: center;
	display: flex;
	align-items: center;
}

.ignore {
	border: 1px solid white !important;
	color: white !important;
}

.ignore::placeholder {
	color: white !important;
}
.desktop-layanan {
	display: block;
}
.android-layanan {
	display: none;
}

@media (max-width: 575.98px) {
	.desktop-layanan {
		display: none;
	}
	.android-layanan {
		display: block;
	}
	.scrool-android-layanan {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		height: 645px;
	}
	/* .smart-service .title {
		margin-top: -40px;
	} */
	.items-menulainnya {
		width: calc(165px) !important;
	}
	.submenu {
		right: 169px !important;
	}
	.submenu {
		min-width: 92px !important;
	}
	.subsubmenu {
		min-width: 92px !important;
	}
	.subsubmenu {
		right: 80px !important;
		top: 40px !important;
	}
}

.text-layanan {
	margin-bottom: 5px;
}
.text-layanan a {
	text-transform: capitalize !important;
	margin-top: 0;
	margin-bottom: 1rem;
	color: black;
}

.text-layanan:hover a,
.text-layanan:hover i {
	color: #007bff;
}

.text-layanan-responsive {
	display: flex;
	align-items: flex-start;
	/* Mengatur ikon dan teks agar sejajar */
}

.icon-layanan-responsive {
	margin-right: 10px;
	display: flex;
	align-items: center;
	margin-top: 5px;
}

.text-layanan-responsive .text-layanan-responsive-nama {
	line-height: 1.5;
	/* Menambah jarak antara baris */
	display: block;
	/* Pastikan teks dalam elemen block */
	position: relative;
}

.text-layanan-responsive .text-layanan-responsive-nama::first-line {
	padding-left: 15px;
	/* Ruang tambahan pada baris pertama */
}

.fa-universal-access {
	font-size: 29px !important;
	color: white;
}

.items.hidden {
	display: none;
}

.submenu,
.subsubmenu {
	position: absolute;
	right: 100%;
	top: 0;
	z-index: 9999;
	min-width: 200px;
	display: none;
	transition: all 0.5s ease;
	/* Transisi saat submenu dan subsubmenu muncul */
}

.submenu.show,
.subsubmenu.show {
	display: block;
	/* background-color: #fff;
	color: #b2b2b2;
	text-decoration: none;
	border: 0.5px solid #d00000;
	padding: 5px; */
}

.kotak-menu-sub {
	background-color: #fff;
	color: #b2b2b2;
	text-decoration: none;
	border: 0.5px solid #d00000;
	padding: 5px;
}

.kotak-menu-sub:hover {
	background-color: #d00000;
	color: white;
	text-decoration: none;
	border: 0.5px solid #d00000;
	padding: 5px;
}

.kotak-menu-sub-sub {
	background-color: #fff;
	color: #b2b2b2;
	text-decoration: none;
	border: 0.5px solid #d00000;
	padding: 5px;
}

.kotak-menu-sub-sub:hover {
	background-color: #d00000;
	color: white;
	text-decoration: none;
	border: 0.5px solid #d00000;
	padding: 5px;
}

.kotak-menu > a {
	color: black;
}

.kotak-menu > a:hover {
	color: white;
}

.kotak-menu:hover {
	background-color: #d00000;
}

.kotak-menu-sub > a:hover {
	color: white;
}

.kotak-menu-sub > a {
	color: black;
}

.kotak-menu-sub-sub > a:hover {
	color: white;
}

.kotak-menu-sub-sub > a {
	color: black;
}

.kotak-menu {
	position: relative;
}

.submenu-item,
.subsubmenu-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: left;
}

.submenu a,
.subsubmenu a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: auto;
}

.scroll-stakeholder {
	overflow: scroll;
	width: 100%;
	height: 400px;
}

.bg-detail-berita-profil {
	background-image: url("../img/bg-batik.png");
	background-size: cover;
	background-position: center center;
	/* background-repeat: no-repeat; */
	position: relative;
}

.modal-darurat {
	background: url("../img/bg-batik.png") center / cover no-repeat;
	background-color: #fefefe;
	margin: auto;
	padding: 7px;
	width: 800px;
	display: none;
	position: fixed;
	overflow: auto;
	left: 25%;
	top: 5%;
	z-index: 1001;
}

#modal-event {
	background: url("../img/bg-batik.png") center / cover no-repeat;
	background-color: #fefefe;
	margin: auto;
	padding: 7px;
	width: 800px;
	display: none;
	position: fixed;
	overflow: auto;
	left: 25%;
	top: 5%;
	z-index: 1001;
}

#modal-loker {
	background: url("../img/bg-batik.png") center / cover no-repeat;
	background-color: #fefefe;
	margin: auto;
	padding: 7px;
	width: 800px;
	display: none;
	position: fixed;
	overflow: auto;
	left: 25%;
	top: 5%;
	z-index: 1001;
}

#modal-event-scrool {
	background: url("../img/bg-batik.png") center / cover no-repeat;
	background-color: #fefefe;
	margin: auto;
	padding: 7px;
	width: 800px;
	display: none;
	position: fixed;
	overflow: auto;
	left: 25%;
	top: 5%;
	z-index: 1001;
}

#modal-menu {
	background: url("../img/bg-batik.png") center / cover no-repeat;
	background-color: #fefefe;
	margin: auto;
	padding: 7px;
	width: 800px;
	display: none;
	position: fixed;
	overflow: auto;
	left: 25%;
	top: 5%;
	max-height: 90%; /* Untuk membatasi tinggi modal */
	overflow-y: auto; /* Membuat konten modal dapat di-scroll */
	z-index: 1001;
}

#modal-menu::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 95%);
	z-index: -1;
}

#modal-event-scrool::before {
	content: "";
	position: absolute; /* Pastikan posisi absolute */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	opacity: 0.9;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: inherit; /* Menerapkan border-radius yang sama dari induk */
}

.modal-darurat::before {
	content: "";
	position: absolute; /* Pastikan posisi absolute */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	opacity: 0.9;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: inherit; /* Menerapkan border-radius yang sama dari induk */
}

#modal-loker::before {
	content: "";
	position: absolute; /* Pastikan posisi absolute */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	opacity: 0.9;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: inherit; /* Menerapkan border-radius yang sama dari induk */
}

#modal-event::before {
	content: "";
	position: absolute; /* Pastikan posisi absolute */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	opacity: 0.9;
	z-index: -1;
	width: 100%;
	height: 100%;
	border-radius: inherit; /* Menerapkan border-radius yang sama dari induk */
}

.modal-header {
	border-bottom: 1px solid black;
}

.slide-event-new-center {
	display: flex;
	justify-content: center;
}

.slider-container-event {
	position: relative;
	width: 600px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	background-color: rgb(255 255 255 / 100%);
}

.image-event-new {
	height: 140px;
}

.slider-event-new {
	display: flex;
	transition: transform 0.5s ease;
}

.slide-event-new {
	min-width: 100%;
}

.slide-event-new img {
	width: 100%;
	border-radius: 10px;
}

button.event-slider-new {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	color: white;
	/* font-size: 5px; */
	cursor: pointer;
	padding: 10px;
	border-radius: 50%;
}

button.sebelumnya-event {
	left: 10px;
}

button.selanjutnya-event {
	right: 10px;
}

button.event-slider-new:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.font-event-btn {
	font-size: 10px;
	padding: 4px;
}

@media (min-width: 1360px) and (max-width: 1366px) {
	.slider-container-event {
		width: 530px !important;
	}
	.image-event-new {
		height: 100px !important;
	}
	.font-event-h4 {
		font-size: 1.3rem !important;
		margin-top: 20px;
	}
	.font-event-h5 {
		font-size: 1rem !important;
	}
	.font-event-tanggal {
		font-size: 10px !important;
	}
	.font-event-ket {
		font-size: 10px !important;
	}
	.font-event-btn {
		font-size: 10px !important;
	}
	.box-1366 {
		height: 40px !important;
	}
	.responsive-event-atas {
		margin-top: -20px;
	}
	.h-70px {
		height: 55px !important;
	}
	.h-80px {
		height: 60px !important;
	}
	.search-aduan {
		margin-top: -10px;
	}
	input::placeholder {
		font-size: 12px;
	}
	.modal-content-new {
		height: 550px;
	}
	.modal-darurat::before {
		height: 660px;
	}

	#modal-loker::before {
		height: 660px;
	}

	.swiper-slide img {
		height: 300px !important;
	}
	.swiper-pagination {
		margin-top: 10px !important;
	}
	#dalam_darurat {
		height: 30px;
	}
	#dalam_darurat strong {
		width: 1.5rem;
		height: 1.5rem;
	}
	#dalam_darurat a {
		font-size: 10px;
	}
	#dalam_darurat strong i {
		font-size: 10px;
	}
	.items div {
		height: 30px;
	}
	.kotak-menu strong i {
		font-size: 10px;
	}
	.kotak-menu strong {
		width: 1.5rem;
		height: 1.5rem;
	}
	.kotak-menu a {
		font-size: 10px;
	}
	.toggle-menulainnya-initial {
		height: 30px;
		width: 60px;
	}
	.toggle-menulainnya-initial h5 {
		font-size: 1rem;
	}
	.toggle-darurat-initial {
		height: 30px;
		width: 125px;
	}
	.toggle-darurat-initial h5 {
		font-size: 1rem;
	}
	.modal-menu-teks {
		font-size: 0.8rem;
	}
	.submenu-item-menu {
		font-size: 0.8rem;
	}
	.modal-menu-teks-sub {
		font-size: 0.8rem;
	}
}

@media (max-width: 575.98px) {
	.slider-container-event {
		width: 370px;
	}
	.image-event-new {
		width: 320px !important;
		height: 300px !important;
	}
	.responsive-scrool-event {
		width: 380px !important;
		left: 5% !important;
		top: 25% !important;
	}
	.dimas-android {
		width: 200px;
	}
}

.modal-menu-bg {
	text-align: left;
	border-radius: 510px;
	padding: 5px;
	margin-bottom: 5px;
}

.modal-menu-teks {
	color: white;
	flex-grow: 1;
	background-color: #d00000;
	padding: 10px;
	border: 1px solid white;
	border-radius: 5px;
}

.modal-menu-teks-sub {
	color: white;
}

.modal-menu-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d00000;
	padding: 13.2px;
	border: 1px solid white;
	border-radius: 5px;
}

.icon-container strong {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-submenu-container {
	justify-content: space-between;
	align-items: center;
	display: flex;
}

.submenu-container {
	margin-top: 10px;
	margin-left: 10px;
}

.submenu-item-menu {
	display: block;
	margin: 5px 0;
	flex-grow: 1;
	background-color: #d00000;
	padding: 7px;
	border: 1px solid white;
	border-radius: 5px;
	color: white;
}

.icon-container-sub {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d00000;
	padding: 10px;
	border: 1px solid white;
	border-radius: 5px;
}

.icon-container-sub strong {
	display: flex;
	align-items: center;
	justify-content: center;
}

.subsubmenu-container {
	margin-left: 10px;
}

.modal-subsubmenu-container {
	margin: 5px 0;
	flex-grow: 1;
	background-color: #d00000;
	padding: 7px;
	border: 1px solid white;
	border-radius: 5px;
	color: white;
}

#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

.toggle-event-initial {
	position: fixed;
}

/* Modal Content */
.modal-content-new {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	width: 50%;
	border-radius: 10px;
	/* transform: translate(-50%, -50%); */
}

/* The Close Button */
.close-new {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close-new:hover,
.close-new:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.center-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media (max-width: 1386.18px) {
	.h-70px {
		height: 60px !important;
	}
}

.image-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.9);
}

.image-modal-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

.image-modal-close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.image-modal-close:hover,
.image-modal-close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

.btn-info {
	background-color: #17a2b8;
	border: none;
	color: white;
	padding: 10px;
	text-align: center;
	/* width: 100%; */
	display: block;
	margin-top: 10px;
	text-decoration: none;
	border-radius: 0.475rem;
}

/* Styling untuk nested dropdown */
.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
}

.dropdown-menu.show {
	display: block;
}

.logo-atas {
	width: 150px;
	margin-right: 10px;
}

@media only screen and (max-width: 768px) {
	.logo-atas {
		width: 100px;
		margin-right: 5px;
	}
}

.modal-langsung {
	z-index: 10000 !important;
}

.modal-content {
	border-radius: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	border: none;
	padding: 20px;
}

.modal-header {
	border-bottom: none;
	padding-bottom: 0;
}

.modal-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
}

.modal-body {
	margin-top: 10px;
}

.form-label {
	font-weight: 500;
	color: #444;
}

.form-control {
	border-radius: 8px;
	padding: 10px;
	border: 1px solid #ccc;
}

.form-control:focus {
	border-color: #0d6efd;
	box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

.btn-primary {
	background-color: #0d6efd;
	border-radius: 8px;
	padding: 8px 20px;
	font-weight: 500;
}

.btn-secondary {
	border-radius: 8px;
	padding: 8px 20px;
	font-weight: 500;
}

.col-dolan {
	display: block;
}

@media (max-width: 576px) {
	.modal-dialog {
		margin: 1rem auto;
	}

	.modal-title {
		font-size: 1rem;
	}

	#modalLangsung .modal-dialog {
		margin-top: 30px;
	}

	.btn-android-survey {
		width: 85% !important;
	}

	.modal-content-new {
		width: 100%;
	}
	.col-dolan {
		display: none;
	}
}

.navbar-home {
	width: 100%;
	z-index: 9999;
	position: fixed;
}

#btnSurvey {
	font-size: 15px;
	padding: 10px;
	margin-bottom: 20px;
	width: 20%;
}

.font-event-h4 {
	text-align: center;
	font-weight: 800;
	font-size: 1.55rem;
	margin-top: 10px;
}
.row-dolan {
	margin: 0px;
	padding: 10px;
}

.col-dolan {
	margin-top: 10px;
}

.btn-dolan {
	font-size: 15px;
	padding: 5px;
	width: 93%;
	margin-bottom: 10px;
}

.simakerja-mas {
	background: linear-gradient(to bottom, rgba(101, 144, 128, 0.5), #07a37c);
	padding: 40px 20px;
	border-radius: 20px;
	width: 80%;
}

#pengaduan {
	margin-top: 300px;
}

#spinnerAduanAtas {
	display: none;
	margin-top: 160px;
}

.text-simak {
	font-size: 50px;
	font-weight: 600;
	color: white;
	margin-bottom: 40px;
}

.image-hover-container {
	position: relative;
	display: inline-block;
	width: 80%;
}

.image-hover-container img {
	width: 100%;
	display: block;
}

.hover-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	color: black;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 50px;
	text-align: center;
	text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
		1px 1px 0 white;
}

.image-hover-container:hover .hover-text {
	opacity: 1;
}

.layanan-card {
	background-color: white;
	border-radius: 10px;
	padding: 30px;
}

.center-content {
	display: none;
}

.widht-modal-layanan {
	max-width: 1000px;
}

#contentMenuLayanan {
	width: 100% !important;
}

#contentMenuDetail {
	width: 100% !important;
}

.text-icon-container-layanan {
	display: flex;
	align-items: center;
}

.align-items-center {
	display: flex;
	align-items: center;
}

.end-berita {
	justify-content: flex-end;
}

.text-white-important {
	color: white !important;
}

.px-1 {
	width: 20px;
}

.slider-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 20px;
}

.slider-track {
	display: flex;
	transition: transform 0.5s ease;
}

.slider-item {
	flex: 0 0 100%;
	padding: 10px;
}

@media (min-width: 768px) {
	.slider-item {
		flex: 0 0 33.3333%;
	}
	.btn-android-survey {
		width: 85%;
	}
	.modal-content-new {
		width: 100%;
	}
}

.card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.card-body {
	padding: 15px;
}

.two-lines {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.slider-button {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.7);
	border: none;
	padding: 10px;
	cursor: pointer;
	z-index: 2;
	font-size: 20px;
}

.slider-button.prev {
	left: 10px;
}

.slider-button.next {
	right: 10px;
}

.text-dimas {
	padding-top: 10px;
	text-align: center;
	padding-bottom: -20px;
	font-size: 14px;
	font-weight: 700;
	color: white;
}

.col-gaok {
	padding: 5px !important;
	text-align: center !important;
	font-weight: 700;
	font-size: 15px;
}

.table-gaok {
	background-color: #fff;
}

.td-gaok {
	padding: 5px !important;
	text-align: center !important;
}

.harga-red {
	color: red;
}
.harga-green {
	color: green;
}

.text-gaok-red {
	color: red;
	font-size: 20px !important;
}
.text-gaok-green {
	color: green;
	font-size: 20px !important;
}

.detail-harga-pokok-tr {
	background-color: #fdf0d5;
}

/* Responsive image fit */
.object-fit-cover {
	object-fit: cover;
}

/* Overlay on hover */
.overlay-layer {
	transition: opacity 0.3s ease-in-out;
}
.hover-opacity-100:hover {
	opacity: 1 !important;
}

/* For multiline truncate */
.two-lines {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Example badge colors */
.bg-onprogress {
	background-color: #f0ad4e;
}

.bg-done {
	background-color: #28a745;
}

.text-truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bg-cover {
	background-size: cover;
}

.bg-center {
	background-position: center;
}

/* Untuk teks judul 2 baris */
.text-truncate-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.sosial-media {
	color: #fff;
	font-size: 28px;
	font-weight: bold;
	position: relative;
}

.display-none-event {
	display: none;
}

.table-kunjungan {
	border: 1px solid white;
}

.th-kunjungan {
	border: 1px solid white;
	text-align: center;
}

.z-index-9999 {
	z-index: 9999;
}

.btn-100 {
	width: 100%;
}

.ignore::placeholder {
	color: grey !important;
}

.search-cari {
	padding: 0.5rem;
	text-align: center;
	align-content: center;
}

.form-cari {
	display: grid;
	justify-content: center;
}

.search-box-cari {
	display: flex;
	justify-content: center;
	align-items: center;
}

.text-black-important {
	color: black !important;
}

.box-cari {
	background-color: rgb(206, 206, 206) !important;
}

.mb-60 {
	margin-bottom: 60px;
}

.mb-100 {
	margin-bottom: 100px;
}

/* Gambar dalam konten isi */
.berita-isi p img,
.berita-gambar img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 1rem auto;
	border-radius: 8px;
}

.float-right {
	float: right;
}

.mt-120 {
	margin-top: 120px;
}

.iframe {
	width: 100%;
	height: 300px;
}

.img-layanan {
	width: 250px;
	height: 150px;
}

#accessibility-wrapper {
	position: fixed;
	top: 250px;
	right: 10px;
	z-index: 9999;
}

#accessibility-btn {
	background-color: white;
	color: white;
	/* border: 2px solid #1e3a8a; */
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 20px;
	cursor: pointer;
}

#accessibility-btn .fa-wheelchair {
	color: #1e3a8a;
}

#accessibility-panel {
	margin-top: 8px;
	width: 240px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	padding: 12px;
	display: none; /* default tersembunyi */
	flex-direction: column;
}

#accessibility-panel.show {
	display: flex;
}

#accessibility-panel button {
	background: none;
	border: none;
	text-align: left;
	padding: 6px 0;
	font-size: 14px;
	cursor: pointer;
}

body.grayscale {
	filter: grayscale(100%);
}

body.high-contrast {
	background-color: black !important;
	color: yellow !important;
}

body.negative-contrast {
	filter: invert(100%);
}

body.light-bg {
	background-color: #ffffff !important;
	color: #000000 !important;
}

body.underline-links a {
	text-decoration: underline !important;
}

body.readable-font {
	font-family: "Atkinson Hyperlegible", Arial, sans-serif !important;
}

html {
	font-size: 16px; /* base size */
}

/* Tombol dengan gradient animasi */
.btn-gradient {
	background: linear-gradient(270deg, #ff512f, #dd2476, #24c6dc, #514a9d);
	background-size: 600% 600%;
	color: #fff !important;
	/* font-weight: 600; */
	border: none;
	transition: transform 0.2s;
	animation: gradientMove 6s ease infinite;
}

/* Animasi gradien bergerak */
@keyframes gradientMove {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.btn-gradient:hover {
	transform: scale(1.05);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

.berita-lead-img img {
	display: block;
	width: 450px;
	height: auto;
	border-radius: 8px;
}
.berita-isi p {
	line-height: 1.8;
	margin-bottom: 1rem;
	text-align: justify;
}
/* Jaga jarak pada layar kecil: gambar di atas, teks di bawah */
@media (max-width: 767.98px) {
	.berita-isi-lead {
		margin-top: 0.5rem;
	}
}