/* Fonts loaded via HTML for better performance */

:root {
     --sea-turquoise: #2C5F6F;
     --sand-gold: #C9A961;
     --deep-navy: #1A2B48;
     --soft-white: #F5F3F0;
     --warm-beige: #E8E4DF;
     --charcoal: #2D2D2D;
     /* Accessibility - Focus outline color */
     --focus-color: #C9A961;
}

/* ========== ACCESSIBILITY IMPROVEMENTS ========== */

/* Skip Link - Hidden but accessible via keyboard */
.skip-link {
     position: absolute;
     top: -100px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--deep-navy);
     color: #fff;
     padding: 1rem 2rem;
     z-index: 9999;
     text-decoration: none;
     font-weight: 600;
     border-radius: 0 0 8px 8px;
     transition: top 0.3s ease;
}

.skip-link:focus {
     top: 0;
     outline: 3px solid var(--sand-gold);
     outline-offset: 2px;
}

/* Focus Visible - Better keyboard navigation visibility */
*:focus-visible {
     outline: 3px solid var(--focus-color);
     outline-offset: 3px;
}

/* Remove outline for mouse users, keep for keyboard */
*:focus:not(:focus-visible) {
     outline: none;
}

/* Links and buttons focus states */
a:focus-visible,
button:focus-visible {
     outline: 3px solid var(--sand-gold);
     outline-offset: 3px;
     border-radius: 4px;
}

/* Nav links focus */
.nav-link:focus-visible {
     outline: 2px solid var(--sand-gold);
     outline-offset: 4px;
     background: rgba(201, 169, 97, 0.1);
     border-radius: 4px;
}

/* Reduced Motion - Respect user preferences */
@media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
     }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
     :root {
          --sand-gold: #FFD700;
          --deep-navy: #000;
     }

     .nav-link,
     .btn-primary-custom,
     .btn-outline-custom {
          border: 2px solid currentColor;
     }
}

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

body {
     font-family: 'Montserrat', sans-serif !important;
     font-weight: 300;
     color: #1e293b;
     background: #fff;
     overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 400;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
     width: 8px;
}

::-webkit-scrollbar-track {
     background: var(--soft-white);
}

::-webkit-scrollbar-thumb {
     background: var(--sand-gold);
     border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
     background: var(--deep-navy);
}

/* Logo SVG Styling */
.brand-logo {
     height: 50px;
     width: auto;
     transition: all 0.3s ease;
}

/* ตัวอักษร - เริ่มต้นสีขาว */
.logo-text {
     fill: #fff;
     transition: fill 0.3s ease;
}

/* คลื่น - เริ่มต้นสีขาว */
.logo-wave {
     fill: #fff;
     transition: fill 0.3s ease;
}

/* เมื่อ scroll: ตัวอักษร → สีน้ำเงิน */
.navbar.scrolled .logo-text {
     fill: var(--deep-navy);
}

/* เมื่อ scroll: คลื่น → สีทอง */
.navbar.scrolled .logo-wave {
     fill: var(--sand-gold);
}

/* Navbar */
.navbar {
     padding: 1.5rem 0 !important;
     transition: all 0.7s ease;
     background: transparent;
     z-index: 1030;
}

.navbar.scrolled {
     backdrop-filter: blur(10px);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
     padding: 1rem 0;
     background: #ffffffd4;
}

.navbar-brand {
     display: flex;
     align-items: center;
     gap: 12px;
}

.navbar-toggler i {
     color: #fff;
     transition: color 0.3s;
}

.navbar.scrolled .navbar-toggler i {
     color: var(--sand-gold);
}

.brand-icon {
     font-size: 1.8rem;
     color: #fff;
     transition: color 0.3s;
}

.navbar.scrolled .brand-icon {
     color: var(--sand-gold);
}

.brand-text {
     display: flex;
     flex-direction: column;
}

.brand-name {
     font-size: 1.5rem;
     letter-spacing: 0.3em;
     color: #fff;
     transition: color 0.3s;
}

.navbar.scrolled .brand-name {
     color: var(--deep-navy);
}

.brand-sub {
     font-size: 0.65rem;
     letter-spacing: 0.2em;
     color: rgba(255, 255, 255, 0.8);
     transition: color 0.3s;
}

.navbar.scrolled .brand-sub {
     color: #94a3b8;
}

.nav-link {
     color: #fff !important;
     font-size: 1rem;
     letter-spacing: 0.15em;
     padding: 0.5rem 0.8rem !important;
     transition: color 0.3s;
}

.navbar.scrolled .nav-link {
     color: #475569 !important;
}

.nav-link:hover {
     color: var(--sand-gold) !important;
}

.hero-section {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     background: linear-gradient(rgba(26, 43, 72, 0.5), rgba(26, 43, 72, 0.6)),
          url('https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=1920&q=80') center/cover no-repeat;
     background-attachment: scroll;
}



.hero-logo {
     max-width: 600px;
     width: 85%;
     height: auto;
     margin: 0 auto 5rem;
     animation: fadeIn 1.2s ease-out 0.6s both, float 6s ease-in-out infinite;
     filter: drop-shadow(0 15px 50px rgba(255, 255, 255, 1));
     position: relative;
}

.hero-tagline {
     font-size: clamp(1rem, 2.5vw, 1.4rem);
     letter-spacing: 0.4em;
     margin-bottom: 4rem;
     opacity: 1;
     animation: fadeInUp 1s ease-out 0.3s both;
     font-weight: 300;
     text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
     position: relative;
     display: inline-block;
     padding: 0 2rem;
}

.hero-tagline::before,
.hero-tagline::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 60px;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.hero-tagline::before {
     right: 100%;
     margin-right: 1rem;
}

.hero-tagline::after {
     left: 100%;
     margin-left: 1rem;
}

.hero-buttons {
     display: flex;
     gap: 1.5rem;
     justify-content: center;
     flex-wrap: wrap;
     animation: fadeInUp 1s ease-out 1.2s both;
     pointer-events: auto;
}

.hero-buttons button {
     pointer-events: auto;
}

.scroll-indicator {
     position: absolute;
     bottom: 3rem;
     left: 50%;
     transform: translateX(-50%);
     animation: bounce 2s infinite;
     z-index: 10;
}

/* Hero Gallery Layout */
.hero-gallery {
     display: flex;
     width: 100%;
     height: 100vh;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-item {
     position: relative;
     height: 100%;
     overflow: hidden;
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     background: transparent;
     flex-shrink: 0;
}

.hero-item.left,
.hero-item.right {
     flex: 0 0 20%;
}

.hero-item.center {
     flex: 0 0 60%;
     cursor: default;
}

.hero-item::after {
     content: '';
     position: absolute;
     right: 0;
     top: 0;
     width: 2px;
     height: 100%;
     background: linear-gradient(to bottom,
               transparent,
               rgba(201, 169, 97, 0.6) 20%,
               rgba(255, 255, 255, 0.8) 50%,
               rgba(201, 169, 97, 0.6) 80%,
               transparent);
     box-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
     z-index: 1;
     transition: opacity 0.3s ease;
}

.hero-item:last-child::after {
     display: none;
}

.hero-gallery.slide-left .hero-item.left {
     flex: 0 0 100%;
}

.hero-gallery.slide-left .hero-item.center,
.hero-gallery.slide-left .hero-item.right {
     flex: 0 0 0%;
     opacity: 0;
     pointer-events: none;
     overflow: hidden;
}

/* Slide to Right: ขวาเต็มหน้าจอ, ซ่อนกลาง+ซ้าย */
.hero-gallery.slide-right .hero-item.right {
     flex: 0 0 100%;
}

.hero-gallery.slide-right .hero-item.center,
.hero-gallery.slide-right .hero-item.left {
     flex: 0 0 0%;
     opacity: 0;
     pointer-events: none;
     overflow: hidden;
}

/* Hero Content - แสดงในตรงกลางเท่านั้น */
.hero-content {
     position: relative;
     z-index: 10;
     text-align: center;
     color: #fff;
     padding: 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
     opacity: 1;
     transition: opacity 0.5s ease;
}

/* ซ่อน hero-content เมื่อไม่ได้อยู่ตรงกลาง */
.hero-item.left .hero-content,
.hero-item.right .hero-content {
     display: none;
}

/* แสดง hero-content เมื่ออยู่ตรงกลาง */
.hero-item.center .hero-content {
     display: flex;
}

/* ซ่อน hero-content เมื่อ slide */
.hero-gallery.slide-left .hero-item.center .hero-content,
.hero-gallery.slide-right .hero-item.center .hero-content {
     opacity: 0;
     pointer-events: none;
}

/* Hero Overlay - แสดงเมื่อคลิก */
.hero-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, rgba(26, 43, 72, 0.95), rgba(26, 43, 72, 0.7) 60%, transparent);
     color: white;
     padding: 3rem clamp(1.5rem, 5vw, 3rem);
     /* Responsive side padding */
     padding-top: calc(100px + 2rem);
     /* Safe area for fixed navbar */
     padding-bottom: clamp(2rem, 5vh, 3rem);
     /* Bottom padding */
     transform: translateY(100%);
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 3;
     max-height: 100vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
     overscroll-behavior: contain;
     /* Prevent scroll chaining */
     box-sizing: border-box;
}

/* Scrollbar styling for hero-overlay */
.hero-overlay::-webkit-scrollbar {
     width: 6px;
}

.hero-overlay::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 3px;
}

.hero-overlay::-webkit-scrollbar-thumb {
     background: var(--sand-gold);
     border-radius: 3px;
}

.hero-overlay::-webkit-scrollbar-thumb:hover {
     background: #d4af6a;
}

/* แสดง overlay เมื่อ slide */
.hero-gallery.slide-left .hero-item.left .hero-overlay,
.hero-gallery.slide-right .hero-item.right .hero-overlay {
     transform: translateY(0);
}

.hero-overlay h3 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
     letter-spacing: 0.1em;
     font-family: 'Cormorant Garamond', serif;
     font-weight: 500;
}

.hero-overlay p {
     font-size: 1.2rem;
     opacity: 0.9;
     letter-spacing: 0.1em;
     font-weight: 300;
     margin-bottom: 2rem;
}

.hero-overlay-details {
     margin-top: 2rem;
}

.hero-overlay-details ul {
     list-style: none;
     padding: 0;
     text-align: left;
}

