/* primary #2a58a5*/
:root {
	--primary: rgb(42, 88, 165);
	--primary-hover: rgb(60, 116, 212);
	--secondary: rgb(27, 197, 189);
	--secondary-hover: rgb(24, 179, 171);
	--body-font-family: "Poppins", Helvetica, Arial, sans-serif, "Helvetica Neue";
}

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

.text-primary {
	color: var(--primary) !important;
}

.text-secondary {
	color: var(--secondary) !important;
}

.bg-primary {
	background-color: var(--primary) !important;
}

.bg-primary-60 {
	background-color: rgba(42, 88, 165, 0.6) !important;
}

.border-secondary {
	border-color: var(--secondary) !important;
}

.border-primary {
	border-color: var(--primary) !important;
}

.btn-primary {
	--bs-btn-bg: var(--primary) !important;
	--bs-btn-border-color: var(--primary) !important;
	--bs-btn-hover-bg: var(--primary-hover) !important;
	--bs-btn-hover-border-color: var(--primary-hover) !important;
}

.pagination {
	--bs-pagination-color: var(--primary) !important;
	--bs-pagination-hover-color: var(--primary-hover) !important;
}

.active > .page-link,
.page-link.active {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}

/* * {
border: 1px solid red;
} */

* {
	font-family: var(--body-font-family);
}

body {
	margin: 0;
	font-family: var(--body-font-family);
}

#header {
	box-shadow: none;
	background-color: #fff;
}

.header-scrolled {
	background-color: #fff !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
	transition: all 0.15s ease-in-out;
}

.navbar {
	transition: all 0.15s ease-in-out;
}

.nav-item .active,
.nav-link:hover {
	border-bottom: 2px solid var(--secondary);
}

#header .navbar-brand span {
	color: var(--primary);
	font-size: 1.75rem;
}

#header .navbar-nav .nav-item .nav-link {
	color: var(--primary);
	font-size: 1rem;
	font-weight: 500;
	margin: 0 0.2rem;
	padding: 0;
}

#header .navbar-nav .nav-item {
	padding: var(--bs-navbar-nav-link-padding-x);
}

#hero,
#pencarian-panel .background {
	background-color: rgba(42, 88, 165, 0.05);
	padding: 0 0 5.25rem 0;
}

#halaman-pencarian-panel .background {
	background-color: rgba(42, 88, 165, 0.05);
	padding: 0 0 1.5rem 0;
}

#hero h1 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--primary);
}

#hero p {
	font-size: 0.9rem;
	color: var(--primary);
}

#halaman-pencarian-panel #data-search-form {
	margin: 0;
}

#data-search-form {
	background-color: #fff;
	border-radius: 6px;
	border: 1px solid var(--primary);
	width: 90%;
	overflow: hidden;
	margin: auto;
}

#data-search-form:focus-within {
	transition: all 0.15s ease-in-out;
	box-shadow: 0 0 0 0.2rem rgba(42, 88, 165, 0.25);
}

#data-search-form input {
	padding: 0px 15px;
	border: none !important;
	width: 100%;
	color: var(--primary);
	font-size: 1rem;
}

#data-search-form input::placeholder {
	color: var(--primary);
	opacity: 0.5;
}

#data-search-form button {
	border-radius: 6px;
	border: none;
	padding: 3px 9px;
	margin: 3px;
	box-shadow: none;
	color: var(--primary);
	font-size: 1.25rem;
}

#data-search-form button:hover {
	background-color: var(--primary);
	color: #fff;
}

#data-search-form input:focus {
	outline: none !important;
}

dotlottie-player {
	width: 100%;
	height: 100%;
	margin: -54px auto;
}

#carouselInfografisControls .carousel-inner {
	box-shadow: 0 0.5rem 1rem rgba(42, 88, 165, 0.3) !important;
}

#carouselInfografisControls {
	transition: all 0.2s ease-in-out;
}

#carouselInfografisControls:hover {
	scale: 1.05;
	transition: all 0.3s ease-in-out;
}

#data-prioritas-panel {
	margin-top: -70px;
}

#data-prioritas-panel .owl-carousel .owl-stage {
	display: flex;
}

#data-prioritas-panel .data-prioritas-items {
	display: flex;
	flex: 1 0 auto;
	height: 100%;
	width: 100%;
}

