.landing-header {
				padding: 15px 20px;
			}

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

			.menu-link {
				color: #000; /* Change to your preferred color */
				font-weight: bold;
			}

			@media (min-width: 992px) {
				.landing-header .menu-link {
					font-size: 1.25rem; /* Adjust for larger screens */
				}
			}

			.header-background {
				position: relative;
				width: 100%;
				min-height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background: #000;
			}

			/* Background video behind everything */
			.background-video {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transform: translate(-50%, -50%);
				z-index: 0; 
			}

			.overlay {
				position: relative; 
				z-index: 1;
				width: 100%;
				padding: 30px;
				color: white;
			}

			.bg-card,
			.bg-card-st {
				background-color: rgba(255, 255, 255, 0.85);
				color: black;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				font-family: 'Inter', sans-serif; 
				font-size: 1.5rem; 
				font-weight: 400;
				padding: 10px;
				margin: 10px 0;
				border-radius: 8px;
			}



			/* Keyframes for vertical scrolling */
			@keyframes verticalScroll {
				0% {
					transform: translateY(0%);
				}
				100% {
					transform: translateY(-100%);
				}
			}

			.text-transition {
				transition: all 0.5s linear;
				color: #FFFFFF;
			}

			.text-transition:hover {
				color: #0570ea;
				transform: scale(1.1);
				padding: 30px; 
			}

			

			/* Button styling */
			.btn-permohonan {
				background-color: #c60000;
				border-color: #0c4277;
				font-size: 2.0rem;
				width: 100%;
				padding: 8px 16px;
				margin-top: 10px;
				display: inline-block;
				color: #f2f2f2;
				text-decoration: none;
				text-align: center;
				align-items: center;
				font-weight: bold;
			}

			.btn-permohonan img{
				width: 45px;
				
			}

			.btn-permohonan:hover {
				background-color: #ffb004;
				border-color: #10355a;
			}
			.card-container {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			/* Active state */
			.landing-header .menu .menu-item .menu-link.active {
				color: #3E97FF; /* Color when active */
			}
			.content-jata {
				position: relative;
				display: flex;
				justify-content: space-between; /* Align the left and right content to the edges */
				align-items: center; /* Vertically centers the content */
				padding: 10px; /* Optional: Add padding for spacing */
			}
		
			/* CSS for table */
			table {
				width: 100%;
				border-collapse: collapse;
				margin-bottom: 20px;
			}
			th, td {
				border: 1px solid #ddd;
				padding: 8px;
				text-align: left;
			}
			th {
				background-color: #f2f2f2;
			}

			.table-style-2 {
				width: 100%;
				box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
				border: 1px solid #ccc;
			}

			.table-style-2 th, .table-style-2 td {
				border: 1px solid transparent;
				text-align: center;
			}

			.table-style-2 th {
				background-color: transparent;
			}
			
			.text-justify {
				text-align: justify; /* Justifies text within its container */
			}

			.card-bkoku {
				position: relative;
				width: 100%;
				height: 200px;
				border-radius: 15px;
				overflow: hidden;
				box-shadow: 0 10px 20px rgba(227, 16, 16, 0.1);
				transition: transform 0.3s;
				background-color: white;
			}

			.card-bkoku.active {
				box-shadow: 0 10px 20px rgba(16, 82, 227, 0.5); /* Change the box-shadow color */
				border: 5px solid rgba(16, 82, 227, 1); /* Add an outer border color */
				transform: scale(1.05); /* Optional: Add a scale effect */
				background-color: #FBC412;
			}

			.card-ppk {
				position: relative;
				width: 100%;
				height: 200px;
				border-radius: 15px;
				overflow: hidden;
				box-shadow: 0 10px 20px rgba(227, 16, 16, 0.1);
				transition: transform 0.3s;
				background-color: white;
			}

			.card-ppk.active {
				box-shadow: 0 10px 20px rgba(16, 82, 227, 0.5); /* Change the box-shadow color */
				border: 5px solid rgba(16, 82, 227, 1); /* Add an outer border color */
				transform: scale(1.05); /* Optional: Add a scale effect */
				background-color: #FBC412;
			}

			.card {
				position: relative;
				width: 100%;
				height: 200px;
				border-radius: 15px;
				overflow: hidden;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s;
			}

			.card-text {
				position: absolute;
				bottom: 35px;
				left: 20px;
				right: 20px;
				color: white;
				font-size: 1rem;
				font-weight: bold;
				text-align: center;
			}

			.card:hover {
				transform: translateY(-10px);
			}

			.tatacara-box {
				font-size: 1.2rem;
			}

			.tatacara-content {
				line-height: 1.0;
			}

			.penyelaras-row {
				display: flex;
			}

			.penyelaras-left {
				flex: 1;
			}

			.penyelaras-right {
				flex: 1;
			}

			.note {
				font-size: 0.9rem;
				font-style: italic;
				color: #333;
				margin-top: 10px;
			}

			@media (max-width: 1200px) {
				.background-video {
					object-fit: cover; /* Ensure the video scales nicely */
				}

				.butang {
					text-align: center; 
				}
				
				.overlay {
					font-size: 1rem !important; /* Make overlay text smaller */
				}

				.overlay h1 {
					font-size: 2rem !important; /* Adjust font size for headings */
					margin: 1 auto;
				}

				.bg-card-st, .bg-card {
					/* text-align: center;  */
					font-size: 0.9rem !important; /* Further reduce font size */
					margin: 5 auto;
				}

				.btn-permohonan {
					font-size: 1rem; /* Adjust button font size */
					width: auto; /* Adjust button width */
					padding: 5px 10px; /* Optional: adjust padding for better appearance */
				}

				.btn-permohonan img {
					width: 30px; /* Adjust button width */
				}

				.bg-card-container {
					width: auto; /* Adjust width */
					font-size: 1rem; /* Adjust font size */
				}

				.bg-card-container span {
					width: auto; /* Adjust width */
					font-size: 1rem !important; /* Adjust font size */
				}

				.penyelaras-row {
					flex-direction: column;
				}

				.penyelaras-right {
					margin-top: 10px;
				}
			}

			@media (max-width: 800px) {
				.background-video {
					object-fit: cover; /* Ensure the video scales nicely */
				}

				.butang {
					text-align: center; 
				}
				
				.overlay {
					font-size: 1rem !important; /* Make overlay text smaller */
				}

				.overlay h1 {
					font-size: 2rem !important; /* Adjust font size for headings */
					margin: 1 auto;
				}

				.bg-card-st, .bg-card {
					/* text-align: center;  */
					font-size: 0.9rem !important; /* Further reduce font size */
					margin: 5 auto;
				}

				.btn-permohonan {
					font-size: 1rem; /* Adjust button font size */
					width: auto; /* Adjust button width */
					padding: 5px 10px; /* Optional: adjust padding for better appearance */
				}

				.btn-permohonan img {
					width: 30px; /* Adjust button width */
				}

				.bg-card-container {
					width: auto; /* Adjust width */
					font-size: 1rem; /* Adjust font size */
				}

				.bg-card-container span {
					width: auto; /* Adjust width */
					font-size: 1rem !important; /* Adjust font size */
				}

				.penyelaras-row {
					flex-direction: column;
				}

				.penyelaras-right {
					margin-top: 10px;
				}
			}

			@media (max-width: 500px) {
				.background-video {
					object-fit: cover; /* Ensure the video scales nicely */
				}

				.butang {
					text-align: center; 
				}
				
				.overlay {
					font-size: 1rem !important; /* Make overlay text smaller */
				}

				.overlay h1 {
					font-size: 2rem !important; /* Adjust font size for headings */
					margin: 1 auto;
				}

				.bg-card-st, .bg-card {
					/* text-align: center;  */
					font-size: 0.9rem !important; /* Further reduce font size */
					margin: 5 auto;
				}

				.btn-permohonan {
					font-size: 1rem; /* Adjust button font size */
					width: auto; /* Adjust button width */
					padding: 5px 10px; /* Optional: adjust padding for better appearance */
				}

				.btn-permohonan img {
					width: 30px; /* Adjust button width */
				}

				.bg-card-container {
					width: auto; /* Adjust width */
					font-size: 1rem; /* Adjust font size */
				}

				.bg-card-container span {
					width: auto; /* Adjust width */
					font-size: 1rem !important; /* Adjust font size */
				}

				.penyelaras-row {
					flex-direction: column;
				}

				.penyelaras-right {
					margin-top: 10px;
				}
			}