.hero-overlay-details li {
     font-size: 1.1rem;
     padding: 0.8rem 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: center;
     gap: 1rem;
     letter-spacing: 0.05em;
}

.hero-overlay-details li:last-child {
     border-bottom: none;
}

.hero-overlay-details i {
     color: var(--sand-gold);
     font-size: 1.3rem;
}

/* ซ่อน overlay ในตรงกลาง */
.hero-item.center .hero-overlay {
     display: none;
}

/* Navigation Dots for Mobile */
.hero-navigation {
     position: absolute;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
     display: none;
     gap: 0.5rem;
     z-index: 20;
}

.hero-nav-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.4);
     border: 2px solid rgba(255, 255, 255, 0.6);
     cursor: pointer;
     transition: all 0.3s ease;
}

.hero-nav-dot.active {
     background: var(--sand-gold);
     border-color: var(--sand-gold);
     transform: scale(1.3);
}

/* Animations - เก็บไว้ */
@keyframes float {

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

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

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

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

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

@keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
          transform: translateX(-50%) translateY(0);
     }

     40% {
          transform: translateX(-50%) translateY(-10px);
     }

     60% {
          transform: translateX(-50%) translateY(-5px);
     }
}


@keyframes pulse {

     0%,
     100% {
          opacity: 0.3;
          transform: scale(1);
     }

     50% {
          opacity: 0.6;
          transform: scale(1.1);
     }
}

.btn-primary-custom {
     background: #fff !important;
     color: var(--deep-navy) !important;
     padding: 1rem 2.5rem !important;
     letter-spacing: 0.15em;
     transition: all 0.5s !important;
     position: relative;
     overflow: hidden;
}

.btn-primary-custom:hover {
     background: var(--sand-gold) !important;
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-outline-custom {
     background: transparent;
     color: #fff;
     padding: 1rem 2.5rem;
     letter-spacing: 0.15em;
     font-size: 0.9rem;
     border: 1px solid #fff;
     transition: all 0.5s;
}

.btn-outline-custom:hover {
     background: #fff;
     color: var(--deep-navy);
}

/* Outline Button ใน Modal - สีเข้มเพื่อให้เห็นชัดบนพื้นขาว */
.modal-content .btn-outline-custom {
     color: var(--deep-navy);
     border: 2px solid var(--deep-navy);
     background: transparent;
}

.modal-content .btn-outline-custom:hover {
     background: var(--deep-navy);
     color: white;
     border-color: var(--deep-navy);
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(26, 43, 72, 0.3);
}

/* ========== HERO COUNTDOWN TIMER ========== */
.hero-countdown {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 0.5rem;
     margin: 1.5rem 0;
}

.countdown-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     padding: 0.8rem 1.2rem;
     border: 2px solid rgba(255, 255, 255, 0.3);
     min-width: 70px;
}

.countdown-number {
     font-size: 2rem;
     font-weight: 700;
     color: #fff;
     line-height: 1;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.countdown-label {
     font-size: 0.75rem;
     color: rgba(255, 255, 255, 0.9);
     margin-top: 0.3rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
}

.countdown-divider {
     font-size: 2rem;
     font-weight: 700;
     color: #fff;
     opacity: 0.6;
}

/* Outline Button ใน Payment Modal Promo Section */
.payment-promo-card .btn-outline-custom {
     color: var(--sand-gold);
     border: 2px solid var(--sand-gold);
     background: transparent;
     font-weight: 600;
}

.payment-promo-card .btn-outline-custom:hover {
     background: var(--sand-gold);
     color: white;
     border-color: var(--sand-gold);
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(201, 169, 97, 0.3);
}

.scroll-indicator {
     position: absolute;
     bottom: 3rem;
     left: 50%;
     transform: translateX(-50%);
     animation: bounce 2s infinite;
}

/* Elegant Divider */
.elegant-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2rem;
     padding: 3rem 0;
     background: #fff;
}

.divider-line {
     flex: 1;
     max-width: 200px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--sand-gold), transparent);
     opacity: 0.5;
}

.divider-ornament {
     width: 60px;
     height: 60px;
     border: 2px solid var(--sand-gold);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     background: #fff;
}

.divider-ornament::before {
     content: '';
     position: absolute;
     inset: -8px;
     border: 1px solid var(--sand-gold);
     border-radius: 50%;
     opacity: 0.3;
}

.divider-ornament i {
     font-size: 1.5rem;
     color: var(--sand-gold);
}

/* Section Styling */
section {
     padding: 8rem 0;
}


.section-header {
     text-align: center;
     margin-bottom: 5rem;
}

.section-label {
     display: inline-block;
     margin-bottom: 1.5rem;
}

.section-divider {
     width: 3rem;
     height: 1px;
     background: var(--sand-gold);
     margin: 0 auto 1rem;
}

.section-label-text {
     color: var(--sand-gold);
     font-size: 1rem;
     letter-spacing: 0.2em;
     font-weight: 400;
}

.section-title {
     font-size: clamp(2.5rem, 5vw, 4rem);
     letter-spacing: 0.1em;
     color: var(--deep-navy);
     margin-bottom: 2rem;
}

.section-description {
     font-size: 1.15rem;
     color: #64748b;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.8;
}

/* About Section */
.about-quote {
     color: var(--deep-navy);
     font-size: 1.3rem;
     font-style: italic;
     margin-top: 2rem;
}

.gallery-item {
     height: 400px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     background: linear-gradient(135deg, #1A2B48 0%, #2C4156 50%, #2C5F6F 100%);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     background-size: cover;
     background-position: center;
     /* GPU acceleration และ optimization */
     transform: translateZ(0);
     will-change: opacity;
     /* Content-visibility สำหรับประสิทธิภาพการ render */
     content-visibility: auto;
}

/* เพิ่ม lazy loading effect */
.gallery-item[data-loaded="false"] {
     background-image: none !important;
}

.gallery-item::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(45deg, rgba(201, 169, 97, 0.15) 0%, transparent 100%);
     opacity: 0;
     transition: opacity 0.6s ease;
}

.gallery-item:hover::before,
.gallery-item:focus-visible::before {
     opacity: 1;
}

/* Gallery item focus styles for keyboard navigation */
.gallery-item:focus-visible {
     outline: 3px solid var(--sand-gold);
     outline-offset: 4px;
}

.gallery-item:focus-visible .gallery-overlay {
     background: rgba(26, 43, 72, 0.65);
     backdrop-filter: blur(5px);
}

.gallery-item:focus-visible .gallery-icon {
     opacity: 1;
}

.gallery-overlay {
     position: absolute;
     inset: 0;
     background: rgba(26, 43, 72, 0.3);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: #fff;
     padding: 2rem;
     text-align: center;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: transform, background;
}

.gallery-item:hover .gallery-overlay {
     background: rgba(26, 43, 72, 0.65);
     backdrop-filter: blur(5px);
}

.gallery-icon {
     font-size: 3rem;
     opacity: 0;
     transition: opacity 0.5s;
     will-change: opacity;
}

.gallery-item:hover .gallery-icon {
     opacity: 1;
}

.gallery-title {
     font-size: 2rem;
     letter-spacing: 0.1em;
     margin: 1rem 0 0.5rem;
}

.gallery-desc {
     font-size: 0.9rem;
     letter-spacing: 0.15em;
     opacity: 0.9;
}

.gallery-accent {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: var(--sand-gold);
     transform: scaleX(0);
     transition: transform 0.7s;
     will-change: transform;
}

.gallery-item:hover .gallery-accent {
     transform: scaleX(1);
}

/* Units Section */
.unit-card {
     background: #fff;
     border: 1px solid #e2e8f0;
     transition: border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
     position: relative;
}


.unit-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.08), transparent);
     transition: left 0.6s ease;
     pointer-events: none;
     z-index: 1;
}

.unit-card:hover::after {
     left: 100%;
}


.unit-card:hover {
     border-color: var(--sand-gold);
     box-shadow: 0 20px 60px rgba(26, 43, 72, 0.15);
}

.unit-image {
     height: 320px;
     background: linear-gradient(135deg, #1A2B48 0%, #2C4156 50%, rgba(44, 95, 111, 0.4) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     background-size: cover;
     background-position: center;
     /* เพิ่ม GPU acceleration สำหรับ smooth rendering */
     transform: translateZ(0);
     will-change: transform;
}

.unit-image::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(26, 43, 72, 0.7), transparent 60%);
     transition: opacity 0.5s;
}

.unit-card:hover .unit-image::after {
     opacity: 0.5;
}

.unit-image::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 30% 50%, rgba(201, 169, 97, 0.12) 0%, transparent 70%);
}


.unit-card:hover .unit-icon {
     opacity: 0.4;
}

.unit-size {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: #fff;
     padding: 0.5rem 1rem;
     font-size: 0.85rem;
     letter-spacing: 0.1em;
}

.unit-body {
     padding: 2rem;
     position: relative;
     z-index: 2;
}

.unit-title {
     font-size: 1.5rem;
     color: var(--deep-navy);
     margin-bottom: 0.5rem;
     letter-spacing: 0.05em;
}

.unit-beds {
     font-size: 0.85rem;
     color: #94a3b8;
     letter-spacing: 0.1em;
     margin-bottom: 1.5rem;
}

.unit-features {
     list-style: none;
     padding: 0;
     margin-bottom: 1.5rem;
}

.unit-features li {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.9rem;
     color: #64748b;
     margin-bottom: 0.5rem;
}

.unit-features li::before {
     content: '';
     width: 4px;
     height: 4px;
     background: var(--sand-gold);
     display: block;
}

.unit-price {
     font-size: 1.8rem;
     color: var(--deep-navy);
     padding-top: 1.5rem;
     border-top: 1px solid #e2e8f0;
     margin-bottom: 1.5rem;
}

.btn-unit {
     letter-spacing: 0.15em !important;
     border: 1px solid var(--deep-navy) !important;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.btn-unit:hover {
     background: var(--deep-navy) !important;
     color: #fff !important;
     border-color: var(--deep-navy) !important;
}

/* Facilities Section */
.facility-item {
     text-align: center;
     padding: 1rem;
}

.facility-icon-wrapper {
     width: 100px;
     height: 100px;
     margin: 0 auto 1.5rem;
     position: relative;
}

.facility-icon-bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.12), rgba(44, 95, 111, 0.12));
     border-radius: 50%;
     transition: transform 0.5s;
}

