body { background: #f8f9fa; }
      .developments-bg-img {
        /* override background for this section, handled inline */
        position: relative;
      }
      .contact-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1;
      }
      .contact-content-container {
        position: relative;
        z-index: 2;
        padding: 80px 0;
        color: white;
      }
      .developments-carousel { min-height: 340px; }
      
      /* Styles for Carousel 1 (Normal) */
      #devCardContainer .dev-card,
      #devCardContainer2 .dev-card {
        display: flex;
        flex-direction: row;
        background: white;
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
        overflow: hidden;
        height: 500px;
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        backdrop-filter: blur(2px);
        animation: fadeInCard 0.5s cubic-bezier(.4,0,.2,1);
      }
      #devCardContainer2 .dev-card {
        flex-direction: row-reverse; /* Mirror the layout */
      }
      
      @keyframes fadeInCard {
        from { opacity: 0; transform: translateY(30px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      
      /* Normal carousel left content */
      #devCardContainer .dev-left {
        flex: 1.5;
        padding: 36px 32px 36px 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: white;
      }
      
      /* Mirrored carousel left content (appears on right) */
      #devCardContainer2 .dev-left {
        flex: 1.5;
        padding: 36px 36px 36px 32px; /* Adjusted padding for mirror */
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: right; /* Mirror text alignment */
        background: white;
      }
      
      .dev-title {
        font-size: 1.6rem;
        font-weight: 700;
        color: #6B1A1A;
        margin-bottom: 10px;
      }
      
      .dev-details {
        font-size: 1rem;
        color: #444;
        margin-bottom: 16px;
      }
      
      .dev-desc {
        background: rgba(0,0,0,0.05);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        color: #333;
        font-size: 0.95rem;
        line-height: 1.6;
        border-left: 3px solid #BD1921;
        height: 320px;
        overflow: hidden;
      }
      
      .dev-desc.desc-auto {
        height: auto;
        min-height: 80px;
        max-height: 320px;
        overflow: visible;
      }
      
      .dev-desc.desc-scroll {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #BD1921 #f1f1f1;
      }
      
      .dev-desc.desc-scroll::-webkit-scrollbar {
        width: 6px;
      }
      
      .dev-desc.desc-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }
      
      .dev-desc.desc-scroll::-webkit-scrollbar-thumb {
        background: #BD1921;
        border-radius: 3px;
      }
      
      .dev-desc.desc-scroll::-webkit-scrollbar-thumb:hover {
        background: #9d1419;
      }
      
      /* Visual indicator for scrollable descriptions */
      .dev-desc.desc-scroll {
        position: relative;
      }
      

      
      .dev-visit {
        background: #BD1921;
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 8px;
        padding: 12px 36px;
        box-shadow: 0 2px 8px #BD1921;
        border: none;
        text-decoration: none;
        transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
        margin-top: 10px;
        display: inline-block;
        align-self: flex-start;
      }
      .dev-visit2 {
        background: #BD1921;
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 8px;
        padding: 12px 36px;
        box-shadow: 0 2px 8px #BD1921;
        border: none;
        text-decoration: none;
        transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
        margin-top: 10px;
        display: inline-block;
        align-self: flex-start;
      }
      
      /* Mirror button alignment for second carousel */
      #devCardContainer2 .dev-visit .dev-visit2{
        align-self: flex-end;
      }
      
      
      .dev-visit:hover {
        background: #9d1419;
        box-shadow: 0 4px 16px #BD1921;
        transform: scale(1.05);
      }

      
      
      /* Normal carousel right content (image) */
      #devCardContainer .dev-right {
        flex: 1.2;
        position: relative;
        min-width: 360px;
        max-width: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      /* Mirrored carousel right content (image, appears on left) */
      #devCardContainer2 .dev-right {
        flex: 1.2;
        position: relative;
        min-width: 360px;
        max-width: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      @media (min-width: 901px) {
        #devCardContainer .dev-right {
          clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
        }
        #devCardContainer2 .dev-right {
          clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
        }
      }

      #devCardContainer .dev-right img,
      #devCardContainer2 .dev-right img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        border-radius: 0 20px 20px 0;
        box-shadow: 0 2px 16px rgba(0,0,0,0.12);
        display: block;
      }
      #devCardContainer2 .dev-right img {
        border-radius: 20px 0 0 20px; /* Mirrored border radius */
      }
      
      .nav-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,0.95);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: background 0.3s, box-shadow 0.3s;
      }
      
      .nav-btn:hover {
        background: #BD1921;
        color: #fff;
        box-shadow: 0 4px 16px #BD1921;
      }
      
      .nav-btn i {
        font-size: 1rem;
        color: #6B1A1A;
        transition: color 0.3s;
      }
      
      .nav-btn:hover i {
        color: #fff;
      }
      
      /* Responsive design */
      @media (max-width: 1024px) {
        /* Tablet dan iPad rules - semua harus scrolling */
        .dev-desc {
          height: 180px !important;
          overflow-y: auto !important;
          scrollbar-width: thin;
          scrollbar-color: #BD1921 #f1f1f1;
        }
        
        .dev-desc.desc-auto {
          height: 180px !important;
          min-height: auto !important;
          max-height: none !important;
          overflow-y: auto !important;
          overflow: auto !important;
        }
        
        .dev-desc.desc-scroll {
          height: 180px !important;
          overflow-y: auto !important;
        }
        
        .dev-desc::-webkit-scrollbar {
          width: 6px;
        }
        
        .dev-desc::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }
        
        .dev-desc::-webkit-scrollbar-thumb {
          background: #BD1921;
          border-radius: 3px;
        }
      }
      @media (max-width: 600px){
        .dev-coming-soon {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          width: 100%;
          margin-right: 50px;
        }
      }
      
      @media (max-width: 719px) {
        #devCardContainer .dev-card,
        #devCardContainer2 .dev-card { 
          flex-direction: column; 
          height: auto;
          min-height: auto;
        }

        #devCardContainer .dev-right,
        #devCardContainer2 .dev-right { 
          max-width: 100%; 
          min-width: 100%; 
          height: 220px; 
        }

        #devCardContainer .dev-right img,
        #devCardContainer2 .dev-right img { 
          border-radius: 0 0 20px 20px;
          height: 220px;
        }

        #devCardContainer .dev-left,
        #devCardContainer2 .dev-left { 
          padding: 28px 20px 20px 20px;
          text-align: center; /* Center align on mobile */
          align-items: center !important;
        }

        #devCardContainer .dev-visit,
        #devCardContainer2 .dev-visit .dev-visit2{
          align-self: center !important;
        }
        
        
        .dev-desc {
          height: 150px !important;
          overflow-y: auto !important;
          min-height: auto;
        }
        
        .dev-desc.desc-auto {
          height: 150px !important;
          min-height: auto !important;
          max-height: none !important;
          overflow-y: auto !important;
          overflow: auto !important;
          scrollbar-width: thin;
          scrollbar-color: #BD1921 #f1f1f1;
        }
        
        .dev-desc.desc-auto::-webkit-scrollbar {
          width: 6px;
        }
        
        .dev-desc.desc-auto::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }
        
        .dev-desc.desc-auto::-webkit-scrollbar-thumb {
          background: #BD1921;
          border-radius: 3px;
        }
        
        .dev-desc.desc-scroll {
          height: 150px !important;
          overflow-y: auto !important;
        }
      }
      
      @media (max-width: 600px) {
        #devCardContainer .dev-card,
        #devCardContainer2 .dev-card { 
          min-width: 90vw; 
        }
        .dev-btn-row {
          margin-left: 60px; 
        }
        
        #devCardContainer .dev-left,
        #devCardContainer2 .dev-left { 
          padding: 18px 10px 18px 10px; 
        }
        
        .dev-title { 
          font-size: 1.1rem; 
        }
        
        .dev-details { 
          font-size: 0.9rem; 
        }
        
        .dev-visit { 
          font-size: 0.9rem; 
        }
        .dev-visit2 { 
          font-size: 0.9rem; 
        }
        
        .dev-desc.desc-auto {
          height: 120px !important;
          min-height: auto !important;
          max-height: none !important;
          overflow-y: auto !important;
          scrollbar-width: thin;
          scrollbar-color: #BD1921 #f1f1f1;
        }
        
        .dev-desc.desc-auto::-webkit-scrollbar {
          width: 6px;
        }
        
        .dev-desc.desc-auto::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }
        
        .dev-desc.desc-auto::-webkit-scrollbar-thumb {
          background: #BD1921;
          border-radius: 3px;
        }
        
        .dev-desc.desc-scroll {
          height: 120px !important;
          overflow-y: auto !important;
        }
      }

      .developments-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 100px 0 60px;
    color: white;
    text-align: center;
}

.developments-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.developments-description {
    font-size: 1.2rem;
    opacity: 0.9;
}

.home-developments-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.developments-header {
    text-align: center;
    margin-bottom: 50px;
}

.gunawangsa-logo {
    margin-bottom: 20px;
}

.gunawangsa-logo img {
    height: 50px;
    width: auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    letter-spacing: 2px;
}

.view-all-developments {
    text-align: center;
    margin-top: 50px;
}

.view-all-btn {
    background: #BD1921;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.3s;
}

.view-all-btn:hover {
    background: #9d1419;
}

 .section-title-gold2 {
        color: #E7CB98;
        font-weight: 700;
        font-size: 2rem;
        text-align: center;
        margin-bottom: 2.5rem;
        letter-spacing: 1px;
    }