#data-prioritas-panel .data-prioritas-box {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

#data-prioritas-panel .owl-carousel .card {
	background-color: #fff;
	border-radius: 4px !important;
	border: 0 !important;
	box-shadow: 0 4px 4px 0 rgba(27, 197, 189, 0.3);
	width: 100%;
}

#data-prioritas-panel .owl-carousel .card img {
	mix-blend-mode: hard-light;
	filter: grayscale(1);
	transition: all 0.2s ease-in-out;
}

#data-prioritas-panel .owl-carousel .card:hover img {
	mix-blend-mode: normal;
	filter: none;
	transition: all 0.2s ease-in-out;
}

#data-prioritas-panel .owl-carousel .card:hover {
	box-shadow: 0 4px 10px 1px rgba(27, 197, 189, 0.5);
	transition: all 0.2s ease-in-out;
}

/* Group hover effect */
#data-prioritas-panel .owl-carousel .card:hover ~ .card img {
	filter: grayscale(1);
	transition: all 0.2s ease-in-out;
}

#data-prioritas-panel .owl-carousel .card h3 {
	font-size: 12px;
	font-weight: 600;
	color: var(--primary);
}

#layanan-panel {
	padding: 4rem 0 2rem 0;
	background-color: #fff;
	/* background-color: rgba(42, 88, 165, 0.04); */
}

#layanan-panel .owl-stage,
#kategori-panel .owl-stage {
	display: flex;
}

#layanan-panel .card-layanan {
	height: calc(100% - 40px);
}

#layanan-panel .card-container {
	display: flex;
	flex-direction: column;
}

#layanan-panel .card {
	background-color: #fff;
	margin-top: -40px;
	padding: 1.5rem 1rem 0 1rem;
	position: relative;
	z-index: 0;
	height: 100%;
}

#layanan-panel .card:hover {
	box-shadow: 0px 0px 10px 1px rgba(27, 197, 189, 0.5);
	scale: 0.98;
	transition: all 0.2s ease-in-out;
}

#layanan-panel .card h3 {
	font-size: 1.5rem;
	padding-top: 0.5rem;
}

#layanan-panel .card p {
	font-size: 1rem;
	color: var(--primary);
}

#layanan-panel .logo-layanan {
	background-color: #fff;
	margin: auto;
	border: 1px solid rgba(42, 88, 165, 0.4);
	border-radius: 7px;
	width: 78px;
	height: 78px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
}

#kategori-panel {
	padding: 2rem 0;
	background-color: rgba(42, 88, 165, 0.04);
}

#kategori-panel h2,
#layanan-panel h2,
#pencarian-panel h2,
#iku-panel h2,
#publikasi-panel h2,
#tentang-panel h2,
#faq-panel h2,
#cctv-panel h2,
#playstore-panel h2,
#data-dokter-panel h2,
#data-hotel-panel h2,
#data-resto-panel h2 {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--primary);
}

#kategori-panel .card {
	background-color: rgba(42, 88, 165, 0.05);
	border-radius: 7px !important;
	border: none;
	box-shadow: 0px 0px 4px 1px rgba(27, 197, 189, 0.4);
	margin-bottom: 10px;
	aspect-ratio: 1/1;
}

#kategori-panel .card .card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#kategori-panel .card img {
	width: 64px;
	height: 64px;
	object-fit: scale-down;
	margin-bottom: 0.5rem;
}

#kategori-panel .card h3 {
	font-size: 0.8rem;
}

#kategori-panel .card:hover {
	box-shadow: 0px 0px 10px 1px rgba(27, 197, 189, 0.5);
	background-color: rgba(27, 197, 189, 0.8);
	transition: all 0.2s ease-in-out;
}

#kategori-panel .card:hover h3 {
	color: #fff !important;
}

#pencarian-hasil-panel .card {
	background-color: rgba(27, 197, 189, 0.08);
	border-radius: 7px !important;
	border: none !important;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

#pencarian-hasil-panel .card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 7px 7px 0 0;
}

#pencarian-hasil-panel .card h3 a:hover,
#publikasi-panel .card h3 a:hover {
	color: var(--primary-hover) !important;
	transition: all 0.2s ease-in-out;
}

#pencarian-hasil-panel .btn-success {
	background-color: var(--secondary);
	border: none;
	color: #fff;
}