.facility-item:hover .facility-icon-bg {
     transform: scale(1.1);
}

.facility-icon {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
     color: var(--sand-gold);
}

.facility-title {
     font-size: 1.2rem;
     color: var(--deep-navy);
     margin-bottom: 1rem;
     letter-spacing: 0.05em;
}

.facility-desc {
     font-size: 0.9rem;
     color: #64748b;
     line-height: 1.6;
}

/* Location Section */
.location-card {
     text-align: center;
     padding: 2rem;
     background: var(--soft-white);
     transition: all 0.5s;
}

.location-card:hover {
     background: #fff;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.location-icon {
     font-size: 2.5rem;
     color: var(--sand-gold);
     margin-bottom: 1rem;
}

.location-title {
     font-size: 1.2rem;
     color: var(--deep-navy);
     margin-bottom: 0.5rem;
}

.location-distance {
     font-size: 0.9rem;
     color: #64748b;
}

.map-placeholder {
     height: 400px;
     background: linear-gradient(135deg, rgba(232, 228, 223, 0.5), rgba(44, 95, 111, 0.15));
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     color: #64748b;
}

.map-placeholder i {
     font-size: 4rem;
     color: var(--sand-gold);
     margin-bottom: 1rem;
}

/* Contact Section */
.contact-section {
     background: linear-gradient(135deg, var(--deep-navy), #2C4156, var(--charcoal));
     color: #fff;
}

.contact-section .section-divider {
     background: rgba(255, 255, 255, 0.4);
}

.contact-section .section-label-text {
     color: rgba(255, 255, 255, 0.8);
}

.contact-section .section-title,
.contact-section .section-description {
     color: #fff;
}

.contact-section .section-description {
     opacity: 0.9;
}

.contact-info-card {
     text-align: center;
     padding: 1.5rem;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     transition: all 0.5s;
}

.contact-info-card:hover {
     background: rgba(255, 255, 255, 0.2);
}

.contact-info-icon {
     font-size: 2rem;
     margin-bottom: 1rem;
}

.contact-info-label {
     font-size: 0.85rem;
     letter-spacing: 0.15em;
     opacity: 0.8;
     margin-bottom: 0.5rem;
}

.contact-info-value {
     letter-spacing: 0.05em;
}

.contact-form-wrapper {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     padding: 3rem;
}

.form-control,
.form-select {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #fff;
     padding: 1rem 1.5rem;
     letter-spacing: 0.1em;
     font-size: 0.9rem;
}

.form-control::placeholder {
     color: rgba(255, 255, 255, 0.6);
}

.form-control:focus,
.form-select:focus {
     background: rgba(255, 255, 255, 0.15);
     border-color: #fff;
     color: #fff;
     box-shadow: none;
}

.form-select option {
     background: var(--deep-navy);
     color: #fff;
}

.btn-submit {
     width: 100%;
     background: #fff !important;
     color: var(--deep-navy) !important;
     padding: 1rem !important;
     letter-spacing: 0.15em !important;
     font-size: 0.9rem !important;
     border: none !important;
     transition: all 0.5s !important;
}

.btn-submit:hover {
     background: var(--sand-gold) !important;
     color: var(--deep-navy) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Footer */
footer {
     background: var(--deep-navy);
     color: #fff;
     padding: 4rem 0;
}

.footer-brand {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     margin-bottom: 1.5rem;
}

.footer-brand .logo-wave {
     fill: var(--sand-gold);
}

.footer-brand .logo-text {
     fill: var(--warm-beige);
}

.footer-tagline {
     color: rgba(255, 255, 255, 0.7);
     font-style: italic;
     font-size: 1.1rem;
     margin-bottom: 0.5rem;
}

.footer-sub {
     color: rgba(255, 255, 255, 0.5);
     font-size: 0.9rem;
}

.footer-links {
     display: flex;
     justify-content: center;
     gap: 3rem;
     margin: 3rem 0;
     flex-wrap: wrap;
}

.footer-links a {
     color: rgba(255, 255, 255, 0.6);
     text-decoration: none;
     font-size: 0.85rem;
     letter-spacing: 0.15em;
     transition: color 0.3s;
}

.footer-links a:hover {
     color: #fff;
}

.footer-divider {
     width: 6rem;
     height: 1px;
     background: rgba(255, 255, 255, 0.2);
     margin: 0 auto 1.5rem;
}

.footer-copyright {
     color: rgba(255, 255, 255, 0.4);
     font-size: 0.75rem;
     letter-spacing: 0.2em;
}

body,
html {
     overflow-x: hidden;
     max-width: 100vw;
}

.container {
     padding-left: 15px;
     padding-right: 15px;
}

.row {
     margin-left: -15px;
     margin-right: -15px;
}

/* Enhanced Modal Styling */
.modal-content {
     border: none;
     border-radius: 0;
     background: linear-gradient(135deg, #f8f9fa 0%, var(--soft-white) 100%);
     box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
}

.modal-header {
     border-bottom: 3px solid var(--sand-gold);
     padding: 2.5rem;
     background: white;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}

.modal-title {
     font-size: 2.2rem;
     color: var(--sand-gold);
     letter-spacing: 0.05em;
     font-weight: 500;
}

.modal-body {
     padding: 3rem;
     max-height: 75vh;
     overflow-y: auto;
}

.modal-body h4 {
     color: var(--deep-navy);
     margin-top: 2rem;
     margin-bottom: 1.5rem;
     font-size: 1.6rem;
     font-weight: 500;
     position: relative;
     padding-bottom: 0.5rem;
}

.modal-body h4::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 60px;
     height: 2px;
     background: var(--sand-gold);
}

.modal-body h5 {
     color: var(--deep-navy);
     margin-top: 1.5rem;
     margin-bottom: 1rem;
     font-size: 1.3rem;
}

.modal-body ul {
     line-height: 2;
}

.modal-body .alert {
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.15), rgba(201, 169, 97, 0.05));
     border: 2px solid var(--sand-gold);
     color: var(--deep-navy);
     border-radius: 0;
     padding: 1.5rem;
}

.modal-body .alert h5 {
     margin-top: 0;
     font-size: 1.8rem;
     color: var(--deep-navy);
}

.modal-body img {
     transition: transform 0.4s ease;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-body img:hover {
     transform: scale(1.03);
}

.btn-close {
     background: transparent;
     opacity: 0.6;
     transition: opacity 0.3s, transform 0.3s;
}

.btn-close:hover {
     opacity: 1;
     transform: rotate(90deg);
}

.bi-x-circle::before {
     vertical-align: -0.28rem !important;
}

/* Living Spaces Section */
.living-space-image {
     border-radius: 0;
     overflow: hidden;
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
     transition: transform 0.5s ease;
}

.living-space-image:hover {
     transform: scale(1.02);
}

.living-space-content {
     padding: 2rem;
}

/* Enhanced Gallery */
.gallery-icon {
     font-size: 4rem;
     opacity: 0;
     transition: opacity 0.4s, transform 0.4s;
     transform: scale(0.8);
}

.gallery-item:hover .gallery-icon {
     opacity: 1;
     transform: scale(1);
}

/* Smooth Transitions */
* {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal Close Button */
.modal-close-btn {
     position: absolute;
     top: 2rem;
     right: 2rem;
     width: 60px;
     height: 60px;
     background: transparent;
     backdrop-filter: none;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     z-index: 10;
     opacity: 0.7;
}

.modal-close-btn:hover {
     opacity: 1;
     transform: scale(1.1) rotate(90deg);
}

.modal-close-btn i {
     color: var(--sand-gold);
     font-size: 2rem;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}



body.modal-open {
     overflow: hidden !important;
}

.modal {
     overflow-y: auto !important;
}


.modal-backdrop {
     position: fixed;
}



.modal-body::-webkit-scrollbar {
     width: 8px;
}

.modal-body::-webkit-scrollbar-track {
     background: rgba(201, 169, 97, 0.1);
}

.modal-body::-webkit-scrollbar-thumb {
     background: var(--sand-gold);
     border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
     background: var(--deep-navy);
}

/* ========== NEW CONVERSION FEATURES CSS ========== */

/* Urgency Banner */
.urgency-banner {
     background: linear-gradient(90deg, rgba(220, 38, 38, 0.95), rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
     background-size: 200% 100%;
     animation: urgencyGradient 3s ease infinite;
     backdrop-filter: blur(10px);
     padding: 0.9rem 0;
     position: fixed;
     top: -100px !important;
     /* ซ่อนไว้ด้านบน - บังคับให้ซ่อนเสมอ */
     left: 0;
     right: 0;
     z-index: 1020;
     /* ต่ำกว่า navbar (1030) เพื่อให้ navbar-collapse ทะลุออกมา */
     box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
     transition: top 0.4s ease;
}

.urgency-banner.show {
     top: 90px !important;
     /* PC: แสดงด้านล่าง navbar พร้อมช่องว่าง 20px */
}

@keyframes urgencyGradient {

     0%,
     100% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }
}

.urgency-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1.5rem;
     color: white;
     font-size: 0.95rem;
     flex-wrap: wrap;
}

.urgency-content i {
     font-size: 1.5rem;
     animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

     0%,
     100% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.2);
     }
}

.units-left {
     font-size: 1.2rem;
     font-weight: 700;
     background: var(--warm-beige);
     color: #DC2626;
     padding: 0.2rem 0.7rem;
     animation: bounce 1s ease-in-out infinite;
     border-radius: 4px;
}

@keyframes bounce {

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

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

.btn-urgency {
     background: var(--soft-white);
     color: #DC2626;
     border: none;
     padding: 0.6rem 1.5rem;
     font-weight: 600;
     font-size: 0.9rem;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     vertical-align: middle;
     border-radius: 4px;
}

.btn-urgency i {
     font-size: 0.9rem;
     display: inline-flex;
     align-items: center;
}

.btn-urgency:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
     background: var(--soft-white);
}

/* Urgency Banner Close Button */
.urgency-close-btn {
     position: fixed;
     right: 1.5rem;
     top: 37px;
     transform: translateY(-50%);
     background: transparent;
     border: none;
     color: white;
     padding: 0.5rem;
     cursor: pointer;
     transition: all 0.3s ease;
     z-index: 1022;
     opacity: 0;
     pointer-events: none;
}

.urgency-close-btn.show {
     opacity: 0.8;
     pointer-events: auto;
}

