@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

:root {
  /* Brand Colors Light Theme */
  --primary: #073B24;
  --primary-dark: #032114;
  --primary-light: #0B5A3A;
  --accent: #ECC01B;
  --accent-hover: #D4A810;
  --terracotta: #c2410c;
  --bg-light: #fafbf9;
  --bg-card: #ffffff;
  --text-dark: #0e261b;
  --text-muted: #4b6b5d;
  --border: #cbdcd3;
  --shadow: rgba(7, 59, 36, 0.05);
  
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --header-height: 94px;
  --header-inset: 160px;
  --header-top: 14px;
  --header-height-actual: 66px;
}

/* Dark Theme Variables */
.dark {
  --primary: #0B5A3A;
  --primary-dark: #02140c;
  --primary-light: #073B24;
  --accent: #ECC01B;
  --accent-hover: #D4A810;
  --bg-light: #02140c;
  --bg-card: #042416;
  --text-dark: #f0fdf4;
  --text-muted: #86b09c;
  --border: #0a3a24;
  --shadow: rgba(0, 0, 0, 0.4);
}

/* Base resets */
html {
  overflow-x: hidden;
  width: 100%;
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility Containers */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Typography styles */
.text-serif { font-family: var(--font-serif); }
.text-accent { color: var(--accent) !important; }
.text-muted-color { color: var(--text-muted); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.section-padding {
  padding: 50px 0;
}

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

/* Common Section Headers */
.section-title {
  font-size: 2rem;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
}
.section-subtitle {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 30px auto;
}

/* Header Component styling — floating pill */
header {
  position: fixed;
  top: var(--header-top);
  left: var(--header-inset);
  right: var(--header-inset);
  z-index: 50;
  background-color: rgba(250, 251, 249, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(203, 220, 211, 0.6);
  border-radius: 16px;
  height: var(--header-height-actual, 66px);
  display: flex;
  align-items: center;
  box-shadow: 0 4px 24px rgba(7,59,36,0.10), 0 1px 0 rgba(255,255,255,0.6) inset;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark header {
  background-color: rgba(2, 20, 12, 0.80);
  border-color: rgba(10, 58, 36, 0.5);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
}
header.scrolled {
  background-color: rgba(250, 251, 249, 0.96);
  box-shadow: 0 8px 32px rgba(7,59,36,0.14), 0 1px 0 rgba(255,255,255,0.7) inset;
  border-color: rgba(203, 220, 211, 0.8);
}
.dark header.scrolled {
  background-color: rgba(2, 20, 12, 0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Brand Logo Layout */
.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: transform 0.2s ease;
}
.logo-wrapper:hover {
  transform: translateY(-1px);
}
.dark .logo-wrapper {
  background: transparent;
  box-shadow: none;
}
.logo-emblem {
  height: 48px;
  width: 54px;
  margin: -10px 0;
  transition: transform 0.2s ease;
}
.logo-emblem:hover {
  transform: scale(1.05);
}
.logo-text {
  display: flex;
  flex-direction: column;
}
.logo-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.logo-subtitle {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--text-muted);
}

.logo-image {
  height: 36px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  transition: transform 0.2s ease;
}
.dark .logo-image {
  /* In dark mode: invert colours so green logo stays readable on dark bg */
  filter: invert(1) hue-rotate(130deg) brightness(1.25) saturate(1.1);
}
.logo-image:hover {
  transform: scale(1.04);
}

/* Nav Menu */
nav.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
nav.desktop-nav a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  opacity: 0.85;
  position: relative;
}
nav.desktop-nav a:hover, nav.desktop-nav a.active {
  opacity: 1;
  color: var(--primary);
}
.dark nav.desktop-nav a:hover, .dark nav.desktop-nav a.active {
  color: var(--accent);
}

nav.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: right;
}
nav.desktop-nav a:hover::after, nav.desktop-nav a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Nav Utility Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.btn-primary {
  background-color: var(--primary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: var(--primary-light);
  transform: translateY(-1px);
}
.btn-accent {
  background-color: var(--accent);
  color: var(--primary-dark);
}
.btn-accent:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}
.btn-outline {
  border-color: var(--border);
  background-color: transparent;
  color: var(--text-dark);
}
.btn-outline:hover {
  background-color: var(--border);
  color: var(--text-dark);
}

.theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dark);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  border: 1px solid var(--border);
}
.theme-toggle:hover {
  background-color: var(--border);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dark);
}

/* Mobile Nav Menu — slides in below the floating pill */
.mobile-nav {
  position: fixed;
  /* sits just below the floating pill header */
  top: calc(var(--header-top) + 56px + 8px);
  left: var(--header-inset);
  right: var(--header-inset);
  bottom: 20px;
  background-color: var(--bg-card);
  z-index: 45;
  padding: 32px 24px;
  /* Hide on desktop by default */
  display: none;
  flex-direction: column;
  gap: 20px;
  /* Shifted off-screen, invisible and non-interactive when closed */
  transform: translateX(120%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(7,59,36,0.12);
  overflow-y: auto;
}
.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav a {
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  border-bottom: 1px solid rgba(203, 220, 211, 0.4) !important;
  padding: 14px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  letter-spacing: -0.01em !important;
  transition: all 0.2s ease !important;
}
.dark .mobile-nav a {
  border-bottom-color: rgba(10, 58, 36, 0.4) !important;
}
.mobile-nav a::after {
  content: '→';
  font-weight: 400;
  opacity: 0.3;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-nav a:hover, .mobile-nav a:active {
  color: var(--primary) !important;
  padding-left: 8px !important;
  border-bottom-color: var(--accent) !important;
}
.mobile-nav a:hover::after, .mobile-nav a:active::after {
  transform: translateX(4px);
  opacity: 0.8;
  color: var(--accent) !important;
}
.dark .mobile-nav a:hover, .dark .mobile-nav a:active {
  color: var(--accent) !important;
}

@media (max-width: 1024px) {
  nav.desktop-nav, .nav-actions .btn-primary {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #02140c;
  padding: 100px 20px 60px 20px;
  overflow: hidden;
  text-align: center;
}
.hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, #073B24 0%, #02140c 70%, #010a06 100%);
  opacity: 0.9;
  z-index: 1;
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cline x1='0' y1='280' x2='600' y2='280' stroke='rgba(255,255,255,0.35)' stroke-width='1.5'/%3E%3Crect x='30' y='80' width='75' height='200' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.2'/%3E%3Cline x1='55' y1='80' x2='55' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='80' y1='80' x2='80' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='30' y1='120' x2='105' y2='120' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='30' y1='160' x2='105' y2='160' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='30' y1='200' x2='105' y2='200' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='30' y1='240' x2='105' y2='240' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='67' y1='50' x2='67' y2='80' stroke='rgba(236,192,27,0.5)' stroke-width='1.2'/%3E%3Crect x='130' y='40' width='95' height='240' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.2'/%3E%3Crect x='145' y='15' width='65' height='25' fill='none' stroke='rgba(236,192,27,0.5)' stroke-width='1.2'/%3E%3Cline x1='177' y1='0' x2='177' y2='15' stroke='rgba(236,192,27,0.5)' stroke-width='1.5'/%3E%3Cline x1='155' y1='40' x2='155' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='177' y1='40' x2='177' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='200' y1='40' x2='200' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='130' y1='80' x2='225' y2='80' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='130' y1='120' x2='225' y2='120' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='130' y1='160' x2='225' y2='160' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='130' y1='200' x2='225' y2='200' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='130' y1='240' x2='225' y2='240' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cpolygon points='260,110 300,50 340,110 340,280 260,280' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.2'/%3E%3Cline x1='300' y1='20' x2='300' y2='280' stroke='rgba(236,192,27,0.45)' stroke-width='1'/%3E%3Cline x1='260' y1='150' x2='340' y2='150' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='260' y1='190' x2='340' y2='190' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='260' y1='230' x2='340' y2='230' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Crect x='375' y='70' width='85' height='210' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.2'/%3E%3Cline x1='400' y1='70' x2='400' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='425' y1='70' x2='425' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='375' y1='110' x2='460' y2='110' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='375' y1='150' x2='460' y2='150' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='375' y1='190' x2='460' y2='190' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='375' y1='230' x2='460' y2='230' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Crect x='490' y='90' width='70' height='190' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.2'/%3E%3Cline x1='510' y1='90' x2='510' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='535' y1='90' x2='535' y2='280' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='490' y1='130' x2='560' y2='130' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='490' y1='170' x2='560' y2='170' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='490' y1='210' x2='560' y2='210' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3Cline x1='490' y1='250' x2='560' y2='250' stroke='rgba(255,255,255,0.25)' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 650px 320px;
  background-position: center bottom;
  background-repeat: repeat-x;
  z-index: 2;
  opacity: 0.32;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  animation: fade-in-up 0.8s ease-out forwards;
}
.hero h1 {
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.2;
}
.hero p {
  font-size: 1.05rem;
  opacity: 0.9;
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 0.95rem; }
}

/* Hero Search Widget */
.search-widget {
  background: rgba(4, 36, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  gap: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.search-input-group {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 16px;
}
.search-input-group input {
  background: transparent;
  border: none;
  color: #ffffff;
  width: 100%;
  font-size: 0.95rem;
}
.search-input-group input:focus {
  outline: none;
}
.search-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.search-input-group svg {
  color: var(--accent);
}

@media (max-width: 640px) {
  .search-widget {
    flex-direction: column;
    padding: 16px;
  }
  .search-input-group {
    width: 100%;
  }
  .search-widget .btn {
    width: 100%;
    padding: 14px;
  }
}

/* Feature Grid Card styling */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--shadow);
  border-color: var(--accent);
}
.feature-icon-wrapper {
  background-color: rgba(11, 90, 58, 0.08);
  color: var(--primary);
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.dark .feature-icon-wrapper {
  background-color: rgba(236, 192, 27, 0.1);
  color: var(--accent);
}
.feature-card h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.feature-card p {
  color: var(--text-muted);
  font-size: 0.925rem;
}

/* Listing / Property Grid Card styling */
.property-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--shadow);
  border-color: var(--primary);
}
.property-image-container {
  position: relative;
  aspect-ratio: 16/10;
  background-color: #12241b;
  overflow: hidden;
}
.property-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.property-card:hover .property-image {
  transform: scale(1.05);
}
.property-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--primary);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
}
.property-price {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background-color: var(--accent);
  color: var(--primary-dark);
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.95rem;
}
.property-info {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.property-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.property-title {
  font-size: 1.35rem;
  margin-bottom: 12px;
  line-height: 1.3;
}
.property-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.property-meta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.property-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Maps dashboard corridor selector tabs */
.tab-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.tab-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dark);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
}
.tab-btn:hover {
  border-color: var(--primary);
}
.tab-btn.active {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Master plan catalog download area */
.master-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}
.master-plan-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow);
  display: flex;
  flex-direction: column;
}
.master-plan-preview {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #12241b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
}
.master-plan-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.master-plan-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}
.master-plan-info h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.master-plan-info p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Sector Layout Maps grid list card */
.sector-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
}
.sector-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.sector-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.sector-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(11, 90, 58, 0.08);
  color: var(--primary);
}
.dark .sector-tag {
  background-color: rgba(236, 192, 27, 0.1);
  color: var(--accent);
}
.sector-title {
  font-size: 1.35rem;
  font-family: var(--font-serif);
  font-weight: 700;
  margin-bottom: 4px;
}
.sector-stats {
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  padding: 12px 0;
  margin: 16px 0;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sector-stat-row {
  display: flex;
  justify-content: space-between;
}
.sector-stat-label {
  color: var(--text-muted);
}
.sector-stat-val {
  font-weight: 600;
}

/* RERA badge formatting */
.rera-badge {
  border: 1px dashed var(--accent);
  color: var(--accent);
  background: rgba(236, 192, 27, 0.05);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Contact, lead, modal inputs styles */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
}
.form-control {
  background-color: var(--bg-light);
  border: 1px solid var(--border);
  color: var(--text-dark);
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: var(--transition);
  width: 100%;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(11, 90, 58, 0.1);
}
.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Lead Modal gated popup */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(2, 20, 12, 0.8);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.5);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.open .modal-content {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}
.modal-close:hover {
  color: var(--text-dark);
}