#pencarian-hasil-panel .btn-success:hover {
	background-color: rgb(24, 173, 166);
}

#publikasi_tab .nav-pills .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
#faq_tab .nav-pills .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	border-color: var(--secondary);
}

#publikasi-panel .tab-content,
#faq-panel .tab-content {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

#publikasi-panel .tab-content .card h3 {
	font-size: 1.1rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: transparent !important;
	color: var(--primary) !important;
	font-weight: 600;
	border-radius: 0%;
	transition: all 0.2s ease-in-out;
}

.nav-pills .nav-link {
	color: var(--primary) !important;
	border-radius: 0%;
}

#iku-panel,
#tentang-panel,
#publikasi-panel,
#faq-panel,
#cctv-panel,
#data-dokter-panel,
#data-hotel-panel,
#data-resto-panel {
	padding: 2rem 0;
}

#faq-panel .accordion {
	--bs-accordion-border-width: 0 !important;
}

#faq-panel .accordion-button,
#faq-panel .accordion-body {
	color: var(--primary);
	background-color: rgba(42, 88, 165, 0.05);
	border-radius: var(--bs-accordion-inner-border-radius);
}

#faq-panel .accordion-button::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-lg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E");
	color: var(--primary) !important;
	transition: all 0.2s ease-in-out;
}

#faq-panel .accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-lg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'/%3E%3C/svg%3E");
	color: var(--primary) !important;
	transition: all 0.2s ease-in-out;
}

#cctv-panel .btn-primary {
	background-color: var(--primary);
	border: none;
	color: #fff;
}

#cctv-panel .btn-primary:hover {
	background-color: var(--primary-hover);
}

#cctv-panel .btn-outline-primary,
#footer .btn-outline-primary
{
	border: 1px solid var(--primary);
	color: var(--primary);
}

#cctv-panel .btn-outline-primary:hover,
#footer .btn-outline-primary:hover {
	background-color: var(--primary);
	color: #fff;
}

#cctvPlayerHLS,
#media-alert {
	width: 100%;
	aspect-ratio: 3/2;
	object-fit: fill;
}

#watermark-alert .alert {
	padding: 10px;
}

#watermark-alert .fas,
#watermark-alert .small {
	font-size: 0.7rem;
}

#data-dokter-panel .shadow-sm {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15) !important;
}

#data-dokter-panel .filter-section,
#data-dokter-panel .input-group-wrapper-2 {
	width: 100%;
	margin: auto;
}

#data-dokter-panel .form-control,
#data-dokter-panel .form-select,
#data-dokter-panel i {
	font-size: 0.8rem !important;
	border-radius: 0;
}

#data-dokter-panel .form-control,
#data-dokter-panel .form-select {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#data-dokter-panel .input-group-wrapper-2 {
	width: 100%;
	margin: auto;
}

#data-dokter-panel .form-control,
#data-dokter-panel .form-select {
	border: 0;
}

#data-dokter-panel .input-group-wrapper,
#data-dokter-panel .input-group-wrapper-2 {
	border-radius: 4px !important;
	border: 1px solid rgba(42, 88, 165, 0.5) !important;
}

#data-dokter-panel .input-group-append {
	position: relative;
	display: flex;
	align-items: center;
}

#data-dokter-panel .input-group-append .select-icon {
	position: absolute;
	left: 10px;
	color: #1f3b87;
	font-size: 16px;
	z-index: 10;
}

#data-dokter-panel .input-group-append select {
	width: 100%;
	padding: 5px 10px 5px 35px;
	font-size: 16px;
	appearance: none;
	height: 37px;
}

#data-dokter-panel #filter-lokasi,
#data-dokter-panel #filter-hari {
	border-radius: 4px 0 0 4px !important;
}

#data-dokter-panel #filter-lokasi {
	border-right: 1px solid rgba(42, 88, 165, 0.5) !important;
}

#data-dokter-panel #filter-spesialisasi {
	border-radius: 0 4px 4px 0 !important;
}

#data-dokter-panel .input-group-append #search-input {
	border-radius: 0 4px 4px 0 !important;
	padding-right: 48px;
}