.urgency-close-btn:hover {
     transform: translateY(-50%) scale(1.2);
     opacity: 1;
}

.urgency-close-btn i {
     font-size: 1.3rem;
     font-weight: 700;
}

/* ROI Calculator Card */
.roi-calculator-card {
     background: white;
     padding: 2.5rem;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.roi-calculator-card .form-label {
     color: var(--deep-navy);
     font-weight: 500;
     margin-bottom: 0.7rem;
     display: block;
}

.roi-calculator-card .form-control,
.roi-calculator-card .form-range {
     border: 2px solid #e2e8f0;
     padding: 0.8rem;
     transition: all 0.3s ease;
}

.roi-calculator-card .form-control:focus {
     border-color: var(--sand-gold);
     box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
}

.roi-results {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
}

.roi-result-card {
     background: white;
     padding: 2rem;
     display: flex;
     align-items: center;
     gap: 1.5rem;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roi-result-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.roi-result-card i {
     font-size: 2.5rem;
     color: var(--sand-gold);
}

.roi-result-card h3 {
     margin: 0;
     color: var(--deep-navy);
     font-size: 2rem;
     font-weight: 700;
}

.roi-result-card small {
     color: #64748b;
     font-size: 0.9rem;
}

.roi-highlights {
     background: white;
     padding: 2rem;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.roi-highlights ul li {
     color: #475569;
}

/* Testimonial Cards */
.testimonial-card {
     background: white;
     padding: 2rem;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 100%;
}

.testimonial-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-rating {
     margin-bottom: 1rem;
}

.testimonial-rating i {
     color: #FCD34D;
     font-size: 1.1rem;
     margin-right: 0.2rem;
}

.testimonial-text {
     font-style: italic;
     color: #475569;
     line-height: 1.8;
     margin-bottom: 1.5rem;
     font-size: 0.95rem;
}

.testimonial-author {
     border-top: 2px solid #e2e8f0;
     padding-top: 1rem;
}

.testimonial-author strong {
     display: block;
     color: var(--deep-navy);
     margin-bottom: 0.3rem;
}

.testimonial-author small {
     color: #94a3b8;
     font-size: 0.85rem;
}

/* Floating Action Buttons */
.floating-actions {
     position: fixed;
     bottom: 15rem;
     right: 2rem;
     z-index: 1030;
     width: 60px;
     /* กำหนดความกว้างคงที่ */
}

.floating-btn {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
     position: absolute;
     /* เปลี่ยนเป็น absolute */
     right: 0;
     overflow: hidden;
     text-decoration: none;
}

/* กำหนดตำแหน่งแต่ละปุ่ม */
.floating-btn:nth-child(1) {
     top: 0;
     /* ปุ่ม Chat */
}

.floating-btn:nth-child(2) {
     top: 71px;
     /* ปุ่ม Download (60px + 11px gap) */
}

.floating-btn:nth-child(3) {
     top: 142px;
     /* ปุ่ม Call (71px * 2) */
}

.floating-btn:hover {
     width: 160px;
     border-radius: 30px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
     z-index: 10;
     /* ยกขึ้นมาด้านบน */
}

.floating-btn i {
     font-size: 1.5rem;
     color: white;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     z-index: 2;
}

.floating-btn-text {
     position: absolute;
     right: 20px;
     color: white;
     font-weight: 600;
     font-size: 0.9rem;
     opacity: 0;
     transform: translateX(10px);
     transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     white-space: nowrap;
     z-index: 1;
}

.floating-btn:hover .floating-btn-text {
     opacity: 1;
     transform: translateX(0);
}

.floating-btn:hover i {
     position: absolute;
     left: 20px;
}

/* Floating Button Colors */
.floating-chat {
     background: linear-gradient(135deg, #25D366, #128C7E);
}

.floating-chat:hover {
     background: linear-gradient(135deg, #128C7E, #075E54);
}

.floating-download {
     background: linear-gradient(135deg, var(--sand-gold), #B8935A);
}

.floating-download:hover {
     background: linear-gradient(135deg, #B8935A, #A17F4E);
}

.floating-call {
     background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.floating-call:hover {
     background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

/* Lead Magnet Modal Specific Styles */
#leadMagnetModal .form-control,
#leadMagnetModal .form-select {
     background: #ffffff;
     border: 2px solid #e2e8f0;
     padding: 0.75rem 1rem;
     color: var(--deep-navy);
     font-size: 0.95rem;
     transition: all 0.3s ease;
}

#leadMagnetModal .form-control::placeholder {
     color: #94a3b8;
}

#leadMagnetModal .form-control:focus,
#leadMagnetModal .form-select:focus {
     background: #ffffff;
     border-color: var(--sand-gold);
     box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.1);
     outline: none;
     color: var(--deep-navy);
}

#leadMagnetModal .form-select option {
     background: #ffffff;
     color: var(--deep-navy);
     padding: 0.5rem;
}

#leadMagnetModal .form-label {
     font-weight: 500;
     color: var(--deep-navy);
     margin-bottom: 0.5rem;
     font-size: 0.9rem;
}

/* Contact Form Specific Styles */
#contact .form-control,
#contact .form-select,
#contact textarea.form-control {
     background: #ffffff;
     border: 2px solid #e2e8f0;
     padding: 0.9rem 1rem;
     color: var(--deep-navy);
     font-size: 0.95rem;
     transition: all 0.3s ease;
}

#contact .form-control::placeholder,
#contact textarea.form-control::placeholder {
     color: #94a3b8;
}

#contact .form-control:focus,
#contact .form-select:focus,
#contact textarea.form-control:focus {
     background: #ffffff;
     border-color: var(--sand-gold);
     box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.1);
     outline: none;
     color: var(--deep-navy);
}

#contact .form-select option {
     background: #ffffff;
     color: var(--deep-navy);
     padding: 0.5rem;
}

/* Payment Modal & Other White Background Modals */
#paymentModal .form-control,
#paymentModal .form-select,
#furnitureModal .form-control,
#furnitureModal .form-select,
#developerModal .form-control,
#developerModal .form-select,
.modal-content .form-control,
.modal-content .form-select {
     background: #ffffff;
     border: 2px solid #e2e8f0;
     padding: 0.75rem 1rem;
     color: var(--deep-navy);
     font-size: 0.95rem;
     transition: all 0.3s ease;
}

.modal-content .form-control::placeholder {
     color: #94a3b8;
}

.modal-content .form-control:focus,
.modal-content .form-select:focus {
     background: #ffffff;
     border-color: var(--sand-gold);
     box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1);
     outline: none;
     color: var(--deep-navy);
}

.modal-content .form-select option {
     background: #ffffff;
     color: var(--deep-navy);
     padding: 0.5rem;
}

/* Form Labels - General */
.form-label {
     font-weight: 500;
     color: var(--deep-navy);
     margin-bottom: 0.5rem;
     font-size: 0.9rem;
     display: block;
}

/* Textarea Specific */
textarea.form-control {
     min-height: 120px;
     resize: vertical;
}

/* Checkbox & Radio Styling */
.form-check-input {
     width: 1.2rem;
     height: 1.2rem;
     border: 2px solid #cbd5e1;
     cursor: pointer;
     transition: all 0.3s ease;
}

.form-check-input:checked {
     background-color: var(--sand-gold);
     border-color: var(--sand-gold);
}

.form-check-input:focus {
     box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.2);
     border-color: var(--sand-gold);
}

.form-check-label {
     cursor: pointer;
     user-select: none;
}

/* Select Arrow Styling */
.form-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 0.75rem center;
     background-size: 16px 12px;
     padding-right: 2.5rem;
}

/* Form Range (Sliders) Styling - สำหรับ Investment Modal */
.form-range {
     width: 100%;
     height: 0.5rem;
     background: linear-gradient(to right, #e2e8f0 0%, var(--sand-gold) 100%);
     outline: none;
     cursor: pointer;
}

.form-range::-webkit-slider-thumb {
     appearance: none;
     width: 1.5rem;
     height: 1.5rem;
     background: var(--sand-gold);
     border: 3px solid white;
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
}

.form-range::-webkit-slider-thumb:hover {
     transform: scale(1.1);
     box-shadow: 0 4px 12px rgba(201, 169, 97, 0.4);
}

.form-range::-moz-range-thumb {
     width: 1.5rem;
     height: 1.5rem;
     background: var(--sand-gold);
     border: 3px solid white;
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
}

.form-range::-moz-range-thumb:hover {
     transform: scale(1.1);
     box-shadow: 0 4px 12px rgba(201, 169, 97, 0.4);
}



.modal-lg {
     max-width: 900px;
}

.modal-xl {
     max-width: 1140px;
}

.modal-dialog-centered {
     display: flex;
     align-items: center;
     min-height: calc(100vh - 3.5rem);
}

/* ทำให้ modal เปิดนุ่มนวลขึ้น */
.modal-backdrop.fade {
     opacity: 0;
     transition: opacity 0.3s ease;
}

.modal-backdrop.show {
     opacity: 0.5;
}

/* Gallery Filter Buttons */
.gallery-filters {
     display: inline-flex;
     gap: 0.5rem;
     flex-wrap: wrap;
     justify-content: center;
}

.btn-filter {
     background: transparent;
     border: 1px solid var(--deep-navy);
     color: var(--deep-navy);
     padding: 0.6rem 1.5rem;
     letter-spacing: 0.15em;
     font-size: 0.85rem;
     transition: all 0.3s ease;
     font-weight: 400;
}

.btn-filter:hover {
     background: var(--deep-navy);
     color: #fff;
     border-color: var(--deep-navy);
}

.btn-filter.active {
     background: var(--sand-gold);
     color: var(--deep-navy);
     border-color: var(--sand-gold);
}

/* Active nav link style */
.nav-link.active {
     color: var(--sand-gold) !important;
     position: relative;
}

.nav-link.active::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 30px;
     height: 2px;
     background: var(--sand-gold);
}

/* Gallery Grid Animation */
.gallery-grid-item {
     opacity: 1;
     transform: scale(1);
}


/* Smooth scroll */
html {
     scroll-behavior: smooth;
}

/* ============================================
   DEVELOPER MODAL STYLES
   ============================================ */

