* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; color: #333; background-color: #fff; line-height: 1.6; }

#navbar { background-color: #2e7d32; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; position: sticky; top: 0; z-index: 100; }
#logo-area h1 { color: white; font-size: 22px; }
#nav-links a { color: white; text-decoration: none; margin-left: 20px; padding: 5px 10px; border-radius: 4px; }
#nav-links a:hover { background-color: #1b5e20; }

#slideshow-container { position: relative; height: 400px; overflow: hidden; background-color: #1b5e20; }
.slide { display: none; width: 100%; height: 100%; background: linear-gradient(135deg, #2e7d32, #558b2f); justify-content: center; align-items: center; text-align: center; color: white; }
.active-slide { display: flex; }
.slide-text h2 { font-size: 40px; margin-bottom: 10px; }

#prev-btn, #next-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: white; border: none; padding: 15px; cursor: pointer; }
#prev-btn { left: 10px; } #next-btn { right: 10px; }
#dots-container { position: absolute; bottom: 15px; width: 100%; text-align: center; }
.dot { display: inline-block; width: 12px; height: 12px; background: rgba(255,255,255,0.5); border-radius: 50%; margin: 0 5px; cursor: pointer; }
.active-dot { background: white; }

#welcome-banner { background: #e8f5e9; text-align: center; padding: 15px; color: #2e7d32; font-weight: bold; }

#countdown-section { background: #388e3c; color: white; text-align: center; padding: 40px 20px; }
#countdown-boxes { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
.count-box { background: #1b5e20; padding: 15px; border-radius: 8px; min-width: 80px; }
.count-box span { font-size: 30px; font-weight: bold; display: block; }

#home-about, #modal-trigger-area { padding: 50px 20px; text-align: center; max-width: 800px; margin: 0 auto; }
.btn { background: #2e7d32; color: white; padding: 12px 25px; border-radius: 5px; text-decoration: none; border: none; cursor: pointer; display: inline-block; }
.btn:hover { background: #1b5e20; }

#my-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; }
#modal-box { background: white; padding: 30px; border-radius: 10px; position: relative; max-width: 400px; text-align: center; }
#close-modal { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; }

footer { background: #1b5e20; color: #a5d6a7; text-align: center; padding: 20px; margin-top: 40px; }

/* Styles for property cards */
#properties-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 40px; }
.property-card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.property-img { height: 180px; }
.house-img { background: #66bb6a; } .lot-img { background: #aed581; } .project-img { background: #4db6ac; }
.property-info { padding: 15px; }

/* Contact Form styles */
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; font-weight: bold; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 8px; margin-top: 5px; }
.error-msg { color: red; font-size: 12px; }