@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Russo+One&family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Oxanium:wght@200..800&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Satisfy&display=swap');
html,body{
	margin:0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	overflow-x: clip;
}
.navbar.fixed-top {
	background: rgb(40,40,40);
	background: linear-gradient(0deg, rgba(40,40,40,1) 0%, rgba(255,253,253,1) 0%, rgba(221,218,218,1) 100%);
	transition: background 0.3s;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Efek bayangan untuk navbar */
}
.slideshow img {
	width: 100%;
	height: 500px;
	object-fit: cover;
}
.carousel {
	position: relative; /* Untuk memastikan elemen thumbnail berada dalam kotak */
}
.carousel-inner{
	background-color: RGB(149, 148, 151);
}
.carousel-inner {
	background-color: RGB(149, 148, 151);
	background-size: cover; /* Pastikan gambar menutupi seluruh area */
	background-position: center; /* Posisikan gambar di tengah */
	background-repeat: no-repeat; /* Hindari gambar berulang */
}

.carousel-inner img {
	max-height: 730px; /* Batasi tinggi maksimal */
	width: 100%; /* Pastikan gambar memenuhi lebar */
	object-fit: cover; /* Jaga rasio gambar */
}
.carousel-thumbnails {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.carousel-thumbnails2 {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thumbnail-item {
	border-radius: 4px;
	transition: all 0.3s ease-in-out;
}

.thumbnail-item:hover {
	border-color: #000;
}

.active-thumbnail {
	border-color: #fff; /* Perbedaan warna border thumbnail aktif */
	transform: scale(1.5); /* Sedikit diperbesar */
	box-shadow: 0 4px 10px rgba(255, 255, 255, 0.4);
}

.carousel-caption {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center; /* Opsional jika ingin teks rata tengah */
	z-index: 2;
	color: #fff;
	
	padding: 20px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.45);
}

.carousel-title {
	font-family: 'Poppins', sans-serif; /* Gunakan font modern seperti Poppins */
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 10px;
}

.carousel-description {
	font-family: 'Roboto', sans-serif; /* Gunakan font pendukung seperti Roboto */
	font-size: 1.2rem;
	line-height: 1.5;
}
.kolom-berita{
	padding: 10px;
	
}
.kolom-berita img{
	border-radius: 5px;
}

.berita-lain{
	padding: 10px;
}
.berita-lain:hover{
	background: #eee;
}
.berita-lain a{
	color: #db0b1c;
	text-decoration: none;
}
.berita-lain img:hover{
	transform: scale(1.1);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.tag-item {
	display: inline-block;
	background-color: #f0f0f0;
	color: #333;
	padding: 6px 12px;
	font-size: 14px;
	border-radius: 20px;
	text-decoration: none;
	transition: 0.2s ease;
}

.tag-item:hover {
	background-color: #e0e0e0;
	color: #000;
}
.garis{
	width: 100%;
	border-bottom: 2px #ccc solid;
	margin-bottom: 5px;
	margin-top: 5px;
}
.teko{
	font-family: "Teko", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.navbar{
	background: rgb(40,40,40);
	background: linear-gradient(0deg, rgba(40,40,40,1) 0%, rgba(255,253,253,1) 0%, rgba(221,218,218,1) 100%);
	font-size: 24px;
	transition: background-color 0.5s ease-in-out;
	
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	padding: 0px;
	padding-right: 5px;
	display: block !important;
	float: right;
}
.logos{
	position: absolute;
	top: 0;
	height: 100%;
	display: block;
	float: left;
	padding:3px 15px;
	background:rgba(255, 0, 0, 1); 
	
	background-repeat: no-repeat;
	background-position: left center;
	background-size:100%; /* Hanya mengisi 30% bagian kiri */
	transition: transform 0.3s ease-in-out; /* Tambahkan transisi agar halus */
	
}
.logos img{
	height: 80px;
	display: block;
	float: left;
}
.logos span{
	display: inline-block;
	text-align: left;
	line-height: 1.3;
	padding-top: 10px;

}
.flare {
	position: absolute;
	top: 0;
	left: -150%;
	width: 100px;
	height: 100%;
	background: linear-gradient(90deg, rgba(40,40,40,1) 0%, rgba(255,253,253,1) 0%, rgba(215,214,214,1) 25%, rgba(238,235,235,1) 70%, rgba(255,251,251,0.1612977954853817) 100%);
	transform: skewX(0deg);
	animation: flare-animation 3s infinite ease-in-out;
	z-index: 1;
	pointer-events: none;
	opacity: 0.3;
}

@keyframes flare-animation {
	0% {
		left: -150%;
	}
	50% {
		left: 50%;
	}
	100% {
		left: 150%;
	}
}

.logos-content {
	position: relative;
	z-index: 2; /* Pastikan konten berada di atas flare */

}
.small-logo img{
	height: 40px;
	display: block;
	float: left;
}
.small-logo span{
	display: inline-block;
	text-align: left;
	line-height: 0.7;
	padding-top: 8px;
	padding-right: 30px;
}
.top-nav{
	display: flex;
	width: 100%;
	height: 40px;
	border-bottom: 1px #ccc solid;
	text-align: right;

}
.box-news-flash {
	width: 800px; /* Sesuaikan lebar berita */
	height: 30px;
	overflow: hidden;
	position: relative;
	display: block;
	align-items: center;
	float: left;
	font-size: 1.2rem;
	margin-left: 320px;
}
.top-tanggal{
	text-shadow: 0px 1px 1px #fff;
}
.news-flash {
	position: absolute;
	width: 100%;
	text-align: left; /* Supaya teks rata kiri */
	font-size: 1.2rem;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	text-shadow: 0px 1px 1px #fff;
}
.navbar-collapse{
	padding: 0;
}
.scrolled-navbar {
	background-color: #fc031c !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Efek bayangan untuk navbar */
	transition: background-color 0.5s ease-in-out;
}
.navbar .nav-link {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.box-logo{

}
.navbar-nav{
	margin-left:307px;
}
/* Mengaktifkan dropdown saat hover */
.navbar-nav .dropdown:hover .dropdown-menu {
	display: block;
	margin-top: 0; /* Hindari animasi delay */

}
.hidden-navbar {
	display: none;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* Pastikan dropdown-menu tetap tertutup saat tidak di-hover */


/* Tambahkan transisi agar lebih smooth */
.dropdown:hover .dropdown-menu {
	animation: fadeIn 0.3s ease-in-out;
}
.dropdown-menu {
	display: none;
	right: 0 !important;
	left: auto !important;
	border-radius: 0 !important;
	padding: 0;
	background: none !important;
	padding-top: 15px;
	border:none !important;

}
.dropdown-menu li{
	padding: 5px !important;
	background: #eee !important;
}
.navbar-nav li{
	padding: 10px 15px;
	font-size: 1.2rem;
}
.navbar-nav li:hover{
	background: #ccc;
}
.dropdown-toggle::after {
	display: none !important;
}
/* Animasi masuk */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.carousel-caption .carousel-description {
	transform: scale(0.8); /* Awalnya lebih kecil */
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.carousel-item.active .carousel-description {
	transform: scale(1); /* Kembali ke ukuran normal */
	opacity: 1;
}
/* Animasi Flip */
.carousel-caption .carousel-title {
	transform: rotateY(90deg); /* Awalnya tidak terlihat (flip ke samping) */
	opacity: 0;
	transition: all 0.6s ease-in-out;
}

.carousel-item.active .carousel-title {
	transform: rotateY(0); /* Kembali ke posisi normal */
	opacity: 1;
}
/*perangkat desa */
.slider-container {
	max-width: 800px;
	margin: auto; /* Pusatkan slider */
}

.slick-slider img {
	width: 100%;
	height: 600px;
	object-fit: cover;

}

/* Custom Navigasi di Bawah */
.slick-dots {
	position: absolute;
	bottom: 5px; /* Jarak dari bawah slider */

	margin: 0 auto;
	text-align: center;
}

.slick-dots li {
	margin: 0 5px;
}

.slick-dots li button {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: gray;
	border: none;
}

.slick-dots li.slick-active button {
	background: red; /* Warna aktif */
}
.ket-perangkat{
	position: absolute;
	bottom: 0;
	width: 100%;
	display: inline-block;
	text-align: center;
	padding: 15px 0px;
	padding-bottom:35px ;
	background: rgba(255, 0, 0, 0.65);
	color: #fff;
}
.visi{
	padding: 20px 0;
	width: 100%;
	text-align: center;
	background: rgb(224,224,224);
	background: linear-gradient(90deg, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 50%, rgba(226,226,226,1) 100%);
	box-shadow: -2px 10px 16px 0px rgba(0,0,0,0.62);
	-webkit-box-shadow: -2px 10px 16px 0px rgba(0,0,0,0.62);
	-moz-box-shadow: -2px 10px 16px 0px rgba(0,0,0,0.62);
	opacity: 0; /* Awal elemen tidak terlihat */
	animation: fadeIn 2s ease-in forwards; /* Efek fade-in selama 2 detik */
}
@keyframes visi {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.visi h1{
	font-size: 30px;
	color:#fc1403;
}
.visi span{
	color:#000;
	font-family: "Roboto Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	font-size: 40px;
	text-shadow: 0px 1px 3px #fff;
	
}

.block-title{
	padding: 10px 0px;
	font-size: 24px;
	margin: 10px 0px;
	color:#fc1403;
	width: 100%;
	border-bottom: 3px #fc1403 solid;
	font-family: "Russo One", serif;
	font-weight: 400;
	font-style: normal;
}
.panel{
	width: 100%;
	display: inline-block;
	padding: 10px;
	background: #fff;
	box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.40);
	-webkit-box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.40);
	-moz-box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.40);
}
.pajak{
	text-align: center;
	font-size: 24px;
	padding: 20px;
}
.counter {
	font-size: 2.5rem;
	animation: countUp 2s linear;
}

@keyframes countUp {
	from {
		content: "0";
	}
	to {
		content: attr(data-target);
	}
}

.abu{
	padding: 20px 0;
	width: 100%;
	text-align: center;
	background: rgb(224,224,224);
	background: linear-gradient(90deg, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 50%, rgba(226,226,226,1) 100%);
	box-shadow: 15px -2px 16px 0px rgba(0,0,0,0.62);
	-webkit-box-shadow: 15px -2px 16px 0px rgba(0,0,0,0.62);
	-moz-box-shadow: 15px -2px 16px 0px rgba(0,0,0,0.62);
	opacity: 0; /* Awal elemen tidak terlihat */
	animation: fadeIn 2s ease-in forwards; /* Efek fade-in selama 2 detik */
}

@keyframes abu {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.gelap{
	padding: 20px 0;
	width: 100%;
	background: rgb(40,40,40);
	background: linear-gradient(180deg, rgba(40,40,40,1) 0%, rgba(115,113,113,1) 0%, rgba(40,39,39,1) 100%);
	border-bottom: 3px #333 solid;
	color: #fff;
}
.yanmas{
	width: 100%;
	height: 150px;
	
	background-size: cover; /* Pastikan gambar menutupi seluruh area */
	background-position: center; /* Posisikan gambar di tengah */
	background-repeat: no-repeat; /* Hindari gambar berulang */
}
.pelayanan{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center; /* Opsional jika ingin teks rata tengah */
	z-index: 2;
	left: 50px;
}
.penduduk{
	position: relative;
}
.penduduk img{
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	text-align: center; /* Opsional jika ingin teks rata tengah */
	left: 50px;
	height: 80px;
}
.circle {
	width: 130px; /* Sesuaikan ukuran */
	height: 130px; /* Harus sama dengan width untuk bentuk lingkaran */
	background-color: #fc1403; /* Warna latar */
	border-radius: 50%; /* Membuat div menjadi bulat sempurna */
	box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.48);
	-webkit-box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.48);
	-moz-box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.48);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}

.circle:hover,.kotak:hover {
	transform: scale(1.1);
	transition: transform 0.3s ease-in-out;
}

/* Efek bouncing */
.circle:active,.kotak:active {
	transform: scale(1);
	transition: transform 0.1s ease-out;
}
.kotak {
	width: 120px; /* Sesuaikan ukuran */
	height: 120px; /* Harus sama dengan width untuk bentuk lingkaran */
	background: rgb(40,40,40);
	background: linear-gradient(180deg, rgba(40,40,40,1) 0%, rgba(255,253,253,1) 0%, rgba(221,218,218,1) 100%);
	border-radius: 10px; /* Membuat div menjadi bulat sempurna */
	box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.48);
	-webkit-box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.48);
	-moz-box-shadow: -2px 0px 9px 0px rgba(0,0,0,0.48);
	display: flex;
	flex-direction: column; /* Susun elemen ke bawah */
	align-items: center; /* Pusatkan teks dan ikon */
	align-items: center;
	justify-content: center;
	color: #999;
	text-shadow: 0px 1px 1px #fff;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	margin-top: 5px;
	cursor: pointer;
}
.kotak i{
	display: block;
	margin-bottom: 5px;
	font-size: 1.4rem;
}
.alamat{

}
.alamat h3,.sosmed h3,.link-terkait h3{
	font-size: 30px;
	color:#ccc;
	width: 100%;
	padding: 0px 20px;
	text-shadow: 0px 1px 1px #000;
}
.alamat img{
	display: block;
	float: left;
	height: 160px;
	margin: 10px;
}
.alamat p{
	margin-top: 30px;
}
.sosmed{
	border-collapse: collapse;
	background: none;
	margin-left: 17px;
}
.sosmed td{
	background: none;
	border:none;
	border-bottom: 1px #ccc dotted;
	padding: 5px;
}
.sosmed td a{
	color:#fff;
	text-decoration: none;
}
.sosmed td a:hover{
	color:yellow;
}
.sosmed img{
	
	height: 35px;
	width: auto;
}
.link-terkait-table{
	border-collapse: collapse;
	background: none;
	margin-left: 17px;
	float: right;
	margin-right: 20px;
}
.link-terkait-table td{
	text-align:right;
}
.link-terkait-table a{
	color:#fff;
	text-decoration: none;
}
.link-terkait-table a:hover{
	color:#ffc107;
	text-decoration: underline;
}
/* Overlay Preloader */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(255, 255, 255, 0.9); /* Semi transparan agar tetap bisa melihat konten */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999; /* Pastikan preloader di atas segalanya */
}