.developer-modal-header {
     background: linear-gradient(135deg, var(--deep-navy), #2C4156);
     color: white;
     padding: 3rem;
     position: relative;
}

.modal-label {
     color: var(--sand-gold);
     font-size: 0.85rem;
     letter-spacing: 0.2em;
     margin-bottom: 0.5rem;
     font-weight: 400;
}

.modal-close-developer i {
     color: white;
}

.developer-profile-card {
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.15), rgba(44, 95, 111, 0.15));
     padding: 3rem;
     text-align: center;
     height: 100%;
}

.developer-logo-circle {
     width: 150px;
     height: 150px;
     background: white;
     border-radius: 50%;
     margin: 0 auto 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.developer-logo-circle i {
     font-size: 4rem;
     color: var(--sand-gold);
}

.developer-profile-card h4 {
     color: var(--deep-navy);
     margin-bottom: 0.5rem;
     font-size: 1.8rem;
}

.developer-subtitle {
     color: #64748b;
     font-size: 0.95rem;
     letter-spacing: 0.1em;
     margin-bottom: 0;
}

.developer-divider {
     width: 60px;
     height: 2px;
     background: var(--sand-gold);
     margin: 2rem auto;
}

.developer-stats {
     color: #64748b;
     line-height: 1.8;
     font-size: 0.9rem;
}

.developer-section-title {
     color: var(--deep-navy);
     margin-bottom: 1.5rem;
     font-size: 1.8rem;
     font-weight: 500;
}

.developer-section-title i {
     color: var(--sand-gold);
}

.developer-text {
     color: #64748b;
     line-height: 1.9;
     margin-bottom: 1.5rem;
}

.developer-quote-box {
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.1), rgba(201, 169, 97, 0.05));
     border-left: 4px solid var(--sand-gold);
     padding: 1.5rem;
     margin: 2rem 0;
}

.developer-quote-box p {
     color: var(--deep-navy);
     font-size: 1.2rem;
     font-style: italic;
     margin: 0;
     line-height: 1.8;
}

.developer-quote-box i {
     color: var(--sand-gold);
}

.developer-subsection-title {
     color: var(--deep-navy);
     margin-top: 2.5rem;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
}

.developer-subsection-title i {
     color: var(--sand-gold);
}

.core-value-card {
     padding: 1rem;
     background: white;
     border: 1px solid #e2e8f0;
     transition: all 0.3s ease;
     text-align: center;
}

.core-value-card:hover {
     border-color: var(--sand-gold);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     transform: translateY(-3px);
}

.core-value-card i {
     color: var(--sand-gold);
     font-size: 1.5rem;
     display: block;
     margin-bottom: 0.5rem;
}

.core-value-card p {
     color: #64748b;
     margin: 0;
     font-size: 0.9rem;
}

.developer-projects-section {
     background: var(--soft-white);
     padding: 3rem;
     margin-top: 2rem;
}

.developer-projects-title {
     color: var(--deep-navy);
     margin-bottom: 2rem;
     font-size: 1.8rem;
     text-align: center;
}

.developer-projects-title i {
     color: var(--sand-gold);
}

.project-card {
     background: white;
     padding: 1.5rem;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
}

.project-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.project-image {
     width: 100%;
     height: 150px;
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.2), rgba(44, 95, 111, 0.2));
     margin-bottom: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
}

.project-image i {
     font-size: 3rem;
     color: var(--sand-gold);
}

.project-card h6 {
     color: var(--deep-navy);
     margin-bottom: 0.5rem;
}

.project-card p {
     color: #64748b;
     font-size: 0.85rem;
     margin: 0;
}

/* ============================================
   INVESTMENT MODAL STYLES
   ============================================ */

.investment-modal-header {
     background: linear-gradient(135deg, var(--sea-turquoise), #2C5F6F);
     color: white;
     padding: 3rem;
     position: relative;
}

.modal-close-investment i {
     color: white;
}

.investment-intro {
     text-align: center;
     margin-bottom: 3rem;
     font-size: 1.1rem;
     color: #64748b;
     line-height: 1.8;
}

.investment-highlight-card {
     background: white;
     border: 2px solid #e2e8f0;
     padding: 2rem;
     text-align: center;
     transition: all 0.3s ease;
     height: 100%;
}

.investment-highlight-card:hover {
     border-color: var(--sand-gold);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transform: translateY(-5px);
}

.investment-yield-card {
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.1), rgba(44, 95, 111, 0.05));
     border-color: var(--sand-gold);
}

.highlight-icon {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.2), rgba(44, 95, 111, 0.2));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
}

.highlight-icon i {
     font-size: 2.5rem;
     color: var(--sand-gold);
}

.investment-highlight-card h5 {
     color: var(--deep-navy);
     font-size: 1.1rem;
     margin-bottom: 1rem;
}

.highlight-value {
     font-size: 1.5rem;
     color: var(--deep-navy);
     font-weight: 500;
     margin-bottom: 0.5rem;
}

.highlight-value-large {
     font-size: 3.5rem;
     color: var(--sand-gold);
     font-weight: 600;
     margin-bottom: 0.5rem;
     font-family: 'Cormorant Garamond', serif;
}

.investment-highlight-card p {
     color: #64748b;
     font-size: 0.9rem;
     margin: 0;
}

.investment-section-title {
     color: var(--deep-navy);
     font-size: 1.8rem;
     margin-bottom: 1.5rem;
     margin-top: 2rem;
}

.investment-section-title i {
     color: var(--sand-gold);
}

.investment-feature-card {
     background: white;
     border: 1px solid #e2e8f0;
     padding: 1.5rem;
     display: flex;
     gap: 1rem;
     align-items: flex-start;
     transition: all 0.3s ease;
}

.investment-feature-card:hover {
     border-color: var(--sand-gold);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transform: translateX(5px);
}

.investment-feature-card i {
     font-size: 2rem;
     color: var(--sand-gold);
     flex-shrink: 0;
}

.investment-feature-card h6 {
     color: var(--deep-navy);
     margin-bottom: 0.3rem;
     font-size: 1rem;
}

.investment-feature-card p {
     color: #64748b;
     font-size: 0.85rem;
     margin: 0;
}

.investment-channels {
     background: var(--soft-white);
     padding: 2rem;
     margin-top: 2rem;
}

.channels-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
     margin-top: 1.5rem;
}

.channel-badge {
     background: white;
     padding: 1.5rem 1rem;
     text-align: center;
     border: 2px solid #e2e8f0;
     transition: all 0.3s ease;
}

.channel-badge:hover {
     border-color: var(--sand-gold);
     transform: scale(1.05);
}

.channel-badge i {
     font-size: 2rem;
     color: var(--sand-gold);
     display: block;
     margin-bottom: 0.5rem;
}

.channel-badge span {
     color: var(--deep-navy);
     font-size: 0.9rem;
     font-weight: 500;
}

.investment-why-section {
     margin-top: 3rem;
}

.why-choose-card {
     text-align: center;
     padding: 1.5rem;
}

.why-icon {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.15), rgba(44, 95, 111, 0.15));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1rem;
     transition: all 0.3s ease;
}

.why-choose-card:hover .why-icon {
     background: linear-gradient(135deg, var(--sand-gold), var(--sea-turquoise));
     transform: scale(1.1);
}

.why-icon i {
     font-size: 2.5rem;
     color: var(--sand-gold);
     transition: color 0.3s ease;
}

.why-choose-card:hover .why-icon i {
     color: white;
}

.why-choose-card h6 {
     color: var(--deep-navy);
     margin-bottom: 0.5rem;
     font-size: 1.1rem;
}

.why-choose-card p {
     color: #64748b;
     font-size: 0.9rem;
     margin: 0;
}

.investment-cta {
     text-align: center;
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 2px solid #e2e8f0;
}

.btn-investment-cta {
     background: var(--deep-navy);
     color: white;
     padding: 1.2rem 3rem;
     font-size: 0.9rem;
     letter-spacing: 0.15em;
     border: none;
     transition: all 0.3s ease;
}

.btn-investment-cta:hover {
     background: var(--sand-gold);
     color: var(--deep-navy);
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ============================================
   TERMS & CONDITIONS MODAL STYLES
   ============================================ */

.terms-modal-header {
     background: linear-gradient(135deg, var(--charcoal), var(--deep-navy));
     color: white;
     padding: 3rem;
     position: relative;
}

.modal-close-terms i {
     color: white;
}

.terms-intro {
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.08), rgba(44, 95, 111, 0.08));
     padding: 2rem;
     margin-bottom: 2rem;
     border-left: 4px solid var(--sand-gold);
}

.terms-intro p {
     color: #64748b;
     line-height: 1.8;
     margin: 0;
}

.terms-section {
     margin-bottom: 3rem;
}

.terms-section-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
     padding-bottom: 1rem;
     border-bottom: 2px solid var(--sand-gold);
}

.terms-section-header i {
     font-size: 2rem;
     color: var(--sand-gold);
}

.terms-section-header h4 {
     color: var(--deep-navy);
     margin: 0;
     font-size: 1.6rem;
}

.terms-content ul {
     list-style: none;
     padding: 0;
}

.terms-content li {
     padding: 0.8rem 0;
     padding-left: 2rem;
     position: relative;
     color: #64748b;
     line-height: 1.8;
     border-bottom: 1px solid #e2e8f0;
}

.terms-content li:last-child {
     border-bottom: none;
}

.terms-content li::before {
     content: '•';
     position: absolute;
     left: 0;
     color: var(--sand-gold);
     font-size: 1.5rem;
     line-height: 1.2;
}

.payment-schedule-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1.5rem;
     margin-bottom: 1.5rem;
}

.payment-card {
     background: white;
     border: 2px solid #e2e8f0;
     padding: 1.5rem;
     text-align: center;
     transition: all 0.3s ease;
}

.payment-card:hover {
     border-color: var(--sand-gold);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transform: translateY(-5px);
}

.payment-step {
     background: var(--sand-gold);
     color: var(--deep-navy);
     padding: 0.3rem 0.8rem;
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.1em;
     display: inline-block;
     margin-bottom: 1rem;
}

.payment-card h6 {
     color: var(--deep-navy);
     margin-bottom: 1rem;
     font-size: 1rem;
}

.payment-amount {
     font-size: 2rem;
     color: var(--sand-gold);
     font-weight: 600;
     margin-bottom: 0.5rem;
     font-family: 'Cormorant Garamond', serif;
}

.payment-card p {
     color: #64748b;
     font-size: 0.85rem;
     margin: 0;
}