#data-dokter-panel .input-group-append button {
	position: absolute;
	right: 1px;
	border-radius: 0 3px 3px 0 !important;
	background-color: #fff;
	color: var(--primary);
	height: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#data-dokter-panel .input-group-append button:hover {
	background-color: rgba(42, 88, 165, 0.1);
}

#data-dokter-panel .input-group-append button:focus {
	outline: rgba(42, 88, 165, 0.5) 3px solid;
}

#data-dokter-panel .input-group-append button:active {
	background-color: var(--primary);
	color: #fff;
}

#data-dokter-panel #slider-range .noUi-handle {
	background-color: var(--bs-primary);
	border: 3px solid white;
	width: 20px;
	height: 20px;
	box-shadow: 0 0 5px #00000033;
	cursor: grab;
	border-radius: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#data-dokter-panel #slider-range .noUi-handle::before,
#data-dokter-panel #slider-range .noUi-handle::after {
	display: none;
}

#data-dokter-panel #slider-range .noUi-connect {
	background-color: var(--bs-primary);
	height: 6px;
}

#data-dokter-panel #slider-range .noUi-handle {
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
}

#data-dokter-panel #slider-range {
	height: 6px;
}

#data-dokter-panel .slider-top-label {
	font-size: 0.85rem;
}

#data-dokter-panel .dokter-card,
#data-dokter-panel .location-card {
	background-color: rgba(42, 88, 165, 0.05);
	border: none;
	border-radius: 10px;
	overflow: hidden;
}

#data-dokter-panel .dokter-card h5 {
	font-size: 1.3rem;
}

#data-dokter-panel .dokter-card h5,
#data-dokter-panel .dokter-card p,
#data-dokter-panel .location-card h5,
#data-dokter-panel .location-card h6,
#data-dokter-panel .location-card .btn-collapse,
#data-dokter-panel .location-card th {
	font-weight: 500;
}

#data-dokter-panel .dokter-card img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	object-position: top;
	margin-right: 0;
	flex-shrink: 0;
}

#data-dokter-panel .location-card .d-flex .d-inline-block {
	min-width: 100%;
	margin-bottom: 0.75rem;
}

#data-dokter-panel .location-card img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3/2;
}

#data-dokter-panel .dokter-card .btn-sm {
	font-size: 0.875rem;
	padding: 5px 10px;
}

#data-dokter-panel .location-card h5 {
	font-size: 1.1rem;
}

#data-dokter-panel .location-card h5 .btn-sm,
#data-dokter-panel .location-card h5 .btn-sm i,
#data-dokter-panel .location-card div .btn-sm,
#data-dokter-panel .location-card div .btn-sm i {
	font-size: 0.75rem;
}

#data-dokter-panel .location-card .btn-sm {
	padding: 1px 5px;
}

#data-dokter-panel .location-card .card-text,
#data-dokter-panel .location-card .btn-collapse,
#data-dokter-panel .location-card tbody {
	font-size: 0.8rem !important;
}

#data-dokter-panel .location-card thead {
	font-size: 0.9rem;
	border-bottom: 1.5px solid rgba(42, 88, 165, 0.5);
}

#data-dokter-panel #selected-container .dokter-card img {
	width: 100px;
	height: 100px;
}

#data-dokter-panel #selected-container .dokter-card .card-body {
	max-width: 100%;
}

#data-dokter-panel #selected-container a {
	width: 100%;
}

/* TODO: Hapus CSS  */
/* CSS Hotel & Resto*/
#data-hotel-panel #background-filter,
#data-resto-panel #background-filter {
	position: relative;
	min-height: 400px;
	background-color: #f4f6fa;
	margin-top: -100px !important;
}

#data-hotel-panel #filter-container,
#data-resto-panel #filter-container {
	position: relative;
	z-index: 4;
	margin-top: -300px !important;
}

#data-hotel-panel .filter-inactive,
#data-resto-panel .filter-inactive {
	border: 2px solid #d0e2f2;
	background-color: var(--white);
	color: var(--primary);
}

#data-hotel-panel .filter-inactive:hover,
#data-resto-panel .filter-inactive:hover {
	background-color: #f0f0f0;
}

#data-hotel-panel .hotel-title,
#data-resto-panel .resto-title {
	font-size: 1.1rem;
	font-weight: 600;
}

#data-hotel-panel .option-box label,
#data-resto-panel .option-box label {
	font-weight: 600;
	margin: 0.25rem 0;
}

