* { box-sizing: border-box; }
    body { font-family: Verdana, sans-serif; margin: 0; }
    .mySlides { display: none; }
    img { vertical-align: middle; }

    .slideshow-wrapper {
      position: relative;
	  width: 85%;
      /* max-width: 1000px; */
      margin: auto;
    }
	.hero-content-wrapper{
		top:150px;
	}
    .slideshow-container {
      position: relative;
      border-radius: 32px;
      overflow: hidden;
    }

	.contact-item a {
  display: inline-block;
  word-break: break-word; /* Pecah kata saat terlalu panjang */
  white-space: normal; /* Izinkan baris baru */
}



    .slide-wrapper img {
      width: 100%;
      height: 519px;
      object-fit: cover;
      border-radius: 32px;
    }

    .slide-wrapper {
      position: relative;
    }
	.caption-label .panjang {
	width: 4px;
	height: 30px;
	background: #B78F25;
	border-radius: 2px;
	/* margin-bottom: 8px; */
	}
.caption-label {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 16px;
  border-radius: 0px 10px 10px 0px;
  font-size: 14px;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.club-row {
  display: flex;
  align-items: center;
  gap: 8px; /* Jarak antara garis dan teks */
}

.panjang {
  width: 4px;
  height: 20px;
  background: #B78F25;
  border-radius: 2px;
}

.text-club {
  font-weight: bold;
  font-size: 20px;
}

    .dot-container {
      position: absolute;
      bottom: 20px;
      right: 20px;
      display: flex;
      gap: 8px;
      z-index: 10;
      /* background: rgba(255, 255, 255, 0.6); */
      padding: 5px 10px;
      border-radius: 12px;
    }

    .dot {
      cursor: pointer;
      width: 50px !important;
      height: 8px !important;
      background-color: #bbb;
      border-radius: 20px !important;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .dot-active, .dot:hover {
      background: linear-gradient(225deg, #B78F25 22.47%, #513F10 191.23%);
    }

    .fade {
      animation-name: fade;
      animation-duration: 3s;
    }

    @keyframes fade {
      from { opacity: .4 } 
      to { opacity: 1 }
    }

    @media only screen and (max-width: 600px) {
      .slide-wrapper img {
        height: 300px;
      }
    }

.logo-footer{
	height: 80px; 
}

#loader-bar {
    position: fixed;
    top: 56px; /* atur sesuai tinggi navbar */
    left: 0;
    width: 0%;
    height: 3px;
    background-color: #B78F25; /* warna loader */
    z-index: 1050;
    transition: width 0.2s ease-out;
}

.logo-img {
    width: 9rem; /* Default untuk mobile */
}

.text-dark{
	font-size: 16px !important;
}
.bg-maps{
	background-color: #F8F7F4;
}
.unit-non-rilis {
    /* filter: brightness(0.5); */
    position: relative;
    border-radius: 12px;
    overflow: hidden;
	z-index: 1000;
	background-color: gray;
}

.overlay-non-rilis {
    position: absolute; /* <== GANTI dari fixed ke absolute */
    inset: 0;
    z-index: 3;
    border-radius: 12px;
    text-align: center;
    padding: 20px;
    pointer-events: none;
	background-color: rgba(0, 0, 0, 0.4);
}



.unit-non-rilis::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1; /* lebih rendah dari overlay-non-rilis (z-index: 3) */
}

.unit-non-rilis .card-abu,
.unit-non-rilis .card-kecil,
.unit-non-rilis .text-type,
.unit-non-rilis .text-luas,
.unit-non-rilis .main-image-wrapper,
.unit-non-rilis .thumbnail-list {
    filter: brightness(0.5);
    pointer-events: none;
}



.icon-non-rilis {
    width: 110px;
    height: 110px;
}


.section-luas {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.luas-item {
    text-align: center;
}

.text-luas,
.text-angka {
    display: block;
    font-weight: 500;
}

.full-label {
    display: inline;
}
.short-label {
    display: none;
}

/* Mobile view */
@media (max-width: 576px) {
	.luas-item {
		width: 100px;
	}
    .full-label {
        display: none;
    }
    .short-label {
        display: inline;
    }

    .section-luas {
        justify-content: center;
    }
}


		.ms-2 {
			margin-left: 0rem;
		}
		.text-angka{
			color: #1E1E1E;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.card-abu{
			display: flex;
			width: 100%;
			padding: 24px;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			background-color: #F7F7F7;
		}
		.section-luas {
			display: flex;
			justify-content: center;
			gap: 10px;
			flex-wrap: wrap;
		}
		/* Default (desktop) */
.cluster-tabs {
	display: flex;
	justify-content: center;
	gap: 60px;
	margin: 30px 0;
	flex-wrap: wrap;
}

/* Mobile: ubah jadi horizontal scroll */
@media (max-width: 768px) {
	.slideshow-wrapper {
      position: relative;
	  width: 100% !important;
	}
	.logo-footer{
	height: 60px !important; 
}

	.dot-container {
    display: none;
  }
	.logo-img {
        width: 100px !important; /* Untuk tablet ke atas */
    }
	.btn-selengkapnya {
		width: 195px !important;
		padding: 10px !important;
		font-size: 14px !important;
	}
	.cluster-tabs-wrapper {
		position: relative;
	}

	.cluster-tabs {
		overflow-x: auto;
		display: flex;
		flex-wrap: nowrap;
		gap: 20px;
		padding: 10px 40px; /* space for arrows */
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.cluster-tab {
		flex: 0 0 auto;
		min-width: calc(100% / 3 - 10px);
		text-align: center;
		scroll-snap-align: start;
	}

	.tab-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: white;
		border: none;
		font-size: 20px;
		z-index: 2;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		cursor: pointer;
	}

	.tab-nav.left {
		left: 5px;
	}

	.tab-nav.right {
		right: 5px;
	}
}


		.cluster-tab {
			background: none;
			border: none;
			padding: 10px 0;
			font-size: 18px;
			font-weight: 500;
			color: rgba(149, 149, 149, 1);
			position: relative;
			cursor: pointer;
			outline: none;
		}
		.cluster-tab.active {
			color: #B78F25;
			font-weight: 600;
		}
		.cluster-tab.active::after {
			content: "";
			position: absolute;
			bottom: -5px;
			left: 0;
			right: 0;
			height: 3px;
			background-color: #B78F25;
			margin: auto;
			width: 100%;
		}
		.image-gallery {
			display: flex;
			gap: 40px;
			padding: 40px;
			flex-wrap: wrap;
			max-width: 1200px;
			margin: 0 auto;
			border-radius: 20px;
		}
		.main-image-wrapper {
			position: relative;
			flex: 1 1;
		}
		.main-image {
			width: 100%;
			height: 550px;
			object-fit: cover;
			border-radius: 20px;
		}
		.nav-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(255, 255, 255, 0.44);
			border-radius: 50%;
			width: 50px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-weight: bold;
			font-size: 20px;
			color: white;
			z-index: 10;
			border: 1px solid white;
		}
		.nav-btn.left {
			left: 40px;
		}
		.nav-btn.right {
		right: 40px;
		}
		.thumbnail-list {
			display: flex;
			gap: 5px;
			margin-top: 15px;
		}
		.thumbnail-list-atas {
			width: 100%;
			display: flex;
			gap: 18px;
			margin-top: 15px;
		}
		.thumbnail-list img {
			width: 103px;
			height: 103px;
			object-fit: cover;
			border-radius: 10px;
			cursor: pointer;
			transition: 0.3s;
			filter: brightness(0.5);
		}
		.thumbnail-list img.active {
			filter: brightness(1);
		}
		.thumbnail-list-atas img {
			width: 70px;
			height: 70px;
			object-fit: cover;
			border-radius: 10px;
			cursor: pointer;
			transition: 0.3s;
			filter: brightness(0.5);
		}
		.thumbnail-list-atas img.active {
			filter: brightness(1);
		}
		.thumb-overlay {
			position: relative;
			width: 103px;
			height: 103px;
			background-size: cover;
			background-position: center;
			border-radius: 10px;
			cursor: pointer;
			filter: brightness(0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 18px;
			font-weight: bold;
		}
		
		.thumb-count {
			background-color: rgba(0, 0, 0, 0.6);
			padding: 6px 12px;
			border-radius: 6px;
		}
		.thumb-wrapper {
			position: relative;
			width: 103px;
			height: 103px;
		}
		
		.thumb-wrapper img {
			width:103px;
			height:103px;
			object-fit: cover;
			border-radius: 10px;
			cursor: pointer;
			filter: brightness(0.5);
			transition: 0.3s;
		}
		
		.thumb-wrapper img.active {
			filter: brightness(1);
		}
		
		.thumb-count-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 10px;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 18px;
			pointer-events: none;
		}
		
		
		.text-type{
			color: #1E1E1E;
			font-size: 28px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			text-align: center;
			align-self: anchor-center;
		}
		.card-container {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			justify-content: flex-start;
		}
		.card-kecil {
			/* font-weight: 600; */
			place-content: center;
			display: flex;
			align-items: center;
			gap: 15px;
			font-size: 14px;
			border: 1px solid #D9D9D9;
			border-radius: 12px;
			padding: 11px;
			flex: 1 1 calc(34% - 16px);
			box-sizing: border-box;
			max-width: calc(35% - 16px);
		}
		@media (max-width: 576px) {
			.card-kecil {
				flex: 1 1 100%;
				max-width: 100%;
			}
			.card-container:has(.card-kecil:nth-child(2)) .card-kecil {
				flex: 1 1 calc(100% - 16px);
				max-width: calc(100% - 16px);
			}
			.card-container{
				justify-content: center;
			}
		}

		
		/* * {
			outline: 1px solid red;
		} */
		@keyframes dropFade {
			0% {
				top: 0;
				opacity: 1;
			}
			70% {
				opacity: 1;
			}
			100% {
				top: 80px;
				opacity: 0;
			}
		}
		@keyframes scroll-left {
			0% { transform: translateX(0); }
			100% { transform: translateX(-100%); }
		}
		@keyframes scroll-right {
			0% { transform: translateX(-100%); }
			100% { transform: translateX(0); }
		}
		@keyframes blink {
			0%   { opacity: 1; }
			50%  { opacity: 0; }
			100% { opacity: 1; }
		}
		#preloader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.8);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
		}
		#preloader img {
			width: 50px;
			height: 50px;
			animation: spin 2s linear infinite;
		}
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		.image-container {
			position: relative;
			overflow: hidden;
			border-radius: 30px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		.image-container img {
			width: 100%;
			height: auto;
			display: block;
			transition: transform 0.3s ease;
		}
		.image-container:hover{
			transform: scale(1.05);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
		}
		.image-container:hover img {
			transform: scale(1.1);
		}
		.image-lantai {
			perspective: 1000px;
			display: inline-block;
			width: 100%;
			height: auto;
			margin-top: 1rem;
		}
		.image-lantai img {
			width: 100%;
			height: auto;
			padding:10px;
			border-radius: 30px;
			transition: transform 0.5s ease, box-shadow 0.3s ease;
			transform-style: preserve-3d;
		}
		.image-lantai:hover img {
			transform: translateZ(50px) scale(1.05);
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
		}
		.h-620{
			height:620px;
		}
		.judul-berita{
			color: #000;
			font-size: 36px;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
		}
		
		.img-brosur{
			width:100%;
			height:auto;
			border-radius:50px;
		}
		.img-custom-height {
			max-height: 600px;
		}
		.text-lihat{
			color: #553E0D;
			font-size: 18px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.padding-left3{
			padding-left: 1rem;
		}
		.editor-container {
			width: 100%;
			max-width: 600px;
		}
		.editor-label {
			font-weight: bold;
			margin-bottom: 4px;
		}
		#editor {
			height: 150px;
		}
		.ql-toolbar {
			border-radius: 6px 6px 0 0;
		}
		.ql-container {
			border-radius: 0 0 6px 6px;
		}
		.tgl-5{
			width:18px;
		}
		.tgl-berita{
			top:115px;
			margin-left:10px;
			display: inline-flex;
			padding: 8px;
			align-items: flex-start;
			gap: 4px;
			border-radius: 4px;
			border: 1px solid #FFF;
			background: rgba(255, 255, 255, 0.64);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(8px);
			border: none;
		}
		.text-berita-kecil{
			color: #585858;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 24px;
		}
		.berita-kecil {
			width: 160px;
			height: 130px;
			object-fit: cover;
			border-radius: 10px;
			cursor: pointer;
			transition: 0.3s;
		}
		.small {
			font-size: 14px;
		}
		.small-tgl {
			font-size: 11px;
		}
		.text-tlp{
			color: #2A2626;
			font-size: 13px;
			font-style: normal;
			font-weight: 400;
			line-height: 32px;
			letter-spacing: 0.45px;
		}
		.contact-box{
			background: rgba(255, 255, 255, 0.56) !important;
			backdrop-filter: blur(30px);
		}
		/* .contact-item {
			flex-direction: row;
			text-align: left;
			align-items: flex-start;
		} */
		.text-open{
			color: #2A2626;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.news-overlay {
			bottom: 0;
			left: 0;
			width: 90%;
			background: rgba(255, 255, 255, 0.9);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			transform: translateY(20%);
		}
		.img-main-berita{
			width:586px;
			height:575px;
		}
		.text-tanggal-berita{
			color: #2A2626;
			text-align: justify;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: 28px;
			vertical-align: -webkit-baseline-middle;
		}
		.text-acara{
			color: #2A2626;
			text-align: justify;
			font-size: 19pxs;
			font-style: normal;
			font-weight: 300;
			line-height: 28px; 
		}
		.berita-overlay {
			position: absolute;
			bottom: -50px;
			left: 0;
			width: 90%;
			border-radius: 12px;
			border: 1px solid #FFF;
			background: rgba(255, 255, 255, 0.64);
			backdrop-filter: blur(22px);
			display: flex;
			width: 464px;
			padding: 24px;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			border:none;
		}
		#map_berita {
			height: 590px;
			width: 100%;
		}
		.text-berita{
			color: #2A2626;
			text-align: center;
			font-size: 36px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}
		.text-ikuti{
			color: #FFF;
			text-align: center;
			font-size: 22px;
			font-style: normal;
			font-weight: 300;
			line-height: normal;
		}
		.text-tetap{
			color: #FFF;
			text-align: center;
			font-size: 47px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.chevron-berita{
			font-size: 20px;
			place-self: stretch;
			width: 48px;
			height: 48px;
			padding: 10px 14px;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			border-radius: 100px;
			border: 1px solid #FFF;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(207, 207, 207, 0.56) 100%);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(16px);
		}
		.chevron-berita i {
			animation: blink 1s infinite;
		}
		.berita-bg {
			background-repeat: repeat;
			background-position: center;
			background-size: contain;
			height:695px;
			display: flex;
			align-items: center;
			color: white;
			overflow: hidden;
			margin-top: 4rem;
		}
		.margin-left3 {
			margin-left: 1rem;
		}
		input[type="range"]::-webkit-slider-runnable-track {
			height: 6px;
			background: white;
			border-radius: 5px;
		}
		input[type="range"]::-moz-range-track {
			height: 6px;
			background: white;
			border-radius: 5px;
		}
		input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			height: 24px;
			width: 24px;
			border-radius: 10px;
			background: #EBB72E !important;
			border: 4px solid #B78F25;
			cursor: pointer;
			margin-top: -9px;
		}
		input[type="range"]::-moz-range-thumb {
			height: 20px;
			width: 20px;
			border-radius: 50%;
			background: #198754;
			cursor: pointer;
			border: none;
		}
		.input-group-custom input[readonly] {
			display: flex;
			padding: 12px 20px;
			align-items: flex-start;
			gap: 12px;
			align-self: stretch;
			border-radius: 12px;
			background: #CFCFCF;
		}
		.input-text:focus {
			outline: none;
			box-shadow: none;
		}
		input[type=range] {
			background: #ffffff !important;
		}
		.input-group-custom .prefix-rp {
			background-color: #FFF;
			border: none;
			color: rgba(205, 205, 205, 1);
			font-weight: 300;
			font-size: 16px;
			padding-left: 20px;
			padding-right: 0px;
		}
		.input-group-custom .prefix-persen {
			background-color: #FFF;
			border: none;
			color: rgba(205, 205, 205, 1);
			font-weight: 300;
			font-size: 16px;
			padding-left: 0px;
			padding-right: 20px;
		}
		.input-group-custom .form-control {
			border: none;
			border-radius: 0 12px 12px 0;
			padding: 12px 20px;
			font-size: 16px;
			background: #FFF;
		}
		.input-group-custom .input-group-text {
			border-radius: 12px 0 0 12px;
		}
		.input-group-custom {
			border-radius: 12px;
			overflow: hidden;
		}
		.text-hasil-kecil{
			color: #3F3B3B;
			font-size: 12px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.text-hasil{
			color: #2A2626;
			font-size: 22px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.text-tekan{
			color: #2A2626;
			font-size: 16px;
			font-style: normal;
			font-weight: 300;
			line-height: normal;
		}
		.text-judul-hasil{
			color: #2A2626;
			font-size: 24px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.card-hasil {
			margin-top: 100px;
			border-radius: 12px;
			background-color: #fff;
			overflow: hidden;
			font-size: 14px;
			color: #222;
			max-width: 100%;
			border:none;
		}
		.card-header-custom {
			background-color:#DDBB60;
			padding: 16px 20px;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			font-weight: 600;
		}
		.card-body-custom {
			padding: 20px;
		}
		.section {
			margin-bottom: 20px;
		}
		.row-line {
			display: flex;
			justify-content: space-between;
			margin-top: 6px;
			color: #333;
		}
		.disclaimer {
			font-size: 12px;
			color: #666;
			margin-top: 16px;
			line-height: 1.4;
			text-align: center;
		}
		.text-pinjaman{
			color: #2A2626;
			font-size: 18px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.text-dp{
			color: #818181;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
		.card-hitung {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			min-height: 550px;
			text-align: center;
			position: relative;
			border: 0px;
			border-color: white;
			border-radius: 20px;
		}
		.card-hitung .text-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
		}
		.pembatas-vertikal {
			width: 1px;
			height: 100%;
			background-color: #EBB72E; 
		}
		.btn-hitung {
			display: flex;
			padding: 14px 24px;
			justify-content: center;
			align-items: center;
			gap: 8px;
			align-self: stretch;
			border-radius: 32px;
			background: #553E0D;
			color: #FFF;
			text-align: justify;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: 24px;
		}
		.btn-hitung:hover {
			background: #FFF;
			color: #B78F25;
			border: 1px solid #B78F25;
		}
		.btn-selengkapnya:hover {
			background: #FFF;
			color: #B78F25;
			border: 1px solid #B78F25;
		}
		.btn-selengkapnya {
			
			display: flex;
			padding: 14px 24px;
			justify-content: center;
			align-items: center;
			gap: 8px;
			align-self: stretch;
			border-radius: 32px;
			background: #553E0D;
			color: #FFF;
			text-align: justify;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 24px;
		}
		.btn-sukses {
			background-color: #D4AF37;
			color:white;
		}
		.btn-sukses:hover {
			background: #FFF;
			color: #D4AF37;
			border: 1px solid #D4AF37;
		}
		.btn-arrow {
			background-color: #553E0D;
			color:white;
		}
		.btn-arrow:hover {
			background: #FFF;
			color: #553E0D;
			border: 1px solid #553E0D;
		}
		.button-kirim:hover {
			background: #FFF !important;
			color: #D4AF37 !important;
			border: 1px solid #D4AF37 !important;
		}
		input[type=range] {
			height: 8px;
			background: #E0E0E0;
			border-radius: 5px;
			outline: none;
			appearance: none;
		}
		input[type=range]::-webkit-slider-thumb {
			appearance: none;
			width: 20px;
			height: 20px;
			background: #198754;
			border-radius: 50%;
			cursor: pointer;
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
		}
		.custom-select-wrapper {
			position: relative;
			display: inline-block;
			width: 100%;
		}
		.input-select {
			width: 100%;
			padding: 12px 40px 12px 20px;
			border-radius: 12px;
			border: 0;
			background: #FFF;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			font-size: 16px;
		}
		.input-select {
			color: #000;
		}
		.input-valid {
			color: #000;
		}
		.input-select:has(option:checked[value=""]) {
			color: #aaa;
		}
		.hidden {
			visibility: hidden;
		}		
		.custom-chevron {
			position: absolute;
			right: 16px;
			top: 50%;
			transform: translateY(-50%);
			pointer-events: none;
			color: #00684A;
			font-size: 18px;
		}
		.input-text{
			display: flex;
			padding: 12px 20px;
			align-items: flex-start;
			gap: 12px;
			align-self: stretch;
			border-radius: 12px;
			background: #FFF;
			border: none;
		}
		.form-label{
			color: #2A2626;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
		.text-keterangan-wrapper {
			display: flex;
			align-items: flex-start;
			text-align: left;
			width: 100%;
			gap: 4px;
		}
		.bintang-merah{
			color: #BB1515;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.margin-top4{
			margin-top: 2rem;
		}
		.margin-bottom3{
			margin-bottom: 1.8rem;
		}
		.margin-bottom5{
			margin-bottom: 3rem;
		}
		.marquee {
			white-space: nowrap;
			overflow: hidden;
			position: relative;
		}
		.marquee-content {
			display: inline-block;
			padding-left: 100%;
			animation: scroll-left 15s linear infinite;
		}
		.marquee-right .marquee-content {
			animation: scroll-right 15s linear infinite;
		}
		.img-fasilitas{
			width: 68px;
			height: 68px;
		}
		.facility-item {
			display: inline-block;
			color: white;
			padding: 1rem 1.5rem;
			border-radius: 50px;
			margin-right: 2rem;
			font-weight: bold;
			font-size: 24px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.projek-bg {
			height:600px;
			display: flex;
			color: white;
			overflow: hidden;
		}
		.text-temukan{
			color: #2A2626;
			font-size: 48px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.custom-img {
			float: right;
    		width: 85%;
			height: 587px;
			display: block;
			border-radius: 20px;
		}

		/* .image-wrapper {
			width: 1026px;
			height: 587px;
			position: relative;
		  }
		  
		  .image-wrapper img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		  } */
		  #page_projek {
			height: auto;
		}
		
		.image-wrapper {
			width: 100%;
			max-width: 1026px;
			height: auto;
			position: relative;
			margin-left: auto; /* Gambar ke kanan */
			margin-right: 0;
		}
		
		.image-wrapper img {
			width: 90%;
			height: 550px;
			object-fit: cover;
			display: block;
			border-radius: 50px;
		}
		
		/* Card overlay di sisi kiri gambar */
		.overlay-card {
			position: absolute;
			top: 50%;
			left: -60px;
			transform: translateY(65%);
			width: 380px;
			background: rgba(255, 255, 255, 0.85);
			padding: 20px;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
		}
		
		/* Typography */
		.overlay-title {
			font-size: 40px;
			font-weight: 600;
			/* margin-bottom: 10px; */
		}
		
		.overlay-description {
			font-size: 15px;
			color: #444;
		}
		
		.fade-up {
			opacity: 0;
			transform: translateY(30px);
			transition: all 0.8s ease-out;
		}
		.fade-up.visible {
			opacity: 1;
			transform: translateY(0);
		}
		.circle-h {
			width: 57px;
			aspect-ratio: 1 / 1;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background: var(--Puri-Gradient1, linear-gradient(225deg, #B78F25 22.47%, #513F10 191.23%));
			backdrop-filter: blur(6px);
			color: #FFF;
			font-size: 34px;
			font-weight: 700;
			margin-bottom: 5px;
			flex-shrink: 0;
		}
		.img-keunggulan{
			height: 35px;
			width: 35px;
		}
		.text-keunggulan-pg{
			color: #1E1E1E;
			font-size: 30px;
			font-style: normal;
			font-weight: 500;
			line-height: 58px;
		}
		.keunggulan-item {
			border-bottom: 2px solid #D9D9D9;
			padding-bottom: 15px;
			margin-bottom: 15px;
			border-radius: 0;
		}
		.keunggulan-item:last-of-type {
			border-bottom: none;
		}
		.keunggulan-item .text-detail {
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			transition: max-height 0.5s ease, opacity 0.4s ease;
		}
		.keunggulan-item:hover .text-detail {
			max-height: 500px;
			opacity: 1;
		}
		.keunggulan-item i {
			transition: transform 0.3s ease;
		}
		.keunggulan-item:hover i {
			transform: rotate(270deg);
		}
		.keunggulan-item:hover .text-judul {
			color: #B78F25;
		}
		.section-keunggulan .row > .col-lg-7,
		.section-keunggulan .row > .col-lg-5 {
			display: flex;
			flex-direction: column;
			height: 95.2%;
		}
		.section-keunggulan .row.h-100 {
			height: 100%;
		}
		.section-keunggulan .card-white {
			flex: 1;
			height: auto;
		}
		.section-keunggulan .card-white,
		.section-keunggulan .col-lg-5 img {
			height: 100%;
			transition: height 0.5s ease;
		}
		.section-keunggulan .col-lg-5 img {
			width: 100%;
			object-fit: cover;
			height: 100px;
			min-height: 100%;
			border-radius: 1rem;
		}
		.text-menciptakan{
			color: #1E1E1E;
			font-size: 32px;
			font-style: normal;
			font-weight: 500;
			line-height: 58px;
		}
		.text-judul{
			color:rgba(42, 38, 38, 1);
			font-size: 24px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.judul-active{
			color: #B78F25;
		}
		#map_mg {
			height: 590px;
			width: 100%;
		}
		.rumah-5{
			flex: 1 0 0;
			margin-left: 25px;
		}
		.text-terimakasih{
			color: #5F5E5E;
			text-align: center;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
		.text-sukses{
			color: #B78F25;
			font-size: 30px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.card-berhasil{
			display: flex;
			width: 650px;
			padding: 24px;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			height:auto !important;
		}
		.card-white{
			display: flex;
			width: 98%;
			padding: 24px;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
		}
		.keunggulan-bg {
			background-color: #F6F6F6 !important;
			background-repeat: repeat;
			background-position: center;
			background-size: contain;
			display: flex;
			align-items: center;
			color: white;
			overflow: hidden;
		}
		.text-green{
			color: #B78F25;
		}
		.text-sekedar{
			color: #FFF;
			font-size: 24px;
			font-style: normal;
			font-weight: 300;
			line-height: normal;
		}
		.tentang-bg {
			background-color: rgba(183, 143, 37, 1);
			background-repeat: repeat;
			background-position: center;
			background-size: contain;
			height:750px;
			display: flex;
			align-items: center;
			color: white;
			overflow: hidden;
		}
		.keluarga-wrapper {
			margin-top:90px;
			width: 100%;
			max-width: 520px;
			overflow: hidden;
			border-radius: 300px 300px 0 0;
			box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
			position: relative;
		}
		.keluarga-img {
			border: 0px solid;
			width: 100%;
			height: 650px;
			display: block;
			object-fit: cover;
			border-radius: 0% / 80%;
		}
		.img-visi-misi{
			width:100%; 
			height:100%; 
			object-fit:cover; 
			border-radius:20px;
		}
		.image-caption {
			right: 30px;
    		bottom: 100px;
			position: absolute;
			width: 300px;
			padding: 12px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			border-radius: 4px;
			background: rgba(255, 255, 255, 0.56);
			backdrop-filter: blur(10px);
			color:black;
		}
		.tentang-content h2 {
			font-size: 2.7rem;
		}
		.tentang-content p {
			font-size: 18px;
			line-height: 1.7;
			margin-bottom: 10px;
		}
		.btn-light {
			border-radius: 30px;
			font-weight: 600;
			transition: 0.3s;
		}
		.btn-light:hover {
			background-color: #B78F25;
			color: white;
		}
		.footer {
			display: flex;
			flex-direction: column;
			padding: 50px 100px;
			background: #553f0e;
			color: #fff;
		}
		.footer a:hover,
		.footer a:focus {
			color: #FFD700;
		}
		.footer a:active {
			color: #FFA500;
		}
		.footer-pg {
			color: #FFF;
			font-size: 14px;
			font-weight: 400;
			line-height: 16px;
			letter-spacing: 0.257px;
		}
		.text-footer {
			color: #FFF;
			font-size: 16px;
			font-weight: 200;
			line-height: 28px;
			letter-spacing: 0.3px;
			text-decoration: none;
		}
		.text-kunjungi {
			color: #FFF;
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 0.3px;
		}

		.img-feature{
			width:40px;
			height:40px;
		}
		#map {
			height: 590px;
			width: 100%;
		}
		.text-maps{
			color: #2A2626;
			text-align: justify;
			font-size: 18px;
			font-style: normal;
			font-weight: 200;
			line-height: 28px;
		}
		.text-mg{
			color: #2A2626;
			font-size: 32px;
			font-style: normal;
			font-weight: 800;
			line-height: normal;
		}
		.map-wrapper {
			position: relative;
		}
		.info-box {
			bottom: 25px;
			left: 20px;
			max-width: 650px;
			border-radius: 8px;
			background: rgba(255, 255, 255, 0.32) !important;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08) !important;
			backdrop-filter: blur(40px) ;
		}
		.button-kirim{
			width: 100%;
			display: flex;
			padding: 12px 28px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			align-self: stretch;
			border-radius: 32px;
			color:white;
			font-weight: 500;
		}
		.layout-input::placeholder {
			color: var(--Neutral-100, #B6B6B6);
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px;
		}
		.placeholder-input{
			color: var(--Neutral-100, #B6B6B6);
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px;
		}
		.layout-input{
			display: flex;
			height: 48px;
			padding: var(--l, 12px) 12px;
			align-items: center;
			align-self: stretch;
			border-radius: 20px;
			border: 1px solid var(--Neutral-100, #B6B6B6);
			background: var(--Neutral-White, #FFF);
		}
		.label-form{
			color: var(--Neutral-400, #494949);
			font-size: 16px;
			font-style: normal;
			font-weight: 700;
			line-height: 20px;
		}
		.background-box {
			background-size: cover;
			background-position: center;
			position: relative;
		}
		.text-lebih{
			color: var(--Neutral-600, #1E1E1E);
			text-align: justify;
			font-size: 20px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
		
		.background-kamar {
			background: var(--Puri-KuningTua, #553f0e);
			background-size: cover;
			background-position: center;
			position: relative;
		}
		.unit-card {
			border-radius: 20px;
			overflow: hidden;
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			transition: transform 0.5s ease;
			position: relative;
			cursor: pointer;
		}
		.unit-card:hover {
			transform: translateY(-30px);
		}
		.unit-card img {
			max-width: 100%;
			width: 100%;
			height: 400px;
			display: block;
			object-fit: cover;
			transition: transform 0.5s ease;
			transform-origin: left center;
		}
		.unit-card:hover img {
			transform: scale(1.1);
		}
		.unit-info {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 15px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: rgba(255, 255, 255, 0.6);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			border-top: 1px solid rgba(255,255,255,0.3);
		}
		.unit-info span {
			font-weight: 600;
			font-size: 16px;
			color: #333;
		}
		.circle-btn {
			border-radius: 50%;
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.3s ease;
		}
		.circle-btn:hover {
			background: #ddd;
		}
		.text-detail{
			color: rgba(149, 149, 149, 1);
			font-size: 16px;
			font-style: normal;
			font-weight: 300;
			line-height: normal;
			text-align: justify;
  			text-justify: inter-word;
		}
		.text-kamar{
			color: #2A2626;
			font-size: 44px;
			font-style: normal;
			font-weight: 500;
			line-height: 58px; 
		}
		.text-beragam{
			color: #2A2626;
			font-size: 34px;
			font-style: normal;
			font-weight: 500;
			line-height: 50px; 
		}
		.text-judul-brosur{
			color: #2A2626;
			font-size: 34px;
			font-style: normal;
			font-weight: 500;
			line-height: 50px; 
		}
		.text-feature{
			color: var(--Neutral-White, #FFF);
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.container {
			max-width: 1440px;
			margin: 0 auto;
			padding: 0 1rem;
		}
		.chevron-floating {
			position: absolute;
			top: 50%;
			left: 100%;
			transform: translateY(-50%) translateX(10px);
			display: flex;
			height: 130px;
			padding: 10px 12px;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			border-radius: 100px;
			background:rgba(255, 255, 255, 0.64);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(16px);
		}
		.chevron-floating img {
			position: relative;
			font-size: 28px;
			color:rgba(183, 143, 37, 1);
			animation: dropFade 2s ease-in-out infinite;
			opacity: 0;
		}
		.chevron-down-container {
			text-align: center;
			margin-top: 20px;
			display: flex;
			height: 116px;
			padding: 10px 12px;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
		}
		.chevron-animated {
			font-size: 32px;
			color: #B78F25;
			animation: bounceDown 2s infinite;
		}
		.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
			--bs-gutter-x: 0.1rem;
		}
		.custom-navbar {
			/* z-index: 1000; */
		}
		.nav-link,
		.navbar-brand {
			color: rgba(83, 83, 83, 1) !important;
			cursor: pointer;
		}
		.nav-link.active {
			font-weight: 600;
			border-bottom: 2px solid rgba(183, 143, 37, 1);
			color:rgba(183, 143, 37, 1) !important;
			padding-bottom: 3px;
		}
		.nav-link:hover {
			color:rgba(183, 143, 37, 1) !important;
		}
		body, html {
			height: 100%;
			margin: 0;
			font-family: 'Poppins';
		}
		.navbar {
			height:65px !important;
			background: transparent;
			transition: all 0.4s;
			background: rgba(255, 255, 255, 0.80);
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			/* z-index: 1001; */
		}
		.hero.loading {
			animation-duration: 2.2s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: shimmer;
			animation-timing-function: linear;
			background: #ddd;
			background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
			background-size: 1200px 100%;
		}
		
		@-webkit-keyframes shimmer {
			0% {
				background-position: -100% 0;
			}
			100% {
				background-position: 100% 0;
			}
		}
		
		.shimmer-img.loading {
			background: #ddd;
			background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
			background-size: 1200px 100%;
			animation: shimmer 2.2s linear infinite;
			display: block;
			width: 100%;
			height: auto;
		}
		
		@keyframes shimmer {
			0% {
				background-position: -1200px 0;
			}
			100% {
				background-position: 1200px 0;
			}
		}
		
		.cluster-content {
		scroll-margin-top: 100px; /* Sesuaikan agar elemen tidak tertutup header */
		}

		
		.hero {
			top: 2%;
			height: 95vh;
			display: flex;
			align-items: center;
			position: relative;
			color: white;
			background-size: cover;
			background-position: center;
		}
		.hero-content {
			position: relative;
			padding: 30px;
			border-radius: 15px;
			max-width: 100%;
			background: rgba(255, 255, 255, 0.64);
			backdrop-filter: blur(22px);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
		}
		.slider-nav {
			left:10%;
			bottom: 10%;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.bars-container {
			display: flex;
			gap: 15px;
		}
		.bar {
			width: 40px;
			height: 8px;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 10px;
			cursor: pointer;
			transition: background 0.3s, transform 0.3s;
		}
		.bar.active {
			background: var(--Puri-Gradient1, linear-gradient(225deg, #B78F25 22.47%, #513F10 191.23%));
			transform: scale(1.2);
		}
		.dots-container {
			display: flex;
			gap: 10px;
		}
		.dot {
			width: 15px;
			height: 15px;
			background-color: rgba(255, 255, 255, 0.5);
			border-radius: 50%;
			cursor: pointer;
			transition: background-color 0.3s ease, transform 0.3s ease;
		}
		.dot:hover {
			background-color: rgba(255, 255, 255, 0.8);
			transform: scale(1.2);
		}
		.dot.active {
			background-color: rgba(0, 255, 0, 0.8);
		}
		.hero-content-wrapper {
			position: relative;
		}
		.text-deskripsi-brosur{
			color: #959595;
			text-align: justify;
			font-size: 16px;
			font-style: normal;
			font-weight: 300;
			line-height: normal;
		}
		.features-wrapper {
			position: relative;
			border-radius: 24px;
			background: var(--Puri-Gradient1, linear-gradient(225deg, #B78F25 22.47%, #513F10 191.23%));
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
			overflow: hidden;
			z-index: 10;
			display: inline-flex;
			padding: 10px 0px;
			align-items: center;
		}
		.feature-item:last-child {
			border-right: none;
		}
		.feature-item {
			padding: 15px 45px;
			color: white;
			font-size: 14px;
			text-align: center;
			position: relative;
		}
		.feature-item::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			height: 70px;
			width: 2px;
			background-color: rgba(255, 255, 255, 255);
		}
		.feature-item:last-child::after {
			display: none;
		}
		#chatModal {
			padding: 15px;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.5);
			justify-content: center;
			align-items: center;
			z-index: 9999;
		}
		.chat-modal.show {
			display: flex;
		}
		.chat-modal {
			display: none;
			position: fixed;
			inset: 0;
			background-color: rgba(0,0,0,0.5);
			z-index: 9999;
			padding: 15px;
			justify-content: center;
			align-items: center;
			overflow: auto;
		}
		.chat-modal.show {
			display: flex;
		}
		.hubungi-box {
			background: white;
			border-radius: 20px;
			width: 100%;
			max-width: 900px;
			max-height: 90vh;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
		}
		.chat-body {
			flex-grow: 1;
		}
		.shadow-kotak {
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1)
		}
		.chat-body {
			overflow-y: auto;
			max-height: 80vh;
		}
		.text-admin{
			color: var(--Neutral-400, #494949);
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 20px;
		}
		.chat-box {
			width: 500px;
			border-radius: 12px;
			background: #fff;
			box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			margin-top: 30px;
			height: auto;
			max-height: 90vh;
			overflow-y: auto;
		}
		.img-hubungi{
			width: 100%;
			object-fit: cover;
			height: 100% !important;
		}
		.hubungi-box {
			width: 1500px;
			border-radius: 12px;
			background: #fff;
			box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}
		.divider {
			width: 100%;
			height: 0.5px;
			background-color: #B78F25 !important;
		}
		.text-chat{
			color: #FFF;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.chat-header {
			background: var(--Puri-Coklat, linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #553E0D);
			padding: 10px 20px;
			color: white;
			font-weight: bold;
			font-size: 18px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.close-btn {
			cursor: pointer;
			font-size: 20px;
		}
		.chat-body {
			padding: 20px;
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
		.chat-input, .chat-textarea {
			border: 1px solid #d0d5dd;
			border-radius: 24px;
			padding: 10px 16px;
			width: 100%;
			font-size: 14px;
		}
		.chat-textarea::placeholder {
			color: var(--Neutral-100, #B6B6B6);
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px;
		}
		.chat-textarea {
			height: 120px;
			border-radius: 12px;
			resize: none;
		}
		.btn-tutup{
			background: white;
			color: #553E0D;
			border-color: #553E0D;
			border: 2px solid;
			border-radius: 24px;
			padding: 10px;
			font-weight: 600;
			cursor: pointer;
			transition: 0.3s ease;
		}
		.btn-tutup:hover {
			background: #FFF;
			color: #D4AF37;
			border: 1px solid #D4AF37;
		}
		.chat-btn {
			background: var(--Puri-Gradient1, linear-gradient(225deg, #B78F25 22.47%, #513F10 191.23%));
			color: white;
			border: none;
			border-radius: 24px;
			padding: 10px;
			font-weight: 600;
			cursor: pointer;
			transition: 0.3s ease;
		}
		.chat-btn:hover {
			background: #FFF;
			color: #D4AF37;
			border: 1px solid #D4AF37;
		}
		.swal2-container {
			z-index: 10000 !important;
		}
		.text-wa {
			position: fixed;
			bottom: 20px;
			right: 20px;
			border-radius: 32px;
			padding: 10px 20px;
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 16px;
			color: white;
			font-weight: 500;
			z-index: 1000;
			background: rgba(255, 255, 255, 0.64);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(22px);
			text-decoration: none;
		}
		.text-wa i {
			font-size: 24px;
		}
		.text-wa{
			color: #2A2626;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.navbar-nav{
			gap:30px;
		}
		.navbar-toggler {
			padding:10px;
			background-color: #553E0D;
			border-radius: 100px;
		    line-height: 0 !important;
		}
		.navbar-toggler-icon {
			width: 16px;
			height: 16px;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
		}
		.btn-hubungi{
			width: 150px;
			height:35px;
			display: flex;
			padding: 6px 20px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			align-self: flex-end;
			border-radius: 32px;
			background: var(--Puri-Gradient1, linear-gradient(225deg, #B78F25 22.47%, #513F10 191.23%));
			border: 0px;
		}
		.pg-puri{
			color: #2A2626;
			font-size: 42px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}
		.text-jelajah{
			border-radius: 32px;
			background: #D4AF37;
			border: 0px;
			padding: 14px 20px;
			justify-content: center;
			align-items: center;
			gap: 8px;
		}
		.text-unduh{
			border-radius: 32px;
			background: #553E0D;
			border: 0px;
			padding: 14px 20px;
			justify-content: center;
			align-items: center;
			gap: 8px;
		}
		@media (max-width: 1420px) {
			.thumbnail-list img {
				width: 109px !important;
				height: 109px !important;
			}
			
		}
		@media (max-width: 1400px) {
			.text-feature{
				font-size: 12px !important;
			}
			.features-wrapper{
				padding: 10px 10px;
			}
			.thumb-wrapper {
				width: 96px !important;
				height: 96px !important;
			}
		}
		@media (max-width: 1280px) {
			.unit-non-rilis {
				padding-right: 10px;
				padding-bottom: 20px;
				padding-left: 10px;
				padding-top: 20px;
			}
			html, body {
				overflow-x: hidden;
			}
			.pg-puri{
				font-size:33px;
			}
			.hunian{
				font-size:14px;
			}
			.text-jelajah {
				font-size: 12px;
			}
			.feature-item {
				padding: 15px 38px;
			}
			.features-wrapper{
				bottom: 4%;
			}
			.img-main-berita {
				width: 100%;
				height: 575px;
			}
			.berita-kecil{
				height: 130px;
			}
			.padding-left3{
				padding-left: 1rem;
				/* padding-top:10px; */
			}
			.thumbnail-list img {
				width: 89px !important;
				height: 89px !important;
			}
			.chevron-floating {
				left: 105%;
			}
			.text-dark{
				font-size: 16px !important;
			}
			.text-berita-kecil{
				font-size: 12px !important;
			}
			.main-image {
				height: 570px !important;
			}
			.unit-non-rilis .main-image {
				height: 590px !important;
				object-fit: cover;
			}
			.unit-non-rilis .thumb-wrapper {
				width: 90px !important;
				height: 90px !important;
			}
			
		}
		@media (max-width: 1120px) {
			.pg-puri{
				font-size:33px;
			}
			.hunian{
				font-size:14px;
			}
			.text-jelajah {
				font-size: 12px;
			}
			.feature-item {
				padding: 5px 20px;
			}
			/* .features-wrapper {
				padding: 5px 10px;
				bottom: 2%;
				border-radius: 15px;
			} */
			.text-feature {
				font-size: 12px !important;
			}
			.img-feature {
				width: 30px;
				height: 30px;
			}
			.feature-item::after {
				height: 50px;
				width: 1px;
			}
		}
		@media (max-width: 960px) {
			.feature-item {
				padding: 5px 10px;
			}
			.text-feature {
				font-size: 12px;
			}
			.img-feature{
				width:30px;
				height:30px;
			}
			.sec-rumah5{
				display: none !important;
			}
			.chevron-floating{
				left:64%;
			}
		}
		@media (max-width: 900px) {
			.chevron-floating{
				left:76%;
			}
			.overlay-card{
				left:0px !important;
			}
			.image-wrapper img {
				height: 450px;
			}
		}
		@media (max-width: 890px) {
			.chevron-floating{
				left:70%;
			}
		}
		@media (max-width: 840px) {
			.chevron-floating{
				left:72%;
			}
		}
		@media (max-width: 820px) {
			.chevron-floating{
				left:75%;
			}
		}
		@media (max-width: 798px) {
			.h-620{
				height:auto;
			}
			.chevron-floating{
				left:79%;
			}
			.pg-puri{
				font-size: 26px;
			}
			.hunian {
				font-size: 12px;
			}
			.text-feature{
				font-size: 12px;
			}
			.img-feature{
				width:30px;
				height:30px;
			}
			.feature-item {
				padding: 0px 9px;
			}
			.feature-item::after {
				height: 50px;
				width:1px;
			}
			.text-feature {
				font-size: 10px;
			}
			.keluarga-wrapper {
				margin-top: 25px;
			}
			.text-hidup{
				font-size:32px !important;
			}
			.image-caption{
				width:220px;
				font-size:11px;
				bottom: 35px;
			}
			#map_mg {
				height: 400px;
				width: 100%;
			}
			#map_berita {
				height: 400px;
				width: 100%;
			}
			#map {
				height: 400px;
				width: 100%;
			}
			.circle-h {
				width: 45px;
				font-size: 25px;
				margin-bottom: 10px;
			}
			.hunian{
				margin-top:10px;
			}
			.logo-pg{
				text-align-last: left;
			}
			.card-white{
				display: flex;
				width: 100%;
			}
			.img-keunggulan{
				height: 30px;
				width: 30px;
			}
			.text-keunggulan-pg {
				color: #1E1E1E;
				font-size: 25px;
				font-style: normal;
				font-weight: 500;
				line-height: 40px;
			}
			.text-judul {
				font-size: 20px;
			}
			.h-100 {
				height: 100% !important;
			}
			.tentang-content p {
				font-size: 1rem;
			}
			.sec-rumah5{
				display: none !important;
			}
			.text-temukan{
				font-size: 30px;
			}
			.projek-bg{
				height: 450px;
			}
			.padding-5{
				padding: 0px !important;
			}
			.padding-4{
				padding: 0px !important;
			}
			.facility-item {
				font-size: 18px;
			}
			.img-fasilitas{
				width:45px;
				height:45px;
			}
			.main-image {
				height: 300px !important;
			}
			.thumbnail-list img {
				width: 100px !important;
				height: 55px !important;
			}
			.margin-top4{
    			margin-top: 1rem !important;
			}
			.margin-bottom5{
				margin-bottom: 2.5rem!important
			}
			.cluster-tab{
				font-size:14px !important;
				padding:10px;
			}
			.cluster-tabs{
				gap: 15px !important;
			}
			.nav-btn.right {
				right: 15px !important;
			}
			.nav-btn.left {
				left: 15px !important;
			}
			.nav-btn {
				width: 40px !important;
				height: 40px !important;
			}
			.text-type{
				font-size:17px !important;
			}
			.text-luas.ms-5 {
				margin-left: 0px !important;
			}
			.text-bangunan.ms-5 {
				margin-left: 0px !important;
			}
			.text-luas{
				font-size: 16px !important;
			}
			.text-angka{
				font-size: 16px !important;
			}
			.ml-2 {
				margin-left: .5rem !important;
			}
			.form-label{
				font-size: 16px;
			}
			.text-tetap{
				font-size: 25px;
			}
			.text-ikuti{
				font-size: 16px;
			}
			.input-select:has(option:checked[value=""]) {
				font-size: 14px;
			}
			.hero-content {
				padding: 20px;
			}
			.hero {
				top: 0.5%;
				/* margin-top: 55px !important; */
				height: 31vh;
			}
			.margin-bottom3{
				margin-bottom: 0rem !important;
			}
		}
		@media (max-width: 768px) {
			.berita-bg {
				margin-top: 3rem!important
			}
			.navbar-brand {
				padding-top: 0px !important;
				padding-bottom: 0px !important;
			}
			.navbar {
				height: auto !important;
			}
			.unit-non-rilis .main-image {
				height: 300px !important;
			}
			.text-dark{
				font-size: 16px !important;
			}
			.news-content{
				font-size: 14px;
			}
			.judul-berita{
				font-size: 24px;
			}
			.img-kecil{
				width: 25px;
				height: 25px;
			}
			.card-container:has(.card-kecil:nth-child(2)) .card-kecil {
				flex: 1 1 calc(100% - 16px);
				max-width: calc(50% - 16px);
			}
			.card-abu {
				padding: 5px !important;
			}
			.footer {
				padding: 30px 20px;
			}
			.cluster-tab:first-child {
				margin-left: 100px;
			}
			.overlay-card {
				position: static; /* Mengubah posisi menjadi static */
				transform: none;
				width: auto; /* Lebar sesuai dengan ukuran gambar */
				max-width: 90%; /* Agar tidak lebih besar dari gambar */
				margin-top: 10px; /* Jarak antara gambar dan overlay */
				padding: 15px; /* Mengurangi padding jika perlu */
				box-shadow: none; /* Hilangkan shadow di mobile jika terlalu besar */
				transform: translateY(-150px);
			}
			#page_projek {
				height: 720px;
			}
		
			.image-wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		
			.image-wrapper img {
				width: 100%;
				height: 500px;
				border-radius: 30px;
			}
			.info-box{
				width: 250px !important;
				padding: 20px !important;
				margin-left: 20px !important;
			}
			.text-wa {
				padding: 15px 15px;
			}
			.img-visi-misi{
				height: auto;
			}
			.keluarga-img{
				height:auto;
			}
			.text-kamar {
        		font-size: 32px;
				line-height: 35px;
			}
			.text-lebih{
				font-size: 16px;
			}
			.margin-bottom3{
				margin-bottom: 2.25rem;
			}
			.img-custom-height {
				max-height: 300px;
			}
			.chat-modal {
				align-items: flex-start !important;
			}
			.padding-left3{
				padding-left: 0rem;
				padding-top:10px;
			}
			.hubungi-box {
				margin-top: 30px;
				height: auto;
				max-height: 90vh;
				overflow-y: auto;
			}
			.text-judul-hasil {
				font-size:22px;
			}
			.contact-overlay{
				display: none;
			}
			.berita-overlay {
				position: absolute;
				bottom: -20px;
				left: 5px;
				width: 80% !important;
				border-radius: 12px;
				border: 1px solid #FFF;
				background: rgba(255, 255, 255, 0.64);
				backdrop-filter: blur(22px);
				display: flex;
				width: 464px;
				padding: 24px;
				flex-direction: column;
				align-items: flex-start;
				gap: 20px;
				border: none;
			}
			.text-tanggal-berita {
				color: #2A2626;
				text-align: center;
				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				line-height: 0px;
				vertical-align: -webkit-baseline-middle;
			}
			.hero-content-wrapper{
				top: 190px !important;
			}
			.text-open {
				color: #2A2626;
				font-size: 18px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}
			.text-acara {
				color: #2A2626;
				text-align: justify;
				font-size: 14px;
				font-style: normal;
				font-weight: 300;
			}
			.img-main-berita {
				width: 586px;
				height: 500px;
			}
			.bar{
				background-color: rgb(177 177 177 / 30%) !important;
			}
			.features-wrapper {
				display: grid;
				grid-template-columns: 1fr 1fr;
				position: static;
				transform: none;
				margin: 20px auto;
				width: fit-content;
				border-radius: 16px;
				transform: translateX(0%);
				width: 100%;
				/* margin-top: 60%; */
			}
			.feature-item {
				border-right: none !important;
				border-bottom: 2px solid rgba(255, 255, 255, 0.5);
				padding: 15px;
			}
			.feature-item:nth-child(3),
			.feature-item:nth-child(4) {
				border-bottom: none;
			}
			.feature-item::after {
				display: none;
			}
		}
		@media (max-width: 640px) {
			.img-brosur{
				width: 100%;
				height: auto;
			}
			.pg-puri {
				font-size: 26px;
			}
			.hunian {
				font-size: 14px;
			}
			.feature-item {
				padding: 0px 9px;
			}
			.feature-item::after {
				height: 50px;
				width:1px;
			}
			.mt-3 {
				margin-top: 0.5rem !important;
			}
			.text-jelajah {
				font-size: 14px;
				padding: 5px 20px;

			}
			.mb-4 {
				margin-bottom: 1rem !important;
			}
			.tentang-bg{
				height: auto;
			}
			.keluarga-wrapper {
				margin-top: 25px;
			}
		}
		@media (max-width: 600px) {
			.chevron-floating {
				display:none;
			}
			.feature-item {
				padding: 10px 0;
				font-size: 13px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				width: 100%;
				box-sizing: border-box;
			}
			.feature-item::after {
				display: none;
			}
			.feature-item:last-child {
				border-bottom: none;
			}
			.text-beragam {
				font-size: 28px;
				line-height: 45px;
			}
			.text-judul-brosur {
				font-size: 27px;
				line-height: 45px;
			}
			.text-detail {
				font-size:14px;
				line-height: 20px;
			}
			.martop-5 {
				margin-top: 3rem !important;
			}
			.margin-top3{
    			margin-top: 0.5rem !important;
			}
			.unit-info{
				backdrop-filter: blur(0px);
				-webkit-backdrop-filter: blur(0px);
			}
			.unit-card img {
				height: 400px;
			}
			.text-beragam {
				font-size: 28px;
				line-height: 40px;
			}
			.text-judul-brosur {
				font-size: 27px;
				line-height: 40px;
			}
			.margin-top5{
				margin-top: 1.5rem !important;
			}
			.padding-5{
    			padding: 2rem !important;
			}
			.padding-4{
    			padding: 0.5rem !important;
			}
			.text-mg {
    			font-size: 18px;
			}
			.text-maps{
				font-size: 13px;
				line-height: 22px;
			}
			.info-box{
				width: 250px !important;
				padding: 20px !important;
				left: 0px !important;
				backdrop-filter: blur(60px) !important;
			}
			.layout-input::placeholder {
				font-size: 12px !important;
			}
			.margin-left3{
				margin-left: 0rem !important;
			}
			.navbar-nav {
				gap: 5px !important;
				padding: 15px;
			}
			.nav-link.active {
				border-bottom: 0px !important;
				padding-bottom: 0px !important;
			}
			#navbarNav{
				margin-bottom: 15px;
			}
			.tentang-bg{
				height: auto;
			}
			.keluarga-wrapper {
				margin-top: 25px;
			}
		}
		@media (max-width: 350px) {
			.pg-puri{
				font-size: 22px;
			}
			.hunian{
				font-size: 12px;
			}
			/* .features-wrapper{
				display: none;
			} */
		}