/* Animasi spinner */
.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid rgba(0, 0, 0, 0.3);
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 10px;
}

/* Animasi berputar */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.typewriter {
	font-size: 2rem;
	font-family: monospace;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	border-right: 2px solid;
	animation: blink 0.5s step-end infinite alternate;
}

@keyframes blink {
	from {
		border-color: transparent;
	}
	to {
		border-color: black;
	}
}



@keyframes fadeNews {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}
.header-page{
	margin-top: 90px;
	width: 100%;
	height: 300px;
	background: rgb(40,40,40);
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 1.4rem;
	text-align: left;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover; /* Sesuaikan dengan kebutuhan */
	
}
.boxes{
	position: relative;
	width: 100%;
	min-height: 300px;
	display: inline-block;

}
.title-news{
	position: absolute;
	display: block;
	bottom: 0px;
	left: 0px;
	z-index: 3;
	padding: 10px 0;
	text-shadow: 0 1px 1px #000;
	font-size: 2rem;
	padding-top: 50px;

}
.title-news p{
	font-size: 1rem;
	padding: 5px 15px;
	background: rgba(228, 228, 228, 0.54);
}
.content{
	padding-top:30px;
}
.content img{
	display: block;
	float: left;
	margin:0 20px 20px 0;
	width: 500px;
	border-radius: 10px;
}
.other-news{
	width: 100%;
	transition: top 0.3s ease-in-out;
	background: #fff;
	padding: 5px;

}
.gelap{
	z-index: 10 !important;
}
.other-news-list{

	width: 100%;
	border-bottom: 1px #ccc solid;
	padding: 10px 0px 10px 10px;
	display: inline-block;
}
.other-news-list:hover{
	background: rgba(255, 0, 0, 0.13);

}