#data-hotel-panel #search-hotel-form .input-group,
#data-resto-panel #search-resto-form .input-group {
	background-color: white;
	overflow: hidden;
	border: 2px solid #7f9bc9;
}

#data-hotel-panel #search-hotel-form .form-control,
#data-resto-panel #search-resto-form .form-control {
	border: none;
	padding: 12px 16px;
	font-size: 1rem;
}

#data-hotel-panel #search-hotel-form .form-control:focus,
#data-resto-panel #search-resto-form .form-control:focus {
	box-shadow: none;
	border: none;
}

#data-hotel-panel #search-hotel-form .btn:hover,
#data-resto-panel #search-resto-form .btn:hover {
	background: none;
}

#data-hotel-panel .select2-container--bootstrap .select2-selection {
	background-color: transparent;
	border: none;
	color: var(--primary);
	box-shadow: none;
}
#data-hotel-panel
	.select2-container--bootstrap
	.select2-selection--multiple
	.select2-search__field::placeholder {
	color: var(--primary);
	font-weight: 600;
	font-size: 1rem;
}

#data-hotel-panel .option-box,
#data-resto-panel .option-box {
	color: #1f3b87;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

#data-hotel-panel .select-wrapper i,
#data-resto-panel .select-wrapper i {
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
	color: #1f3b87;
	font-size: 18px;
	z-index: 10;
}

#data-hotel-panel .select-container,
#data-resto-panel .select-container {
	all: unset;
	display: flex;
	align-items: center;
	background: #f5f7fa;
	border-radius: 8px;
	padding: 8px 12px;
	position: relative;
	min-height: 44px;
}

#data-hotel-panel .select-container i,
#data-resto-panel .select-container i {
	font-size: 20px;
	margin-right: 8px;
	position: relative;
	z-index: 2;
}

#data-hotel-panel .select-container select,
#data-resto-panel .select-container select {
	background: transparent !important;
	border: none !important;
	font-weight: 600;
	width: 100%;
	padding-left: 0.5rem;
	font-size: 1rem;
	appearance: none;
	cursor: pointer;
	height: 37px;
}

#data-hotel-panel .select-container select:focus,
#data-resto-panel .select-container select:focus {
	outline: none;
	box-shadow: none;
}

#data-hotel-panel .card-img-top,
#data-resto-panel .card-img-top {
	aspect-ratio: 4/3;
}

#data-hotel-panel img,
#data-resto-panel img {
	object-fit: cover;
}

/* CSS Hotel Detail & Resto Detail */
#data-hotel-panel .hotel-gallery-thumb:hover,
#data-resto-panel .resto-gallery-thumb:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

/* Add clickable cursor for gallery images */
#data-hotel-panel .gallery-clickable,
#data-resto-panel .gallery-clickable {
	object-fit: cover;
	cursor: pointer;
	transition: all 0.3s ease;
}

#data-hotel-panel .gallery-clickable:hover,
#data-resto-panel .gallery-clickable:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

#data-hotel-panel .hotel-gallery-thumbs .thumb-more,
#data-resto-panel .resto-gallery-thumbs .thumb-more {
	position: relative;
}

#data-hotel-panel .hotel-gallery-thumbs .lihat-lainnya-btn,
#data-resto-panel .resto-gallery-thumbs .lihat-lainnya-btn {
	position: absolute;
	bottom: 30px;
	right: 10px;
	z-index: 3;
	background: #f4f6fa;
	border-radius: 6px;
	font-size: 0.95rem;
	padding: 2px 10px;
	color: var(--primary);
	transition: background 0.2s;
	text-decoration: none;
}

#data-hotel-panel .hotel-gallery-thumbs .lihat-lainnya-btn:hover,
#data-resto-panel .resto-gallery-thumbs .lihat-lainnya-btn:hover {
	background: var(--primary);
	color: #fff;
}

#data-hotel-panel .lihat-lainnya-btn-mobile,
#data-resto-panel .lihat-lainnya-btn-mobile {
	position: absolute;
	bottom: 10px;
	right: 20px;
	z-index: 3;
	background: #f4f6fa;
	border-radius: 8px;
	font-size: 0.9rem;
	padding: 0.25rem 0.5rem;
	color: var(--primary);
	transition: all 0.2s;
	text-decoration: none;
}

