:root {
           --hijau-tua: #0f4c3a;
           --hijau-muda: #2d8a2d;
           --hijau-cerah: #4caf50;
           --orange: #ff6b35;
           --orange-muda: #ff8c5a;
           --putih: #ffffff;
           --abu-muda: #f8f9fa;
           --abu: #6c757d;
           --hitam: #212529;
           --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           --radius: 12px;
           --transition: all 0.3s ease;
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       html {
           scroll-behavior: smooth;
       }

       body {
           font-family: 'Poppins', sans-serif;
           line-height: 1.6;
           color: var(--hitam);
           overflow-x: hidden;
           background-color: var(--putih);
       }

       .container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 20px;
       }

       section {
           padding: 100px 0;
       }

       h1,
       h2,
       h3,
       h4 {
           font-weight: 700;
           line-height: 1.2;
           margin-bottom: 1rem;
       }

       h1 {
           font-size: 3.5rem;
       }

       h2 {
           font-size: 2.8rem;
           text-align: center;
           margin-bottom: 3rem;
           position: relative;
       }

       h2:after {
           content: '';
           position: absolute;
           bottom: -10px;
           left: 50%;
           transform: translateX(-50%);
           width: 80px;
           height: 4px;
           background: var(--orange);
           border-radius: 2px;
       }

       p {
           margin-bottom: 1.5rem;
       }

       .btn {
           display: inline-block;
           padding: 14px 32px;
           border-radius: 50px;
           font-weight: 600;
           text-decoration: none;
           transition: var(--transition);
           border: none;
           cursor: pointer;
           font-size: 1rem;
       }

       .btn-primary {
           background: var(--orange);
           color: var(--putih);
           box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
       }

       .btn-primary:hover {
           background: var(--orange-muda);
           transform: translateY(-3px);
           box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4);
       }

       .btn-secondary {
           background: transparent;
           color: var(--putih);
           border: 2px solid var(--putih);
       }

       .btn-secondary:hover {
           background: var(--putih);
           color: var(--hijau-tua);
       }

       /* Header & Navigation */
       header {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           z-index: 1000;
           transition: var(--transition);
           background: rgba(15, 76, 58, 0.9);
           backdrop-filter: blur(10px);
       }

       header.scrolled {
           background: rgba(15, 76, 58, 0.95);
           box-shadow: var(--shadow);
       }

       .navbar {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 1.2rem 0;
       }

       .logo {
           font-size: 1.8rem;
           font-weight: 800;
           color: var(--putih);
           text-decoration: none;
       }

       .logo span {
           color: var(--orange);
       }

       .nav-menu {
           display: flex;
           list-style: none;
       }

       .nav-item {
           margin-left: 2rem;
       }

       .nav-link {
           color: var(--putih);
           text-decoration: none;
           font-weight: 500;
           transition: var(--transition);
           position: relative;
       }

       .nav-link:after {
           content: '';
           position: absolute;
           bottom: -5px;
           left: 0;
           width: 0;
           height: 2px;
           background: var(--orange);
           transition: var(--transition);
       }

       .nav-link:hover {
           color: var(--orange);
       }

       .nav-link:hover:after {
           width: 100%;
       }

       .hamburger {
           display: none;
           cursor: pointer;
       }

       .bar {
           display: block;
           width: 25px;
           height: 3px;
           margin: 5px auto;
           transition: var(--transition);
           background-color: var(--putih);
       }

       /* Hero Section */
       .hero {
           height: 100vh;
           background: linear-gradient(rgba(15, 76, 58, 0.8), rgba(15, 76, 58, 0.9)), url('../assets/img/keindahan_kavling-wisata-sukamakmur.jpg');
           background-size: cover;
           background-position: center;
           background-attachment: fixed;
           display: flex;
           align-items: center;
           color: var(--putih);
           position: relative;
           overflow: hidden;
       }

       .hero-content {
           max-width: 700px;
           z-index: 2;
       }

       .hero h1 {
           font-size: 3rem;
           margin-bottom: 1.5rem;
           opacity: 0;
           animation: fadeInUp 1s ease forwards;
       }

       .hero p {
           font-size: 1.2rem;
           margin-bottom: 2rem;
           opacity: 0;
           animation: fadeInUp 1s ease 0.3s forwards;
       }

       .hero-buttons {
           display: flex;
           gap: 1rem;
           opacity: 0;
           animation: fadeInUp 1s ease 0.6s forwards;
       }

       .floating-elements {
           position: absolute;
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           overflow: hidden;
       }

       .floating-element {
           position: absolute;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 50%;
           animation: float 6s ease-in-out infinite;
       }

       .floating-element:nth-child(1) {
           width: 80px;
           height: 80px;
           top: 20%;
           left: 10%;
           animation-delay: 0s;
       }

       .floating-element:nth-child(2) {
           width: 120px;
           height: 120px;
           top: 60%;
           left: 80%;
           animation-delay: 2s;
       }

       .floating-element:nth-child(3) {
           width: 60px;
           height: 60px;
           top: 80%;
           left: 20%;
           animation-delay: 4s;
       }

       /* About Section */
       .about {
           background: var(--abu-muda);
           position: relative;
       }

       .about-content {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 4rem;
           align-items: center;
       }

       .about-image {
           position: relative;
           border-radius: var(--radius);
           overflow: hidden;
           box-shadow: var(--shadow);
           transform: perspective(1000px) rotateY(-5deg);
           transition: var(--transition);
       }

       .about-image:hover {
           transform: perspective(1000px) rotateY(0deg);
       }

       .about-image img {
           width: 100%;
           height: auto;
           display: block;
           transition: var(--transition);
       }

       .about-image:hover img {
           transform: scale(1.05);
       }

       .about-text h2 {
           text-align: left;
       }

       .about-text h2:after {
           left: 0;
           transform: none;
       }

       .about-features {
           margin-top: 2rem;
       }

       .feature-item {
           display: flex;
           align-items: center;
           margin-bottom: 1rem;
       }

       .feature-icon {
           width: 50px;
           height: 50px;
           background: var(--hijau-tua);
           color: var(--putih);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-right: 1rem;
           flex-shrink: 0;
       }

       /* Info Section */
       .info {
           background: linear-gradient(135deg, var(--hijau-tua) 0%, var(--hijau-muda) 100%);
           color: var(--putih);
           position: relative;
       }

       .info:before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.05)"/></svg>');
           background-size: cover;
       }

       .info h2 {
           color: var(--putih);
       }

       .info h2:after {
           background: var(--orange);
       }

       .info-card {
           background: rgba(255, 255, 255, 0.1);
           backdrop-filter: blur(10px);
           border-radius: var(--radius);
           padding: 3rem;
           box-shadow: var(--shadow);
           border: 1px solid rgba(255, 255, 255, 0.2);
       }

       .info-card h3 {
           font-size: 1.8rem;
           margin-bottom: 1.5rem;
           color: var(--orange);
       }

       .info-list {
           list-style: none;
       }

       .info-list li {
           padding: 0.8rem 0;
           position: relative;
           padding-left: 2.5rem;
       }

       .info-list li:before {
           content: '✓';
           position: absolute;
           left: 0;
           top: 0.8rem;
           width: 25px;
           height: 25px;
           background: var(--orange);
           color: var(--putih);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: bold;
       }

       /* Fasilitas Section */
       .fasilitas {
           background: var(--putih);
       }

       .fasilitas-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 2rem;
       }

       .fasilitas-card {
           background: var(--putih);
           border-radius: var(--radius);
           padding: 2.5rem 2rem;
           text-align: center;
           box-shadow: var(--shadow);
           transition: var(--transition);
           position: relative;
           overflow: hidden;
           z-index: 1;
       }

       .fasilitas-card:before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 0;
           background: linear-gradient(to bottom, var(--hijau-tua), var(--hijau-muda));
           transition: var(--transition);
           z-index: -1;
       }

       .fasilitas-card:hover:before {
           height: 100%;
       }

       .fasilitas-card:hover {
           transform: translateY(-10px);
           color: var(--putih);
       }

       .fasilitas-icon {
           width: 80px;
           height: 80px;
           background: var(--abu-muda);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 auto 1.5rem;
           font-size: 2rem;
           color: var(--hijau-tua);
           transition: var(--transition);
       }

       .fasilitas-card:hover .fasilitas-icon {
           background: rgba(255, 255, 255, 0.2);
           color: var(--putih);
       }

       .fasilitas-card h3 {
           font-size: 1.4rem;
           margin-bottom: 1rem;
       }

       /* Promo Section */
       .promo {
           background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
           color: var(--putih);
           text-align: center;
           position: relative;
           overflow: hidden;
       }

       .promo:before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
           background-size: cover;
       }

       .promo-content {
           position: relative;
           z-index: 1;
           max-width: 800px;
           margin: 0 auto;
       }

       .promo h2 {
           color: var(--putih);
           margin-bottom: 1.5rem;
       }

       .promo h2:after {
           background: var(--hijau-tua);
       }

       .promo-price {
           font-size: 4rem;
           font-weight: 800;
           margin: 2rem 0;
           text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
       }

       .promo-subtitle {
           font-size: 1.5rem;
           margin-bottom: 2rem;
           opacity: 0.9;
       }

       .promo-features {
           display: flex;
           justify-content: center;
           gap: 2rem;
           margin: 3rem 0;
           flex-wrap: wrap;
       }

       .promo-feature {
           background: rgba(255, 255, 255, 0.2);
           padding: 1.5rem;
           border-radius: var(--radius);
           backdrop-filter: blur(10px);
           border: 1px solid rgba(255, 255, 255, 0.3);
           min-width: 200px;
       }

       .promo-feature i {
           font-size: 2.5rem;
           margin-bottom: 1rem;
           display: block;
       }

       .countdown {
           background: rgba(15, 76, 58, 0.8);
           padding: 2rem;
           border-radius: var(--radius);
           margin: 2rem 0;
           display: inline-block;
           min-width: 300px;
       }

       .countdown-title {
           font-size: 1.2rem;
           margin-bottom: 1rem;
           font-weight: 600;
       }

       .countdown-timer {
           display: flex;
           justify-content: center;
           gap: 1rem;
       }

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

       .countdown-number {
           font-size: 2rem;
           font-weight: 800;
           background: var(--putih);
           color: var(--orange);
           width: 60px;
           height: 60px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 10px;
           margin-bottom: 0.5rem;
       }

       .countdown-label {
           font-size: 0.9rem;
           opacity: 0.9;
       }

       /* Harga Section */
       .harga {
           background: var(--abu-muda);
       }

       .harga-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
           gap: 3rem;
           max-width: 900px;
           margin: 0 auto;
       }

       .harga-card {
           background: var(--putih);
           border-radius: var(--radius);
           padding: 3rem 2.5rem;
           text-align: center;
           box-shadow: var(--shadow);
           transition: var(--transition);
           position: relative;
           overflow: hidden;
       }

       .harga-card.featured {
           transform: scale(1.05);
           border: 2px solid var(--orange);
       }

       .harga-card.featured:before {
           content: 'PREMIUM';
           position: absolute;
           top: 20px;
           right: -30px;
           background: var(--orange);
           color: var(--putih);
           padding: 0.5rem 3rem;
           transform: rotate(45deg);
           font-weight: 600;
           font-size: 0.9rem;
       }

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

       .harga-card.featured:hover {
           transform: scale(1.05) translateY(-10px);
       }

       .harga-header {
           margin-bottom: 2rem;
       }

       .harga-header h3 {
           font-size: 1.8rem;
           color: var(--hijau-tua);
       }

       .blok-badge {
           display: inline-block;
           background: var(--hijau-tua);
           color: var(--putih);
           padding: 0.5rem 1.5rem;
           border-radius: 50px;
           font-size: 0.9rem;
           font-weight: 600;
           margin-bottom: 1rem;
       }

       .harga-price {
           font-size: 2.8rem;
           font-weight: 800;
           color: var(--orange);
           margin: 1rem 0;
       }

       .harga-unit {
           font-size: 1rem;
           color: var(--abu);
           font-weight: normal;
       }

       .harga-features {
           list-style: none;
           margin: 2.5rem 0;
       }

       .harga-features li {
           padding: 0.8rem 0;
           border-bottom: 1px solid #eee;
           position: relative;
           padding-left: 2rem;
       }

       .harga-features li:before {
           content: '✓';
           position: absolute;
           left: 0;
           color: var(--hijau-tua);
           font-weight: bold;
       }

       .harga-features li:last-child {
           border-bottom: none;
       }

       /* Progress Bar Styles */
       .kavling-progress {
           background: rgba(15, 76, 58, 0.9);
           padding: 2rem;
           border-radius: var(--radius);
           margin: 2rem 0;
           text-align: center;
           border: 2px solid rgba(255, 255, 255, 0.3);
       }

       .progress-title {
           font-size: 1.3rem;
           font-weight: 600;
           margin-bottom: 1rem;
           color: var(--putih);
       }

       .progress-info {
           display: flex;
           justify-content: space-between;
           margin-bottom: 1.5rem;
           font-weight: 600;
       }

       .progress-sold {
           color: var(--orange);
           background: rgba(255, 107, 53, 0.2);
           padding: 0.5rem 1rem;
           border-radius: 20px;
           border: 1px solid var(--orange);
       }

       .progress-remaining {
           color: #4caf50;
           background: rgba(76, 175, 80, 0.2);
           padding: 0.5rem 1rem;
           border-radius: 20px;
           border: 1px solid #4caf50;
       }

       .progress-bar-container {
           position: relative;
           margin: 2rem 0;
       }

       .progress-bar {
           width: 100%;
           height: 20px;
           background: rgba(255, 255, 255, 0.2);
           border-radius: 10px;
           overflow: hidden;
           position: relative;
       }

       .progress-fill {
           height: 100%;
           background: linear-gradient(90deg, var(--orange), #ff8c5a);
           border-radius: 10px;
           width: 62.5%;
           /* 5/8 = 62.5% */
           transition: width 0.5s ease;
           position: relative;
           overflow: hidden;
       }

       .progress-fill:after {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           bottom: 0;
           right: 0;
           background-image: linear-gradient(-45deg,
                   rgba(255, 255, 255, 0.2) 25%,
                   transparent 25%,
                   transparent 50%,
                   rgba(255, 255, 255, 0.2) 50%,
                   rgba(255, 255, 255, 0.2) 75%,
                   transparent 75%,
                   transparent);
           background-size: 20px 20px;
           animation: moveStripes 1s linear infinite;
       }

       @keyframes moveStripes {
           0% {
               background-position: 0 0;
           }

           100% {
               background-position: 20px 0;
           }
       }

       .progress-markers {
           position: absolute;
           top: -10px;
           left: 0;
           width: 100%;
           display: flex;
           justify-content: space-between;
       }

       .marker {
           width: 20px;
           height: 20px;
           background: var(--putih);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 0.7rem;
           font-weight: 600;
           color: var(--hijau-tua);
           border: 2px solid var(--hijau-tua);
           transform: translateX(-50%);
           position: absolute;
       }

       .marker.sold {
           background: var(--orange);
           color: var(--putih);
           border-color: var(--orange);
       }

       .progress-status {
           margin-top: 1rem;
       }

       .status-text {
           font-size: 1.1rem;
           font-weight: 600;
           color: var(--putih);
           padding: 0.8rem 1.5rem;
           border-radius: 25px;
           background: rgba(255, 255, 255, 0.1);
           display: inline-block;
           animation: pulseStatus 2s infinite;
       }

       @keyframes pulseStatus {

           0%,
           100% {
               transform: scale(1);
               box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4);
           }

           50% {
               transform: scale(1.05);
               box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
           }
       }

       /* Responsive Design untuk Progress Bar */
       @media (max-width: 768px) {
           .kavling-progress {
               padding: 1.5rem;
           }

           .progress-title {
               font-size: 1.1rem;
           }

           .progress-info {
               flex-direction: column;
               gap: 0.5rem;
               align-items: center;
           }

           .marker {
               width: 16px;
               height: 16px;
               font-size: 0.6rem;
           }

           .status-text {
               font-size: 1rem;
               padding: 0.6rem 1.2rem;
           }
       }

       /* Q&A Section */
       .qna {
           background: var(--putih);
       }

       .qna-container {
           max-width: 800px;
           margin: 0 auto;
       }

       .qna-item {
           margin-bottom: 1.5rem;
           border-radius: var(--radius);
           overflow: hidden;
           box-shadow: var(--shadow);
       }

       .qna-question {
           background: var(--hijau-tua);
           color: var(--putih);
           padding: 1.5rem;
           cursor: pointer;
           display: flex;
           justify-content: space-between;
           align-items: center;
           transition: var(--transition);
       }

       .qna-question:hover {
           background: var(--hijau-muda);
       }

       .qna-question h4 {
           margin: 0;
           font-size: 1.2rem;
       }

       .qna-answer {
           padding: 0;
           max-height: 0;
           overflow: hidden;
           transition: var(--transition);
           background: var(--abu-muda);
       }

       .qna-answer.active {
           padding: 1.5rem;
           max-height: 500px;
       }

       .qna-action {
           text-align: center;
           margin-top: 3rem;
       }

       /* Footer */
       footer {
           background: var(--hijau-tua);
           color: var(--putih);
           padding: 4rem 0 2rem;
       }

       .footer-content {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 2rem;
           margin-bottom: 2rem;
       }

       .footer-column h3 {
           font-size: 1.4rem;
           margin-bottom: 1.5rem;
           color: var(--orange);
       }

       .footer-column p,
       .footer-column a {
           color: rgba(255, 255, 255, 0.8);
           margin-bottom: 0.8rem;
           display: block;
           text-decoration: none;
           transition: var(--transition);
       }

       .footer-column a:hover {
           color: var(--orange);
           padding-left: 5px;
       }

       .footer-bottom {
           text-align: center;
           padding-top: 2rem;
           border-top: 1px solid rgba(255, 255, 255, 0.1);
       }

       /* WhatsApp Floating Button */
       .whatsapp-float {
           position: fixed;
           bottom: 25px;
           right: 25px;
           width: 70px;
           height: 70px;
           background: #25D366;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
           cursor: pointer;
           z-index: 1000;
           transition: var(--transition);
           animation: pulse 2s infinite;
       }

       .whatsapp-float:hover {
           transform: scale(1.1);
       }

       .whatsapp-float i {
           font-size: 2rem;
           color: var(--putih);
       }

       /* Popup Styles */
       .popup {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.7);
           z-index: 2000;
           align-items: center;
           justify-content: center;
           padding: 20px;
       }

       .popup-content {
           background: var(--putih);
           border-radius: var(--radius);
           width: 100%;
           max-width: 500px;
           position: relative;
           animation: popupShow 0.4s ease;
           box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
           overflow: hidden;
       }

       @keyframes popupShow {
           from {
               opacity: 0;
               transform: scale(0.8) translateY(-50px);
           }

           to {
               opacity: 1;
               transform: scale(1) translateY(0);
           }
       }

       .popup-header {
           background: var(--hijau-tua);
           color: var(--putih);
           padding: 1.5rem;
           position: relative;
       }

       .popup-header h3 {
           margin: 0;
           font-size: 1.5rem;
       }

       .close {
           position: absolute;
           top: 1rem;
           right: 1.5rem;
           font-size: 1.8rem;
           cursor: pointer;
           color: var(--putih);
           transition: var(--transition);
       }

       .close:hover {
           color: var(--orange);
       }

       .popup-body {
           padding: 2rem;
       }

       .form-group {
           margin-bottom: 1.5rem;
       }

       .form-group label {
           display: block;
           margin-bottom: 0.5rem;
           font-weight: 500;
           color: var(--hitam);
       }

       .form-control {
           width: 100%;
           padding: 12px 15px;
           border: 1px solid #ddd;
           border-radius: 8px;
           font-family: 'Poppins', sans-serif;
           font-size: 1rem;
           transition: var(--transition);
       }

       .form-control:focus {
           outline: none;
           border-color: var(--hijau-tua);
           box-shadow: 0 0 0 3px rgba(15, 76, 58, 0.1);
       }

       textarea.form-control {
           min-height: 100px;
           resize: vertical;
       }

       /* Animations */
       @keyframes fadeInUp {
           from {
               opacity: 0;
               transform: translateY(30px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       @keyframes float {

           0%,
           100% {
               transform: translateY(0);
           }

           50% {
               transform: translateY(-20px);
           }
       }

       @keyframes pulse {
           0% {
               box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
           }

           70% {
               box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
           }

           100% {
               box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
           }
       }

       /* Responsive Design */
       @media (max-width: 992px) {
           h1 {
               font-size: 3rem;
           }

           h2 {
               font-size: 2.4rem;
           }

           .about-content {
               grid-template-columns: 1fr;
               gap: 3rem;
           }

           .about-text h2 {
               text-align: center;
           }

           .about-text h2:after {
               left: 50%;
               transform: translateX(-50%);
           }
       }

       @media (max-width: 768px) {
           section {
               padding: 80px 0;
           }

           h1 {
               font-size: 2.5rem;
           }

           h2 {
               font-size: 2rem;
           }

           .hamburger {
               display: block;
           }

           .hamburger.active .bar:nth-child(2) {
               opacity: 0;
           }

           .hamburger.active .bar:nth-child(1) {
               transform: translateY(8px) rotate(45deg);
           }

           .hamburger.active .bar:nth-child(3) {
               transform: translateY(-8px) rotate(-45deg);
           }

           .nav-menu {
               position: fixed;
               left: -100%;
               top: 70px;
               flex-direction: column;
               background: var(--hijau-tua);
               width: 100%;
               text-align: center;
               transition: var(--transition);
               box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
               padding: 2rem 0;
           }

           .nav-menu.active {
               left: 0;
           }

           .nav-item {
               margin: 1.5rem 0;
           }

           .hero-buttons {
               flex-direction: column;
               align-items: flex-start;
           }

           .harga-card.featured {
               transform: scale(1);
           }

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

       @media (max-width: 576px) {
           h1 {
               font-size: 2rem;
           }

           h2 {
               font-size: 1.8rem;
           }

           .container {
               padding: 0 15px;
           }

           .popup-content {
               margin: 0 10px;
           }
       }

       /* Responsive Fixes for Mobile Devices */
       @media (max-width: 480px) {

           /* General fixes */
           .container {
               padding: 0 15px;
               width: 100%;
               max-width: 100%;
               overflow-x: hidden;
           }

           body {
               overflow-x: hidden;
               width: 100%;
           }

           /* Hero section fixes */
           .hero h1 {
               font-size: 1.8rem;
               line-height: 1.3;
               margin-bottom: 1rem;
           }

           .hero p {
               font-size: 1rem;
               line-height: 1.5;
           }

           .hero-buttons {
               flex-direction: column;
               gap: 0.8rem;
               width: 100%;
           }

           .hero-buttons .btn {
               width: 100%;
               text-align: center;
               padding: 12px 20px;
           }

           /* Navigation fixes */
           .nav-menu {
               width: 100%;
               left: -100%;
           }

           .nav-menu.active {
               left: 0;
               width: 100%;
           }

           /* About section fixes */
           .about-content {
               grid-template-columns: 1fr;
               gap: 2rem;
           }

           .about-image {
               transform: none;
               margin: 0 -15px;
               width: calc(100% + 30px);
               max-width: calc(100% + 30px);
           }

           .about-image img {
               width: 100%;
               height: auto;
           }

           /* Info section fixes */
           .info-card {
               padding: 1.5rem;
               margin: 0 -15px;
               width: calc(100% + 30px);
               max-width: calc(100% + 30px);
           }

           /* Fasilitas grid fixes */
           .fasilitas-grid {
               grid-template-columns: 1fr;
               gap: 1rem;
               margin: 0 -5px;
           }

           .fasilitas-card {
               padding: 1.5rem 1rem;
               margin: 0 5px;
           }

           /* Promo section fixes */
           .promo-content {
               padding: 0 10px;
           }

           .promo-price {
               font-size: 2.2rem;
           }

           .promo-features {
               flex-direction: column;
               gap: 1rem;
           }

           .promo-feature {
               width: 100%;
               margin: 0 5px;
           }

           /* Harga section fixes */
           .harga-grid {
               grid-template-columns: 1fr;
               gap: 1.5rem;
               margin: 0 -5px;
           }

           .harga-card {
               padding: 1.5rem 1rem;
               margin: 0 5px;
               transform: none !important;
           }

           .harga-card.featured {
               transform: none !important;
           }

           .harga-card:hover {
               transform: none !important;
           }

           /* Progress bar fixes */
           .kavling-progress {
               margin: 1rem -15px;
               padding: 1.5rem;
               width: calc(100% + 30px);
               max-width: calc(100% + 30px);
           }

           .progress-bar-container {
               margin: 1rem 0;
           }

           .marker {
               width: 14px;
               height: 14px;
               font-size: 0.5rem;
           }

           /* Q&A fixes */
           .qna-container {
               margin: 0 -5px;
           }

           .qna-item {
               margin: 0 5px 1rem 5px;
           }

           .qna-question h4 {
               font-size: 1rem;
               line-height: 1.4;
           }

           /* Footer fixes */
           .footer-content {
               grid-template-columns: 1fr;
               gap: 1.5rem;
           }

           /* Popup fixes */
           .popup-content {
               margin: 20px 10px;
               width: calc(100% - 20px);
           }

           /* WhatsApp float */
           .whatsapp-float {
               bottom: 20px;
               right: 20px;
               width: 60px;
               height: 60px;
           }
       }

       /* Additional fixes for very small screens */
       @media (max-width: 360px) {
           .container {
               padding: 0 10px;
           }

           .hero h1 {
               font-size: 1.6rem;
           }

           .hero p {
               font-size: 0.9rem;
           }

           h2 {
               font-size: 1.5rem;
           }

           .promo-price {
               font-size: 1.8rem;
           }

           .harga-price {
               font-size: 2rem;
           }

           .btn {
               padding: 10px 20px;
               font-size: 0.9rem;
           }
       }

       /* Fix for horizontal scrolling */
       html,
       body {
           max-width: 100%;
           overflow-x: hidden;
       }

       * {
           box-sizing: border-box;
       }

       /* Ensure images don't cause overflow */
       img {
           max-width: 100%;
           height: auto;
       }

       /* Fix for text overflow */
       p,
       h1,
       h2,
       h3,
       h4,
       h5,
       h6 {
           word-wrap: break-word;
           overflow-wrap: break-word;
       }

       /* Specific fix for navigation on mobile */
       @media (max-width: 768px) {
           .navbar {
               padding: 1rem 0;
           }

           .logo {
               font-size: 1.5rem;
           }
       }

       /* Fix for floating elements on mobile */
       @media (max-width: 480px) {
           .floating-elements {
               display: none;
               /* Hide on very small screens to improve performance */
           }
       }

       /* Fix hero section height on mobile */
       @media (max-width: 480px) {
           .hero {
               height: 100vh;
               height: calc(var(--vh, 1vh) * 100);
               padding: 80px 0 40px;
           }

           .hero-content {
               padding-top: 20px;
           }
       }

       /* Ensure all sections have proper spacing */
       section {
           padding: 60px 0;
       }

       @media (max-width: 480px) {
           section {
               padding: 40px 0;
           }
       }

       /* Gallery Section */
       .gallery {
           background: var(--abu-muda);
           padding: 100px 0;
       }

       .gallery-subtitle {
           text-align: center;
           font-size: 1.2rem;
           color: var(--abu);
           margin-bottom: 3rem;
           max-width: 600px;
           margin-left: auto;
           margin-right: auto;
       }

       /* Slider Styles */
       .slider-container {
           position: relative;
           max-width: 1000px;
           margin: 0 auto 4rem;
           border-radius: var(--radius);
           overflow: hidden;
           box-shadow: var(--shadow);
       }

       .slider {
           position: relative;
           height: 500px;
           overflow: hidden;
       }

       .slide {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           opacity: 0;
           transition: opacity 0.5s ease;
       }

       .slide.active {
           opacity: 1;
       }

       .slide img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .slide-caption {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
           color: var(--putih);
           padding: 2rem;
           transform: translateY(100%);
           transition: transform 0.3s ease;
       }

       .slide.active .slide-caption {
           transform: translateY(0);
       }

       .slide-caption h3 {
           font-size: 1.5rem;
           margin-bottom: 0.5rem;
           color: var(--putih);
       }

       .slide-caption p {
           margin: 0;
           opacity: 0.9;
       }

       /* Slider Navigation */
       .slider-nav {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background: rgba(255, 255, 255, 0.9);
           border: none;
           width: 50px;
           height: 50px;
           border-radius: 50%;
           cursor: pointer;
           transition: var(--transition);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.2rem;
           color: var(--hijau-tua);
       }

       .slider-nav:hover {
           background: var(--putih);
           transform: translateY(-50%) scale(1.1);
       }

       .slider-nav.prev {
           left: 20px;
       }

       .slider-nav.next {
           right: 20px;
       }

       /* Slider Dots */
       .slider-dots {
           position: absolute;
           bottom: 20px;
           left: 50%;
           transform: translateX(-50%);
           display: flex;
           gap: 10px;
       }

       .dot {
           width: 12px;
           height: 12px;
           border-radius: 50%;
           background: rgba(255, 255, 255, 0.5);
           cursor: pointer;
           transition: var(--transition);
       }

       .dot.active {
           background: var(--putih);
           transform: scale(1.2);
       }

       .dot:hover {
           background: var(--putih);
       }

       /* Gallery Grid */
       .gallery-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 1.5rem;
           max-width: 1200px;
           margin: 0 auto;
       }

       .grid-item {
           position: relative;
           border-radius: var(--radius);
           overflow: hidden;
           box-shadow: var(--shadow);
           aspect-ratio: 1;
           cursor: pointer;
       }

       .grid-item img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: var(--transition);
       }

       .grid-overlay {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: linear-gradient(transparent, rgba(15, 76, 58, 0.8));
           color: var(--putih);
           display: flex;
           flex-direction: column;
           justify-content: flex-end;
           padding: 1.5rem;
           opacity: 0;
           transition: var(--transition);
       }

       .grid-item:hover .grid-overlay {
           opacity: 1;
       }

       .grid-item:hover img {
           transform: scale(1.1);
       }

       .grid-overlay h4 {
           font-size: 1.2rem;
           margin-bottom: 0.5rem;
           color: var(--putih);
       }

       .grid-overlay p {
           margin: 0;
           font-size: 0.9rem;
           opacity: 0.9;
       }

       /* Responsive Design for Gallery */
       @media (max-width: 992px) {
           .slider {
               height: 400px;
           }

           .gallery-grid {
               grid-template-columns: repeat(2, 1fr);
               gap: 1rem;
           }
       }

       @media (max-width: 768px) {
           .gallery {
               padding: 80px 0;
           }

           .slider-container {
               margin: 0 auto 3rem;
           }

           .slider {
               height: 300px;
           }

           .slide-caption {
               padding: 1.5rem;
           }

           .slide-caption h3 {
               font-size: 1.3rem;
           }

           .slider-nav {
               width: 40px;
               height: 40px;
               font-size: 1rem;
           }

           .gallery-grid {
               grid-template-columns: repeat(2, 1fr);
           }
       }

       @media (max-width: 480px) {
           .gallery {
               padding: 60px 0;
           }

           .slider {
               height: 250px;
           }

           .slide-caption {
               padding: 1rem;
           }

           .slide-caption h3 {
               font-size: 1.1rem;
           }

           .slide-caption p {
               font-size: 0.9rem;
           }

           .slider-nav {
               width: 35px;
               height: 35px;
               display: none;
               /* Hide arrows on very small screens */
           }

           .gallery-grid {
               grid-template-columns: 1fr;
               gap: 1rem;
               margin: 0 10px;
           }

           .grid-item {
               margin: 0 5px;
           }

           .grid-overlay {
               opacity: 1;
               /* Always show overlay on mobile */
               background: linear-gradient(transparent, rgba(15, 76, 58, 0.7));
           }
       }

       /* Auto-slide animation */
       @keyframes slide {

           0%,
           20% {
               opacity: 1;
               transform: translateX(0);
           }

           25%,
           45% {
               opacity: 0;
               transform: translateX(-100%);
           }

           50%,
           70% {
               opacity: 0;
               transform: translateX(100%);
           }

           75%,
           100% {
               opacity: 1;
               transform: translateX(0);
           }
       }