.other-news-box img {
	max-width: 180%; /* Agar gambar tidak melebihi kotaknya */
	max-height: 180%; /* Agar gambar tidak melebihi kotaknya */
	object-fit: contain; /* Menjaga proporsi gambar */
}

.other-news-box{
	width: 70px;
	height: 70px;
	overflow: hidden;
	border-radius: 5px;
	float: left;
	display: block;
	margin-right: 20px;
	display: flex;
	justify-content: center; /* Pusat secara horizontal */
	align-items: center; /* Pusat secara vertikal */
}
.other-news-list p{
	padding: 15px 5px;
	line-height: 1.2;
}
.other-news a{
	color:#006eb8;
	text-decoration: none;
}
.other-news-list img{
	width: 140px;

}
.comment-box {
	width: 100%;
	display: block;
	background: white;
	padding: 20px;
	margin: 50px 0px;
	border-radius: 8px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.form-control {
	border-radius: 5px;
	font-size: 16px;
	padding: 10px;
}

.btn-submit {
	width: 100%;
	padding: 12px;
	border: none;
	background: #dc3545;
	color: white;
	font-size: 18px;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

.btn-submit:hover {
	background: #a71d2a;
}

.yanmas {
	background-image: url('<?= base_url() ?>assets/template/img/yan_mas.jpg');
}

.boxtable {
	width: 100%;
	overflow: auto;
}

@media (max-width: 768px) {
	.yanmas {
		height: 180px;
		background-size: cover;
		background-image: url('<?= base_url() ?>assets/template/img/yan_mas_mobile.jpg');
	}
	.title-news{
		font-size: 1.5rem;
		min-height: 300px;
		padding-top: 50px;
	}
	.link-terkait-table td{
		text-align: left;
	}
	.sosmed{
		width: 100%;
		padding-right: 80px;
	}
}

.flare-animated {
	pointer-events: none;
	border-radius: 10px;
	background: radial-gradient(circle at 0% 50%, rgba(255, 255, 255, 0.4), transparent 70%);
	animation: flareMove 6s ease-in-out infinite;
	mix-blend-mode: screen;
}

@keyframes flareMove {
	0% {
		background: radial-gradient(circle at 0% 50%, rgba(255, 255, 255, 0.2), transparent 70%);
	}

	50% {
		background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.4), transparent 70%);
	}

	100% {
		background: radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.2), transparent 70%);
	}
}