/* Modal galeri fullscreen */
#galleryModal .modal-content {
	background: #fff;
	border-radius: 12px;
}

#galleryModal .modal-body {
	max-height: 80vh;
	overflow-y: auto;
}

.gallery-modal-img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	cursor: pointer;
	transition: box-shadow 0.2s;
}

#data-hotel-panel .badge-lokasi,
#data-resto-panel .badge-lokasi,
#data-resto-panel .badge-kategori {
	background-color: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
	padding: 0.5rem;
	border-radius: 0.25rem;
}

#data-hotel-panel .img-main,
#data-resto-panel .img-main {
	object-fit: cover;
	aspect-ratio: 4/3;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 0.5rem;
}

#data-hotel-panel .img-main:hover,
#data-resto-panel .img-main:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

#data-hotel-panel .img-thumb,
#data-resto-panel .img-thumb {
	cursor: pointer;
	transition: all 0.3s ease;
	aspect-ratio: 4/3;
	object-fit: cover;
}

#data-hotel-panel .img-thumb:hover,
#data-resto-panel .img-thumb:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#data-hotel-panel .img-thumb-container:nth-child(1),
#data-hotel-panel .img-thumb-container:nth-child(2),
#data-resto-panel .img-thumb-container:nth-child(1),
#data-resto-panel .img-thumb-container:nth-child(2) {
	margin-bottom: 1rem;
}

#data-hotel-panel .img-thumb-container:nth-child(2) .img-thumb,
#data-resto-panel .img-thumb-container:nth-child(2) .img-thumb {
	border-top-right-radius: 1rem;
}

#data-hotel-panel .img-thumb-container:nth-child(4) .img-thumb,
#data-resto-panel .img-thumb-container:nth-child(4) .img-thumb {
	border-bottom-right-radius: 1rem;
}

#data-hotel-panel .lihat-lainnya-btn,
#data-resto-panel .lihat-lainnya-btn {
	position: absolute;
	width: 150px;
	bottom: 1rem;
	right: 1rem;
	z-index: 3;
	background: #f4f6fa;
	padding: 0.25rem;
	transition: background 0.2s;
	text-decoration: none;
	color: var(--primary);
}

#data-hotel-panel .lihat-lainnya-btn:hover,
#data-resto-panel .lihat-lainnya-btn:hover {
	background: var(--primary);
	color: #fff;
}

#data-resto-panel .schedule-item {
	padding: 0.25rem 0;
	font-size: 0.9rem;
}

#data-resto-panel .schedule-item:not(:last-child) {
	border-bottom: 1px solid rgba(42, 88, 165, 0.1);
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
}

#footer {
	background-color: var(--primary);
	color: #fff;
	padding: 2rem 0;
}

#footer .container {
	padding: 0 1.5rem;
}

#footer p,
#footer span,
#footer a {
	color: #fff;
}

#footer .navbar-brand img {
	width: 100%;
}

#footer .navbar-brand p {
	margin-bottom: 0;
	font-size: 2.4rem;
}

#footer .navbar-brand span {
	font-size: 0.75rem;
}

#footer .contact {
	margin-top: 1rem;
	margin-bottom: 1.25rem;
}

#footer .contact p,
#footer a {
	font-size: 14px;
	margin-bottom: 0.5rem;
}

#footer .maps {
	margin-bottom: 0.5rem;
}

#footer .powered-by {
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1.5rem 0;
	color: #fff;
	column-gap: 0.8rem;
	row-gap: 1rem;
	flex-wrap: wrap;
}

#footer .powered-by img {
	height: 42px;
}

#footer .powered-by img:hover {
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
	transition: all 0.1s ease-in-out;
}

#footer hr {
	margin: 0.8rem;
}

#footer .maps,
#footer .stats {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.visitor-blur {
		filter: blur(3px);
		transition: filter 0.3s ease;
}

.visitor-blur.show {
		filter: blur(0px);
}

@media (max-width: 576px) {
	/* Hotel Detail */
	#data-hotel-panel .hotel-img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		display: block;
	}
	
	#data-hotel-panel .hotel-gallery-main {
		min-height: 180px;
		max-height: 220px;
		border-radius: 8px;
	}

	#data-hotel-panel .hotel-gallery-thumb {
		height: 60px;
	}
}