/* Glassmorphism style highlights */
.glass-card {
  background: rgba(7, 59, 36, 0.02);
  border: 1px solid rgba(11, 90, 58, 0.1);
  backdrop-filter: blur(8px);
}
.dark .glass-card {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Verify Check Icon */
.check-icon-wrapper {
  color: var(--accent);
}

/* Testimonials page card */
.testimonial-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text-dark); /* Keep text visible on light card backgrounds inside dark sections */
}
.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 16px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
}
.testimonial-author-name {
  font-weight: 700;
  font-size: 0.9rem;
}
.testimonial-author-title {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Blog list grid layout card */
.blog-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow);
  display: flex;
  flex-direction: column;
}
.blog-card-image {
  aspect-ratio: 16/9;
  background-color: #12241b;
  overflow: hidden;
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}
.blog-card-info {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.blog-card-date {
  font-size: 0.725rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.blog-card-title {
  font-size: 1.15rem;
  margin-bottom: 8px;
  line-height: 1.35;
}
.blog-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Footer layout rules */
footer {
  background-color: #032114;
  color: #f0fdf4;
  padding: 80px 0 40px 0;
  border-top: 1px solid var(--border);
}
.dark footer {
  background-color: #010a06;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}
.footer-logo-col {
  grid-column: span 2;
}
@media (max-width: 768px) {
  .footer-logo-col {
    grid-column: span 1;
  }
}
.footer-col h4 {
  font-size: 1rem;
  margin-bottom: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col ul a {
  font-size: 0.9rem;
  opacity: 0.85;
}
.footer-col ul a:hover {
  opacity: 1;
  color: var(--accent);
}
.footer-info-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.875rem;
  opacity: 0.85;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Custom scrollbars standard */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-up {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================
   VISUAL REFINEMENT LAYER
   Upgrades aesthetics without changing layout or functionality
   ============================================================ */

/* --- Richer design tokens --- */
:root {
  --shadow-sm:   0 2px 8px rgba(7,59,36,0.06);
  --shadow-md:   0 6px 24px rgba(7,59,36,0.10);
  --shadow-lg:   0 16px 48px rgba(7,59,36,0.14);
  --shadow-glow: 0 0 0 3px rgba(236,192,27,0.18);
  --radius-lg:   20px;
  --radius-xl:   28px;
  --gradient-primary: linear-gradient(135deg, #073B24 0%, #0B5A3A 100%);
  --gradient-accent:  linear-gradient(135deg, #ECC01B 0%, #D4A810 100%);
  --gradient-card:    linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
}
.dark {
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:   0 6px 24px rgba(0,0,0,0.35);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 3px rgba(236,192,27,0.22);
}

/* --- Body background subtle grain texture --- */
body {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
}

/* --- Floating pill header: glassmorphism upgrade --- */
header {
  background: linear-gradient(135deg, rgba(250,251,249,0.92) 0%, rgba(243,248,245,0.85) 100%);
  border: 1px solid rgba(203,220,211,0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.dark header {
  background: linear-gradient(135deg, rgba(4,28,16,0.92) 0%, rgba(2,20,12,0.85) 100%);
  border-color: rgba(11,58,36,0.45);
}
header.scrolled {
  box-shadow: 0 10px 40px rgba(7,59,36,0.16), 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* --- Logo hover glow --- */
.logo-image:hover {
  transform: scale(1.06);
  /* drop-shadow works correctly even with mix-blend-mode */
  filter: drop-shadow(0 4px 14px rgba(7,59,36,0.30));
}
.dark .logo-image:hover {
  filter: invert(1) hue-rotate(130deg) brightness(1.3) saturate(1.2) drop-shadow(0 4px 14px rgba(236,192,27,0.35));
}

/* --- Nav links: smoother underline from center --- */
nav.desktop-nav a {
  letter-spacing: 0.01em;
  font-size: 0.875rem;
}
nav.desktop-nav a::after {
  bottom: -4px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--gradient-accent);
}

/* --- Hero: dramatic multi-stop gradient + floating orbs --- */
.hero {
  background: #010e07;
}
.hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 60% 20%, #0d5230 0%, #042416 45%, #010e07 100%);
  opacity: 1;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(236,192,27,0.08) 0%, transparent 70%);
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  animation: float-orb 8s ease-in-out infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -60px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(11,90,58,0.18) 0%, transparent 65%);
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  animation: float-orb 10s ease-in-out infinite alternate-reverse;
}
@keyframes float-orb {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.1); }
}
.hero h1 {
  font-size: 3rem;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.hero p {
  opacity: 0.8;
  line-height: 1.65;
  letter-spacing: 0.01em;
}
.hero-grid-overlay {
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* --- Hero search widget polish --- */
.search-widget {
  background: rgba(1,14,7,0.75);
  border-color: rgba(236,192,27,0.15);
  box-shadow: 0 16px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
.search-input-group {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  transition: border-color 0.25s ease;
}
.search-input-group:focus-within {
  border-color: rgba(236,192,27,0.4);
  background: rgba(255,255,255,0.06);
}

/* --- Buttons: gradient backgrounds, elevated shadows --- */
.btn {
  letter-spacing: 0.02em;
  font-size: 0.875rem;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.btn-primary {
  background: var(--gradient-primary);
  box-shadow: 0 4px 14px rgba(7,59,36,0.30);
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0B5A3A 0%, #0d6b46 100%);
  box-shadow: 0 8px 24px rgba(7,59,36,0.40);
  transform: translateY(-2px);
}
.btn-accent {
  background: var(--gradient-accent);
  box-shadow: 0 4px 14px rgba(236,192,27,0.30);
  border: none;
}
.btn-accent:hover {
  box-shadow: 0 8px 24px rgba(236,192,27,0.40);
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.btn-outline {
  border: 1.5px solid var(--border);
  transition: all 0.25s ease;
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: rgba(7,59,36,0.04);
}

/* --- RERA Badge: premium pill --- */
.rera-badge {
  border-radius: 20px;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(236,192,27,0.08) 0%, rgba(236,192,27,0.04) 100%);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* --- Section headers: accent underline decoration --- */
.section-title {
  font-size: 2.1rem;
  letter-spacing: -0.02em;
}
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: 3px;
  margin: 12px auto 0;
}

/* --- Feature cards: glassmorphism + glow border on hover --- */
.feature-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-card);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  border-color: rgba(236,192,27,0.4);
}
.feature-card:hover::before {
  opacity: 1;
}
.dark .feature-card {
  background: linear-gradient(135deg, rgba(10,40,25,0.9) 0%, rgba(4,36,22,0.9) 100%);
}

/* --- Feature icon: richer background --- */
.feature-icon-wrapper {
  background: linear-gradient(135deg, rgba(11,90,58,0.12) 0%, rgba(11,90,58,0.05) 100%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.dark .feature-icon-wrapper {
  background: linear-gradient(135deg, rgba(236,192,27,0.15) 0%, rgba(236,192,27,0.05) 100%);
}

/* --- Property cards: deeper image overlay + richer hover --- */
.property-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.property-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(7,59,36,0.2);
  border-color: rgba(7,59,36,0.35);
}
.property-image-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(2,20,12,0.65) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.property-badge {
  border-radius: 8px;
  backdrop-filter: blur(8px);
  background: rgba(7,59,36,0.85);
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 2;
}
.property-price {
  border-radius: 8px;
  backdrop-filter: blur(8px);
  background: linear-gradient(135deg, #ECC01B 0%, #D4A810 100%);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 2;
}
.property-info {
  padding: 20px 24px 22px;
}
.property-title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.property-location {
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

/* --- Tab buttons: rounded pill style --- */
.tab-container {
  gap: 8px;
  margin-bottom: 32px;
}
.tab-btn {
  border-radius: 50px;
  padding: 9px 22px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all 0.22s ease;
}
.tab-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(7,59,36,0.04);
  transform: translateY(-1px);
}
.tab-btn.active {
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(7,59,36,0.30);
  color: #fff;
}

/* --- Sector cards hover glow --- */
.sector-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.sector-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  border-color: rgba(236,192,27,0.4);
}

/* --- Testimonial cards: quote mark decoration --- */
.testimonial-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 18px;
  font-family: var(--font-serif);
  font-size: 6rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.12;
  pointer-events: none;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(236,192,27,0.3);
}
.testimonial-quote {
  font-size: 0.975rem;
  line-height: 1.65;
  padding-top: 8px;
}
.testimonial-avatar {
  background: var(--gradient-primary);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(7,59,36,0.25);
}

/* --- Blog cards: refined image overlay --- */
.blog-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(7,59,36,0.3);
}
.blog-card-image {
  position: relative;
}
.blog-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(2,20,12,0.5) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.blog-card:hover .blog-card-image::after {
  opacity: 1;
}
.blog-card-title {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* --- Form controls: refined focus ring + subtle inset shadow --- */
.form-control {
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 13px 16px;
  box-shadow: inset 0 1px 3px rgba(7,59,36,0.04);
  transition: all 0.22s ease;
}
.form-control:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(11,90,58,0.12), inset 0 1px 3px rgba(7,59,36,0.04);
}

/* --- Glass card: true frosted glass effect --- */
.glass-card {
  background: linear-gradient(135deg,
    rgba(7,59,36,0.05) 0%,
    rgba(7,59,36,0.02) 100%);
  border: 1px solid rgba(11,90,58,0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dark .glass-card {
  background: linear-gradient(135deg,
    rgba(11,90,58,0.12) 0%,
    rgba(4,36,22,0.25) 100%);
  border: 1px solid rgba(255,255,255,0.06);
}

/* --- Footer: richer dark background + separator accents --- */
footer {
  background: linear-gradient(180deg, #021a0e 0%, #010d07 100%);
  border-top: 1px solid rgba(236,192,27,0.15);
}
.footer-col h4 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 2px;
}
.footer-col ul a {
  transition: all 0.2s ease;
  position: relative;
  padding-left: 0;
}
.footer-col ul a:hover {
  padding-left: 6px;
  color: var(--accent);
  opacity: 1;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 28px;
}

/* --- Scrollbar: refined thin style --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11,90,58,0.35);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(11,90,58,0.6);
}

/* --- Scroll-reveal utility (JS adds .revealed) --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- New shimmer loading skeleton --- */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--border) 25%,
    rgba(255,255,255,0.5) 50%,
    var(--border) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* Additional hero mobile polish */
@media (max-width: 768px) {
  .hero::before, .hero::after { display: none; }
  .hero h1 { font-size: 2rem; letter-spacing: -0.02em; }
  .section-title::after { margin: 10px auto 0; }
}

/* Success banner alert */
.success-banner {
  background-color: rgba(236, 192, 27, 0.1);
  border: 1px solid var(--accent);
  color: var(--text-dark);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 20px;
  animation: scale-up 0.3s ease;
}

/* Property Details Modal styling */
/* --- 9. Refined Luxury Asymmetric Property Modal --- */
.property-modal-content {
  max-width: 1100px !important;
  width: 92% !important;
  height: 85vh !important;
  max-height: 750px !important;
  overflow: hidden !important; /* Hide outer overflow, scroll only right panel */
  background: var(--bg-card) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1.5px solid rgba(236, 192, 27, 0.22) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: row !important; /* Side-by-side split layout */
}

.property-modal-header {
  width: 52% !important; /* Left half */
  height: 100% !important;
  position: relative !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.property-modal-gallery-container {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.property-modal-gallery-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.property-modal-slider {
  width: 100% !important;
  height: 100% !important;
}

.property-modal-body-grid {
  width: 48% !important; /* Right half */
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important; /* Scroll details only! */
  padding: 40px !important;
  gap: 0 !important;
}

/* Close button - floating elegantly in the top-right corner */
.property-modal-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important; /* Move to the right side! */
  left: auto !important; /* Clear left placement */
  z-index: 100 !important;
  background: rgba(3, 13, 8, 0.7) !important;
  border: 1px solid rgba(236, 192, 27, 0.4) !important;
  color: #dfb010 !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
}
.property-modal-close:hover {
  background: #dfb010 !important;
  color: #02120b !important;
  transform: scale(1.08) !important;
  border-color: #dfb010 !important;
}

/* Right side content layout styling */
.property-modal-left {
  padding: 0 !important;
  border: none !important;
}
.property-modal-right {
  padding: 0 !important;
  background: transparent !important;
  margin-top: 30px !important;
}

/* Title & typography */
.property-modal-title {
  font-family: var(--font-serif) !important;
  font-size: 2.2rem !important;
  color: #dfb010 !important;
  margin-top: 15px !important;
  margin-bottom: 12px !important;
  line-height: 1.25 !important;
}
.property-modal-tagline {
  font-size: 1rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

.property-modal-desc {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
  margin-bottom: 30px !important;
}

.property-modal-section-title {
  font-family: var(--font-serif) !important;
  color: #dfb010 !important;
  font-size: 1.25rem !important;
  border-bottom: 1.5px solid rgba(236, 192, 27, 0.15) !important;
  padding-bottom: 10px !important;
  margin-top: 35px !important;
  margin-bottom: 20px !important;
}

/* Badge overlay colors */
.property-modal-badges {
  gap: 8px !important;
  margin-bottom: 15px !important;
}
.property-modal-badge {
  background: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dark) !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  padding: 5px 12px !important;
}
.property-modal-badge.price {
  background: rgba(236, 192, 27, 0.08) !important;
  border: 1px solid rgba(236, 192, 27, 0.25) !important;
  color: #dfb010 !important;
  font-size: 1.25rem !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 25px !important;
}

/* Highlights */
.property-modal-highlights li {
  color: var(--text-dark) !important;
  font-size: 0.95rem !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: flex-start !important;
}
.property-modal-highlights li svg {
  color: #dfb010 !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

/* Amenities */
.property-modal-amenities {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 25px !important;
}
.property-modal-amenity-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
}

/* Specs layout */
.property-modal-specs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.property-modal-spec-item {
  background: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
}
.property-modal-spec-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.05em !important;
}
.property-modal-spec-value {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .property-modal-content {
    flex-direction: column !important;
    height: 90vh !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .property-modal-header {
    width: 100% !important;
    height: 320px !important;
  }
  .property-modal-body-grid {
    width: 100% !important;
    height: auto !important;
    overflow-y: visible !important;
    padding: 30px !important;
  }
  .property-modal-close {
    right: 20px !important;
    left: auto !important;
    top: 20px !important;
  }
}
@media (max-width: 480px) {
  .property-modal-header {
    height: 220px !important;
  }
  .property-modal-body-grid {
    padding: 20px !important;
  }
  .property-modal-title {
    font-size: 1.6rem !important;
  }
  .property-modal-specs {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile responsive layout helpers */
.filters-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  align-items: center;
}

@media (max-width: 768px) {
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
  }
}

.contact-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 768px) {
  .contact-grid-container {
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: stretch;
  }
}

/* ============================================================
   COMPREHENSIVE MOBILE OPTIMIZATION
   Targets 768px and below (phones + small tablets)
   ============================================================ */

@media (max-width: 768px) {

  /* --- Container padding --- */
  .container {
    padding: 0 16px;
  }

  /* --- Section spacing --- */
  .section-padding {
    padding: 40px 0;
  }

  /* --- Section titles --- */
  .section-title {
    font-size: 1.75rem !important;
  }
  .section-subtitle {
    font-size: 0.9rem;
  }

  /* --- Hero --- */
  .hero {
    min-height: 500px;
    padding: 80px 16px 40px;
  }
  .hero h1 {
    font-size: 1.85rem !important;
    line-height: 1.2;
  }
  .hero p {
    font-size: 0.9rem !important;
  }
  .hero-content {
    padding: 0 8px;
  }

  /* --- Logo image in header --- */
  .logo-image {
    height: 38px;
  }

  /* --- Stats bar (homepage) --- */
  .container [style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* Remove inner vertical borders on stat cells at mobile */
  .container [style*="border-right: 1px solid var(--border)"] {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
  }

  /* --- Feature cards grid (Why Choose) --- */
  .container [style*="grid-template-columns: repeat(auto-fit, minmax(340px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Featured listings header row --- */
  [style*="display:flex; justify-content:space-between; align-items:flex-end"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* --- Property cards grid --- */
  .grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* --- Property card image height --- */
  .property-image {
    height: 200px;
  }

  /* --- About page stat cards: handled dynamically by CSS Grid auto-fit/minmax --- */

  /* --- Contact page h1 --- */
  .contact-grid-container h1 {
    font-size: 2rem !important;
  }

  /* --- Maps master plan grid --- */
  .master-plan-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Footer grid: stack single column --- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .footer-logo-col {
    grid-column: span 1 !important;
  }

  /* --- Footer bottom: stack copyright line --- */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* --- CTA / map download section --- */
  .glass-card h2 {
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   SMALL PHONE TIER — 480px and below
   ============================================================ */

@media (max-width: 480px) {

  .hero h1 {
    font-size: 1.55rem !important;
  }

  /* Stats bar: single column on very small screens */
  .container [style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Search bar: full width stacked layout */
  .search-widget {
    flex-direction: column;
    border-radius: 12px;
    gap: 10px;
    padding: 14px;
  }
  .search-input-group {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 10px;
  }
  .search-widget .btn {
    width: 100%;
    text-align: center;
  }

  /* Filters panel: single column */
  .filters-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tab buttons: wrap and shrink */
  .tab-container {
    gap: 8px;
  }
  .tab-btn {
    padding: 7px 10px;
    font-size: 0.78rem;
  }

  /* Property modal: reduce hero image height */
  .property-modal-hero {
    height: 220px;
  }
  .property-modal-left,
  .property-modal-right {
    padding: 20px;
  }
  .property-modal-title {
    font-size: 1.5rem !important;
  }
  .property-modal-close {
    top: 12px;
    right: 12px;
  }

  /* Blog / legal page content padding */
  .container[style*="max-width"] {
    max-width: 100% !important;
    padding: 0 16px;
  }

  /* About page headings */
  .container h1[style*="3rem"] {
    font-size: 2rem !important;
  }
  .container h2[style*="2rem"] {
    font-size: 1.5rem !important;
  }

  /* Contact form card padding */
  .contact-grid-container .feature-card {
    padding: 24px !important;
  }

  /* Footer logo */
  .logo-image {
    height: 34px;
  }
}

/* ============================================================
   BLOG ARTICLE READER MODAL
   ============================================================ */

#blog-reader-modal .blog-reader-content {
  background: var(--bg-card);
  border-radius: 24px;
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  animation: scale-up 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
  scrollbar-width: thin;
}

/* Hero image banner */
.blog-reader-hero {
  position: relative;
  height: 260px;
  background-size: cover;
  background-position: center;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.blog-reader-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(1,14,7,0.2) 0%, rgba(1,14,7,0.88) 100%);
}
.blog-reader-hero-meta {
  position: relative;
  z-index: 2;
  padding: 28px 36px;
  color: #fff;
}
.blog-reader-cat {
  display: inline-block;
  background: var(--accent);
  color: var(--primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.blog-reader-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 10px;
}
.blog-reader-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  opacity: 0.75;
  flex-wrap: wrap;
}
.blog-reader-dot {
  opacity: 0.5;
}

/* Close button */
.blog-reader-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.blog-reader-close:hover {
  background: rgba(0,0,0,0.75);
  transform: scale(1.1);
}

/* Article body */
.blog-reader-body {
  padding: 36px 40px 48px;
}
.blog-reader-summary {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 24px;
}
.blog-reader-divider {
  height: 3px;
  width: 56px;
  background: linear-gradient(135deg, #ECC01B, #D4A810);
  border-radius: 3px;
  margin-bottom: 28px;
}

/* Article content elements */
.blog-reader-h2 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary);
  margin: 36px 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.dark .blog-reader-h2 { color: var(--accent); }

.blog-reader-h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 28px 0 10px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  line-height: 1.35;
}
.blog-reader-para {
  font-size: 0.975rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.blog-reader-para strong { color: var(--text-dark); }

.blog-reader-list {
  margin: 0 0 20px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-reader-list li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.blog-reader-list li::marker { color: var(--accent); }

.blog-reader-body code {
  background: rgba(7,59,36,0.07);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.875rem;
  font-family: 'Courier New', monospace;
  color: var(--primary);
}
.dark .blog-reader-body code {
  background: rgba(236,192,27,0.08);
  color: var(--accent);
}

/* CTA block */
.blog-reader-cta {
  margin-top: 44px;
  background: linear-gradient(135deg, rgba(7,59,36,0.06) 0%, rgba(7,59,36,0.02) 100%);
  border: 1px solid rgba(11,90,58,0.14);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.blog-reader-cta p {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}
.dark .blog-reader-cta {
  background: rgba(11,90,58,0.12);
  border-color: rgba(255,255,255,0.06);
}

/* Mobile blog reader */
@media (max-width: 600px) {
  #blog-reader-modal .blog-reader-content {
    border-radius: 16px;
    max-height: 95vh;
  }
  .blog-reader-hero { height: 200px; }
  .blog-reader-title { font-size: 1.35rem; }
  .blog-reader-hero-meta { padding: 20px; }
  .blog-reader-body { padding: 24px 20px 36px; }
  .blog-reader-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */

.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}

/* Tooltip label */
.wa-float-label {
  background: var(--bg-card);
  color: var(--text-dark);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.wa-float:hover .wa-float-label {
  opacity: 1;
  transform: translateX(0);
}

/* Main icon button */
.wa-float-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
  flex-shrink: 0;
}

.wa-float:hover .wa-float-btn {
  transform: scale(1.1);
  box-shadow: 0 10px 32px rgba(37,211,102,0.55);
}

/* Pulse ring animation */
.wa-float-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37,211,102,0.35);
  animation: wa-pulse 2.2s ease-out infinite;
}

.wa-float-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37,211,102,0.18);
  animation: wa-pulse 2.2s ease-out 0.7s infinite;
}

@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

.wa-float-btn svg {
  position: relative;
  z-index: 1;
  color: #ffffff;
}

/* Mobile: move up a bit to avoid browser nav bars */
@media (max-width: 768px) {
  .wa-float {
    bottom: 20px;
    right: 16px;
  }
  .wa-float-btn {
    width: 52px;
    height: 52px;
  }
  .wa-float-label { display: none; }
}

/* ============================================================
   FLOATING HEADER MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --header-inset: 16px;
    --header-top: 10px;
    --header-height: 80px;
  }
  header {
    border-radius: 16px;
    height: 54px;
  }
  .mobile-nav {
    top: calc(var(--header-top) + 56px + 8px);
    border-radius: 16px;
  }
}

/* ============================================================
   GLASSMORPHISM LAYER
   Translucent frosted-glass treatment across key UI elements
   ============================================================ */

/* --- 1. HEADER: deeper frost --- */
header {
  background: linear-gradient(135deg,
    rgba(245,250,247,0.75) 0%,
    rgba(236,245,241,0.65) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 4px 32px rgba(7,59,36,0.08),
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 -1px 0 rgba(7,59,36,0.04) inset !important;
}
.dark header {
  background: linear-gradient(135deg,
    rgba(4,24,14,0.70) 0%,
    rgba(2,16,10,0.60) 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow:
    0 4px 32px rgba(0,0,0,0.40),
    0 1px 0 rgba(255,255,255,0.06) inset !important;
}
header.scrolled {
  background: linear-gradient(135deg,
    rgba(245,250,247,0.92) 0%,
    rgba(236,245,241,0.88) 100%) !important;
  box-shadow:
    0 8px 40px rgba(7,59,36,0.12),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}

/* --- 2. LOGO WRAPPER: frosted chip --- */
.logo-wrapper {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.dark .logo-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 3. FEATURE CARDS: light glass surface --- */
.feature-card {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.85) 0%,
    rgba(240,248,244,0.70) 100%) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 4px 24px rgba(7,59,36,0.06),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.feature-card:hover {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.95) 0%,
    rgba(236,248,242,0.85) 100%) !important;
  box-shadow:
    0 16px 48px rgba(7,59,36,0.12),
    0 0 0 1.5px rgba(236,192,27,0.30),
    0 1px 0 rgba(255,255,255,1) inset !important;
}
.dark .feature-card {
  background: linear-gradient(145deg,
    rgba(10,40,25,0.60) 0%,
    rgba(4,24,14,0.50) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.30) !important;
}

/* --- 4. PROPERTY CARDS: glass frame --- */
.property-card {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.90) 0%,
    rgba(242,249,245,0.75) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.80) !important;
  box-shadow:
    0 4px 20px rgba(7,59,36,0.06),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.property-card:hover {
  box-shadow:
    0 20px 52px rgba(7,59,36,0.13),
    0 0 0 1.5px rgba(7,59,36,0.18),
    0 1px 0 rgba(255,255,255,1) inset !important;
}
.dark .property-card {
  background: linear-gradient(160deg,
    rgba(8,35,20,0.65) 0%,
    rgba(3,18,10,0.55) 100%) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* --- 5. TESTIMONIAL CARDS: frosted --- */
.testimonial-card {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.85) 0%,
    rgba(240,249,245,0.70) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 4px 20px rgba(7,59,36,0.05),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.testimonial-card:hover {
  box-shadow:
    0 12px 36px rgba(7,59,36,0.10),
    0 0 0 1.5px rgba(236,192,27,0.25),
    0 1px 0 rgba(255,255,255,1) inset !important;
}

/* --- 6. BLOG CARDS: glass frame --- */
.blog-card {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.88) 0%,
    rgba(240,248,244,0.72) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow:
    0 4px 20px rgba(7,59,36,0.06),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.blog-card:hover {
  box-shadow:
    0 16px 44px rgba(7,59,36,0.12),
    0 0 0 1.5px rgba(7,59,36,0.15),
    0 1px 0 rgba(255,255,255,1) inset !important;
}

/* --- 7. SECTOR CARDS: glass panel --- */
.sector-card {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.85) 0%,
    rgba(240,248,244,0.70) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 4px 20px rgba(7,59,36,0.05),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.sector-card:hover {
  box-shadow:
    0 14px 40px rgba(7,59,36,0.12),
    0 0 0 1.5px rgba(236,192,27,0.30),
    0 1px 0 rgba(255,255,255,1) inset !important;
}
.dark .sector-card {
  background: linear-gradient(145deg,
    rgba(8,35,20,0.60) 0%,
    rgba(3,18,10,0.50) 100%) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* --- 8. MASTER PLAN CARDS: glass --- */
.master-plan-card {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.85) 0%,
    rgba(240,248,244,0.70) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 4px 20px rgba(7,59,36,0.06),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}

/* --- 9. HERO SEARCH WIDGET: deep glass --- */
.search-widget {
  background: rgba(1,12,6,0.55) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 20px 64px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.08) inset !important;
}
.search-input-group {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.search-input-group:focus-within {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(236,192,27,0.45) !important;
}

/* --- 10. MODAL OVERLAY & CONTENT: deep glass --- */
.modal-overlay {
  background: rgba(1,12,6,0.65) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}
.modal-content {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.96) 0%,
    rgba(240,249,244,0.92) 100%) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.40),
    0 1px 0 rgba(255,255,255,1) inset !important;
}
.dark .modal-content {
  background: linear-gradient(145deg,
    rgba(4,28,16,0.95) 0%,
    rgba(2,16,10,0.92) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* --- 11. BLOG READER MODAL: glass panel --- */
#blog-reader-modal .blog-reader-content {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.98) 0%,
    rgba(243,250,247,0.96) 100%) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 40px 96px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,1) inset !important;
}
.dark #blog-reader-modal .blog-reader-content {
  background: linear-gradient(180deg,
    rgba(4,28,16,0.97) 0%,
    rgba(2,16,10,0.95) 100%) !important;
}

/* --- 12. FORM CONTROLS: frosted input fields --- */
.form-control {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(203,220,211,0.70) !important;
  box-shadow: inset 0 1px 3px rgba(7,59,36,0.04) !important;
}
.form-control:focus {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(11,90,58,0.50) !important;
  box-shadow:
    0 0 0 3px rgba(11,90,58,0.10),
    inset 0 1px 3px rgba(7,59,36,0.04) !important;
}
.dark .form-control {
  background: rgba(4,28,16,0.60) !important;
  border-color: rgba(11,58,36,0.40) !important;
  color: var(--text-dark);
}

/* --- 13. TAB BUTTONS: glass pills --- */
.tab-btn {
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.80) !important;
  box-shadow:
    0 2px 8px rgba(7,59,36,0.05),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.tab-btn:hover {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(7,59,36,0.25) !important;
}
.tab-btn.active {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  backdrop-filter: none;
  box-shadow: 0 4px 16px rgba(7,59,36,0.30) !important;
}

/* --- 14. MOBILE NAV: deep glass panel --- */
.mobile-nav {
  background: linear-gradient(160deg,
    rgba(245,250,247,0.90) 0%,
    rgba(235,246,241,0.85) 100%) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
  box-shadow:
    0 20px 64px rgba(7,59,36,0.12),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.dark .mobile-nav {
  background: linear-gradient(160deg,
    rgba(4,24,14,0.88) 0%,
    rgba(2,14,8,0.85) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* --- 15. GLASS CARD UTILITY: stronger --- */
.glass-card {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.60) 0%,
    rgba(240,248,244,0.40) 100%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
  box-shadow:
    0 4px 24px rgba(7,59,36,0.06),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.dark .glass-card {
  background: linear-gradient(135deg,
    rgba(11,50,30,0.50) 0%,
    rgba(4,24,14,0.40) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* --- 16. FOOTER: dark deep glass --- */
footer {
  background: linear-gradient(180deg,
    rgba(2,22,12,0.97) 0%,
    rgba(1,10,5,0.99) 100%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(236,192,27,0.12) !important;
}

/* --- 17. PROPERTY MODAL: glass depth --- */
#property-details-modal .modal-content {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.97) 0%,
    rgba(240,249,245,0.95) 100%) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.88) !important;
}
.dark #property-details-modal .modal-content {
  background: linear-gradient(160deg,
    rgba(4,28,16,0.97) 0%,
    rgba(2,16,10,0.95) 100%) !important;
}

/* --- 18. SUCCESS BANNER: glass tint --- */
.success-banner {
  background: linear-gradient(135deg,
    rgba(236,192,27,0.10) 0%,
    rgba(236,192,27,0.05) 100%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(236,192,27,0.25) !important;
}

/* --- 19. BLOG READER CTA BOX: glass --- */
.blog-reader-cta {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.65) 0%,
    rgba(240,249,245,0.45) 100%) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 4px 20px rgba(7,59,36,0.06),
    0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.dark .blog-reader-cta {
  background: linear-gradient(135deg,
    rgba(11,50,30,0.50) 0%,
    rgba(4,24,14,0.40) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Dark mode card glass overrides */
.dark .blog-card,
.dark .testimonial-card,
.dark .master-plan-card,
.dark .blog-card {
  background: linear-gradient(160deg,
    rgba(8,35,20,0.60) 0%,
    rgba(3,18,10,0.50) 100%) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* ============================================================
   GLASSY MODERN THEME OVERHAUL
   Full site glass + modern premium treatment
   ============================================================ */

/* === BODY: Gradient mesh background === */
body {
  background: linear-gradient(135deg,
    #f0f7f3 0%,
    #e8f3ee 30%,
    #f5f9f6 60%,
    #edf5f1 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
.dark body, body.dark {
  background: linear-gradient(135deg,
    #010e07 0%,
    #021509 30%,
    #010c06 60%,
    #020f08 100%) !important;
}

/* === SECTIONS: alternating glass panels === */
section {
  position: relative;
}
section:nth-of-type(even) {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.50) 0%,
    rgba(240,249,245,0.35) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dark section:nth-of-type(even) {
  background: linear-gradient(135deg,
    rgba(4,24,14,0.50) 0%,
    rgba(2,14,8,0.35) 100%);
}

/* === HERO: premium deep glass === */
.hero {
  background: linear-gradient(160deg, #010e07 0%, #042416 50%, #010e07 100%) !important;
  position: relative;
}
.hero::before {
  background: radial-gradient(circle at 20% 50%,
    rgba(236,192,27,0.07) 0%, transparent 55%) !important;
  width: 700px !important;
  height: 700px !important;
}
.hero::after {
  background: radial-gradient(circle at 80% 60%,
    rgba(11,90,58,0.22) 0%, transparent 55%) !important;
  width: 600px !important;
  height: 600px !important;
}

/* === HEADER: final compact capsule === */
header {
  border-radius: 12px !important;
}
header.scrolled {
  border-radius: 12px !important;
}

/* === BUTTONS: glass shimmer === */
.btn-primary {
  background: linear-gradient(135deg, #073B24 0%, #0e6642 100%) !important;
  box-shadow:
    0 4px 16px rgba(7,59,36,0.35),
    0 1px 0 rgba(255,255,255,0.15) inset !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.btn-primary:hover {
  box-shadow:
    0 8px 28px rgba(7,59,36,0.45),
    0 1px 0 rgba(255,255,255,0.20) inset !important;
}
.btn-accent {
  background: linear-gradient(135deg, #ECC01B 0%, #d4a010 100%) !important;
  box-shadow:
    0 4px 16px rgba(236,192,27,0.35),
    0 1px 0 rgba(255,255,255,0.25) inset !important;
}
.btn-outline {
  background: rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(203,220,211,0.70) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(7,59,36,0.30) !important;
}

/* === CARDS: universal glass depth + border system === */
.feature-card,
.property-card,
.blog-card,
.testimonial-card,
.sector-card,
.master-plan-card {
  /* Outer glass frame */
  outline: 1px solid rgba(255,255,255,0.70);
  outline-offset: 0px;
}
.dark .feature-card,
.dark .property-card,
.dark .blog-card,
.dark .testimonial-card,
.dark .sector-card,
.dark .master-plan-card {
  outline: 1px solid rgba(255,255,255,0.05);
}

/* === PROPERTY IMAGE: richer scrim === */
.property-image-container::after {
  background: linear-gradient(
    to top,
    rgba(2,14,8,0.80) 0%,
    rgba(2,14,8,0.30) 40%,
    transparent 100%) !important;
}

/* === SECTION HEADINGS: glass pill label === */
.section-title {
  position: relative;
  display: inline-block;
}

/* === BADGES: glass pill === */
.property-badge {
  background: linear-gradient(135deg,
    rgba(7,59,36,0.90) 0%,
    rgba(11,90,58,0.85) 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.property-price {
  background: linear-gradient(135deg,
    rgba(236,192,27,0.95) 0%,
    rgba(212,168,16,0.92) 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}

/* === SECTOR TAG === */
.sector-tag {
  background: linear-gradient(135deg,
    rgba(11,90,58,0.12) 0%,
    rgba(7,59,36,0.06) 100%) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(11,90,58,0.15);
}

/* === FOOTER INFO ICONS === */
.footer-info-row svg {
  color: var(--accent);
  opacity: 0.80;
}

/* === SCROLLBAR: green glass === */
::-webkit-scrollbar-track {
  background: rgba(240,248,244,0.30) !important;
  backdrop-filter: blur(4px);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(11,90,58,0.45) 0%,
    rgba(7,59,36,0.35) 100%) !important;
  border: 2px solid rgba(255,255,255,0.20) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(11,90,58,0.70) 0%,
    rgba(7,59,36,0.60) 100%) !important;
}

/* === MOBILE: tighten header pill on small screens === */
@media (max-width: 768px) {
  header {
    border-radius: 20px !important;
  }
}

/* === STAT / HIGHLIGHT NUMBERS: glass chips === */
[class*="stat"] .stat-value,
[class*="stat"] strong {
  background: linear-gradient(135deg, #073B24, #0B5A3A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   MASTER FIX + FULL BEAUTY OVERHAUL
   ============================================================ */

/* === FIX: Mobile nav � full width, properly positioned === */
@media (max-width: 900px) {
  :root {
    --header-inset: 12px;
    --header-top: 12px;
    --header-height: 80px;
    --header-height-actual: 52px;
  }
  header {
    border-radius: 12px !important;
    height: var(--header-height-actual, 52px) !important;
  }
  /* Full-width floating panel on mobile */
  .mobile-nav {
    display: flex !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(var(--header-top) + var(--header-height-actual, 52px) + 8px) !important;
    bottom: 16px !important;
    border-radius: 12px !important;
    padding: 28px 20px !important;
    transform: translateX(120%) !important;
    background: rgba(245, 250, 247, 0.95) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.80) !important;
    box-shadow: 0 24px 64px rgba(7,59,36,0.18) !important;
  }
  .dark .mobile-nav {
    background: rgba(2, 18, 10, 0.95) !important;
    border-color: rgba(255,255,255,0.07) !important;
  }
  .mobile-nav.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .mobile-nav a {
    font-size: 1.1rem !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(7,59,36,0.07) !important;
  }
  .mobile-nav a:last-of-type { border-bottom: none !important; }
}

/* === BEAUTIFUL BODY BACKGROUND === */
body {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(11,90,58,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(236,192,27,0.04) 0%, transparent 50%),
    linear-gradient(160deg, #f2f8f5 0%, #edf5f1 40%, #f5f9f7 100%) !important;
  background-attachment: fixed !important;
}
.dark body, body.dark {
  background:
    radial-gradient(ellipse at 10% 10%, rgba(11,90,58,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(236,192,27,0.06) 0%, transparent 50%),
    linear-gradient(160deg, #010c06 0%, #021409 40%, #010b06 100%) !important;
  background-attachment: fixed !important;
}

/* === HERO: richer cinematic gradient === */
.hero {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(236,192,27,0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 40%, rgba(11,90,58,0.18) 0%, transparent 45%),
    linear-gradient(155deg, #010e07 0%, #041c0d 45%, #010e07 100%) !important;
}
.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 25% 55%, rgba(236,192,27,0.08) 0%, transparent 40%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* === HEADER: fully polished glass pill === */
header {
  background: linear-gradient(135deg,
    rgba(248,252,249,0.82) 0%,
    rgba(238,247,243,0.72) 100%) !important;
  backdrop-filter: blur(32px) saturate(200%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.05) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.80) inset,
    0 -1px 0 rgba(7,59,36,0.04) inset,
    0 8px 32px rgba(7,59,36,0.10),
    0 1px 4px rgba(7,59,36,0.06) !important;
}
.dark header {
  background: linear-gradient(135deg,
    rgba(3,20,11,0.80) 0%,
    rgba(2,14,8,0.72) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 8px 32px rgba(0,0,0,0.45) !important;
}

/* === ALL GLASS CARDS: unified system === */
.feature-card,
.property-card,
.blog-card,
.testimonial-card,
.sector-card,
.master-plan-card,
.contact-info-item,
.legal-section {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.88) 0%,
    rgba(241,249,245,0.72) 100%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 4px 24px rgba(7,59,36,0.07),
    0 1px 3px rgba(7,59,36,0.04) !important;
}
.dark .feature-card,
.dark .property-card,
.dark .blog-card,
.dark .testimonial-card,
.dark .sector-card,
.dark .master-plan-card {
  background: linear-gradient(145deg,
    rgba(6,32,18,0.70) 0%,
    rgba(3,18,10,0.58) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.32) !important;
}

/* Card hover: gold shimmer ring */
.feature-card:hover,
.property-card:hover,
.blog-card:hover,
.testimonial-card:hover,
.sector-card:hover {
  border: 1px solid rgba(236,192,27,0.35) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 20px 56px rgba(7,59,36,0.13),
    0 0 0 1px rgba(236,192,27,0.20) !important;
  transform: translateY(-4px) !important;
}

/* === SECTION BACKGROUNDS: floating glass sheets === */
.section-alt {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.55) 0%,
    rgba(238,248,243,0.40) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.dark .section-alt {
  background: linear-gradient(135deg,
    rgba(4,22,12,0.55) 0%,
    rgba(2,12,7,0.40) 100%) !important;
}

/* === BUTTONS: refined glass === */
.btn {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.btn-primary {
  background: linear-gradient(135deg, #063520 0%, #0a5235 60%, #073B24 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 16px rgba(7,59,36,0.38) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #084024 0%, #0c5e3d 60%, #084024 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 8px 28px rgba(7,59,36,0.50) !important;
  transform: translateY(-2px) !important;
}
.btn-accent {
  background: linear-gradient(135deg, #ECC01B 0%, #d4a810 60%, #c49a0e 100%) !important;
  color: #063520 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 4px 16px rgba(236,192,27,0.38) !important;
}
.btn-accent:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 8px 28px rgba(236,192,27,0.50) !important;
  transform: translateY(-2px) !important;
}
.btn-outline {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(180,210,196,0.75) !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(7,59,36,0.40) !important;
  transform: translateY(-2px) !important;
}

/* === SEARCH WIDGET: cinematic dark glass === */
.search-widget {
  background: linear-gradient(135deg,
    rgba(1,10,5,0.68) 0%,
    rgba(2,18,10,0.58) 100%) !important;
  backdrop-filter: blur(36px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 64px rgba(0,0,0,0.60),
    0 0 0 1px rgba(236,192,27,0.06) !important;
}

/* === FORM INPUTS: frosted === */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(180,210,196,0.65) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 3px rgba(7,59,36,0.04),
    0 1px 0 rgba(255,255,255,0.90) !important;
  transition: all 0.2s ease !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(11,90,58,0.55) !important;
  box-shadow:
    0 0 0 3px rgba(11,90,58,0.10),
    inset 0 1px 3px rgba(7,59,36,0.04) !important;
  outline: none !important;
}
.dark .form-control,
.dark input,
.dark textarea,
.dark select {
  background: rgba(4,24,14,0.65) !important;
  border-color: rgba(11,58,36,0.40) !important;
  color: var(--text-dark) !important;
}

/* === MODALS: deep glass === */
.modal-overlay {
  background: rgba(1,8,4,0.70) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
.modal-content {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.97) 0%,
    rgba(241,250,246,0.94) 100%) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,0.90) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 40px 96px rgba(0,0,0,0.42) !important;
}

/* === TAB PILLS: glass === */
.tab-btn {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(200,220,210,0.70) !important;
  border-radius: 50px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset !important;
  transition: all 0.22s ease !important;
}
.tab-btn:hover {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(7,59,36,0.30) !important;
}
.tab-btn.active {
  background: linear-gradient(135deg, #063520, #0a5235) !important;
  color: #fff !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(7,59,36,0.35),
              0 1px 0 rgba(255,255,255,0.15) inset !important;
}

/* === NAV LINKS: glass pill hover === */
nav.desktop-nav a {
  border-radius: 8px !important;
  padding: 6px 12px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
nav.desktop-nav a:hover {
  background: rgba(7,59,36,0.07) !important;
}
nav.desktop-nav a.active {
  background: rgba(7,59,36,0.08) !important;
}

/* === FOOTER: deep dark glass === */
footer {
  background: linear-gradient(180deg,
    rgba(1,12,6,0.98) 0%,
    rgba(1,7,4,1) 100%) !important;
  border-top: 1px solid rgba(236,192,27,0.15) !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.20) !important;
}

/* === SECTION TITLE: gold underline pill === */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg,
    rgba(236,192,27,0.12) 0%,
    rgba(236,192,27,0.06) 100%);
  border: 1px solid rgba(236,192,27,0.25);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* === PROPERTY BADGE + PRICE: premium glass === */
.property-badge {
  background: linear-gradient(135deg,
    rgba(6,53,32,0.95) 0%,
    rgba(10,82,53,0.92) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20) !important;
}
.property-price {
  background: linear-gradient(135deg,
    rgba(236,192,27,0.98) 0%,
    rgba(212,168,16,0.95) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 2px 8px rgba(236,192,27,0.25) !important;
  color: #063520 !important;
  font-weight: 700 !important;
}

/* === TESTIMONIALS: star glow === */
.stars { color: #ECC01B !important; }

/* === BLOG READER: glass hero === */
.blog-reader-hero {
  background-size: cover !important;
  background-position: center !important;
}
.blog-reader-hero-overlay {
  background: linear-gradient(to bottom,
    rgba(1,12,6,0.15) 0%,
    rgba(1,12,6,0.92) 100%) !important;
  backdrop-filter: blur(0px) !important;
}

/* === WHATSAPP: premium ring === */
.wa-float-btn {
  background: linear-gradient(135deg, #25D366 0%, #1aad56 60%, #128C7E 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 6px 24px rgba(37,211,102,0.50) !important;
}

/* === SCROLLBAR: elegant === */
* { scrollbar-width: thin; scrollbar-color: rgba(11,90,58,0.40) transparent; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(11,90,58,0.50), rgba(7,59,36,0.38));
  border-radius: 10px;
}

/* === GLASS DIVIDERS: gold rule === */
hr, .divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236,192,27,0.30) 30%,
    rgba(236,192,27,0.50) 50%,
    rgba(236,192,27,0.30) 70%,
    transparent 100%) !important;
}

/* === RESPONSIVE: smaller screens keep the glass === */
@media (max-width: 480px) {
  header {
    border-radius: 14px !important;
    height: 48px !important;
  }
  .mobile-nav {
    left: 8px !important;
    right: 8px !important;
    border-radius: 14px !important;
  }
}


/* ============================================================
   SPECIFIC DESIGN FIXES & BEAUTIFICATION
   ============================================================ */

/* --- 1. TRUST STATS BAR GLASS OVERHAUL (FIX ss1) --- */
.trust-stats-section {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

.trust-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  text-align: center;
  /* Premium Glassy Theme background */
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.90) 0%,
    rgba(240, 248, 244, 0.75) 100%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 16px !important;
  padding: 20px 28px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 10px 30px rgba(7,59,36,0.06),
    0 1px 3px rgba(7,59,36,0.04) !important;
  outline: 1px solid rgba(255,255,255,0.70) !important;
}

.dark .trust-stats-bar {
  background: linear-gradient(145deg,
    rgba(6,32,18,0.70) 0%,
    rgba(3,18,10,0.58) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  outline: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.40) !important;
}

/* --- 2. HEADER LOGO SIZE & SURROUNDING BLEND (FIX ss2) --- */
.logo-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: transform 0.2s ease !important;
}
.logo-wrapper:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: scale(1.03) !important;
}

.logo-image {
  height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  border-radius: 0 !important;
  display: block !important;
  transition: transform 0.2s ease !important;
}

.dark .logo-image {
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* --- 3. TESTIMONIALS SECTION BG GREEN COLOR (FIX ss3) --- */
.testimonials-section {
  position: relative !important;
  background: linear-gradient(135deg, #032114 0%, #05331e 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(236,192,27,0.15) !important;
  border-bottom: 1px solid rgba(236,192,27,0.08) !important;
  overflow: hidden !important;
}

/* Background gridline overlay inside testimonials section */
.testimonials-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgNDAwIDIwMCI+PHJlY3QgeD0iMTAiIHk9IjgwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wNykiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9IjI1IiB5MT0iODAiIHgyPSIyNSIgeTI9IjIwMCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSI0MCIgeTE9IjgwIiB4Mj0iNDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iNTUiIHkxPSI4MCIgeDI9IjU1IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMTEwIiB4Mj0iNzAiIHkyPSIxMTAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTAiIHkxPSIxNDAiIHgyPSI3MCIgeTI9Ijx0cnVuY2F0ZWQ+NDAwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMTcwIiB4Mj0iNzAiIHkyPSIxNzAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cmVjdCB4PSI4MCIgeT0iNDAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxNjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA3KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTAwIiB5MT0iNDAiIHgyPSIxMDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTIwIiB5MT0iNDAiIHgyPSIxMjAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTQwIiB5MT0iNDAiIHgyPSIxNDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iODAiIHkxPSI3MCIgeDI9IjE2MCIgeTI9IjcwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjgwIiB5MT0iMTAwIiB4Mj0iMTYwIiB5Mj0iMTAwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjgwIiB5MT0iMTMwIiB4Mj0iMTYwIiB5Mj0iMTMwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjgwIiB5MT0iMTYwIiB4Mj0iMTYwIiB5Mj0iMTYwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PHBvbHlnb24gcG9pbnRzPSIxNzUsOTAgMjAwLDUwIDIyNSw5MCAyMjUsMjAwIDE3NSwyMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA3KSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMjAwIiB5MT0iNTAiIHgyPSIyMDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTc1IiB5MT0iMTIwIiB4Mj0iMjI1IiB5Mj0iMTIwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjE3NSIgeTE9IjE1MCIgeDI9IjIyNSIgeTI9IjE1MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIxNzUiIHkxPSIxODAiIHgyPSIyMjUiIHkyPSIxODAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cmVjdCB4PSIyNDAiIHk9IjExMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjkwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wNykiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9IjI1NyIgeTE9IjExMCIgeDI9IjI1NyIgeTI9IjIwMCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIyNzQiIHkxPSIxMTAiIHgyPSIyNzQiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMjkxIiB5MT0iMTEwIiB4Mj0iMjkxIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjI0MCIgeTE9IjEzMiIgeDI9IjMxMCIgeTI9IjEzMiIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIyNDAiIHkxPSIxNTQiIHgyPSIzMTAiIHkyPSIxNTQiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMjQwIiB5MT0iMTc2IiB4Mj0iMzEwIiB5Mj0iMTc2IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cmVjdCB4PSIzMjUiIHk9IjIwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTgwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wNykiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9IjM1NSIgeTE9IjAiIHgyPSIzNTUiIHkyPSIyMCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDciIHN0cm9rZS13aWR0aD0iMS41Ii8+PGxpbmUgeDE9IjM0MCIgeTE9IjIwIiB4Mj0iMzQwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjM1NSIgeTE9IjIwIiB4Mj0iMzU1IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjM3MCIgeTE9IjIwIiB4Mj0iMzcwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjMyNSIgeTE9IjUxIiB4Mj0iMzg1IiB5Mj0iNTEiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMzI1IiB5MT0iODAiIHgyPSIzODUiIHkyPSI4MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIzMjUiIHkxPSIxMTAiIHgyPSIzODUiIHkyPSIxMTAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMzI1IiB5MT0iMTQwIiB4Mj0iMzg1IiB5Mj0iMTQwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjMyNSIgeTE9IjE3MCIgeDI9IjM4NSIgeTI9IjE3MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjwvc3ZnPg==") !important;
  background-size: 400px 200px !important;
  background-position: bottom center !important;
  background-repeat: repeat-x !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.28 !important;
}

.testimonials-section > * {
  position: relative !important;
  z-index: 2 !important;
}

.dark .testimonials-section {
  background: linear-gradient(135deg, #010c06 0%, #031b0e 100%) !important;
}

/* Make testimonial cards inside look extremely glassy on the green background */
.testimonials-section .testimonial-card {
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 100%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 8px 32px rgba(0,0,0,0.20) !important;
  color: #ffffff !important;
}
.testimonials-section .testimonial-card .testimonial-quote {
  color: rgba(255, 255, 255, 0.9) !important;
}
.testimonials-section .testimonial-card .testimonial-author-name {
  color: #ffffff !important;
}
.testimonials-section .testimonial-card .testimonial-author-title {
  color: rgba(255, 255, 255, 0.6) !important;
}
.testimonials-section .testimonial-card:hover {
  border-color: rgba(236,192,27,0.40) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 16px 48px rgba(0,0,0,0.30),
    0 0 0 1px rgba(236,192,27,0.25) !important;
}

/* ============================================================
   SEARCH RECOMMENDATIONS AND INPUT FIX
   ============================================================ */

/* --- RESET SEARCH INPUT (FIX weird white line/capsule) --- */
.search-input-group input,
.search-input-group input[type="text"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  color: #ffffff !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 0.95rem !important;
}

/* --- RECOMMENDATIONS FLOATING DROPDOWN CONTAINER --- */
.search-recommendations-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.96) 0%,
    rgba(240,248,244,0.92) 100%) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 20px 48px rgba(7,59,36,0.18),
    0 1px 3px rgba(7,59,36,0.04) !important;
  z-index: 100;
  display: none;
  text-align: left;
  animation: slide-down 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dark .search-recommendations-dropdown {
  background: linear-gradient(135deg,
    rgba(4,28,16,0.96) 0%,
    rgba(2,16,10,0.93) 100%) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 48px rgba(0,0,0,0.50) !important;
}

@keyframes slide-down {
  0% { transform: translateY(-8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.search-recs-section {
  width: 100%;
}

.search-recs-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.dark .search-recs-title {
  color: var(--accent);
}

.search-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* Recommendations items */
.search-recs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.50);
  border: 1px solid rgba(180,210,196,0.25);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dark .search-recs-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.04);
}

.search-recs-item:hover {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(7,59,36,0.06);
  transform: translateY(-1px);
}
.dark .search-recs-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}

.search-recs-item img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
}

.search-recs-item-info {
  display: flex;
  flex-direction: column;
}

.search-recs-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
}

.search-recs-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Search tags */
.search-recs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.search-recs-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(11,90,58,0.06);
  border: 1px solid rgba(11,90,58,0.12);
  padding: 4px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dark .search-recs-tag {
  color: var(--accent);
  background: rgba(236,192,27,0.06);
  border-color: rgba(236,192,27,0.12);
}

.search-recs-tag:hover {
  background: var(--gradient-primary);
  color: #ffffff !important;
  border-color: transparent;
  transform: translateY(-1px);
}
.dark .search-recs-tag:hover {
  background: linear-gradient(135deg, #ECC01B 0%, #D4A810 100%) !important;
  color: #032114 !important;
}

/* ============================================================
   GLOBAL AESTHETICS & HIGH-END DESIGN BEAUTIFICATION
   ============================================================ */

/* --- AMBIENT BACKGROUND GLOW BLOBS --- */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  top: -10%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(11,90,58,0.05) 0%, rgba(236,192,27,0.02) 70%, transparent 100%);
  z-index: -99;
  filter: blur(120px);
  pointer-events: none;
  transition: background 0.3s ease;
}
.dark body::before {
  background: radial-gradient(circle, rgba(11,90,58,0.12) 0%, rgba(236,192,27,0.03) 70%, transparent 100%);
}
body::after {
  content: "";
  position: fixed;
  bottom: -10%;
  right: -10%;
  width: 45%;
  height: 45%;
  background: radial-gradient(circle, rgba(236,192,27,0.03) 0%, rgba(11,90,58,0.04) 70%, transparent 100%);
  z-index: -99;
  filter: blur(120px);
  pointer-events: none;
  transition: background 0.3s ease;
}
.dark body::after {
  background: radial-gradient(circle, rgba(236,192,27,0.06) 0%, rgba(11,90,58,0.06) 70%, transparent 100%);
}

/* --- PREMIUM DESIGNER SCROLLBARS --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
  background: rgba(11,90,58,0.22);
  border-radius: 20px;
  border: 2px solid var(--bg-light);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(11,90,58,0.40);
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(236,192,27,0.18);
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(236,192,27,0.30);
}

/* --- NAV LINK ACTIVE GLOW --- */
nav.desktop-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(11,90,58,0.3);
  transition: var(--transition);
}
.dark nav.desktop-nav a.active::after {
  background: var(--accent);
  box-shadow: 0 1px 8px rgba(236,192,27,0.5);
}

/* --- MICRO GLOW FOR GLASS CARDS & MODALS --- */
.property-card, .blog-card, .modal-content, .stats-card, .search-recommendations-dropdown {
  border: 1px solid rgba(255,255,255,0.70) !important;
  box-shadow: 0 10px 30px rgba(7,59,36,0.06), 0 1px 0 rgba(255,255,255,0.80) inset !important;
}
.dark .property-card, .dark .blog-card, .dark .modal-content, .dark .stats-card, .dark .search-recommendations-dropdown {
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset !important;
}

/* --- 5. FEATURED LISTINGS & CLIENT STORIES BG CITY SKYLINE PATTERN --- */
.featured-listings-section,
.testimonials-section,
.news-section {
  position: relative !important;
  overflow: hidden !important;
}

.featured-listings-section {
  padding-bottom: 110px !important;
}

.featured-listings-section::before,
.testimonials-section::before,
.news-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgNDAwIDIwMCI+PHJlY3QgeD0iMTAiIHk9IjgwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMjUiIHkxPSI4MCIgeDI9IjI1IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iNDAiIHkxPSI4MCIgeDI9IjQwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iNTUiIHkxPSI4MCIgeDI9IjU1IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTAiIHkxPSIxMTAiIHgyPSI3MCIgeTI9IjExMCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMTQwIiB4Mj0iNzAiIHkyPSIxNDAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIxMCIgeTE9IjE3MCIgeDI9IjcwIiB5Mj0iMTcwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cmVjdCB4PSI4MCIgeT0iNDAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxNjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMTIpIiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSIxMDAiIHkxPSI0MCIgeDI9IjEwMCIgeTI9IjIwMCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjEyMCIgeTE9IjQwIiB4Mj0iMTIwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTQwIiB5MT0iNDAiIHgyPSIxNDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSI4MCIgeTE9IjcwIiB4Mj0iMTYwIiB5Mj0iNzAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSI4MCIgeTE9IjEwMCIgeDI9IjE2MCIgeTI9IjEwMCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjgwIiB5MT0iMTMwIiB4Mj0iMTYwIiB5Mj0iMTMwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iODAiIHkxPSIxNjAiIHgyPSIxNjAiIHkyPSIxNjAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxwb2x5Z29uIHBvaW50cz0iMTc1LDkwIDIwMCw1MCAyMjUsOTAgMjI1LDIwMCAxNzUsMjAwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMjAwIiB5MT0iNTAiIHgyPSIyMDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIxNzUiIHkxPSIxMjAiIHgyPSIyMjUiIHkyPSIxMjAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIxNzUiIHkxPSIxNTAiIHgyPSIyMjUiIHkyPSIxNTAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIxNzUiIHkxPSIxODAiIHgyPSIyMjUiIHkyPSIxODAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxyZWN0IHg9IjI0MCIgeT0iMTEwIiB3aWR0aD0iNzAiIGhlaWdodD0iOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMTIpIiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSIyNTciIHkxPSIxMTAiIHgyPSIyNTciIHkyPSIyMDAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIyNzQiIHkxPSIxMTAiIHgyPSIyNzQiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIyOTEiIHkxPSIxMTAiIHgyPSIyOTEiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIyNDAiIHkxPSIxMzIiIHgyPSUzMTAiIHkyPSIxMzIiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIyNDAiIHkxPSIxNTQiIHgyPSUzMTAiIHkyPSIxNTQiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIyNDAiIHkxPSIxNzYiIHgyPSUzMTAiIHkyPSIxNzYiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxyZWN0IHg9IjMyNSIgeT0iMjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMTIpIiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSIzNTUiIHkxPSIwIiB4Mj0iMzU1IiB5Mj0iMjAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMTIpIiBzdHJva2Utd2lkdGg9IjEuNSIvPjxsaW5lIHgxPSIzNDAiIHkxPSIyMCIgeDI9IjM0MCIgeTI9IjIwMCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjM1NSIgeTE9IjIwIiB4Mj0iMzU1IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMzcwIiB5MT0iMjAiIHgyPSUzNzAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSg3LDU5LDM2LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIzMjUiIHkxPSI1MCIgeDI9IjM4NSIgeTI9IjUwIiBzdHJva2U9InJnYmEoNyw1OSwzNiwwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMzI1IiB5MT0iODAiIHgyPSIzODUiIHkyPSI4MCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjMyNSIgeTE9IjExMCIgeDI9IjM4NSIgeTI9IjExMCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjMyNSIgeTE9IjE0MCIgeDI9IjM4NSIgeTI9IjE0MCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjMyNSIgeTE9IjE3MCIgeDI9IjM4NSIgeTI9IjE3MCIgc3Ryb2tlPSJyZ2JhKDcsNTksMzYsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PC9zdmc+") !important;
  background-size: 400px 200px !important;
  background-position: center !important;
  background-repeat: repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
}

.dark .featured-listings-section::before,
.dark .testimonials-section::before,
.dark .news-section::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgNDAwIDIwMCI+PHJlY3QgeD0iMTAiIHk9IjgwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMjUiIHkxPSI4MCIgeDI9IjI1IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iNDAiIHkxPSI4MCIgeDI9IjQwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iNTUiIHkxPSI4MCIgeDI9IjU1IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTAiIHkxPSIxMTAiIHgyPSI3MCIgeTI9IjExMCIgc3Ryb2tlPSJyZ2JhKDIzNiwxOTIsMjcsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMTQwIiB4Mj0iNzAiIHkyPSIxNDAiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIxMCIgeTE9IjE3MCIgeDI9IjcwIiB5Mj0iMTcwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cmVjdCB4PSI4MCIgeT0iNDAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxNjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMTAwIiB5MT0iNDAiIHgyPSIxMDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIxMjAiIHkxPSI0MCIgeDI9IjEyMCIgeTI9IjIwMCIgc3Ryb2tlPSJyZ2JhKDIzNiwxOTIsMjcsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjE0MCIgeTE9IjQwIiB4Mj0iMTQwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iODAiIHkxPSI3MCIgeDI9IjE2MCIgeTI9IjcwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iODAiIHkxPSIxMDAiIHgyPSIxNjAiIHkyPSIxMDAiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSI4MCIgeTE9IjEzMCIgeDI9IjE2MCIgeTI9IjEzMCIgc3Ryb2tlPSJyZ2JhKDIzNiwxOTIsMjcsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjgwIiB5MT0iMTYwIiB4Mj0iMTYwIiB5Mj0iMTYwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cG9seWdvbiBwb2ludHM9IjE3NSw5MCAyMDAsNTAgMjI1LDkwIDIyNSwyMDAgMTc1LDIwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDIzNiwxOTIsMjcsMC4xMikiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9IjIwMCIgeTE9IjUwIiB4Mj0iMjAwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTc1IiB5MT0iMTIwIiB4Mj0iMjI1IiB5Mj0iMTIwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTc1IiB5MT0iMTUwIiB4Mj0iMjI1IiB5Mj0iMTUwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMTc1IiB5MT0iMTgwIiB4Mj0iMjI1IiB5Mj0iMTgwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cmVjdCB4PSIyNDAiIHk9IjExMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjkwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMjU3IiB5MT0iMTEwIiB4Mj0iMjU3IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMjc0IiB5MT0iMTEwIiB4Mj0iMjc0IiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMjkxIiB5MT0iMTEwIiB4Mj0iMjkxIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMjQwIiB5MT0iMTMyIiB4Mj0iMzEwIiB5Mj0iMTMyIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMjQwIiB5MT0iMTU0IiB4Mj0iMzEwIiB5Mj0iMTU0IiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMjQwIiB5MT0iMTc2IiB4Mj0iMzEwIiB5Mj0iMTc2IiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cmVjdCB4PSIzMjUiIHk9IjIwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTgwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjEyKSIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iMzU1IiB5MT0iMCIgeDI9IjM1NSIgeTI9IjIwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjEyKSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iMzQwIiB5MT0iMjAiIHgyPSIzNDAiIHkyPSIyMDAiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIzNTUiIHkxPSIyMCIgeDI9IjM1NSIgeTI9IjIwMCIgc3Ryb2tlPSJyZ2JhKDIzNiwxOTIsMjcsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjM3MCIgeTE9IjIwIiB4Mj0iMzcwIiB5Mj0iMjAwIiBzdHJva2U9InJnYmEoMjM2LDE5MiwyNywwLjA2KSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48bGluZSB4MT0iMzI1IiB5MT0iNTAiIHgyPSIzODUiIHkyPSI1MCIgc3Ryb2tlPSJyZ2JhKDIzNiwxOTIsMjcsMC4wNikiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjMyNSIgeTE9IjgwIiB4Mj0iMzg1IiB5Mj0iODAiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIzMjUiIHkxPSIxMTAiIHgyPSIzODUiIHkyPSIxMTAiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIzMjUiIHkxPSIxNDAiIHgyPSIzODUiIHkyPSIxNDAiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxsaW5lIHgxPSIzMjUiIHkxPSIxN0AiIHgyPSIzODUiIHkyPSIxN0AiIHN0cm9rZT0icmdiYSgyMzYsMTkyLDI3LDAuMDYpIiBzdHJva2Utd2lkdGg9IjAuOCIvPjwvc3ZnPg==") !important;
}

.featured-listings-section > *,
.testimonials-section > *,
.news-section > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   CUSTOM OVERRIDES: AVANT-GARDE LUXURY EDITORIAL THEME
   ========================================================================== */

.logo-wrapper, .dark .logo-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: transform 0.2s ease !important;
  display: block !important;
}
.logo-wrapper:hover {
  transform: scale(1.03) !important;
}

header .logo-image, 
footer .logo-image, 
.admin-topbar .logo-image {
  height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Light background states: render original green/gold logo */
header .logo-image,
body:not(.home-page) header:not(.scrolled) .logo-image {
  filter: none !important;
}

/* Dark mode and footer: render original logo in solid white for visibility */
.dark header .logo-image,
footer .logo-image {
  filter: brightness(0) invert(1) !important;
}

/* --- 2. Avant-Garde Background Grid & Textures --- */
body {
  background-color: #f7faf8 !important;
  background-image: radial-gradient(rgba(7, 59, 36, 0.05) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  color: #052617 !important;
  font-family: 'Montserrat', sans-serif !important;
}
.dark body {
  background-color: #010a05 !important;
  background-image: radial-gradient(rgba(236, 192, 27, 0.02) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  color: #f2faf5 !important;
}

/* --- 3. Split-Screen Hero & Asymmetric Grids Layout --- */
.split-hero-container {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 40px !important;
  min-height: 80vh !important;
  align-items: center !important;
}
@media (max-width: 991px) {
  .split-hero-container {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

.hero-left-editorial {
  padding-right: 20px !important;
}
.hero-right-visual {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.visual-image-frame {
  border: 1px solid rgba(236, 192, 27, 0.25) !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}
.visual-image-frame img {
  border-radius: 16px !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Overlapping offset cards layout */
.grid-asymmetric {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 48px !important;
  padding: 24px 0 !important;
}
.grid-asymmetric > *:nth-child(even) {
  transform: translateY(24px) !important;
}
@media (max-width: 768px) {
  .grid-asymmetric > *:nth-child(even) {
    transform: none !important;
  }
}

/* --- 4. Floating Glass Capsule Navigation --- */
header {
  max-width: 1200px !important;
  margin: 20px auto !important;
  left: 20px !important;
  right: 20px !important;
  border-radius: 50px !important; /* Fully Rounded Capsule shape */
  background: rgba(255, 255, 255, 0.85) !important; /* Frosted white capsule to preserve logo colors */
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(236, 192, 27, 0.3) !important; /* Gold Rim Capsule Dock */
  box-shadow: 0 12px 40px rgba(7, 59, 36, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dark header {
  background: rgba(2, 16, 10, 0.85) !important; /* Dark green/black glass capsule */
  border-color: rgba(236, 192, 27, 0.15) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

header.scrolled {
  margin: 10px auto !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 15px 45px rgba(7, 59, 36, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.dark header.scrolled {
  background: rgba(2, 16, 10, 0.95) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Disable old underline active state overlays */
nav.desktop-nav a::after, 
nav.desktop-nav a.active::after, 
.dark nav.desktop-nav a.active::after {
  display: none !important;
  content: none !important;
}

/* Navigation link states */
header nav.desktop-nav a {
  padding: 8px 18px !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
  color: #073b24 !important; /* Dark green links */
}
header nav.desktop-nav a:hover {
  color: #dfb010 !important;
  background: rgba(7, 59, 36, 0.04) !important;
}
header nav.desktop-nav a.active {
  color: #ffffff !important;
  background: #073b24 !important; /* Green active pill */
  font-weight: 700 !important;
}
header .theme-toggle,
header .menu-toggle {
  color: #073b24 !important;
}

/* Dark mode link overrides */
.dark header nav.desktop-nav a {
  color: rgba(255, 255, 255, 0.9) !important;
}
.dark header nav.desktop-nav a:hover {
  color: #dfb010 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.dark header nav.desktop-nav a.active {
  color: #02180e !important;
  background: #dfb010 !important; /* Gold active pill in dark mode */
  font-weight: 700 !important;
}
.dark header .theme-toggle,
.dark header .menu-toggle {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* --- 5. Gold-Rimmed Asymmetric Glass Decks (Cards) --- */
.property-card, .blog-card, .stats-card, .feature-card, .testimonial-card, .glass-card, .modal-content, .news-card {
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(236, 192, 27, 0.2) !important; /* Thin Gold outline */
  box-shadow: 0 15px 45px rgba(7, 59, 36, 0.03) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dark .property-card, .dark .blog-card, .dark .stats-card, .dark .feature-card, .dark .testimonial-card, .dark .glass-card, .dark .modal-content, .dark .news-card {
  background: rgba(3, 18, 12, 0.82) !important;
  border: 1px solid rgba(236, 192, 27, 0.12) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45) !important;
}

.property-card:hover, .blog-card:hover, .testimonial-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: #dfb010 !important;
  box-shadow: 0 25px 60px rgba(223, 176, 16, 0.15),
              0 4px 16px rgba(7, 59, 36, 0.05) !important;
}
.dark .property-card:hover, .dark .blog-card:hover, .dark .testimonial-card:hover {
  box-shadow: 0 25px 60px rgba(223, 176, 16, 0.12),
              0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Image wrappers */
.property-image-wrapper, .blog-card-image, .master-plan-preview {
  border-radius: 18px !important;
  border: 2px solid rgba(236, 192, 27, 0.1) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}
.dark .property-image-wrapper, .dark .blog-card-image, .dark .master-plan-preview {
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* --- 6. Sleek Minimalist Buttons --- */
.btn, button.btn-primary, button.btn-accent, button.btn-outline, .admin-btn {
  border-radius: 40px !important; /* Sleek Pill Shape */
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.775rem !important;
  padding: 14px 30px !important;
  border: 1px solid transparent !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary, button.btn-primary {
  background: #073b24 !important;
  color: #ffffff !important;
  border: 1px solid rgba(236, 192, 27, 0.25) !important;
  box-shadow: 0 8px 20px rgba(7, 59, 36, 0.18) !important;
}
.btn-primary:hover, button.btn-primary:hover {
  background: #0b4e30 !important;
  border-color: #dfb010 !important;
  box-shadow: 0 12px 28px rgba(7, 59, 36, 0.28) !important;
  transform: translateY(-2px) !important;
}

.btn-accent, button.btn-accent, .btn-primary[style*="background-color: var(--accent)"] {
  background: #dfb010 !important;
  color: #02120b !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 20px rgba(223, 176, 16, 0.2) !important;
}
.btn-accent:hover, button.btn-accent:hover {
  background: #f0bd15 !important;
  box-shadow: 0 12px 28px rgba(223, 176, 16, 0.3) !important;
  transform: translateY(-2px) !important;
}

.btn-outline, button.btn-outline {
  background: transparent !important;
  color: #073b24 !important;
  border: 2px solid #073b24 !important;
}
.dark .btn-outline, .dark button.btn-outline {
  color: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.btn-outline:hover, button.btn-outline:hover {
  background: #073b24 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}
.dark .btn-outline:hover, .dark button.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* --- 7. Minimalist Inputs (Thin Lines with focus expand) --- */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="tel"], 
textarea, 
select,
.search-widget input {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1.5px solid rgba(7, 59, 36, 0.12) !important;
  border-radius: 12px !important;
  color: #073b24 !important;
  padding: 14px 20px !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}
.dark input[type="text"], 
.dark input[type="email"], 
.dark input[type="password"], 
.dark input[type="tel"], 
.dark textarea, 
.dark select,
.dark .search-widget input {
  background: rgba(4, 28, 16, 0.4) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #dfb010 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(223, 176, 16, 0.12) !important;
  outline: none !important;
}
.dark input:focus, .dark textarea:focus, .dark select:focus {
  background: rgba(4, 28, 16, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(223, 176, 16, 0.12) !important;
}

/* --- 8. RERA Polished Brass Badge --- */
.rera-badge {
  background: linear-gradient(135deg, #dfb010 0%, #ae8404 100%) !important;
  color: #02120b !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* --- 9. Special layouts overrides --- */
.trust-stats-bar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(236, 192, 27, 0.18) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 50px rgba(7, 59, 36, 0.06) !important;
}
.dark .trust-stats-bar {
  background: rgba(3, 18, 12, 0.8) !important;
  border-color: rgba(236, 192, 27, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.master-plan-card {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px dashed rgba(236, 192, 27, 0.25) !important;
  border-radius: 20px !important;
}
.dark .master-plan-card {
  background: rgba(3, 18, 12, 0.4) !important;
}

/* --- 10. Avant-Garde Luxury Editorial Footer --- */
footer {
  background: linear-gradient(180deg, rgba(3, 26, 16, 0.96) 0%, rgba(1, 10, 6, 0.99) 100%) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border-top: 1.5px solid rgba(236, 192, 27, 0.22) !important; /* Gold Rim Accent */
  padding: 100px 0 50px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5) !important;
}
.footer-grid {
  grid-template-columns: 1.2fr 0.8fr 1fr 1fr !important;
  gap: 40px !important;
  margin-bottom: 60px !important;
}
.footer-logo-col {
  grid-column: span 1 !important;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* Subtle gold-tinted radial background grid inside footer */
footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: radial-gradient(rgba(236, 192, 27, 0.03) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  pointer-events: none !important;
  opacity: 0.75 !important;
}

footer h4 {
  font-family: var(--font-serif) !important;
  color: #dfb010 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 25px !important;
  position: relative !important;
  padding-bottom: 12px !important;
  display: block !important;
}
footer h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 35px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #dfb010, transparent) !important;
}

footer ul {
  gap: 14px !important;
}

footer ul a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.925rem !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding-left: 0 !important;
  display: inline-block !important;
}
footer ul a:hover {
  color: #dfb010 !important;
  padding-left: 6px !important;
  opacity: 1 !important;
  transform: translateX(4px) !important;
}

footer .rera-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(236, 192, 27, 0.05) !important;
  border: 1.5px solid rgba(236, 192, 27, 0.25) !important;
  color: #dfb010 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 15px rgba(223, 176, 16, 0.05) !important;
  margin-top: 15px !important;
  transition: all 0.3s ease !important;
}
footer .rera-badge:hover {
  background: rgba(236, 192, 27, 0.1) !important;
  border-color: #dfb010 !important;
  box-shadow: 0 0 15px rgba(223, 176, 16, 0.2) !important;
}
footer .rera-badge svg {
  color: #dfb010 !important;
}

.footer-info-row {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.6 !important;
  opacity: 0.95 !important;
  margin-bottom: 12px !important;
}
.footer-info-row svg {
  color: #dfb010 !important;
  opacity: 1 !important;
  margin-top: 3px !important;
  transition: transform 0.3s ease !important;
}
.footer-info-row:hover svg {
  transform: scale(1.15) !important;
}
.footer-info-row a {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.25s ease !important;
}
.footer-info-row a:hover {
  color: #dfb010 !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 35px !important;
  margin-top: 60px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.85rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color 0.25s ease !important;
}
.footer-bottom a:hover {
  color: #dfb010 !important;
}

footer .logo-image {
  height: 52px !important;
  filter: brightness(0) invert(1) !important; /* Solid crisp white */
  opacity: 0.95 !important;
  transition: opacity 0.25s ease !important;
}
footer .logo-image:hover {
  opacity: 1 !important;
}

/* --- 11. Hardware-Accelerated Performance Optimization & GPU Compositing --- */
header,
header.scrolled,
footer,
.wa-float,
.property-card,
.blog-card,
.stats-card,
.feature-card,
.testimonial-card,
.glass-card,
.modal-content,
.search-widget,
.rera-badge,
.hero::before,
.hero::after {
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  perspective: 1000px !important;
  will-change: transform !important;
}

/* --- 12. Mobile & Responsive Layout Overflow Fixes --- */
@media (max-width: 768px) {
  header .logo-image {
    height: 38px !important;
  }
  .rera-badge {
    padding: 6px 12px !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 480px) {
  header {
    height: 56px !important;
    border-radius: 20px !important;
    margin: 10px auto !important;
    padding: 0 16px !important;
  }
  header .logo-image {
    height: 30px !important;
  }
  .desktop-nav {
    display: none !important;
  }
}

/* --- 10. Premium Custom Architectural Dot Grid Background --- */
body {
  background-image: radial-gradient(rgba(11, 90, 58, 0.04) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
}
.dark body {
  background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1.5px, transparent 1.5px) !important;
}

/* --- 11. Premium Custom Spring Mouse Follower --- */
.custom-cursor-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent) !important;
  border-radius: 50% !important;
  position: fixed !important;
  top: -4px !important;
  left: -4px !important;
  pointer-events: none !important;
  z-index: 10000 !important;
  transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease !important;
}
.custom-cursor-dot.active {
  width: 12px !important;
  height: 12px !important;
  background-color: var(--accent) !important;
}
.custom-cursor-glow {
  width: 32px !important;
  height: 32px !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: 50% !important;
  position: fixed !important;
  top: -16px !important;
  left: -16px !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  opacity: 0.55 !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease !important;
  box-shadow: 0 0 15px rgba(236, 192, 27, 0.15) !important;
}
.custom-cursor-glow.active {
  width: 60px !important;
  height: 60px !important;
  top: -30px !important;
  left: -30px !important;
  background-color: rgba(236, 192, 27, 0.06) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 25px rgba(236, 192, 27, 0.35) !important;
}

/* Custom cursor elements hidden via premium.css */

/* Scroll reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.988);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}