/* Stunting Widget Style */
.stunting {
	background: linear-gradient(135deg, #fceaea, #f8d7da);
	/* Light red pastel */
	color: #842029;
	/* Dark red text for good contrast */
	transition: 0.3s ease;
}

.stunting .icon-circle {
	background-color: rgba(132, 32, 41, 0.1);
	/* semi red for icon bg */
}

.stunting:hover {
	background: linear-gradient(135deg, #f1b0b7, #f8d7da);
	/* Slightly stronger red */
	color: #6a1b25;
	/* Darker on hover */
}

.icon-wrapper {
	position: relative;
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

.icon-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: rgba(132, 32, 41, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	overflow: hidden;
}

/* Ring presisi di dalam lingkaran */
.icon-circle::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top: 2px solid #dc3545;
	animation: spin 2s linear infinite;
	top: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
}


@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.slideshow-wrapper {
	max-width: 800px;
	margin: auto;
}

.main-image {
	width: 100%;
	aspect-ratio: 2 / 1;
	/* ini trik utama 2:1 */
	object-fit: cover;
	/* atau contain, tergantung preferensi */
	border-radius: 10px;
	overflow: hidden;
}

.main-image img {
	width: 100%;
	border-radius: 10px;
	object-fit: cover;
}

.thumbs {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.thumb-img {
	width: 90px;
	height: 60px;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s, box-shadow 0.3s;
	opacity: 0.7;
	cursor: pointer;
}

.thumb-img:hover {
	transform: scale(1.05);
	opacity: 1;
}

.thumb-img.active {
	transform: scale(1.15);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	opacity: 1;
}

/* Background gelap transparan */
.lightboxOverlay {
	background: rgba(0, 0, 0, 0.9) !important;
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9998;
}

.lightbox {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	z-index: 9999;
}

.lb-image {
	width: 100vw !important;
	/* lebar penuh viewport */
	height: 100vw !important;
	max-height: 80vh !important;
	/* biar gak kepanjangan */
	object-fit: contain !important;
	/* jaga rasio tapi tetap dalam batas */
	background-color: #000;
	/* opsional */
}

.lb-close {
	position: absolute !important;
	top: 20px;
	right: 20px;
	font-size: 32px !important;
	color: white !important;
	text-shadow: none;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	z-index: 10000;
}

/* Gaya khusus untuk perangkat mobile */
@media (max-width: 768px) {
	.content img{
		width: 100%;
	}
	.carousel-caption {
		
		max-width: 90%; 
		padding: 10px;
		text-align: center;

	}

	.carousel-title {
		font-size: 1rem; /* Kurangi ukuran font */
	}

	.carousel-description {
		font-size: 0.8rem; /* Ukuran font lebih kecil */
		line-height: 1.4; /* Sesuaikan line-height */
	}
	.slideshow {
		
		height: 600px !important;
		width: auto;
		object-fit: cover;
	}
	.visi{
		font-size: 16px;
	}
	
	.carousel-inner img {
		min-height: 400px;
	}
	.circle,.kotak{
		width: 75px;
		height: 75px;
		font-size: 0.7rem;
	}
	.title-footer{
		margin: 20px 0px;
		text-align: left !important;
		float: left !important;
	}
	.link-terkait-table{
		border-collapse: collapse;
		background: none;
		margin-left: 17px;
		float: left;
		margin-right: 20px;
	}
	.alamat img{
		height: 150px;
		margin-top: 0px;
	}
	.alamat p{
		padding-top: 50px;
	}
	.logos{
		position: relative;
		top: auto;
		height: auto;
		display: block;
		float: left;
		padding:3px 15px;
		border-right: none;
		background:rgba(255, 0, 0, 1); 
		background-repeat: no-repeat;
		background-position: left center;
		background-size:100%; /* Hanya mengisi 30% bagian kiri */
		width: 100%; 
	}
	.logos img{
		height: 60px;
		display: block;
		float: left;
	}
	.logos span{
		display: inline-block;
		text-align: left;
		line-height: 0.7;
		padding-top: 15px;
		text-shadow: 0px 1px 1px #fff;
	}
	.navbar {
		background: #fff !important; /* Warna putih untuk visibilitas */
		
	}

	.navbar-collapse {
		background: #f8f9fa; /* Warna latar belakang dropdown */
		border-radius: 5px;
		padding: 10px;
	}

	.navbar-nav .nav-link {

		color: #000 !important; /* Ubah warna teks agar terlihat */
		padding: 10px 15px;
	}
	.navbar-nav{
		width: 100%;
	}
	.navbar-nav li{
		background: none;
	}
	.dropdown-menu {
		display: none; /* Defaultnya hidden */
		background: #fff; /* Latar belakang dropdown */
		width: 100%;
	}

	.dropdown-menu.show {
		display: block; /* Tampilkan menu dropdown */
	}

	.navbar-toggler {
		position: absolute;
		top:7px;
		right: 5px;
		border: 1px solid #ccc;
		padding: 5px 10px;
	}

	.navbar-toggler:focus {
		outline: none;
		box-shadow: none;
	}
	.navbar-nav{
		display: block;
		float: right;
	}
	.box-flare{
		display: none;
	}
	.box-news-flash{
		display: none;
	}
}