/* SM */
@media (min-width: 576px) {
	dotlottie-player {
		width: 70%;
		height: 70%;
		margin: -54px auto;
	}

	#hero,
	#pencarian-panel .background {
		padding: 0 0 5.5rem 0;
	}

	#halaman-pencarian-panel .background {
		background-color: rgba(42, 88, 165, 0.05);
		padding: 0 0 2rem 0;
	}

	#hero h1 {
		font-size: 2.15rem;
	}

	#hero p {
		font-size: 1rem;
	}

	#data-search-form {
		width: 80%;
	}

	#data-search-form input {
		padding: 0px 15px;
		font-size: 1.15rem;
	}

	#data-search-form button {
		padding: 3px 9px;
		margin: 3px;
		font-size: 1.25rem;
	}

	#kategori-panel .card h3 {
		font-size: 1rem;
	}

	#publikasi-panel .tab-content .card h3 {
		font-size: 1.2rem;
	}

	#playstore-panel .illustration {
		height: 200px;
	}

	#playstore-panel div {
		text-align: center;
	}

	#data-dokter-panel .input-group-wrapper-2 {
		width: 80%;
	}

	#data-dokter-panel .form-control,
	#data-dokter-panel .form-select,
	#data-dokter-panel i {
		font-size: 0.9rem !important;
	}

	#data-dokter-panel .location-card .d-flex .d-inline-block {
		min-width: fit-content;
	}

	#data-dokter-panel .location-card img {
		width: 80px !important;
		height: 80px !important;
		aspect-ratio: 1/1;
	}

	#data-dokter-panel .location-card h5 {
		font-size: 1.25rem;
	}

	#data-dokter-panel .location-card h6 {
		font-size: 1.1rem;
	}

	#data-dokter-panel .location-card h5 .btn-sm,
	#data-dokter-panel .location-card h5 .btn-sm i {
		font-size: 0.8rem;
	}

	#data-dokter-panel .location-card .card-text,
	#data-dokter-panel .location-card .btn-collapse,
	#data-dokter-panel .location-card tbody {
		font-size: 0.9rem !important;
	}

	#data-dokter-panel .location-card thead {
		font-size: 1rem;
		border-bottom: 1.5px solid rgba(42, 88, 165, 0.5);
	}

	#data-dokter-panel #selected-container a {
		width: fit-content;
	}

	#data-dokter-panel #selected-container .dokter-card img {
		width: 80px;
		height: 80px;
	}

	#data-hotel-panel .card-img-top,
	#data-resto-panel .card-img-top {
		aspect-ratio: 1/1;
	}

	#data-hotel-panel .reset-filter,
	#data-resto-panel .reset-filter {
		width: 100%;
	}

	/* #data-resto-panel .img-main {
		border-radius: 1rem 0 0 1rem;
	} */

	#footer hr {
		margin: 1rem 0;
	}

	#footer .navbar-brand img {
		height: 72px;
		width: auto;
	}
}

/* MD */
@media (min-width: 768px) {
	#header .navbar-brand span {
		font-size: 1.75rem;
	}

	#header .navbar-nav .nav-item .nav-link {
		font-size: 1rem;
		margin: 0 0.2rem;
	}

	#hero h1 {
		font-size: 2.25rem;
	}

	#hero p {
		font-size: 1rem;
	}

	#data-search-form input {
		padding: 0px 10px;
	}

	dotlottie-player {
		width: 60%;
		height: 60%;
		margin: -64px auto;
	}

	#layanan-panel .card {
		padding: 1rem 0.5rem 0 0.5rem;
	}

	#layanan-panel .card h3 {
		font-size: 1.25rem;
	}

	#kategori-panel .card h3 {
		font-size: 1.1rem;
	}

	#playstore-panel div {
		text-align: left;
	}

	#playstore-panel .illustration {
		height: 250px;
	}

	#cctvPlayerHLS,
	#media-alert {
		aspect-ratio: 16/10;
	}

	#watermark-alert .alert {
		padding: 15px;
	}

	#watermark-alert .fas,
	#watermark-alert .small {
		font-size: 0.8rem;
	}

	#data-dokter-panel .input-group-wrapper-2 {
		width: 70%;
	}

	#data-dokter-panel .form-control,
	#data-dokter-panel .form-select,
	#data-dokter-panel i {
		font-size: 1rem !important;
	}

	#data-dokter-panel .dokter-card h5 {
		font-size: 1.5rem;
	}

	#data-dokter-panel .dokter-card img,
	#data-dokter-panel #selected-container .dokter-card img {
		width: 90px;
		height: 90px;
	}

	#data-resto-panel .gallery-right {
		height: 400px;
	}

	#data-hotel-panel .img-main,
	#data-resto-panel .img-main {
		border-radius: 1rem 0 0 1rem;
	}

	#footer .navbar-brand img {
		height: 72px;
	}

	#footer .contact {
		margin-top: 1rem;
		margin-bottom: 1.25rem;
	}

	#footer .contact p,
	#footer a {
		margin-bottom: 0.5rem;
	}

	#footer .maps,
	#footer .stats {
		padding-left: 0px !important;
		padding-right: 0.75rem !important;
	}
}