.payment-note {
     background: rgba(201, 169, 97, 0.1);
     padding: 1.5rem;
     display: flex;
     gap: 1rem;
     align-items: flex-start;
     border-left: 3px solid var(--sand-gold);
}

.payment-note i {
     font-size: 1.5rem;
     color: var(--sand-gold);
     flex-shrink: 0;
     margin-top: 0.2rem;
}

.payment-note p {
     color: #64748b;
     margin: 0;
     line-height: 1.7;
}

.terms-important-notes {
     background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.05));
     padding: 2rem;
     border: 2px solid #ffc107;
     margin-top: 2rem;
}

.important-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
}

.important-header i {
     font-size: 2rem;
     color: #ffc107;
}

.important-header h5 {
     color: var(--deep-navy);
     margin: 0;
     font-size: 1.4rem;
}

.terms-important-notes ul {
     list-style: none;
     padding: 0;
}

.terms-important-notes li {
     padding: 0.8rem 0;
     padding-left: 2rem;
     position: relative;
     color: #64748b;
     line-height: 1.8;
     border-bottom: 1px solid rgba(255, 193, 7, 0.2);
}

.terms-important-notes li:last-child {
     border-bottom: none;
}

.terms-important-notes li::before {
     content: '⚠';
     position: absolute;
     left: 0;
     color: #ffc107;
     font-size: 1.2rem;
}

.terms-contact-section {
     background: var(--soft-white);
     padding: 2rem;
     margin-top: 2rem;
     text-align: center;
}

.terms-contact-section h5 {
     color: var(--deep-navy);
     font-size: 1.5rem;
     margin-bottom: 1rem;
}

.terms-contact-section h5 i {
     color: var(--sand-gold);
     margin-right: 0.5rem;
}

.terms-contact-section>p {
     color: #64748b;
     margin-bottom: 2rem;
}

.terms-contact-info {
     display: flex;
     justify-content: center;
     gap: 3rem;
     flex-wrap: wrap;
}

.contact-item {
     display: flex;
     align-items: center;
     gap: 0.8rem;
}

.contact-item i {
     font-size: 1.5rem;
     color: var(--sand-gold);
}

.contact-item span {
     color: var(--deep-navy);
     font-weight: 500;
}

.terms-disclaimer {
     margin-top: 2rem;
     padding-top: 2rem;
     border-top: 2px solid #e2e8f0;
     text-align: center;
}

.terms-disclaimer p {
     color: #94a3b8;
     margin: 0;
}

.terms-disclaimer i {
     color: var(--sand-gold);
}

/* ============================================
   MOOD PALETTE CARDS
   ============================================ */
.mood-card {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 1rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
}

.mood-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.mood-card span {
     letter-spacing: 0.1em;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   PROJECT OVERVIEW SECTION
   ============================================ */
.project-overview-card {
     background: white;
     border: 2px solid var(--sand-gold);
     padding: 2rem;
     text-align: center;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
}

.project-overview-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.1), transparent);
     transition: left 0.5s ease;
}

.project-overview-card:hover::before {
     left: 100%;
}

.project-overview-card:hover {
     box-shadow: 0 10px 40px rgba(201, 169, 97, 0.3);
     transform: translateY(-5px);
}

.overview-icon {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, var(--sand-gold), #D4B876);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
}

.overview-icon i {
     font-size: 2.5rem;
     color: white;
}

.overview-title {
     color: var(--deep-navy);
     font-size: 1.2rem;
     margin-bottom: 1rem;
     font-weight: 600;
}

.overview-value {
     color: var(--sand-gold);
     font-size: 1.8rem;
     font-weight: 700;
     font-family: 'Cormorant Garamond', serif;
}

.overview-desc {
     color: #64748b;
     font-size: 0.9rem;
     margin-top: 0.5rem;
}

/* Enhance existing styles */
.section-description strong {
     color: var(--sand-gold);
     font-size: 1.2rem;
     letter-spacing: 0.05em;
}

.about-quote {
     background: linear-gradient(135deg, rgba(201, 169, 97, 0.1), rgba(44, 95, 111, 0.05));
     padding: 2rem;
     border-left: 4px solid var(--sand-gold);
     margin-top: 3rem;
     position: relative;
}

.about-quote::before {
     content: '"';
     position: absolute;
     top: -20px;
     left: 20px;
     font-size: 5rem;
     color: var(--sand-gold);
     opacity: 0.3;
     font-family: 'Cormorant Garamond', serif;
}

/* Enhanced Hero Section */
.hero-section {
     position: relative;
}

.hero-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 30% 50%, rgba(201, 169, 97, 0.1) 0%, transparent 70%);
     pointer-events: none;
     z-index: 1;
}

.hero-tagline {
     font-size: clamp(0.9rem, 2vw, 1.2rem);
     line-height: 1.8;
}

/* ============================================
   UNIT GALLERY SWIPER STYLES
   ============================================ */

.unit-gallery-swiper {
     width: 100%;
     height: 100%;
     margin-top: 2rem;
}

.unit-gallery-swiper .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     border: 2px solid transparent;
     transition: all 0.3s ease;
}

.unit-gallery-swiper .swiper-slide:hover {
     border-color: var(--sand-gold);
     transform: scale(1.02);
}

.unit-gallery-swiper .swiper-slide img {
     display: block;
     width: 100%;
     height: 250px;
     object-fit: cover;
}

.unit-gallery-swiper .swiper-slide::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(26, 43, 72, 0.3);
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
}

.unit-gallery-swiper .swiper-slide:hover::after {
     opacity: 1;
}

.unit-gallery-swiper .swiper-slide::before {
     content: '\F5CF';
     font-family: 'bootstrap-icons';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 3rem;
     color: white;
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 1;
     pointer-events: none;
}

.unit-gallery-swiper .swiper-slide:hover::before {
     opacity: 1;
}

.unit-gallery-swiper .swiper-pagination {
     bottom: 10px !important;
}

.unit-gallery-swiper .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: #cbd5e1;
     opacity: 0.7;
     transition: all 0.3s ease;
}

.unit-gallery-swiper .swiper-pagination-bullet-active {
     background: var(--sand-gold);
     opacity: 1;
     transform: scale(1.2);
}

/* Gallery Image Modal for Unit */
.unit-image-modal .modal-content {
     background: rgba(0, 0, 0, 0.95);
     border: none;
}

.unit-image-modal .modal-body {
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
}

.unit-image-modal img {
     max-width: 95%;
     max-height: 90vh;
     width: auto;
     height: auto;
     object-fit: contain;
     box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
}

.unit-image-modal .modal-close-btn {
     position: fixed;
     top: 2rem;
     right: 2rem;
     z-index: 1060;
}

/* ============================================
   LOAD MORE ANIMATION
   ============================================ */

.hidden-item {
     display: none !important;
}

#loadMoreBtn:hover {
     background: var(--deep-navy) !important;
     color: #fff !important;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(26, 43, 72, 0.3);
}

#allLoadedMsg {
     color: var(--sand-gold);
     animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(-10px);
     }

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

/* Smooth gallery item animation */
.gallery-grid-item {
     transition: opacity 0.5s ease, transform 0.5s ease;
}

.btn-map-animated {
     position: relative;
     display: inline-flex !important;
     align-items: center;
     gap: 0.75rem;
     padding: 1rem 1.75rem !important;
     font-size: 1.15rem !important;
     font-weight: 600;
     color: #fff !important;
     background: linear-gradient(135deg, #0f2a44, #173b63);
     text-decoration: none !important;
     overflow: hidden;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
     transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* shimmer light */
.btn-map-animated::before {
     content: "";
     position: absolute;
     top: 0;
     left: -120%;
     width: 120%;
     height: 100%;
     background: linear-gradient(120deg,
               transparent,
               rgba(255, 255, 255, 0.35),
               transparent);
     transition: left 0.8s ease;
}

/* hover effects */
.btn-map-animated:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
     color: var(--sand-gold) !important;
}

.btn-map-animated:hover::before {
     left: 120%;
}

/* icon animation */
.map-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     animation: pulse 2.5s infinite;
}

/* pulse keyframe */
@keyframes pulse {
     0% {
          transform: scale(1);
          opacity: 1;
     }

     50% {
          transform: scale(1.15);
          opacity: 0.85;
     }

     100% {
          transform: scale(1);
          opacity: 1;
     }
}



/* Responsive */
@media (max-width: 1199px) {
     .navbar .container {
          max-width: 100%;
          padding-left: 1rem;
          padding-right: 1rem;
     }

     .navbar-brand {
          flex-shrink: 0;
     }


     .urgency-banner.shownav-link {
          padding: 0.5rem 0.7rem !important;
          font-size: 0.85rem;
     }

     .hero-logo {
          max-width: 500px;
     }

     .hero-tagline::before,
     .hero-tagline::after {
          width: 40px;
     }

     /* Urgency Banner - ต้องซ่อนไว้ตอนเริ่มต้นเหมือนกัน */
     .urgency-banner {
          top: -140px !important;
          /* ซ่อนไว้ด้านบน */
     }

     .urgency-banner.show {
          top: 90px !important;
          /* แสดงด้านล่าง navbar เมื่อ scroll พร้อมช่องว่าง */
     }

     /* ปุ่มปิดถูกควบคุมด้วย JavaScript แล้ว - ไม่ต้องมี CSS เพิ่ม */
}