/*  LG  */
@media (min-width: 992px) {
	#hero,
	#pencarian-panel .background {
		padding: 0 0 5rem 0;
	}

	#hero h1 {
		font-size: 3rem;
		margin-bottom: 1.5rem;
	}

	#hero p {
		font-size: 1.15rem;
		margin-bottom: 1.5rem;
	}

	#hero .desc {
		padding-right: 2.5rem;
	}

	#halaman-pencarian-panel .background {
		background-color: rgba(42, 88, 165, 0.05);
		padding: 0 0 2.5rem 0;
	}

	dotlottie-player {
		width: 90%;
		height: 90%;
		margin: auto;
	}

	#data-search-form {
		width: 80%;
		margin: 0;
	}

	#data-search-form input {
		padding: 0px 15px;
		font-size: 1.15rem;
	}

	#data-search-form button {
		padding: 3px 9px;
		margin: 3px;
		font-size: 1.5rem;
	}

	#playstore-panel .illustration {
		height: 300px;
	}

	#cctvPlayerHLS,
	#media-alert {
		aspect-ratio: 16/9;
	}

	#watermark-alert .fas,
	#watermark-alert .small {
		font-size: 0.9rem;
	}

	#data-dokter-panel .filter-section {
		width: 70%;
	}

	#data-dokter-panel .dokter-card img,
	#data-dokter-panel #selected-container .dokter-card img {
		width: 100px;
		height: 100px;
	}

	#data-dokter-panel .dokter-card h5 {
		font-size: 1.35rem;
	}

	#footer .maps {
		padding-right: 10px !important;
		margin-bottom: 0;
	}

	#footer .contact p,
	#footer a {
		font-size: 15px;
	}

	#footer .powered-by {
		margin: 0;
	}

	#footer .powered-by img {
		height: 36px;
	}
}

/*  XL  */
@media (min-width: 1200px) {
	#hero,
	#pencarian-panel .background {
		padding: 0 0 2.5rem 0;
	}

	#hero h1 {
		font-size: 3rem;
	}

	#hero p {
		font-size: 1.15rem;
	}

	#hero .desc {
		padding-right: 3rem;
	}

	#data-search-form {
		width: 80%;
	}

	#data-search-form input {
		padding: 0px 15px;
		font-size: 1.15rem;
	}

	#data-search-form button {
		padding: 3px 9px;
		margin: 3px;
		font-size: 1.5rem;
	}

	#layanan-panel .card h3 {
		font-size: 1.5rem;
	}

	#layanan-panel p {
		font-size: 1.25rem;
	}

	#kategori-panel .column-5 {
		width: calc(100% / 5);
	}

	#data-dokter-panel .filter-section {
		width: 60%;
	}

	#data-dokter-panel .input-group-wrapper-2 {
		width: 70%;
	}

	#data-dokter-panel .dokter-card h5 {
		font-size: 1.5rem;
	}

	#footer {
		background-color: var(--primary);
		color: #fff;
		padding: 2rem 0;
	}

	#footer .navbar-brand p {
		margin-bottom: 0;
		font-size: 2.4rem;
	}

	#footer .navbar-brand span {
		font-size: 0.75rem;
	}

	#footer .contact {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}

	#footer .powered-by {
		column-gap: 0.8rem;
		row-gap: 1.2rem;
	}
}