@media (max-width: 991px) {
     .urgency-banner {
          top: -215px !important;
          /* ซ่อนไว้ด้านบน */
     }

     .navbar .container {
          max-width: 100%;
          padding-left: 1rem;
          padding-right: 1rem;
     }

     .navbar-toggler {
          border: none;
          box-shadow: none !important;
          padding: 0.25rem;
     }

     .navbar-toggler:focus {
          box-shadow: none !important;
     }

     .navbar.scrolled .navbar-toggler i {
          color: var(--deep-navy);
     }

     .navbar.scrolled .navbar-toggler .bi::before {
          color: var(--sand-gold);
     }

     .navbar-collapse {
          background: rgba(26, 43, 72, 0.98);
          backdrop-filter: blur(20px);
          padding: 0 1.5rem;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
          position: absolute;
          left: 0;
          right: 0;
          top: 100%;
          z-index: 1055;
     }

     .navbar.scrolled .navbar-collapse {
          background: var(--deep-navy);
          box-shadow: 0 10px 40px rgba(26, 43, 72, 0.4);
     }

     .navbar-nav {
          gap: 0 !important;
     }

     .nav-link {
          padding: 1rem 1.5rem !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          text-align: center;
          color: #fff !important;
     }

     .navbar.scrolled .nav-link {
          color: #fff !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     }

     .nav-link:hover {
          background: rgba(201, 169, 97, 0.2);
          color: var(--sand-gold) !important;
     }



     /* Modal adjustments for tablet */
     .modal-dialog,
     .modal-lg,
     .modal-xl {
          margin: 1rem auto;
          max-width: calc(100% - 2rem);
     }

     .modal-dialog-centered {
          min-height: auto;
          display: flex;
          align-items: flex-start;
          padding-top: 1rem;
          padding-bottom: 1rem;
     }

     .modal-header,
     .developer-modal-header,
     .investment-modal-header,
     .terms-modal-header {
          padding: 2rem 1.5rem;
     }

     .modal-title {
          font-size: 1.8rem;
     }

     .modal-body {
          padding: 2rem 1.5rem;
     }

     /* Developer Modal */
     .developer-profile-card {
          padding: 2rem 1.5rem;
          margin-bottom: 2rem;
     }

     .developer-logo-circle {
          width: 120px;
          height: 120px;
     }

     .developer-logo-circle svg,
     .developer-logo-circle i {
          font-size: 3rem;
     }

     .developer-text {
          font-size: 0.95rem;
     }

     .developer-quote-box {
          margin: 1.5rem 0;
          padding: 1.2rem;
     }

     .developer-quote-box p {
          font-size: 1rem;
     }

     .core-value-card {
          padding: 1rem 0.8rem;
     }

     .developer-projects-section {
          padding: 2rem 1.5rem;
     }

     .project-image {
          height: 180px;
     }

     /* Investment Modal */
     .investment-intro {
          font-size: 1rem;
          margin-bottom: 2rem;
          padding: 0 0.5rem;
     }

     .investment-highlight-card {
          padding: 1.5rem;
          margin-bottom: 1rem;
     }

     .highlight-value-large {
          font-size: 2.5rem;
     }

     .highlight-value {
          font-size: 1.2rem;
     }

     .investment-feature-card {
          padding: 1.2rem;
          flex-direction: row;
          align-items: center;
     }

     .investment-feature-card i {
          font-size: 1.8rem;
     }

     .investment-channels {
          padding: 1.5rem;
     }

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

     .channel-badge {
          padding: 1.2rem 0.8rem;
     }

     .why-choose-card {
          padding: 1.2rem;
     }

     .why-icon {
          width: 70px;
          height: 70px;
     }

     .why-icon i {
          font-size: 2rem;
     }
}

@media (min-width: 769px) {
     .hero-gallery {
          transform: none !important;
     }

     .hero-navigation,
     .swipe-hint {
          display: none !important;
     }
}


@media (max-width: 768px) {

     /* ============================================
   HERO SECTION - MOBILE (ใส่ในส่วน @media (max-width: 768px))
   ============================================ */

     .hero-section {
          background-attachment: scroll;
     }

     /* Hero Gallery Layout */
     .hero-gallery {
          display: flex;
          flex-direction: row;
          width: 300vw;
          height: 100vh;
          transform: translateX(-100vw);
          transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          will-change: transform;
     }

     .hero-item {
          flex: 0 0 100vw !important;
          width: 100vw;
          height: 100vh;
          cursor: default;
     }

     .hero-item.left,
     .hero-item.right,
     .hero-item.center {
          flex: 0 0 100vw !important;
     }

     /* Slide States - แก้ไขใหม่เพื่อให้กลับมาตรงกลางได้แม่นยำ */
     .hero-gallery.slide-left {
          transform: translateX(0) !important;
     }

     .hero-gallery.slide-right {
          transform: translateX(-200vw) !important;
     }

     /* Reset to center - เพิ่มใหม่ */
     .hero-gallery:not(.slide-left):not(.slide-right) {
          transform: translateX(-100vw) !important;
     }

     /* Content Visibility */
     .hero-item .hero-content {
          display: none;
     }

     .hero-item .hero-overlay {
          transform: translateY(100%);
          transition: transform 0.5s ease;
     }

     /* Center (default) */
     .hero-gallery:not(.slide-left):not(.slide-right) .hero-item.center .hero-content {
          display: flex;
     }

     /* Left slide */
     .hero-gallery.slide-left .hero-item.left .hero-overlay {
          transform: translateY(0);
     }

     .hero-gallery.slide-left .hero-item.center .hero-content {
          display: none;
     }

     /* Right slide */
     .hero-gallery.slide-right .hero-item.right .hero-overlay {
          transform: translateY(0);
     }

     .hero-gallery.slide-right .hero-item.center .hero-content {
          display: none;
     }

     /* Remove separators */
     .hero-item::after {
          display: none;
     }

     /* Show navigation */
     .hero-navigation {
          display: flex;
          position: fixed;
          bottom: 2rem;
          margin: 0 auto;
          width: fit-content;
          justify-content: center;
          z-index: 30;
     }

     /* Swipe Hint */
     .swipe-hint {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          position: fixed;
          bottom: 5rem;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: fit-content;
          color: rgba(255, 255, 255, 0.7);
          font-size: 0.85rem;
          letter-spacing: 0.1em;
          animation: pulse 2s infinite;
          z-index: 30;
          pointer-events: none;
          opacity: 1;
          transition: opacity 0.4s ease, transform 0.4s ease;
     }

     .swipe-hint.hidden {
          opacity: 0;
          transform: translateY(20px);
          pointer-events: none;
     }

     .swipe-hint i {
          font-size: 1.5rem;
     }

     /* Hero Content Mobile */
     .hero-logo {
          max-width: 280px;
          margin-bottom: 2rem;
     }

     .hero-tagline {
          font-size: 0.75rem;
          letter-spacing: 0.2em;
          margin-bottom: 2rem;
          padding: 0 1rem;
          text-align: center;
          width: 100%;
     }

     .hero-tagline::before,
     .hero-tagline::after {
          width: 30px;
     }

     .hero-buttons {
          gap: 1rem;
          flex-direction: column;
          width: 100%;
          max-width: 320px;
          padding: 0 1rem;
     }

     .hero-item.center .hero-content {
          display: flex !important;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 2rem 1rem;
     }

     .btn-primary-custom,
     .btn-outline-custom {
          width: 100%;
     }

     .hero-overlay {
          padding: 1.5rem clamp(1rem, 4vw, 2rem) !important;
          /* Side padding with safe area */
          padding-top: calc(80px + 1.5rem) !important;
          /* Mobile navbar height + padding */
          padding-bottom: clamp(1.5rem, 4vh, 2rem) !important;
          /* Bottom safe area */
          max-height: 100vh;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          scroll-padding-top: 80px;
          /* Additional scroll safety */
     }

     .hero-overlay h3 {
          font-size: 1.5rem !important;
          line-height: 1.3;
          margin-bottom: 0.5rem !important;
     }

     .hero-overlay p {
          font-size: 0.95rem !important;
          margin-bottom: 1.5rem;
     }

     .hero-overlay-details li {
          font-size: 0.95rem;
          padding: 0.6rem 0;
     }

     /* Mobile Friendly - Hero Item Left (Living Highlights) */
     .hero-item.left .hero-overlay h2 {
          font-size: 1.3rem !important;
     }

     .hero-item.left .hero-overlay h3 {
          font-size: 1.3rem !important;
          margin-bottom: 0.3rem !important;
     }

     .hero-item.left .hero-overlay>p {
          font-size: 0.9rem !important;
          margin-bottom: 1rem !important;
     }

     .hero-item.left .hero-overlay h4 {
          font-size: 0.95rem !important;
          margin-bottom: 0.25rem !important;
     }

     .hero-item.left .hero-overlay-details>div {
          gap: 0.8rem !important;
          /* Reduce gap between cards */
     }

     .hero-item.left .hero-overlay-details>div>div {
          padding: clamp(0.8rem, 2vw, 1rem) !important;
          /* Responsive card padding */
          border-radius: 6px !important;
          margin: 0 0.2rem;
          /* Prevent touching edges */
     }

     .hero-item.left .hero-overlay-details>div>div>div {
          flex-direction: row !important;
          /* Keep horizontal on mobile */
          gap: 0.8rem !important;
          text-align: left !important;
     }

     .hero-item.left .hero-overlay-details i {
          font-size: 1.5rem !important;
          flex-shrink: 0;
          /* Prevent icon shrinking */
     }

     .hero-item.left .hero-overlay-details p {
          font-size: 0.85rem !important;
          line-height: 1.5 !important;
     }

     /* Mobile Friendly - Buttons in Left Panel */
     .hero-item.left .hero-overlay-details>div[style*="margin-top"] {
          margin-top: 1.5rem !important;
          flex-direction: column !important;
          gap: 0.8rem !important;
          padding: 0 0.2rem;
          /* Prevent buttons touching edges */
     }

     .hero-item.left .hero-overlay-details button {
          width: 100% !important;
          padding: 0.9rem 1.5rem !important;
          font-size: 0.9rem !important;
          white-space: nowrap;
          min-height: 44px;
          /* iOS touch target minimum */
          touch-action: manipulation;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }

     /* Touch-friendly adjustments */
     .hero-item.left .hero-overlay-details button:active {
          transform: scale(0.96) !important;
          box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3) !important;
     }

     /* Mobile: Simulate hover effect on touch */
     @media (hover: none) and (pointer: coarse) {
          .hero-item.left .hero-overlay-details .btn-outline-custom:active {
               background: var(--sand-gold) !important;
               color: var(--deep-navy) !important;
          }

          .hero-item.left .hero-overlay-details .btn-outline-custom:active .btn-icon {
               transform: rotate(-180deg) scale(1.1) !important;
          }
     }

     /* Improve readability on small screens */
     @media (max-width: 375px) {
          .hero-item.left .hero-overlay h3 {
               font-size: 1.2rem !important;
          }

          .hero-item.left .hero-overlay-details h4 {
               font-size: 0.95rem !important;
          }

          .hero-item.left .hero-overlay-details p {
               font-size: 0.8rem !important;
          }

          .hero-item.left .hero-overlay-details button {
               font-size: 0.85rem !important;
               padding: 0.8rem 1rem !important;
          }
     }

     /* Landscape mobile orientation */
     @media (max-height: 500px) and (orientation: landscape) {
          .hero-overlay {
               padding: 0.8rem 1.5rem !important;
               padding-top: calc(70px + 0.8rem) !important;
               /* Smaller navbar in landscape */
          }

          .hero-item.left .hero-overlay-details>div {
               gap: 0.8rem !important;
          }

          .hero-item.left .hero-overlay-details>div>div {
               padding: 0.8rem !important;
          }
     }

     /* Extra small screens - iPhone SE */
     @media (max-width: 375px) and (max-height: 667px) {
          .hero-overlay {
               padding-top: calc(75px + 1.2rem) !important;
          }
     }

     /* Segment Selector Buttons - Mobile Friendly */
     .segment-tab {
          min-height: 44px;
          /* iOS touch target */
          touch-action: manipulation;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }

     .segment-tab:active {
          transform: scale(0.96) !important;
     }

     /* Mobile: Touch feedback for segment tabs */
     @media (hover: none) and (pointer: coarse) {
          .segment-tab:not(.active):active {
               background: rgba(255, 255, 255, 0.3) !important;
               border-color: rgba(255, 255, 255, 0.5) !important;
          }

          .segment-tab.active:active {
               transform: scale(0.96) !important;
          }
     }

     /* Small screens - stack vertically if needed */
     @media (max-width: 375px) {
          .segment-tab {
               font-size: 0.85rem !important;
               padding: 0.6rem 1.2rem !important;
               min-width: 130px !important;
          }
     }

     /* Hero Subtext Cards - Mobile Responsive */
     .hero-subtext {
          touch-action: manipulation;
     }

     .hero-subtext>div {
          min-height: 44px;
          /* iOS touch target */
     }

     /* Mobile: Stack subtext items vertically on small screens */
     .hero-subtext {
          grid-template-columns: 1fr !important;
          gap: 0.6rem !important;
          padding: 0.8rem !important;
     }

     .hero-subtext>div {
          padding: 0.6rem !important;
     }

     .hero-subtext i {
          font-size: 1.3rem !important;
     }

     .hero-subtext span {
          font-size: 0.85rem !important;
     }

     /* Extra small screens - Compact subtext */
     @media (max-width: 375px) {
          .hero-subtext {
               padding: 0.6rem !important;
               gap: 0.5rem !important;
          }

          .hero-subtext>div {
               padding: 0.5rem !important;
               gap: 0.4rem !important;
          }

          .hero-subtext i {
               font-size: 1.2rem !important;
          }

          .hero-subtext span {
               font-size: 0.8rem !important;
          }
     }

     .scroll-indicator {
          bottom: 8rem;
     }

     /* ============================================
        GALLERY SECTION - MOBILE
        ============================================ */

     .gallery-filters {
          padding: 0 1rem;
     }

     .btn-filter {
          padding: 0.5rem 1rem;
          font-size: 0.75rem;
     }

     .gallery-item {
          height: 280px !important;
     }

     /* ============================================
        GENERAL SECTIONS - MOBILE
        ============================================ */

     section {
          padding: 4rem 0;
     }

     .section-header {
          margin-bottom: 3rem;
     }

     /* ============================================
        CONTAINER & SPACING - MOBILE
        ============================================ */

     .container {
          max-width: 100%;
          padding-left: 15px;
          padding-right: 15px;
     }

     .row {
          margin-left: -12px;
          margin-right: -12px;
     }

     .row>* {
          padding-left: 12px;
          padding-right: 12px;
     }

     /* ============================================
        CONTACT SECTION - MOBILE
        ============================================ */

     .contact-form-wrapper {
          padding: 2rem 1.5rem;
     }

     /* ============================================
        CONVERSION FEATURES - MOBILE
        ============================================ */

     /* Urgency Banner Mobile */
     .urgency-content {
          font-size: 0.75rem;
          gap: 0.5rem;
          padding: 0 0.8rem;
          text-align: center;
          flex-direction: column;
     }

     .urgency-content i {
          font-size: 1.2rem;
     }

     .urgency-content>span {
          line-height: 1.4;
     }

     .units-left {
          font-size: 0.95rem;
          padding: 0.15rem 0.5rem;
     }

     .btn-urgency {
          padding: 0.5rem 1rem;
          font-size: 0.8rem;
          width: 100%;
          margin-top: 0.3rem;
          justify-content: center;
     }

     /* Navbar Mobile - ปรับ top position */
     .navbar.with-banner {
          top: 0;
          /* ไม่ต้องขยับบน mobile */
     }

     /* Urgency Banner Mobile - ทำให้เล็กลง */
     .urgency-banner {
          padding: 0.7rem 0;
     }


     /* Urgency Close Button Mobile */
     .urgency-close-btn {
          right: 1rem;
          /* ห่างจากขอบขวาจอ */
          padding: 0.3rem;
     }

     .urgency-close-btn i {
          font-size: 1.1rem;
     }

     /* ROI Calculator Mobile */
     .roi-calculator-card {
          padding: 1.5rem;
          margin-bottom: 2rem;
     }

     .roi-result-card {
          padding: 1.5rem;
          flex-direction: column;
          text-align: center;
          gap: 1rem;
     }

     .roi-result-card i {
          font-size: 2rem;
     }

     .roi-result-card h3 {
          font-size: 1.5rem;
     }

     .roi-highlights {
          padding: 1.5rem;
          margin-top: 2rem;
     }

     /* Testimonials Mobile */
     .testimonial-card {
          padding: 1.5rem;
          margin-bottom: 1rem;
     }

     .testimonial-text {
          font-size: 0.9rem;
     }

     /* Floating Buttons Mobile */
     .floating-actions {
          bottom: 15rem;
          right: 1rem;
          gap: 0.7rem;
     }

     .floating-btn {
          width: 50px;
          height: 50px;
     }

     .floating-btn:hover {
          width: 50px;
          border-radius: 50%;
     }

     .floating-btn-text {
          display: none;
     }

     .floating-btn i {
          font-size: 1.3rem;
          position: static !important;
     }

     /* Lead Magnet Modal Mobile */
     #leadMagnetModal .modal-dialog {
          margin: 0;
          max-width: 100%;
     }

     #leadMagnetModal .row {
          flex-direction: column;
     }

     #leadMagnetModal .col-md-5,
     #leadMagnetModal .col-md-7 {
          max-width: 100%;
          padding: 2rem 1.5rem;
     }

     /* Form Controls Mobile */
     .form-control,
     .form-select {
          font-size: 16px !important;
          /* Prevent zoom on iOS */
          padding: 0.85rem 1rem;
     }

     .form-label {
          font-size: 0.9rem;
     }

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

     /* ============================================
        MODAL STYLES - MOBILE
        ============================================ */

     .modal-dialog,
     .modal-lg,
     .modal-xl {
          margin: 0.5rem auto;
          max-width: calc(100% - 1rem);
     }

     .modal-dialog-centered {
          min-height: auto;
          display: flex;
          align-items: flex-start;
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;
     }

     .modal-header,
     .developer-modal-header,
     .investment-modal-header,
     .terms-modal-header {
          padding: 1.5rem 1rem;
     }

     .modal-title {
          font-size: 1.5rem;
     }

     .modal-body {
          padding: 1.5rem 1rem;
     }

     /* Developer Modal */
     .developer-profile-card {
          padding: 2rem 1.5rem;
          margin-bottom: 2rem;
     }

     .developer-logo-circle {
          width: 120px;
          height: 120px;
     }

     .developer-logo-circle i {
          font-size: 3rem;
     }

     .developer-text {
          font-size: 0.95rem;
     }

     .developer-quote-box {
          margin: 1.5rem 0;
          padding: 1.2rem;
     }

     .developer-quote-box p {
          font-size: 1rem;
     }

     .core-value-card {
          padding: 1rem 0.8rem;
     }

     .developer-projects-section {
          padding: 2rem 1.5rem;
     }

     .project-image {
          height: 180px;
     }

     /* Investment Modal */
     .investment-intro {
          font-size: 1rem;
          margin-bottom: 2rem;
          padding: 0 0.5rem;
     }

     .investment-highlight-card {
          padding: 1.5rem;
          margin-bottom: 1rem;
     }

     .highlight-value-large {
          font-size: 2.5rem;
     }

     .highlight-value {
          font-size: 1.2rem;
     }

     .investment-feature-card {
          padding: 1.2rem;
          flex-direction: row;
          align-items: center;
     }

     .investment-feature-card i {
          font-size: 1.8rem;
     }

     .investment-channels {
          padding: 1.5rem;
     }

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

     .channel-badge {
          padding: 1.2rem 0.8rem;
     }

     .why-choose-card {
          padding: 1.2rem;
     }

     .why-icon {
          width: 70px;
          height: 70px;
     }

     .why-icon i {
          font-size: 2rem;
     }

     /* Terms Modal */
     .payment-schedule-grid {
          grid-template-columns: 1fr;
     }

     .terms-contact-info {
          flex-direction: column;
          gap: 1.5rem;
     }

     /* Unit Gallery Swiper */
     .unit-gallery-swiper .swiper-slide img {
          height: 180px;
     }

     .unit-gallery-swiper .swiper-pagination {
          bottom: 5px !important;
     }

     /* Unit Image Modal */
     .unit-image-modal img {
          max-width: 100%;
          max-height: 80vh;
     }

     .unit-image-modal .modal-close-btn {
          top: 1rem;
          right: 1rem;
          width: 50px;
          height: 50px;
     }

     .unit-image-modal .modal-close-btn i {
          font-size: 1.5rem;
     }

     /* Modal Close Button - Mobile */
     .modal-close-btn {
          top: 2rem !important;
          right: 1rem !important;
          width: 50px !important;
          height: 50px !important;
     }

     .modal-close-btn i {
          font-size: 1.5rem !important;
     }

}




@media (max-width: 576px) {
     .hero-tagline {
          font-size: 0.75rem;
          letter-spacing: 0.2em;
     }

     .modal-close-btn {
          top: 3rem !important;
          right: 1rem !important;
          width: 50px !important;
          height: 50px !important;
     }

     .hero-tagline::before,
     .hero-tagline::after {
          display: none;
     }

     .btn-map-animated {
          width: 100%;
          justify-content: center;
          font-size: 1.05rem;
     }
}