@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap");

:root {
  --primary: #087f5b;
  --primary-dark: #055c42;
  --primary-light: #e7f6f0;

  --red: #d62828;
  --blue: #58b9e8;

  --dark: #10201b;
  --text: #42514c;
  --muted: #71807a;

  --white: #ffffff;
  --light: #f5f8f7;
  --border: #e1e9e5;

  --shadow: 0 15px 45px rgba(16, 32, 27, 0.1);
  --radius: 18px;
}

/* ================= RESET ================= */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "DM Sans", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

img {
  width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

/* ================= CONTAINER ================= */

.container {
  width: min(1180px, 92%);
  margin: auto;
}

/* ================= HEADER ================= */

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 22px 0;
  background:
    linear-gradient(rgba(5, 30, 22, 0.82), rgba(5, 30, 22, 0.82)),
    url("../Images/hero-house.jpg") center/cover no-repeat;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* LOGO */

.logo {
  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--white);
}

/* =========================================================
   GRANDEUR CRIBS MAIN WEBSITE LOGO
========================================================= */

.site-logo {
  display: block;

  width: 150px;
  height: auto;

  max-width: 150px;
  max-height: 60px;

  object-fit: contain;

  opacity: 1 !important;

  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.logo:hover .site-logo {
  transform: translateY(-2px);
}

/* MOBILE LOGO */

@media (max-width: 768px) {
  .site-logo {
    width: 125px;
    max-width: 125px;
    max-height: 52px;
  }
}

@media (max-width: 480px) {
  .site-logo {
    width: 110px;
    max-width: 110px;
    max-height: 48px;
  }
}

.logo-icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--primary);
  color: var(--white);

  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 800;

  box-shadow: 0 8px 25px rgba(8, 127, 91, 0.3);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo-text strong {
  font-size: 15px;
  letter-spacing: 1.5px;
}

.logo-text small {
  margin-top: 4px;
  font-size: 8px;
  letter-spacing: 3px;
  opacity: 0.8;
}

/* NAVIGATION */

.navigation {
  display: flex;
  align-items: center;
  gap: 30px;
}

.navigation a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: 0.3s ease;
}

.navigation a:hover,
.navigation a.active {
  color: var(--white);
}

.navigation a.active::after {
  content: "";

  position: absolute;
  bottom: -8px;
  left: 0;

  width: 100%;
  height: 2px;

  background: var(--blue);
}

/* NAV BUTTON */

.nav-button {
  padding: 11px 20px;

  background: var(--primary);
  color: var(--white);

  border-radius: 9px;

  font-size: 13px;
  font-weight: 600;

  transition: 0.3s ease;
}

.nav-button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* MOBILE MENU */

.menu-toggle {
  display: none;

  border: 0;
  background: transparent;

  color: white;
  font-size: 28px;
}

/* ================= HERO ================= */

/* =====================================================
   GRANDEUR CRIBS - HOME HERO
   BUILDING IMAGE + ONE-SIDE TRANSPARENT OVERLAY
===================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  background-image: url("../images/hero-house.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* One-side transparent dark green overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(3, 42, 23, 0.92) 0%,
    rgba(5, 62, 32, 0.82) 30%,
    rgba(8, 74, 39, 0.55) 50%,
    rgba(8, 74, 39, 0.18) 70%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

/* Keep all hero content above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
}

/* HERO TEXT */

.hero-text {
  color: white;
  max-width: 650px;
}

.hero-badge {
  display: inline-flex;

  padding: 8px 14px;

  border-radius: 30px;

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  font-size: 13px;
  margin-bottom: 22px;
}

.hero h1 {
  font-family: "Playfair Display", serif;

  font-size: clamp(45px, 5.2vw, 72px);

  line-height: 1.04;

  letter-spacing: -2px;

  margin-bottom: 25px;
}

.hero h1 span {
  color: var(--blue);
}

.hero p {
  max-width: 570px;

  font-size: 17px;

  color: rgba(255, 255, 255, 0.78);

  margin-bottom: 32px;
}

/* HERO BUTTONS */

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 14px 23px;

  border-radius: 9px;

  font-size: 14px;
  font-weight: 600;

  transition: 0.3s ease;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
}

.btn-outline:hover {
  background: white;
  color: var(--dark);
}

/* ================= SEARCH ================= */

.property-search {
  padding: 30px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.search-heading {
  margin-bottom: 22px;
}

.search-heading h3 {
  color: var(--dark);
  font-size: 21px;
  margin-bottom: 4px;
}

.search-heading p {
  color: var(--muted);
  font-size: 13px;
}

.search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  color: var(--dark);
  font-size: 12px;
  font-weight: 600;
}

.input-group select {
  width: 100%;

  padding: 13px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: white;
  color: var(--text);

  outline: none;

  transition: 0.3s;
}

.input-group select:focus {
  border-color: var(--primary);
}

.search-button {
  margin-top: 5px;

  width: 100%;

  padding: 14px;

  border: none;
  border-radius: 8px;

  background: var(--primary);
  color: white;

  font-weight: 700;

  transition: 0.3s;
}

.search-button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* ================= STATS ================= */

.stats {
  background: white;

  border-bottom: 1px solid var(--border);
}

.stats-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: 32px 20px;

  text-align: center;

  border-right: 1px solid var(--border);
}

.stat:last-child {
  border-right: none;
}

.stat strong {
  display: block;

  color: var(--primary);

  font-family: "Playfair Display", serif;

  font-size: 34px;
}

.stat span {
  color: var(--muted);
  font-size: 13px;
}

/* ================= SECTIONS ================= */

.featured,
.why-us {
  padding: 100px 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  margin-bottom: 45px;
}

.section-label {
  color: var(--primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 2px;
}

.section-heading h2,
.why-content h2 {
  margin-top: 8px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(34px, 4vw, 48px);

  line-height: 1.1;
}

.view-all {
  color: var(--primary);

  font-size: 14px;
  font-weight: 700;

  transition: 0.3s;
}

.view-all:hover {
  color: var(--red);
}

/* ================= PROPERTY CARDS ================= */

.property-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;
}

.property-card {
  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);

  transition: 0.35s ease;
}

.property-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.property-image {
  height: 245px;

  position: relative;

  overflow: hidden;
}

.property-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: 0.5s;
}

.property-card:hover .property-image img {
  transform: scale(1.06);
}

.property-tag {
  position: absolute;

  top: 15px;
  left: 15px;

  padding: 6px 11px;

  border-radius: 5px;

  background: var(--primary);
  color: white;

  font-size: 11px;
  font-weight: 700;
}

.property-tag.rent {
  background: var(--red);
}

.property-tag.land {
  background: var(--blue);
  color: var(--dark);
}

.favorite {
  position: absolute;

  top: 13px;
  right: 13px;

  width: 36px;
  height: 36px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.95);

  color: var(--dark);

  font-size: 20px;

  transition: 0.3s;
}

.favorite:hover,
.favorite.liked {
  background: var(--red);
  color: white;
}

.property-info {
  padding: 22px;
}

.property-type {
  color: var(--primary);

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.property-info h3 {
  color: var(--dark);

  font-size: 19px;

  margin: 7px 0;
}

.location {
  color: var(--muted);
  font-size: 12px;

  margin-bottom: 18px;
}

.property-details {
  display: flex;
  gap: 12px;

  padding-bottom: 18px;

  border-bottom: 1px solid var(--border);

  color: var(--muted);

  font-size: 11px;
}

.property-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-top: 17px;
}

.property-bottom strong {
  color: var(--dark);
  font-size: 16px;
}

.property-bottom a {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

/* ================= WHY US ================= */

.why-us {
  background: var(--light);
}

.why-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}

.why-content h2 {
  margin: 10px 0 20px;
}

.why-content h2 span {
  color: var(--primary);
}

.why-content > p {
  max-width: 520px;

  color: var(--muted);

  margin-bottom: 35px;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature {
  display: flex;
  gap: 16px;
}

.feature-icon {
  flex-shrink: 0;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: var(--primary-light);
  color: var(--primary);

  font-weight: 800;
}

.feature h3 {
  color: var(--dark);
  font-size: 15px;
  margin-bottom: 2px;
}

.feature p {
  color: var(--muted);
  font-size: 12px;
}

.why-image {
  position: relative;
}

.why-image > img {
  height: 520px;

  object-fit: cover;

  border-radius: 25px;
}

.experience-card {
  position: absolute;

  bottom: 30px;
  left: -30px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 18px 23px;

  border-radius: 12px;

  background: white;

  box-shadow: var(--shadow);
}

.experience-card strong {
  color: var(--primary);

  font-family: "Playfair Display", serif;

  font-size: 36px;
}

.experience-card span {
  color: var(--dark);

  font-size: 12px;
  font-weight: 700;

  line-height: 1.3;
}

/* ================= CTA ================= */

.cta {
  padding: 100px 0;

  background: linear-gradient(110deg, var(--primary-dark), var(--primary));

  color: white;

  text-align: center;
}

.cta .section-label {
  color: var(--blue);
}

.cta h2 {
  max-width: 650px;

  margin: 12px auto;

  font-family: "Playfair Display", serif;

  font-size: clamp(35px, 4vw, 52px);

  line-height: 1.1;
}

.cta p {
  color: rgba(255, 255, 255, 0.75);

  margin-bottom: 28px;
}

.cta-buttons {
  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;
}

.btn-light {
  background: white;
  color: var(--primary);
}

.btn-light:hover {
  background: var(--blue);
  color: var(--dark);
}

/* ================= FOOTER ================= */

.footer {
  background:
    linear-gradient(rgba(5, 30, 22, 0.9), rgba(5, 30, 22, 0.94)),
    url("../Images/hero-house.jpg") center/cover no-repeat;
  color: rgba(255, 255, 255, 0.65);
}

.footer-grid {
  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1fr;

  gap: 50px;

  padding: 70px 0;
}

.footer-brand .logo {
  margin-bottom: 20px;
}

.footer-brand p {
  max-width: 330px;

  font-size: 13px;

  line-height: 1.8;
}

.footer-column {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.footer-column h3 {
  color: white;

  font-size: 14px;

  margin-bottom: 8px;
}

.footer-column a,
.footer-column p {
  font-size: 12px;

  transition: 0.3s;
}

.footer-column a:hover {
  color: var(--blue);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding: 20px 0;

  text-align: center;

  font-size: 11px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 950px) {
  .navigation,
  .nav-button {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 45px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .hero {
    min-height: 0;
  }

  .property-search {
    max-width: 600px;
  }

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

  .why-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .why-image {
    max-width: 650px;
  }

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

@media (max-width: 650px) {
  .header {
    padding: 16px 0;
  }

  .hero {
    padding-top: 90px;
  }

  .hero h1 {
    font-size: 45px;
  }

  .hero p {
    font-size: 14px;
  }

  .property-search {
    padding: 22px;
  }

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

  .stat {
    border-bottom: 1px solid var(--border);
  }

  .stat:nth-child(2) {
    border-right: none;
  }

  .property-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .featured,
  .why-us {
    padding: 70px 0;
  }

  .why-image > img {
    height: 400px;
  }

  .experience-card {
    left: 15px;
    bottom: 15px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .cta {
    padding: 75px 0;
  }
}

/* =========================================
   JAVASCRIPT INTERACTIONS
========================================= */

.header-scrolled {
  position: fixed;
  background: rgba(7, 21, 16, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.site-notification {
  position: fixed;

  right: 25px;
  bottom: 25px;

  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 18px;

  border-radius: 10px;

  background: #ffffff;
  color: #10201b;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);

  font-size: 13px;
  font-weight: 600;

  animation: notificationIn 0.3s ease;
}

.notification-icon {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #087f5b;
  color: white;
}

.notification-hide {
  animation: notificationOut 0.3s ease forwards;
}

@keyframes notificationIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes notificationOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* MOBILE NAVIGATION */

@media (max-width: 950px) {
  .navigation.mobile-open {
    display: flex;

    position: fixed;

    top: 75px;
    left: 4%;
    right: 4%;

    padding: 25px;

    flex-direction: column;
    align-items: flex-start;

    gap: 20px;

    border-radius: 15px;

    background: rgba(7, 21, 16, 0.98);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);

    animation: menuOpen 0.25s ease;
  }

  .navigation.mobile-open a {
    font-size: 15px;
  }
}

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

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

/* IMAGE LOADING */

img {
  opacity: 1;
  display: block;
  max-width: 100%;
}

img.image-loaded {
  opacity: 1;
}

/* =========================================
   HOMEPAGE-SPECIFIC STYLES
========================================= */

.hero {
  position: relative;
  min-height: 100vh;
  background-image: url("../images/hero-house.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(5, 35, 20, 0.88) 0%,
    rgba(5, 35, 20, 0.7) 45%,
    rgba(5, 35, 20, 0.35) 100%
  );
}

.hero-content,
.hero-scroll {
  position: relative;
  z-index: 2;
}

.about-image-large {
  position: relative;
  overflow: hidden;
}

.about-image-large img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center;
}

.btn-affiliate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #16833b;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #16833b;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-affiliate:hover {
  background: #11682f;
  border-color: #11682f;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(22, 131, 59, 0.2);
}

@media (max-width: 700px) {
  .btn-affiliate {
    width: 100%;
  }

  .hero {
    min-height: 900px;
    background-position: center center;
  }

  .about-image-large img {
    min-height: 300px;
  }
}

/* =========================================
   PROPERTIES PAGE
========================================= */

.inner-header {
  position: absolute;
  background:
    linear-gradient(rgba(5, 30, 22, 0.74), rgba(5, 30, 22, 0.74)),
    url("../images/hero-house.jpg") center/cover no-repeat;
}

.page-hero {
  min-height: 420px;

  display: flex;
  align-items: center;

  padding-top: 90px;

  color: white;

  background:
    linear-gradient(90deg, rgba(5, 30, 22, 0.92), rgba(5, 30, 22, 0.65)),
    url("../images/hero-house.jpg") center/cover no-repeat;
}

.page-hero-content {
  max-width: 800px;
}

.page-hero h1 {
  margin: 10px 0;

  font-family: "Playfair Display", serif;

  font-size: clamp(40px, 5vw, 60px);

  line-height: 1.1;
}

.page-hero p {
  max-width: 650px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 16px;
}

.properties-section {
  padding: 80px 0;
  background: #f7faf8;
}

.property-filter {
  padding: 30px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 18px;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);

  margin-bottom: 35px;
}

.filter-title {
  margin-bottom: 25px;
}

.filter-title h2 {
  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 30px;

  margin-top: 5px;
}

.filter-grid {
  display: grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr
    1fr
    1fr;

  gap: 12px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  color: var(--dark);

  font-size: 11px;
  font-weight: 700;
}

.filter-group input,
.filter-group select {
  width: 100%;

  padding: 12px;

  border: 1px solid var(--border);

  border-radius: 8px;

  outline: none;

  background: white;

  color: var(--text);

  font-size: 12px;
}

.filter-group input:focus,
.filter-group select:focus {
  border-color: var(--primary);
}

.reset-filter {
  margin-top: 18px;

  padding: 9px 15px;

  border: 1px solid var(--border);

  border-radius: 7px;

  background: white;

  color: var(--primary);

  font-size: 12px;
  font-weight: 700;

  transition: 0.3s;
}

.reset-filter:hover {
  background: var(--primary);
  color: white;
}

.results-bar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 25px;
}

.results-bar strong {
  color: var(--primary);

  font-size: 18px;
}

.results-bar span {
  color: var(--muted);

  font-size: 12px;
}

.active-filter-status {
  color: var(--muted);

  font-size: 12px;
}

.property-list {
  min-height: 300px;
}

.view-property {
  border: none;

  background: transparent;

  color: var(--primary);

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.view-property:hover {
  color: var(--red);
}

.no-properties {
  display: none;

  padding: 70px 20px;

  text-align: center;
}

.no-property-icon {
  font-size: 50px;

  margin-bottom: 15px;
}

.no-properties h3 {
  color: var(--dark);

  font-size: 22px;
}

.no-properties p {
  color: var(--muted);

  font-size: 13px;
}

/* =========================================
   PROPERTY MODAL
========================================= */

.property-modal {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 20px;
}

.property-modal.modal-open {
  display: flex;
}

.modal-overlay {
  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.75);

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.property-modal-content {
  position: relative;

  z-index: 2;

  width: min(900px, 100%);

  display: grid;

  grid-template-columns: 1fr 1fr;

  overflow: hidden;

  border-radius: 20px;

  background: white;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);

  animation: modalOpen 0.3s ease;
}

.modal-close {
  position: absolute;

  top: 15px;
  right: 15px;

  z-index: 5;

  width: 38px;
  height: 38px;

  border: none;

  border-radius: 50%;

  background: white;

  color: var(--dark);

  font-size: 25px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.modal-image {
  min-height: 430px;
}

.modal-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.modal-details {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding: 45px;
}

.modal-details h2 {
  margin: 10px 0 15px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 34px;

  line-height: 1.1;
}

.modal-details p {
  margin-bottom: 25px;

  color: var(--muted);

  font-size: 13px;
}

@keyframes modalOpen {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(15px);
  }

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

/* =========================================
   RESPONSIVE PROPERTIES
========================================= */

@media (max-width: 1000px) {
  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .page-hero {
    min-height: 350px;
  }

  .properties-section {
    padding: 55px 0;
  }

  .property-filter {
    padding: 22px;
  }

  .filter-grid {
    grid-template-columns: 1fr;
  }

  .results-bar {
    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
  }

  .property-modal-content {
    grid-template-columns: 1fr;

    max-height: 90vh;

    overflow-y: auto;
  }

  .modal-image {
    min-height: 250px;
    height: 250px;
  }

  .modal-details {
    padding: 30px;
  }
}

/* =========================================
   ABOUT PAGE
========================================= */

.about-intro {
  padding: 100px 0;
  background: white;
}

.about-intro-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}

.about-image {
  position: relative;
}

.about-image > img {
  height: 520px;

  object-fit: cover;

  border-radius: 25px;
}

.about-experience {
  position: absolute;

  right: -25px;
  bottom: 30px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 18px 24px;

  background: white;

  border-radius: 12px;

  box-shadow: var(--shadow);
}

.about-experience strong {
  color: var(--primary);

  font-family: "Playfair Display", serif;

  font-size: 38px;
}

.about-experience span {
  color: var(--dark);

  font-size: 12px;

  font-weight: 700;

  line-height: 1.3;
}

.about-content h2 {
  margin: 10px 0 22px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(35px, 4vw, 50px);

  line-height: 1.1;
}

.about-content h2 span {
  color: var(--primary);
}

.about-content > p {
  color: var(--muted);

  font-size: 14px;

  margin-bottom: 18px;
}

.about-highlights {
  display: flex;

  gap: 35px;

  margin-top: 32px;

  padding-top: 25px;

  border-top: 1px solid var(--border);
}

.about-highlights div {
  display: flex;

  flex-direction: column;
}

.about-highlights strong {
  color: var(--primary);

  font-family: "Playfair Display", serif;

  font-size: 27px;
}

.about-highlights span {
  color: var(--muted);

  font-size: 11px;
}

/* =========================================
   MISSION
========================================= */

.mission-section {
  padding: 100px 0;

  background: var(--light);
}

.centered {
  justify-content: center;

  text-align: center;
}

.mission-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;
}

.mission-card {
  padding: 35px 28px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 18px;

  transition: 0.3s;
}

.mission-card:hover {
  transform: translateY(-7px);

  box-shadow: var(--shadow);
}

.mission-card.featured-mission {
  background: var(--primary);

  color: white;

  border-color: var(--primary);
}

.mission-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: 20px;

  border-radius: 12px;

  background: var(--primary-light);

  color: var(--primary);

  font-size: 22px;
}

.featured-mission .mission-icon {
  background: rgba(255, 255, 255, 0.15);

  color: var(--blue);
}

.mission-card h3 {
  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 23px;

  margin-bottom: 10px;
}

.featured-mission h3 {
  color: white;
}

.mission-card p {
  color: var(--muted);

  font-size: 13px;
}

.featured-mission p {
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================
   VALUES
========================================= */

.values-section {
  padding: 100px 0;
}

.values-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;
}

.value-card {
  position: relative;

  padding: 30px 25px;

  border: 1px solid var(--border);

  border-radius: 15px;

  transition: 0.3s;
}

.value-card:hover {
  border-color: var(--primary);

  transform: translateY(-5px);
}

.value-number {
  display: block;

  color: var(--blue);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  margin-bottom: 25px;
}

.value-card h3 {
  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 21px;

  margin-bottom: 8px;
}

.value-card p {
  color: var(--muted);

  font-size: 12px;
}

/* =========================================
   PROCESS
========================================= */

.process-section {
  padding: 100px 0;

  background: var(--light);
}

.process-grid {
  display: grid;

  grid-template-columns: 1fr auto 1fr auto 1fr;

  align-items: center;

  gap: 20px;
}

.process-step {
  text-align: center;
}

.process-number {
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  margin: 0 auto 18px;

  border-radius: 50%;

  background: var(--primary);

  color: white;

  font-weight: 800;
}

.process-step h3 {
  color: var(--dark);

  font-size: 16px;

  margin-bottom: 7px;
}

.process-step p {
  color: var(--muted);

  font-size: 12px;
}

.process-line {
  width: 60px;

  height: 1px;

  background: var(--border);
}

/* =========================================
   ABOUT RESPONSIVE
========================================= */

@media (max-width: 950px) {
  .about-intro-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .about-image {
    max-width: 650px;
  }

  .mission-grid {
    grid-template-columns: 1fr;
  }

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

  .process-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .process-line {
    width: 1px;
    height: 35px;

    margin: auto;
  }
}

@media (max-width: 600px) {
  .about-intro,
  .mission-section,
  .values-section,
  .process-section {
    padding: 70px 0;
  }

  .about-image > img {
    height: 400px;
  }

  .about-experience {
    right: 15px;
    bottom: 15px;
  }

  .about-highlights {
    gap: 20px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   SERVICES PAGE
========================================= */

.services-intro {
  padding: 100px 0;
  background: white;
}

.section-heading.centered > div {
  max-width: 750px;
  margin: 0 auto;
}

.section-heading.centered h2 {
  margin-bottom: 15px;
}

.section-heading.centered p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
}

/* =========================================
   SERVICES GRID
========================================= */

.services-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin-top: 55px;
}

.service-card {
  position: relative;

  padding: 32px 28px;

  min-height: 310px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 18px;

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.service-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 4px;

  background: var(--primary);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s ease;
}

.service-card:hover {
  transform: translateY(-8px);

  border-color: rgba(24, 120, 77, 0.25);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.featured-service {
  background: var(--primary);

  border-color: var(--primary);

  color: white;
}

.featured-service::before {
  background: var(--blue);
}

.service-icon {
  width: 55px;
  height: 55px;

  display: grid;
  place-items: center;

  margin-bottom: 20px;

  border-radius: 14px;

  background: var(--primary-light);

  font-size: 24px;
}

.featured-service .service-icon {
  background: rgba(255, 255, 255, 0.13);
}

.service-number {
  position: absolute;

  top: 30px;
  right: 28px;

  color: var(--blue);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 2px;
}

.featured-service .service-number {
  color: rgba(255, 255, 255, 0.55);
}

.service-card h3 {
  margin-bottom: 12px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 23px;
}

.featured-service h3 {
  color: white;
}

.service-card p {
  margin-bottom: 25px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.7;
}

.featured-service p {
  color: rgba(255, 255, 255, 0.72);
}

.service-card a {
  color: var(--primary);

  font-size: 12px;
  font-weight: 800;

  transition: 0.3s;
}

.service-card a:hover {
  color: var(--red);
}

.featured-service a {
  color: white;
}

/* =========================================
   SERVICE PROCESS
========================================= */

.service-process {
  padding: 100px 0;

  background: var(--light);
}

.service-process-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  margin-top: 45px;
}

.service-process-card {
  padding: 28px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 15px;
}

.service-process-number {
  color: var(--primary);

  font-size: 12px;

  font-weight: 800;

  margin-bottom: 25px;
}

.service-process-card h3 {
  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 21px;

  margin-bottom: 10px;
}

.service-process-card p {
  color: var(--muted);

  font-size: 12px;
}

/* =========================================
   WHY US
========================================= */

.why-us {
  padding: 100px 0;

  background: white;
}

.why-us-grid {
  display: grid;

  grid-template-columns: 1fr 0.9fr;

  gap: 80px;

  align-items: center;
}

.why-us-content h2 {
  max-width: 650px;

  margin: 12px 0 20px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(35px, 4vw, 50px);

  line-height: 1.1;
}

.why-us-content h2 span {
  color: var(--primary);
}

.why-us-content > p {
  max-width: 600px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;
}

.why-list {
  margin-top: 30px;
}

.why-item {
  display: flex;

  gap: 15px;

  margin-bottom: 20px;
}

.why-item > span {
  flex-shrink: 0;

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--primary-light);

  color: var(--primary);

  font-weight: 800;
}

.why-item strong {
  display: block;

  color: var(--dark);

  font-size: 13px;

  margin-bottom: 4px;
}

.why-item p {
  color: var(--muted);

  font-size: 11px;
}

/* =========================================
   WHY US VISUAL
========================================= */

.why-us-visual {
  position: relative;

  min-height: 480px;

  padding: 35px;

  border-radius: 25px;

  overflow: hidden;

  background: linear-gradient(
    135deg,
    rgba(8, 54, 37, 0.95),
    rgba(20, 104, 71, 0.85)
  );
}

.why-us-visual::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -80px;
  top: -80px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 50%;
}

.visual-card-main {
  position: absolute;

  left: 35px;
  right: 35px;
  top: 35px;

  min-height: 290px;

  display: flex;

  flex-direction: column;
  justify-content: flex-end;

  padding: 35px;

  border-radius: 18px;

  background:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45)),
    url("../images/about-home.jpg") center/cover no-repeat;

  color: white;
}

.visual-card-main span {
  margin-bottom: 12px;

  color: var(--blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2px;
}

.visual-card-main strong {
  max-width: 400px;

  font-family: "Playfair Display", serif;

  font-size: 28px;

  line-height: 1.15;
}

.visual-card-small {
  position: absolute;

  left: 65px;
  bottom: 35px;

  display: flex;

  flex-direction: column;

  padding: 18px 25px;

  border-radius: 12px;

  background: white;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.visual-card-small strong {
  color: var(--primary);

  font-family: "Playfair Display", serif;

  font-size: 30px;
}

.visual-card-small span {
  color: var(--muted);

  font-size: 10px;
}

/* =========================================
   SERVICES RESPONSIVE
========================================= */

@media (max-width: 950px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .why-us-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }
}

@media (max-width: 600px) {
  .services-intro,
  .service-process,
  .why-us {
    padding: 70px 0;
  }

  .services-grid,
  .service-process-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 0;
  }

  .why-us-visual {
    min-height: 420px;
  }

  .visual-card-main {
    min-height: 250px;
  }
}

/* =========================================
   PREMIUM HOMEPAGE
========================================= */

.homepage-header {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  background: linear-gradient(rgba(4, 25, 18, 0.65), transparent);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.homepage-header .logo-text strong,
.homepage-header .logo-text small {
  color: white;
}

.homepage-header .navigation a {
  color: rgba(255, 255, 255, 0.85);
}

.homepage-header .navigation a:hover,
.homepage-header .navigation a.active {
  color: white;
}

.homepage-header .menu-toggle {
  color: white;
}

/* =========================================
   HERO
========================================= */

.hero {
  position: relative;

  min-height: 780px;

  display: flex;
  align-items: center;

  padding: 140px 0 100px;

  color: white;

  background: url("../images/hero-house.jpg") center/cover no-repeat;
}

.hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(3, 28, 20, 0.94) 0%,
    rgba(3, 28, 20, 0.76) 48%,
    rgba(3, 28, 20, 0.28) 100%
  );
}

.hero-content {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, 500px);

  gap: 60px;

  align-items: center;
}

.hero-text {
  max-width: 700px;
}

.hero-label {
  display: flex;

  align-items: center;

  gap: 9px;

  color: var(--blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2.5px;
}

.pulse-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow: 0 0 0 5px rgba(101, 190, 222, 0.12);

  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.7;
  }
}

.hero h1 {
  max-width: 700px;

  margin: 20px 0;

  color: white;

  font-family: "Playfair Display", serif;

  font-size: clamp(48px, 6vw, 78px);

  line-height: 0.98;

  letter-spacing: -2px;
}

.hero h1 span {
  display: block;

  color: var(--blue);

  font-style: italic;
}

.hero-text > p {
  max-width: 600px;

  margin-bottom: 30px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 15px;

  line-height: 1.8;
}

.hero-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.btn span {
  margin-left: 8px;
}

.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.4);

  background: transparent;

  color: white;
}

.btn-outline-light:hover {
  background: white;

  color: var(--primary);
}

.hero-trust {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 38px;
}

.trust-avatars {
  display: flex;
}

.trust-avatars span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  margin-left: -7px;

  border: 2px solid white;

  border-radius: 50%;

  background: var(--primary);

  color: white;

  font-size: 10px;
  font-weight: 800;
}

.trust-avatars span:first-child {
  margin-left: 0;

  background: var(--red);
}

.trust-avatars span:nth-child(2) {
  background: var(--blue);

  color: var(--dark);
}

.hero-trust strong,
.hero-trust small {
  display: block;
}

.hero-trust strong {
  color: white;

  font-size: 11px;
}

.hero-trust small {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 9px;
}

/* =========================================
   HERO SEARCH
========================================= */

.hero-search-card {
  padding: 25px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.1);

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.search-card-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 20px;
}

.search-card-header span:first-child {
  display: block;

  color: var(--blue);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}

.search-card-header strong {
  display: block;

  margin-top: 6px;

  color: white;

  font-family: "Playfair Display", serif;

  font-size: 22px;
}

.search-live {
  padding: 5px 9px;

  border-radius: 20px;

  background: rgba(101, 190, 222, 0.12);

  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}

.hero-search-form {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.search-field {
  padding: 10px 13px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 8px;

  background: rgba(0, 0, 0, 0.16);
}

.search-field label {
  display: block;

  margin-bottom: 4px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 9px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.search-field select {
  width: 100%;

  border: none;

  outline: none;

  background: transparent;

  color: white;

  font-size: 12px;

  cursor: pointer;
}

.search-field select option {
  color: var(--dark);

  background: white;
}

.search-button {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding: 15px 17px;

  border: none;

  border-radius: 8px;

  background: var(--primary);

  color: white;

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

  transition: 0.3s;
}

.search-button:hover {
  background: #126341;

  transform: translateY(-2px);
}

.search-button strong {
  font-size: 18px;
}

/* =========================================
   HERO SCROLL
========================================= */

.hero-scroll {
  position: absolute;

  left: 50%;
  bottom: 25px;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  transform: translateX(-50%);
}

.hero-scroll span {
  color: rgba(255, 255, 255, 0.4);

  font-size: 8px;

  letter-spacing: 2px;
}

.scroll-line {
  width: 1px;
  height: 35px;

  background: linear-gradient(white, transparent);

  animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.7);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* =========================================
   FEATURED
========================================= */

.featured-section {
  padding: 100px 0;

  background: white;
}

.section-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 45px;
}

.section-heading h2 {
  max-width: 650px;

  margin-top: 10px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(34px, 4vw, 48px);

  line-height: 1.05;
}

.section-heading h2 span {
  color: var(--primary);
}

.section-link {
  flex-shrink: 0;

  color: var(--primary);

  font-size: 11px;

  font-weight: 800;
}

.section-link:hover {
  color: var(--red);
}

.homepage-property-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* =========================================
   HOME ABOUT
========================================= */

.home-about {
  padding: 110px 0;

  background: var(--light);
}

.home-about-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;
}

.home-about-visual {
  position: relative;

  padding-right: 30px;
  padding-bottom: 30px;
}

.about-image-large {
  overflow: hidden;

  border-radius: 25px;
}

.about-image-large img {
  width: 100%;

  height: 540px;

  object-fit: cover;

  transition: transform 0.7s ease;
}

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

.floating-stat {
  position: absolute;

  right: 0;
  bottom: 0;

  display: flex;

  flex-direction: column;

  padding: 22px 27px;

  border-radius: 15px;

  background: var(--primary);

  color: white;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.floating-stat strong {
  font-family: "Playfair Display", serif;

  font-size: 32px;
}

.floating-stat span {
  max-width: 80px;

  font-size: 9px;

  line-height: 1.4;

  color: rgba(255, 255, 255, 0.7);
}

.experience-badge {
  position: absolute;

  left: -20px;
  top: 30px;

  display: flex;

  flex-direction: column;

  padding: 13px 17px;

  border-radius: 10px;

  background: white;

  box-shadow: var(--shadow);
}

.experience-badge span {
  color: var(--muted);

  font-size: 8px;

  letter-spacing: 2px;
}

.experience-badge strong {
  color: var(--primary);

  font-family: "Playfair Display", serif;

  font-size: 18px;
}

.home-about-content h2 {
  margin: 12px 0 20px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(36px, 4vw, 52px);

  line-height: 1.05;
}

.home-about-content h2 span {
  display: block;

  color: var(--primary);
}

.home-about-content > p {
  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;
}

.home-benefits {
  margin: 30px 0;
}

.benefit-item {
  display: flex;

  gap: 15px;

  margin-bottom: 20px;
}

.benefit-icon {
  flex-shrink: 0;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--primary-light);

  color: var(--primary);

  font-weight: 800;
}

.benefit-item strong {
  display: block;

  color: var(--dark);

  font-size: 13px;

  margin-bottom: 3px;
}

.benefit-item p {
  color: var(--muted);

  font-size: 11px;
}

.btn-dark {
  background: var(--dark);

  color: white;
}

.btn-dark:hover {
  background: var(--primary);
}

/* =========================================
   STATS
========================================= */

.stats-section {
  padding: 55px 0;

  background: var(--primary);

  color: white;
}

.stats-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
}

.stat-item {
  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 15px;

  text-align: center;

  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-item:last-child {
  border-right: none;
}

.stat-item strong {
  font-family: "Playfair Display", serif;

  font-size: 42px;

  color: var(--blue);
}

.stat-item span {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 10px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

/* =========================================
   HOME SERVICES
========================================= */

.home-services {
  padding: 100px 0;

  background: white;
}

.home-services-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;
}

.home-service {
  position: relative;

  min-height: 300px;

  padding: 28px;

  border: 1px solid var(--border);

  border-radius: 16px;

  background: white;

  overflow: hidden;

  transition: 0.35s;
}

.home-service:hover {
  transform: translateY(-7px);

  background: var(--primary);

  border-color: var(--primary);
}

.service-number {
  position: absolute;

  right: 25px;
  top: 25px;

  color: var(--blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;
}

.home-service-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  margin-bottom: 30px;

  border-radius: 12px;

  background: var(--primary-light);

  font-size: 22px;
}

.home-service h3 {
  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 22px;

  margin-bottom: 10px;
}

.home-service p {
  color: var(--muted);

  font-size: 12px;

  line-height: 1.7;
}

.service-arrow {
  position: absolute;

  left: 28px;
  bottom: 25px;

  color: var(--primary);

  font-size: 20px;
}

.home-service:hover h3,
.home-service:hover .service-arrow {
  color: white;
}

.home-service:hover p {
  color: rgba(255, 255, 255, 0.65);
}

.home-service:hover .home-service-icon {
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================
   HOME CTA
========================================= */

.home-cta {
  position: relative;

  min-height: 480px;

  display: flex;

  align-items: center;

  color: white;

  background: url("../images/hero-house.jpg") center/cover no-repeat;
}

.home-cta-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(3, 30, 21, 0.94),
    rgba(3, 30, 21, 0.65)
  );
}

.home-cta-content {
  position: relative;

  z-index: 2;

  text-align: center;
}

.home-cta-content .section-label {
  color: var(--blue);
}

.home-cta h2 {
  max-width: 800px;

  margin: 12px auto;

  color: white;

  font-family: "Playfair Display", serif;

  font-size: clamp(40px, 5vw, 60px);

  line-height: 1.05;
}

.home-cta h2 span {
  color: var(--blue);
}

.home-cta p {
  max-width: 550px;

  margin: 0 auto 28px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 14px;
}

.home-cta .cta-buttons {
  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;
}

/* =========================================
   HOMEPAGE RESPONSIVE
========================================= */

@media (max-width: 1050px) {
  .hero-content {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .hero {
    padding-top: 150px;
  }

  .hero-search-card {
    max-width: 600px;
  }

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

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

  .home-about-grid {
    gap: 50px;
  }
}

@media (max-width: 750px) {
  .hero {
    min-height: 0;

    padding: 140px 0 90px;
  }

  .hero h1 {
    font-size: 50px;

    letter-spacing: -1px;
  }

  .hero-scroll {
    display: none;
  }

  .hero-search-card {
    padding: 20px;
  }

  .homepage-property-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 15px;
  }

  .home-about-grid {
    grid-template-columns: 1fr;
  }

  .home-about-visual {
    max-width: 650px;
  }

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

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .home-services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .hero h1 {
    font-size: 43px;
  }

  .hero-text > p {
    font-size: 13px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-buttons .btn {
    width: 100%;

    justify-content: center;
  }

  .hero-trust {
    margin-top: 28px;
  }

  .about-image-large img {
    height: 420px;
  }

  .experience-badge {
    left: 10px;
  }

  .floating-stat {
    right: 10px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-item {
    padding: 20px 10px;
  }

  .stat-item strong {
    font-size: 32px;
  }
}

/* =========================================
   CONTACT PAGE
========================================= */

.contact-page-hero {
  background:
    linear-gradient(90deg, rgba(3, 35, 24, 0.95), rgba(3, 35, 24, 0.65)),
    url("../Images/real-estate.jpg") center/cover no-repeat;
}

/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
  padding: 100px 0;

  background: var(--light);
}

.contact-grid {
  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 70px;

  align-items: start;
}

.contact-information h2 {
  margin: 12px 0 18px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(38px, 4vw, 52px);

  line-height: 1.05;
}

.contact-information h2 span {
  display: block;

  color: var(--primary);
}

.contact-information > p {
  max-width: 500px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;
}

.contact-details {
  margin-top: 35px;
}

.contact-detail {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 22px;
}

.contact-detail-icon {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 12px;

  background: var(--primary-light);

  color: var(--primary);

  font-size: 18px;
}

.contact-detail span {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.contact-detail a,
.contact-detail strong {
  display: block;

  color: var(--dark);

  font-size: 13px;

  font-weight: 700;
}

.contact-detail a:hover {
  color: var(--primary);
}

.contact-detail small {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 10px;
}

/* =========================================
   WHATSAPP
========================================= */

.whatsapp-button {
  display: flex;

  align-items: center;

  gap: 13px;

  max-width: 450px;

  margin-top: 35px;

  padding: 15px 18px;

  border-radius: 12px;

  background: var(--primary);

  color: white;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

  transition: 0.3s;
}

.whatsapp-button:hover {
  transform: translateY(-4px);

  background: #126341;
}

.whatsapp-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.13);

  font-size: 17px;
}

.whatsapp-button small {
  display: block;

  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.whatsapp-button > span:nth-child(2) {
  flex: 1;

  font-size: 12px;

  font-weight: 700;
}

.whatsapp-button > strong {
  font-size: 18px;
}

/* =========================================
   CONTACT FORM
========================================= */

.contact-form-wrapper {
  padding: 35px;

  border: 1px solid var(--border);

  border-radius: 20px;

  background: white;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.contact-form-header {
  margin-bottom: 28px;
}

.contact-form-header > span {
  color: var(--primary);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}

.contact-form-header h3 {
  margin: 8px 0;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 28px;
}

.contact-form-header p {
  color: var(--muted);

  font-size: 12px;
}

.contact-form {
  display: flex;

  flex-direction: column;

  gap: 18px;
}

.form-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 15px;
}

.form-group label {
  display: block;

  margin-bottom: 7px;

  color: var(--dark);

  font-size: 10px;

  font-weight: 800;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;

  padding: 13px 14px;

  border: 1px solid var(--border);

  border-radius: 8px;

  outline: none;

  background: #fafafa;

  color: var(--dark);

  font-family: inherit;

  font-size: 12px;

  transition: 0.25s;
}

.form-group textarea {
  resize: vertical;

  min-height: 130px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);

  background: white;

  box-shadow: 0 0 0 3px rgba(24, 120, 77, 0.08);
}

.form-group input.invalid,
.form-group select.invalid,
.form-group textarea.invalid {
  border-color: var(--red);
}

.form-error {
  display: block;

  min-height: 14px;

  margin-top: 4px;

  color: var(--red);

  font-size: 9px;
}

.contact-submit {
  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 16px 18px;

  border: none;

  border-radius: 8px;

  background: var(--primary);

  color: white;

  font-family: inherit;

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

  transition: 0.3s;
}

.contact-submit:hover {
  background: #126341;

  transform: translateY(-2px);
}

.contact-submit strong {
  font-size: 18px;
}

.contact-submit.loading {
  opacity: 0.7;

  pointer-events: none;
}

/* =========================================
   FORM SUCCESS
========================================= */

.form-success {
  display: none;

  align-items: center;

  gap: 12px;

  padding: 15px;

  border-radius: 10px;

  background: var(--primary-light);

  color: var(--primary);
}

.form-success.show {
  display: flex;

  animation: successAppear 0.35s ease;
}

@keyframes successAppear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.form-success > span {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--primary);

  color: white;

  font-weight: 800;
}

.form-success strong {
  display: block;

  font-size: 12px;
}

.form-success p {
  margin-top: 2px;

  color: var(--muted);

  font-size: 10px;
}

/* =========================================
   CONTACT ACTIONS
========================================= */

.contact-actions {
  padding: 60px 0;

  background: white;
}

.contact-actions-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;
}

.contact-action-card {
  display: flex;

  align-items: center;

  gap: 18px;

  padding: 25px;

  border: 1px solid var(--border);

  border-radius: 15px;

  transition: 0.3s;
}

.contact-action-card:hover {
  transform: translateY(-5px);

  border-color: var(--primary);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.action-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 12px;

  background: var(--primary-light);

  font-size: 21px;
}

.contact-action-card div {
  flex: 1;
}

.contact-action-card div > span {
  color: var(--primary);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.contact-action-card h3 {
  margin-top: 6px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 18px;
}

.contact-action-card > strong {
  color: var(--primary);

  font-size: 20px;
}

/* =========================================
   CONTACT CTA
========================================= */

.contact-cta {
  padding: 100px 0;

  background: linear-gradient(135deg, #062d1e, #126f49);

  color: white;
}

.contact-cta-content {
  text-align: center;
}

.contact-cta-content .section-label {
  color: var(--blue);
}

.contact-cta h2 {
  max-width: 800px;

  margin: 12px auto 15px;

  color: white;

  font-family: "Playfair Display", serif;

  font-size: clamp(38px, 5vw, 58px);

  line-height: 1.05;
}

.contact-cta h2 span {
  display: block;

  color: var(--blue);
}

.contact-cta p {
  margin-bottom: 28px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 13px;
}

/* =========================================
   CONTACT RESPONSIVE
========================================= */

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .contact-information {
    max-width: 700px;
  }
}

@media (max-width: 650px) {
  .contact-section {
    padding: 70px 0;
  }

  .contact-form-wrapper {
    padding: 25px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 450px) {
  .contact-detail {
    align-items: flex-start;
  }

  .whatsapp-button {
    width: 100%;
  }

  .contact-cta {
    padding: 75px 0;
  }
}

/* =========================================
   GRANDEUR CRIBS
   PREMIUM ANIMATIONS
========================================= */

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

/* =========================================
   PAGE LOAD
========================================= */

body {
  animation: pageLoad 0.45s ease-out;
}

@keyframes pageLoad {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;

  will-change: opacity, transform;
}

.reveal.show {
  opacity: 1;

  transform: translateY(0);
}

/* Left reveal */

.reveal-left {
  opacity: 0;

  transform: translateX(-45px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal-left.show {
  opacity: 1;

  transform: translateX(0);
}

/* Right reveal */

.reveal-right {
  opacity: 0;

  transform: translateX(45px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal-right.show {
  opacity: 1;

  transform: translateX(0);
}

/* =========================================
   STAGGERED ANIMATIONS
========================================= */

.stagger-1 {
  transition-delay: 0.08s;
}

.stagger-2 {
  transition-delay: 0.16s;
}

.stagger-3 {
  transition-delay: 0.24s;
}

.stagger-4 {
  transition-delay: 0.32s;
}

.stagger-5 {
  transition-delay: 0.4s;
}

/* =========================================
   PROPERTY CARD EFFECT
========================================= */

.property-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.property-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

/* =========================================
   IMAGE ZOOM
========================================= */

.property-card img,
.property-image img {
  transition: transform 0.65s ease;
}

.property-card:hover img,
.property-image:hover img {
  transform: scale(1.05);
}

/* =========================================
   BUTTON EFFECT
========================================= */

.btn,
.nav-button,
.contact-submit {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.btn:hover,
.nav-button:hover,
.contact-submit:hover {
  transform: translateY(-2px);
}

/* =========================================
   NAVBAR SCROLL EFFECT
========================================= */

.header {
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    padding 0.3s ease;
}

.header.scrolled {
  background:
    linear-gradient(rgba(5, 30, 22, 0.9), rgba(5, 30, 22, 0.9)),
    url("../Images/hero-house.jpg") center/cover no-repeat;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* =========================================
   IMAGE OVERLAY EFFECT
========================================= */

.image-hover {
  overflow: hidden;
}

.image-hover img {
  transition: transform 0.6s ease;
}

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

/* =========================================
   FLOATING EFFECT
========================================= */

.float-animation {
  animation: gentleFloat 4s ease-in-out infinite;
}

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

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

/* =========================================
   PULSE EFFECT
========================================= */

.pulse-animation {
  animation: softPulse 2.5s ease-in-out infinite;
}

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

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

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================
   BACK TO TOP
========================================= */

.back-to-top {
  position: fixed;

  right: 22px;

  bottom: 22px;

  width: 45px;

  height: 45px;

  display: grid;

  place-items: center;

  border: none;

  border-radius: 50%;

  background: var(--primary);

  color: white;

  font-size: 20px;

  font-weight: 700;

  cursor: pointer;

  z-index: 999;

  opacity: 0;

  visibility: hidden;

  transform: translateY(15px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);

  background: #126341;
}

@media (max-width: 600px) {
  .back-to-top {
    right: 15px;

    bottom: 15px;

    width: 40px;

    height: 40px;
  }
}

/* =========================================================
   GRANDEUR CRIBS — PREMIUM CONTACT ANIMATIONS
   ========================================================= */

/* ---------- Scroll Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Animation Delays ---------- */

.reveal-delay-1 {
  transition-delay: 0.12s;
}

.reveal-delay-2 {
  transition-delay: 0.22s;
}

.reveal-delay-3 {
  transition-delay: 0.32s;
}

.reveal-delay-4 {
  transition-delay: 0.42s;
}

/* ---------- Contact Details ---------- */

.contact-detail {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.contact-detail:hover {
  transform: translateX(8px);
}

/* ---------- Contact Icons ---------- */

.contact-detail-icon {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.contact-detail:hover .contact-detail-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* ---------- WhatsApp Button ---------- */

.whatsapp-button {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.whatsapp-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}

.whatsapp-button:hover {
  transform: translateY(-4px);
}

.whatsapp-button:hover::before {
  left: 130%;
}

/* ---------- Contact Form ---------- */

.contact-form-wrapper {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.contact-form-wrapper:hover {
  transform: translateY(-3px);
}

/* ---------- Form Fields ---------- */

.contact-form input,
.contact-form select,
.contact-form textarea {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  transform: translateY(-1px);
}

/* ---------- Submit Button ---------- */

.contact-submit {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.contact-submit:hover {
  transform: translateY(-3px);
}

.contact-submit:active {
  transform: translateY(0);
}

/* ---------- Action Cards ---------- */

.contact-action-card {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}

.contact-action-card:hover {
  transform: translateY(-8px);
}

.contact-action-card .action-icon {
  transition: transform 0.4s ease;
}

.contact-action-card:hover .action-icon {
  transform: scale(1.12) rotate(-5deg);
}

/* ---------- CTA ---------- */

.contact-cta-content {
  transition: transform 0.4s ease;
}

.contact-cta-content:hover {
  transform: translateY(-3px);
}

/* ---------- Page Hero ---------- */

.contact-page-hero .page-hero-content {
  animation: contactHeroIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes contactHeroIn {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

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

/* ---------- Gentle Floating Animation ---------- */

.whatsapp-icon {
  animation: gentleFloat 3s ease-in-out infinite;
}

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

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

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: translateY(30px);
  }
}

/* =========================================================
GRANDEUR CRIBS — WHATSAPP CONTACT
========================================================= */

.whatsapp-wrapper {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-family: inherit;
}

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

.whatsapp-floating-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  border: none;
  border-radius: 50px;

  padding: 13px 20px;

  background: #25d366;
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

  overflow: visible;
}

.whatsapp-floating-button:hover {
  background: #1ebe5d;

  transform: translateY(-4px);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.whatsapp-icon {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);
}

.whatsapp-button-text {
  white-space: nowrap;
}

/* =========================================================
PULSE EFFECT
========================================================= */

.whatsapp-pulse {
  position: absolute;

  width: 100%;
  height: 100%;

  left: 0;
  top: 0;

  border-radius: 50px;

  border: 2px solid #25d366;

  animation: whatsappPulse 2s infinite;

  pointer-events: none;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  70% {
    transform: scale(1.12);
    opacity: 0;
  }

  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

/* =========================================================
CONTACT OPTIONS
========================================================= */

.whatsapp-options {
  position: absolute;

  right: 0;
  bottom: 68px;

  width: 330px;

  background: #ffffff;

  border: 1px solid #e6ece8;

  border-radius: 18px;

  padding: 14px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);

  opacity: 0;
  visibility: hidden;

  transform: translateY(15px) scale(0.96);

  transform-origin: bottom right;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

.whatsapp-options.show {
  opacity: 1;
  visibility: visible;

  transform: translateY(0) scale(1);
}

/* =========================================================
OPTIONS HEADER
========================================================= */

.whatsapp-options-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  padding: 7px 7px 14px;
}

.whatsapp-options-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.whatsapp-options-header strong {
  color: #17211b;

  font-size: 15px;
}

.whatsapp-options-header span {
  color: #718078;

  font-size: 11px;
}

.whatsapp-close {
  width: 30px;
  height: 30px;

  border: none;

  border-radius: 8px;

  background: #f2f5f3;

  color: #26332c;

  font-size: 20px;

  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.whatsapp-close:hover {
  background: #fff0f0;
  color: #d62828;
}

/* =========================================================
CONTACT ITEMS
========================================================= */

.whatsapp-contact {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 13px;

  margin-top: 7px;

  border: 1px solid #e4ebe7;

  border-radius: 12px;

  background: #ffffff;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.whatsapp-contact:hover {
  transform: translateX(3px);

  border-color: #25d366;

  background: #f3fff7;

  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.1);
}

/* =========================================================
CONTACT ICON
========================================================= */

.whatsapp-contact-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background: #eaf9ef;

  color: #1ebe5d;

  font-size: 19px;
}

.whatsapp-contact-icon.admin {
  background: #eef9fd;

  color: #1586b8;
}

/* =========================================================
CONTACT INFORMATION
========================================================= */

.whatsapp-contact-info {
  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.whatsapp-contact-info strong {
  color: #17211b;

  font-size: 13px;
}

.whatsapp-contact-info small {
  color: #718078;

  font-size: 10px;
}

/* =========================================================
ARROW
========================================================= */

.whatsapp-arrow {
  color: #138a4b;

  font-size: 18px;

  transition: transform 0.2s ease;
}

.whatsapp-contact:hover .whatsapp-arrow {
  transform: translateX(3px);
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {
  .whatsapp-wrapper {
    right: 15px;
    bottom: 15px;
  }

  .whatsapp-floating-button {
    width: 56px;
    height: 56px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;
  }

  .whatsapp-icon {
    width: 34px;
    height: 34px;

    background: rgba(255, 255, 255, 0.16);

    font-size: 21px;
  }

  .whatsapp-button-text {
    display: none;
  }

  .whatsapp-pulse {
    border-radius: 50%;
  }

  .whatsapp-options {
    right: 0;
    bottom: 68px;

    width: min(330px, calc(100vw - 30px));
  }
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .whatsapp-floating-button,
  .whatsapp-options,
  .whatsapp-contact,
  .whatsapp-arrow {
    transition: none;
  }

  .whatsapp-pulse {
    animation: none;
  }
}
/* =========================================================
   GRANDEUR CRIBS — PROPERTY CARDS FIX
========================================================= */

.homepage-property-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.property-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid rgba(16, 32, 27, 0.09);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(15, 45, 30, 0.09);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.property-card:hover {
  transform: translateY(-8px);
  border-color: rgba(8, 127, 91, 0.22);
  box-shadow: 0 26px 58px rgba(15, 45, 30, 0.15);
}

/* PROPERTY IMAGE */

.property-image {
  width: 100%;
  height: 265px;
  min-height: 265px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #edf4ef, #dfece5);
}

.property-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.property-card:hover .property-image img {
  transform: scale(1.08);
}

/* PROPERTY TAG */

.property-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 30px;
  background: rgba(19, 138, 75, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.16);
}

.property-tag.rent {
  background: #55b9e6;
}

.property-tag.land {
  background: #138a4b;
}

/* FAVORITE BUTTON */

.property-image .favorite {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;

  width: 40px;
  height: 40px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.96);
  color: #138a4b;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  line-height: 1;

  cursor: pointer;

  box-shadow: 0 10px 23px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.property-image .favorite:hover {
  transform: scale(1.1);
  background: #138a4b;
  color: #ffffff;
}

/* PROPERTY INFORMATION */

.property-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  min-width: 0;
}

.property-type {
  display: block;
  margin-bottom: 7px;

  color: #138a4b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.property-info h3 {
  margin: 0 0 8px;

  color: #17211b;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.property-info .location {
  margin: 0 0 16px;

  color: #718078;
  font-size: 12px;
  line-height: 1.5;
}

/* PROPERTY DETAILS */

.property-details {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8eeeb;
}

.property-details span {
  display: inline-flex;
  align-items: center;

  padding: 7px 9px;

  border-radius: 9px;
  background: rgba(8, 127, 91, 0.06);

  color: #4f5e55;
  font-size: 11px;
  white-space: nowrap;
}

/* PRICE + VIEW BUTTON */

.property-bottom {
  margin-top: auto;
  padding-top: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.property-bottom strong {
  color: #138a4b;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}

.view-property {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 15px;

  border-radius: 10px;

  background: linear-gradient(135deg, #eaf7f0, #dff2e9);
  color: #138a4b;

  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(19, 138, 75, 0.1);

  transition: all 0.2s ease;
}

.view-property:hover {
  background: #138a4b;
  color: #ffffff;
  transform: translateX(2px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .homepage-property-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .property-image {
    height: 240px;
    min-height: 240px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .homepage-property-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .property-card {
    width: 100%;
  }

  .property-image {
    height: 240px;
    min-height: 240px;
  }

  .property-info {
    padding: 18px;
  }

  .property-info h3 {
    font-size: 19px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .homepage-property-grid {
    gap: 16px;
  }

  .property-image {
    height: 210px;
    min-height: 210px;
  }

  .property-info {
    padding: 16px;
  }

  .property-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .view-property {
    width: 100%;
  }

  .property-bottom strong {
    font-size: 16px;
  }
}

/* =========================================================
   SCROLL ANIMATIONS
   ========================================================= */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.header-scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}

/* =========================================================
   GRANDEUR CRIBS — AFFILIATE PAGE BEAUTIFICATION
   ========================================================= */

:root {
  --gcl-green: #16833b;
  --gcl-green-dark: #0d642c;
  --gcl-green-light: #eaf7ee;
  --gcl-red: #c62828;
  --gcl-blue: #55a9d6;
  --gcl-dark: #14231a;
  --gcl-text: #26352c;
  --gcl-muted: #718078;
  --gcl-border: #e2e9e4;
  --gcl-bg: #f5f8f5;
  --gcl-white: #ffffff;
}

/* =========================================================
   PAGE BACKGROUND
   ========================================================= */

.affiliate-page {
  position: relative;
  min-height: 100vh;
  padding: 100px 20px 80px !important;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(22, 131, 59, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(85, 169, 214, 0.08),
      transparent 30%
    ),
    linear-gradient(135deg, #f7faf7 0%, #eef5ef 100%);
}

/* Decorative background circles */

.affiliate-page::before,
.affiliate-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.affiliate-page::before {
  width: 260px;
  height: 260px;
  top: 120px;
  left: -130px;
  background: rgba(22, 131, 59, 0.05);
}

.affiliate-page::after {
  width: 300px;
  height: 300px;
  right: -150px;
  bottom: 80px;
  background: rgba(85, 169, 214, 0.06);
}

/* =========================================================
   WRAPPER
   ========================================================= */

.affiliate-wrapper {
  position: relative;
  z-index: 2;
  max-width: 1000px !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.affiliate-header {
  animation: affiliateFadeUp 0.7s ease forwards;
}

.affiliate-header .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gcl-green) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.affiliate-header .section-label::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--gcl-green);
  border-radius: 10px;
}

.affiliate-header h1 {
  color: var(--gcl-dark);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.affiliate-header p {
  font-size: 16px;
  color: var(--gcl-muted) !important;
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.affiliate-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px !important;
  padding: 45px !important;

  box-shadow:
    0 30px 80px rgba(20, 50, 30, 0.1),
    0 8px 25px rgba(20, 50, 30, 0.05) !important;

  animation: affiliateFadeUp 0.8s ease 0.15s both;
}

.affiliate-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;

  background: linear-gradient(
    90deg,
    var(--gcl-green),
    var(--gcl-blue),
    var(--gcl-red)
  );
}

/* =========================================================
   FORM SECTIONS
   ========================================================= */

.form-section {
  padding: 25px 0;
  margin-bottom: 10px !important;
}

.form-section:first-of-type {
  padding-top: 5px;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;

  color: var(--gcl-dark);
  font-size: 18px !important;
  font-weight: 800;

  border-bottom: 0 !important;
  margin-bottom: 22px !important;
}

.form-section-title::before {
  content: "";
  display: block;
  width: 5px;
  height: 25px;
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--gcl-green), var(--gcl-blue));
}

/* =========================================================
   FORM GRID
   ========================================================= */

.affiliate-form-grid {
  gap: 22px !important;
}

/* =========================================================
   FORM GROUP
   ========================================================= */

.affiliate-form-group {
  position: relative;
}

.affiliate-form-group label {
  color: var(--gcl-text) !important;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 9px;
}

/* =========================================================
   INPUTS
   ========================================================= */

.affiliate-form-group input,
.affiliate-form-group select,
.affiliate-form-group textarea {
  appearance: none;
  background: #fbfdfb !important;
  color: var(--gcl-text);

  border: 1.5px solid var(--gcl-border) !important;
  border-radius: 12px !important;

  padding: 15px 16px !important;

  font-size: 15px;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    transform 0.2s ease;
}

.affiliate-form-group input:hover,
.affiliate-form-group select:hover,
.affiliate-form-group textarea:hover {
  border-color: #b9cfc0 !important;
  background: #ffffff !important;
}

.affiliate-form-group input:focus,
.affiliate-form-group select:focus,
.affiliate-form-group textarea:focus {
  border-color: var(--gcl-green) !important;

  background: #ffffff !important;

  box-shadow:
    0 0 0 4px rgba(22, 131, 59, 0.09),
    0 5px 15px rgba(22, 131, 59, 0.05) !important;

  transform: translateY(-1px);
}

/* Placeholder */

.affiliate-form-group input::placeholder,
.affiliate-form-group textarea::placeholder {
  color: #a1aaa5;
}

/* Select arrow */

.affiliate-form-group select {
  cursor: pointer;
}

/* =========================================================
   TEXTAREA
   ========================================================= */

.affiliate-form-group textarea {
  min-height: 150px !important;
  line-height: 1.6;
}

/* =========================================================
   PROFILE UPLOAD
   ========================================================= */

.profile-upload {
  position: relative;

  display: flex;
  align-items: center;

  gap: 25px;

  padding: 25px;

  background: linear-gradient(135deg, #f8fbf8, #f0f7f2);

  border: 1.5px dashed #b8cdbd !important;
  border-radius: 16px !important;

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.profile-upload:hover {
  border-color: var(--gcl-green) !important;

  background: linear-gradient(135deg, #f3faf5, #eaf6ee);

  transform: translateY(-2px);
}

/* =========================================================
   PROFILE PREVIEW
   ========================================================= */

.profile-preview {
  width: 105px !important;
  height: 105px !important;

  flex-shrink: 0;

  border-radius: 50% !important;

  border: 4px solid #ffffff;

  background: linear-gradient(135deg, #e8f3eb, #dceee1);

  color: var(--gcl-green);

  box-shadow:
    0 8px 25px rgba(22, 131, 59, 0.12),
    0 0 0 1px #dce8df;

  font-size: 32px !important;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.profile-upload:hover .profile-preview {
  transform: scale(1.04);

  box-shadow:
    0 12px 30px rgba(22, 131, 59, 0.16),
    0 0 0 1px #c8ddce;
}

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

/* =========================================================
   FILE INPUT
   ========================================================= */

.profile-upload input[type="file"] {
  width: 100%;
  max-width: 350px;

  margin-top: 10px;

  padding: 10px !important;

  border: 1px solid #dce5de !important;
  border-radius: 10px !important;

  background: #ffffff !important;

  cursor: pointer;
}

.profile-upload input[type="file"]::file-selector-button {
  margin-right: 12px;

  border: none;

  background: var(--gcl-green);
  color: white;

  padding: 9px 14px;

  border-radius: 7px;

  font-weight: 700;

  cursor: pointer;

  transition: background 0.2s ease;
}

.profile-upload input[type="file"]::file-selector-button:hover {
  background: var(--gcl-green-dark);
}

/* =========================================================
   UPLOAD STATUS
   ========================================================= */

.upload-status {
  display: block;

  margin-top: 10px !important;

  color: var(--gcl-green) !important;

  font-size: 13px;

  font-weight: 700;
}

/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.affiliate-submit {
  position: relative;
  overflow: hidden;

  width: 100%;

  margin-top: 15px;

  border: none !important;
  border-radius: 12px !important;

  background: linear-gradient(135deg, #16833b, #0d6d30) !important;

  color: white;

  padding: 17px 25px !important;

  font-size: 16px !important;
  font-weight: 800 !important;

  letter-spacing: 0.2px;

  box-shadow: 0 10px 25px rgba(22, 131, 59, 0.2);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.affiliate-submit::before {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.6s ease;
}

.affiliate-submit:hover {
  transform: translateY(-2px);

  box-shadow: 0 15px 30px rgba(22, 131, 59, 0.25);
}

.affiliate-submit:hover::before {
  left: 130%;
}

.affiliate-submit:active {
  transform: translateY(0);
}

.affiliate-submit:disabled {
  transform: none;

  box-shadow: none;

  opacity: 0.65;
}

/* =========================================================
   MESSAGE
   ========================================================= */

.affiliate-message {
  border-radius: 13px !important;

  font-size: 14px;

  padding: 17px 20px !important;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);

  animation: messageSlide 0.4s ease;
}

.affiliate-message.success {
  background: linear-gradient(135deg, #ecfaf0, #e1f5e7) !important;

  color: #126b31 !important;

  border: 1px solid #bce2c7 !important;
}

.affiliate-message.error {
  background: linear-gradient(135deg, #fff5f5, #ffeded) !important;

  color: #a32121 !important;

  border: 1px solid #efc5c5 !important;
}

/* =========================================================
   NOTES
   ========================================================= */

.form-note {
  color: var(--gcl-muted) !important;

  font-size: 13px;

  line-height: 1.7;
}

/* =========================================================
   BACK HOME
   ========================================================= */

.back-home {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  gap: 7px;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.back-home:hover {
  color: var(--gcl-green-dark) !important;

  transform: translateX(-4px);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .affiliate-page {
    padding: 70px 14px 50px !important;
  }

  .affiliate-header {
    margin-bottom: 28px;
  }

  .affiliate-header h1 {
    font-size: 34px !important;
    letter-spacing: -1px;
  }

  .affiliate-header p {
    font-size: 14px;
  }

  .affiliate-card {
    padding: 28px 18px !important;
    border-radius: 18px !important;
  }

  .form-section {
    padding: 20px 0;
  }

  .form-section-title {
    font-size: 17px !important;
  }

  .affiliate-form-grid {
    grid-template-columns: 1fr !important;
    gap: 17px !important;
  }

  .affiliate-form-group.full-width {
    grid-column: auto !important;
  }

  .profile-upload {
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding: 22px 15px;
  }

  .profile-preview {
    width: 100px !important;
    height: 100px !important;
  }

  .profile-upload input[type="file"] {
    max-width: 100%;
  }

  .affiliate-submit {
    padding: 16px !important;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {
  .affiliate-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .affiliate-card {
    padding: 23px 14px !important;
  }

  .affiliate-header h1 {
    font-size: 29px !important;
  }

  .affiliate-form-group input,
  .affiliate-form-group select,
  .affiliate-form-group textarea {
    font-size: 14px;
  }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes affiliateFadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

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

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

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

/* =========================================================
   REDUCE MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   GRANDEUR CRIBS — PREMIUM HOMEPAGE ANIMATIONS
   ========================================================= */

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

/* =========================================================
   PAGE LOAD
   ========================================================= */

body {
  animation: pageReveal 0.7s ease both;
}

@keyframes pageReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================================================
   HEADER ANIMATION
   ========================================================= */

.header {
  animation: headerDrop 0.8s ease both;
}

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

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

/* =========================================================
   LOGO HOVER
   ========================================================= */

.logo {
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.logo:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 15px rgba(22, 131, 59, 0.15));
}

.logo-icon {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.logo:hover .logo-icon {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 8px 20px rgba(22, 131, 59, 0.25);
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.navigation a {
  position: relative;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.navigation a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -7px;

  width: 0;
  height: 2px;

  background: #16833b;

  border-radius: 10px;

  transform: translateX(-50%);

  transition: width 0.3s ease;
}

.navigation a:hover {
  transform: translateY(-2px);
}

.navigation a:hover::after {
  width: 70%;
}

/* =========================================================
   HERO SECTION
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
}

/* Hero content entrance */

.hero-content {
  animation: heroContentReveal 1s ease 0.2s both;
}

@keyframes heroContentReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

/* Hero heading */

.hero h1,
.hero-title {
  animation: heroTitleReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}

@keyframes heroTitleReveal {
  from {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(6px);
  }

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

/* Hero paragraph */

.hero p,
.hero-description {
  animation: heroParagraphReveal 0.9s ease 0.55s both;
}

@keyframes heroParagraphReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* =========================================================
   HERO IMAGE
   ========================================================= */

.hero-image,
.hero-image img {
  animation: heroImageReveal 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

@keyframes heroImageReveal {
  from {
    opacity: 0;
    transform: translateX(60px) scale(1.04);
  }

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

/* Gentle hero image movement */

.hero-image img {
  transition:
    transform 0.7s ease,
    filter 0.5s ease;
}

.hero-image:hover img {
  transform: scale(1.035);
}

/* =========================================================
   HERO DECORATIVE FLOATING EFFECT
   ========================================================= */

.hero::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background: rgba(22, 131, 59, 0.07);

  top: 10%;
  left: -100px;

  pointer-events: none;

  animation: floatingCircle 7s ease-in-out infinite;
}

.hero::after {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  border-radius: 50%;

  background: rgba(85, 169, 214, 0.07);

  right: -60px;
  bottom: 5%;

  pointer-events: none;

  animation: floatingCircle 9s ease-in-out infinite reverse;
}

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

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

/* =========================================================
   BUTTON ANIMATIONS
   ========================================================= */

.btn,
button,
.nav-button {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.btn:hover,
.nav-button:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(22, 131, 59, 0.18);
}

.btn:active,
.nav-button:active {
  transform: translateY(-1px);
}

/* Button shine */

.btn-primary,
.primary-btn {
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.primary-btn::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.6s ease;
}

.btn-primary:hover::before,
.primary-btn:hover::before {
  left: 130%;
}

/* =========================================================
   PROPERTY CARDS
   ========================================================= */

.property-card,
.property-item,
.listing-card {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}

.property-card:hover,
.property-item:hover,
.listing-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 25px 50px rgba(20, 50, 30, 0.14);
}

/* Property image */

.property-card img,
.property-item img,
.listing-card img {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.property-card:hover img,
.property-item:hover img,
.listing-card:hover img {
  transform: scale(1.06);
}

/* Prevent image overflow */

.property-card,
.property-item,
.listing-card {
  overflow: hidden;
}

/* =========================================================
   PROPERTY BADGES
   ========================================================= */

.property-badge,
.badge {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.property-card:hover .property-badge,
.property-card:hover .badge {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   SECTION REVEAL
   ========================================================= */

section {
  animation: sectionAppear 0.8s ease both;
}

@keyframes sectionAppear {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

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

/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title,
.section-heading {
  transition: transform 0.3s ease;
}

.section-title:hover,
.section-heading:hover {
  transform: translateY(-2px);
}

/* =========================================================
   IMAGE HOVER EFFECT
   ========================================================= */

img {
  transition: filter 0.4s ease;
}

img:hover {
  filter: brightness(1.03);
}

/* =========================================================
   SERVICES CARDS
   ========================================================= */

.service-card,
.services-card {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.service-card:hover,
.services-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(20, 50, 30, 0.12);
}

/* Icon animation */

.service-card i,
.service-card svg,
.services-card i,
.services-card svg {
  transition: transform 0.35s ease;
}

.service-card:hover i,
.service-card:hover svg,
.services-card:hover i,
.services-card:hover svg {
  transform: scale(1.12) rotate(-4deg);
}

/* =========================================================
   STATS / COUNTERS
   ========================================================= */

.stat,
.stat-item,
.counter-box {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.stat:hover,
.stat-item:hover,
.counter-box:hover {
  transform: translateY(-6px);
}

/* =========================================================
   TESTIMONIAL CARDS
   ========================================================= */

.testimonial-card,
.testimonial {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.testimonial-card:hover,
.testimonial:hover {
  transform: translateY(-7px);

  box-shadow: 0 20px 45px rgba(20, 50, 30, 0.1);
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.social-icon,
.social-links a {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.social-icon:hover,
.social-links a:hover {
  transform: translateY(-4px) scale(1.08);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  animation: footerReveal 0.8s ease both;
}

@keyframes footerReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #f2f5f2;
}

::-webkit-scrollbar-thumb {
  background: #16833b;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0d642c;
}

/* =========================================================
   MOBILE OPTIMIZATION
   ========================================================= */

@media (max-width: 768px) {
  .hero-content {
    animation-delay: 0.1s;
  }

  .hero-image {
    animation-delay: 0.25s;
  }

  .property-card:hover,
  .property-item:hover,
  .listing-card:hover {
    transform: translateY(-5px);
  }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   GRANDEUR CRIBS LTD.
   PREMIUM HOMEPAGE ANIMATIONS
   ========================================================= */

/* ---------------------------------------------------------
   1. PAGE LOAD
--------------------------------------------------------- */

body {
  animation: pageFadeIn 0.8s ease both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   2. HEADER ANIMATION
--------------------------------------------------------- */

.header {
  animation: headerDrop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes headerDrop {
  from {
    opacity: 0;
    transform: translateY(-35px);
  }

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

/* ---------------------------------------------------------
   3. LOGO
--------------------------------------------------------- */

.logo {
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.logo:hover {
  transform: translateY(-3px) scale(1.02);
}

.logo-icon {
  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.logo:hover .logo-icon {
  transform: rotate(8deg) scale(1.08);
  box-shadow: 0 8px 25px rgba(22, 131, 59, 0.25);
}

/* ---------------------------------------------------------
   4. NAVIGATION
--------------------------------------------------------- */

.navigation a {
  position: relative;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.navigation a:hover {
  transform: translateY(-2px);
}

.navigation a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;

  width: 0;
  height: 2px;

  background: #16833b;

  transform: translateX(-50%);

  transition: width 0.35s ease;
}

.navigation a:hover::after {
  width: 70%;
}

/* ---------------------------------------------------------
   5. NAV BUTTON
--------------------------------------------------------- */

.nav-button {
  position: relative;
  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.nav-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(22, 131, 59, 0.25);
}

.nav-button::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.6s ease;
}

.nav-button:hover::before {
  left: 140%;
}

/* ---------------------------------------------------------
   6. HERO SECTION
--------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
}

/* Animated background glow */

.hero::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  top: -180px;
  right: -180px;

  background: rgba(22, 131, 59, 0.08);

  border-radius: 50%;

  filter: blur(10px);

  animation: heroGlow 8s ease-in-out infinite alternate;

  pointer-events: none;
}

.hero::after {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  bottom: -150px;
  left: -100px;

  background: rgba(100, 180, 220, 0.07);

  border-radius: 50%;

  animation: heroGlowTwo 10s ease-in-out infinite alternate;

  pointer-events: none;
}

@keyframes heroGlow {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-60px, 40px) scale(1.2);
  }
}

@keyframes heroGlowTwo {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(80px, -40px) scale(1.15);
  }
}

/* ---------------------------------------------------------
   7. HERO CONTENT
--------------------------------------------------------- */

.hero-content {
  animation: heroContentIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes heroContentIn {
  from {
    opacity: 0;
    transform: translateY(45px);
  }

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

/* ---------------------------------------------------------
   8. HERO TITLE
--------------------------------------------------------- */

.hero h1 {
  animation: heroTitleIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(30px);
    letter-spacing: 8px;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: normal;
  }
}

/* ---------------------------------------------------------
   9. HERO PARAGRAPH
--------------------------------------------------------- */

.hero p {
  animation: heroParagraphIn 0.9s ease 0.55s both;
}

@keyframes heroParagraphIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* ---------------------------------------------------------
   10. HERO BUTTONS
--------------------------------------------------------- */

.hero .btn,
.hero a[class*="btn"] {
  animation: heroButtonIn 0.8s ease 0.75s both;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

@keyframes heroButtonIn {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.95);
  }

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

.hero .btn:hover,
.hero a[class*="btn"]:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(22, 131, 59, 0.25);
}

/* ---------------------------------------------------------
   11. HERO IMAGE
--------------------------------------------------------- */

.hero-image,
.hero img {
  animation: heroImageIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateX(70px) scale(0.92);
  }

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

/* ---------------------------------------------------------
   12. FLOATING HERO IMAGE
--------------------------------------------------------- */

.hero-image img {
  animation: heroFloat 6s ease-in-out infinite;
}

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

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

/* ---------------------------------------------------------
   13. SECTION REVEAL
--------------------------------------------------------- */

section {
  animation: sectionReveal 0.9s ease both;
}

@keyframes sectionReveal {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

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

/* ---------------------------------------------------------
   14. SECTION TITLES
--------------------------------------------------------- */

.section-title,
.section-heading {
  position: relative;
}

.section-title::after,
.section-heading::after {
  content: "";

  display: block;

  width: 0;
  height: 3px;

  margin-top: 12px;

  background: #16833b;

  transition: width 0.8s ease;
}

section:hover .section-title::after,
section:hover .section-heading::after {
  width: 70px;
}

/* ---------------------------------------------------------
   15. PROPERTY CARDS
--------------------------------------------------------- */

.property-card,
.property-item,
.card {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;

  will-change: transform;
}

.property-card:hover,
.property-item:hover,
.card:hover {
  transform: translateY(-10px) scale(1.015);

  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------
   16. PROPERTY IMAGE
--------------------------------------------------------- */

.property-card img,
.property-item img,
.card img {
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}

.property-card:hover img,
.property-item:hover img,
.card:hover img {
  transform: scale(1.08);
}

/* ---------------------------------------------------------
   17. IMAGE CONTAINER
--------------------------------------------------------- */

.property-card,
.property-item,
.card {
  overflow: hidden;
}

/* ---------------------------------------------------------
   18. PROPERTY BADGE
--------------------------------------------------------- */

.property-card .badge,
.property-card .status,
.property-item .badge {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.property-card:hover .badge,
.property-card:hover .status,
.property-item:hover .badge {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------
   19. ICON ANIMATION
--------------------------------------------------------- */

.service-icon,
.feature-icon,
.icon {
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

.service-card:hover .service-icon,
.feature-card:hover .feature-icon,
.card:hover .icon {
  transform: translateY(-6px) rotate(5deg) scale(1.08);
}

/* ---------------------------------------------------------
   20. SERVICE CARDS
--------------------------------------------------------- */

.service-card,
.feature-card {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.service-card:hover,
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

/* ---------------------------------------------------------
   21. STATS / COUNTERS
--------------------------------------------------------- */

.stat-item {
  transition: transform 0.35s ease;
}

.stat-item:hover {
  transform: translateY(-7px);
}

.stat-item strong,
.stat-item .number {
  display: inline-block;

  transition: transform 0.35s ease;
}

.stat-item:hover strong,
.stat-item:hover .number {
  transform: scale(1.08);
}

/* ---------------------------------------------------------
   22. WHATSAPP / FLOATING ACTION BUTTON
--------------------------------------------------------- */

.whatsapp-button,
.floating-button,
.float-btn {
  animation: floatingButton 3s ease-in-out infinite;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

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

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

.whatsapp-button:hover,
.floating-button:hover,
.float-btn:hover {
  animation-play-state: paused;

  transform: translateY(-5px) scale(1.08);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------
   23. CTA SECTION
--------------------------------------------------------- */

.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.12);

  right: 5%;
  top: 20%;

  animation: ctaCircle 7s linear infinite;
}

@keyframes ctaCircle {
  from {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.12);
  }

  to {
    transform: rotate(360deg) scale(1);
  }
}

/* ---------------------------------------------------------
   24. BUTTON SHINE
--------------------------------------------------------- */

.btn,
button {
  position: relative;
  overflow: hidden;
}

.btn::after,
button::after {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.65s ease;
}

.btn:hover::after,
button:hover::after {
  left: 140%;
}

/* ---------------------------------------------------------
   25. IMAGE HOVER LIGHT
--------------------------------------------------------- */

.property-card::after,
.property-item::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255, 255, 255, 0.18),
    transparent 65%
  );

  transform: translateX(-100%);

  transition: transform 0.8s ease;
}

.property-card:hover::after,
.property-item:hover::after {
  transform: translateX(100%);
}

/* ---------------------------------------------------------
   26. LINKS
--------------------------------------------------------- */

a {
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

/* ---------------------------------------------------------
   27. MOBILE ANIMATION ADJUSTMENTS
--------------------------------------------------------- */

@media (max-width: 700px) {
  .hero-content {
    animation-duration: 0.8s;
  }

  .hero-image img {
    animation: heroFloat 5s ease-in-out infinite;
  }

  .property-card:hover,
  .property-item:hover,
  .card:hover {
    transform: translateY(-5px);
  }
}

/* ---------------------------------------------------------
   28. ACCESSIBILITY
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   GRANDEUR OFFICIAL LOGO
===================================================== */

.grandeur-admin-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  height: 70px;
  width: auto;
  flex-shrink: 0;
}

.grandeur-logo-image {
  display: block;
  width: 190px;
  height: auto;
  max-height: 65px;
  object-fit: contain;
}

/* =====================================================
   MOBILE LOGO
===================================================== */

@media (max-width: 768px) {
  .grandeur-admin-logo {
    height: 60px;
  }

  .grandeur-logo-image {
    width: 155px;
    max-height: 55px;
  }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {
  .grandeur-admin-logo {
    height: 55px;
  }

  .grandeur-logo-image {
    width: 140px;
    max-height: 50px;
  }
}

/* =====================================================
   GRANDEUR CRIBS LOGO
===================================================== */

.site-logo {
  width: 170px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* =====================================================
   GRANDEUR CRIBS LOGO
===================================================== */

.site-logo {
  width: 170px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* =====================================================
   BECOME AN AFFILIATE BUTTON
====================================================== */

.btn-affiliate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #16833b;
  color: #ffffff;

  padding: 14px 24px;

  border-radius: 10px;

  font-weight: 700;
  text-decoration: none;

  border: 2px solid #16833b;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-affiliate:hover {
  background: #11682f;
  border-color: #11682f;
  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(22, 131, 59, 0.2);
}

@media (max-width: 700px) {
  .btn-affiliate {
    width: 100%;
  }
}

/* =========================================================
   GRANDEUR CRIBS - PREMIUM STYLE ENHANCEMENTS
   ADDITIONAL THEME + VISUAL EFFECTS
   This section preserves the existing design pattern.
========================================================= */

/* ================= PREMIUM VARIABLES ================= */

:root {
  --gold: #d4a853;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);

  --gradient-primary: linear-gradient(135deg, var(--primary), #0fa978);

  --gradient-dark: linear-gradient(135deg, #061b13, var(--dark));
}

/* ================= SMOOTH PAGE EXPERIENCE ================= */

body {
  overflow-x: hidden;
}

::selection {
  background: var(--primary);
  color: white;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f2f5f3;
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* ================= PREMIUM HEADER ================= */

.header,
.homepage-header {
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    padding 0.35s ease;
}

.header-scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* NAV LINK ANIMATION */

.navigation a::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 2px;

  background: var(--blue);

  transition: width 0.3s ease;
}

.navigation a:hover::before {
  width: 100%;
}

/* ================= PREMIUM BUTTON EFFECTS ================= */

.btn,
.nav-button,
.search-button,
.reset-filter,
.btn-affiliate {
  position: relative;

  overflow: hidden;
}

.btn::before,
.nav-button::before,
.search-button::before,
.btn-affiliate::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.6s ease;
}

.btn:hover::before,
.nav-button:hover::before,
.search-button:hover::before,
.btn-affiliate:hover::before {
  left: 150%;
}

.btn-primary,
.search-button {
  box-shadow: 0 10px 25px rgba(8, 127, 91, 0.2);
}

/* ================= HERO PREMIUM EFFECT ================= */

.hero {
  isolation: isolate;
}

.hero::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -200px;
  bottom: -250px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(88, 185, 232, 0.18),
    transparent 65%
  );

  z-index: 1;

  pointer-events: none;
}

.hero-content {
  position: relative;
}

/* FLOATING ANIMATION */

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

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

.hero-badge,
.hero-label {
  animation: premiumFloat 4s ease-in-out infinite;
}

/* ================= GLASS STYLE ================= */

.glass-card {
  background: rgba(255, 255, 255, 0.08);

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* ================= PROPERTY CARD PREMIUM ================= */

.property-card {
  position: relative;
}

.property-card::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 4px;

  background: linear-gradient(90deg, var(--primary), var(--blue));

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s ease;
}

.property-card:hover::after {
  transform: scaleX(1);
}

.property-card:hover {
  border-color: rgba(8, 127, 91, 0.2);
}

/* PROPERTY IMAGE OVERLAY */

.property-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.22), transparent 55%);

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;
}

.property-card:hover .property-image::after {
  opacity: 1;
}

/* ================= FAVORITE BUTTON ================= */

.favorite {
  display: grid;
  place-items: center;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.favorite:hover {
  transform: scale(1.12) rotate(5deg);
}

/* ================= SECTION DECORATION ================= */

.section-heading {
  position: relative;
}

.section-label {
  display: inline-flex;

  align-items: center;

  gap: 8px;
}

.section-label::before {
  content: "";

  width: 25px;
  height: 2px;

  background: linear-gradient(90deg, var(--primary), var(--blue));
}

/* ================= FEATURE CARDS HOVER ================= */

.feature {
  padding: 12px;

  border-radius: 12px;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.feature:hover {
  background: rgba(255, 255, 255, 0.7);

  transform: translateX(6px);
}

/* ================= SERVICE CARD PREMIUM ================= */

.service-card {
  box-shadow: 0 10px 30px rgba(16, 32, 27, 0.03);
}

.service-card:hover .service-icon {
  transform: rotate(-6deg) scale(1.08);
}

.service-icon {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.service-card:hover .service-icon {
  box-shadow: 0 12px 25px rgba(8, 127, 91, 0.15);
}

/* ================= MISSION CARD EFFECT ================= */

.mission-card {
  position: relative;

  overflow: hidden;
}

.mission-card::after {
  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  right: -60px;
  bottom: -60px;

  border-radius: 50%;

  background: rgba(8, 127, 91, 0.05);

  transition: transform 0.4s ease;
}

.mission-card:hover::after {
  transform: scale(2);
}

/* ================= VALUE CARD PREMIUM ================= */

.value-card {
  background: linear-gradient(145deg, #ffffff, #fbfdfc);
}

.value-card:hover {
  box-shadow: 0 20px 45px rgba(16, 32, 27, 0.08);
}

/* ================= SEARCH BOX PREMIUM ================= */

.property-search,
.property-filter {
  position: relative;
}

.property-search {
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.input-group select,
.filter-group input,
.filter-group select {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.input-group select:focus,
.filter-group input:focus,
.filter-group select:focus {
  box-shadow: 0 0 0 4px rgba(8, 127, 91, 0.1);

  transform: translateY(-1px);
}

/* ================= EXPERIENCE CARDS ================= */

.experience-card,
.about-experience,
.visual-card-small {
  border: 1px solid rgba(8, 127, 91, 0.08);
}

/* ================= CTA PREMIUM ================= */

.cta {
  position: relative;

  overflow: hidden;
}

.cta::before {
  content: "";

  position: absolute;

  width: 450px;
  height: 450px;

  left: -180px;
  top: -220px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta::after {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  right: -120px;
  bottom: -180px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(88, 185, 232, 0.18),
    transparent 65%
  );
}

.cta .container {
  position: relative;
  z-index: 2;
}

/* ================= FOOTER PREMIUM ================= */

.footer {
  position: relative;

  overflow: hidden;
}

.footer::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background: linear-gradient(90deg, var(--primary), var(--blue), var(--red));
}

.footer-column a {
  position: relative;

  width: fit-content;
}

.footer-column a::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: -2px;

  width: 0;
  height: 1px;

  background: var(--blue);

  transition: width 0.3s ease;
}

.footer-column a:hover::before {
  width: 100%;
}

/* ================= MODAL PREMIUM ================= */

.property-modal-content {
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.modal-close {
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.modal-close:hover {
  background: var(--red);

  color: white;

  transform: rotate(90deg);
}

/* ================= NOTIFICATION PREMIUM ================= */

.site-notification {
  border-left: 4px solid var(--primary);
}

/* ================= REVEAL ANIMATION ================= */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

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

.property-card,
.service-card,
.mission-card,
.value-card {
  animation: fadeUp 0.6s ease both;
}

/* ================= DARK THEME SUPPORT ================= */
/* Optional: add class="dark-theme" to body */

body.dark-theme {
  --white: #0d1713;
  --light: #111d18;
  --dark: #f2f7f4;
  --text: #c4d0ca;
  --muted: #91a098;
  --border: #26352e;

  background: #0d1713;
}

body.dark-theme .property-card,
body.dark-theme .service-card,
body.dark-theme .mission-card,
body.dark-theme .value-card,
body.dark-theme .property-filter,
body.dark-theme .property-search,
body.dark-theme .experience-card,
body.dark-theme .about-experience,
body.dark-theme .visual-card-small {
  background: #14211b;

  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .properties-section {
  background: #101b16;
}

body.dark-theme .footer {
  background: #050b08;
}

/* ================= ALTERNATIVE LUXURY THEME ================= */
/* Optional: add class="luxury-theme" to body */

body.luxury-theme {
  --primary: #126b52;
  --primary-dark: #0b4837;
  --primary-light: #edf5f1;

  --dark: #1c1914;

  --text: #514c43;

  --light: #faf8f3;
}

/* ================= BLUE ACCENT THEME ================= */
/* Optional: add class="blue-theme" to body */

body.blue-theme {
  --primary: #1677b8;
  --primary-dark: #0d5687;
  --primary-light: #e9f5fc;
}

/* ================= RED ACCENT THEME ================= */
/* Optional: add class="red-theme" to body */

body.red-theme {
  --primary: #b8202a;
  --primary-dark: #85151d;
  --primary-light: #fbecee;
}

/* ================= MOBILE ENHANCEMENTS ================= */

@media (max-width: 768px) {
  .hero::before {
    width: 300px;
    height: 300px;
  }

  .property-card:hover {
    transform: translateY(-5px);
  }

  .feature:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================================
   MULTI-COLOR GLOWING OUTLINE FOR PROPERTY IMAGES
========================================================= */

.property-image {
  position: relative;
  overflow: visible; /* allows glow to show outside */
  z-index: 1;

  border-radius: 16px;

  isolation: isolate;
}

/* ANIMATED GLOWING OUTLINE */

.property-image::before {
  content: "";

  position: absolute;

  inset: -3px;

  z-index: -1;

  border-radius: 18px;

  background: linear-gradient(
    90deg,
    #087f5b,
    #58b9e8,
    #d62828,
    #8b5cf6,
    #087f5b
  );

  background-size: 300% 300%;

  animation: propertyGlow 5s linear infinite;

  filter: blur(4px);

  opacity: 0.75;

  transition:
    opacity 0.35s ease,
    filter 0.35s ease;
}

/* SHARP COLOR OUTLINE */

.property-image::after {
  content: "";

  position: absolute;

  inset: -2px;

  z-index: -1;

  border-radius: 18px;

  background: linear-gradient(
    90deg,
    #087f5b,
    #58b9e8,
    #d62828,
    #8b5cf6,
    #087f5b
  );

  background-size: 300% 300%;

  animation: propertyGlow 5s linear infinite;

  opacity: 0;

  transition: opacity 0.35s ease;
}

/* SHOW GLOW WHEN CARD IS HOVERED */

.property-card:hover .property-image::before,
.property-card:hover .property-image::after {
  opacity: 1;
}

@property --glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* COLOR MOVEMENT */

@keyframes propertyGlow {
  0% {
    background-position: 0% 50%;
  }

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

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

/* =========================================================
   GET STARTED BUTTON - MULTI COLOR GLOW
========================================================= */

.nav-button,
.get-started {
  position: relative;
  z-index: 1;

  isolation: isolate;

  overflow: visible;
}

/* GLOWING OUTER EFFECT */

.nav-button::after,
.get-started::after {
  content: "";

  position: absolute;

  inset: -3px;

  z-index: -1;

  border-radius: 12px;

  background: linear-gradient(
    90deg,
    #087f5b,
    #58b9e8,
    #d62828,
    #8b5cf6,
    #087f5b
  );

  background-size: 300% 300%;

  filter: blur(6px);

  animation: getStartedGlow 5s linear infinite;

  opacity: 0;

  transition: opacity 0.35s ease;
}

/* SHOW GLOW ON HOVER */

.nav-button:hover::after,
.get-started:hover::after {
  opacity: 1;
}

/* MOVING COLORS */

@keyframes getStartedGlow {
  0% {
    background-position: 0% 50%;
  }

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

  100% {
    background-position: 0% 50%;
  }
}
/* =========================================================
   SIMPLE. CLEAR. PROFESSIONAL. - PREMIUM ANIMATION
========================================================= */

/* Replace .property-interface-title with the actual class
   if your heading uses a different class */

.property-interface-title {
  position: relative;
  display: inline-block;

  font-family: "Playfair Display", serif;

  font-size: clamp(32px, 4vw, 58px);
  font-weight: 800;

  letter-spacing: -1.5px;
  line-height: 1.15;

  background: linear-gradient(
    90deg,
    var(--primary),
    var(--blue),
    var(--red),
    var(--primary)
  );

  background-size: 300% auto;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation:
    titleGradient 6s linear infinite,
    titleEntrance 0.9s ease both;
}

/* ANIMATED GLOW UNDER THE TEXT */

.property-interface-title::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -12px;

  width: 100%;
  height: 3px;

  border-radius: 20px;

  background: linear-gradient(
    90deg,
    var(--primary),
    var(--blue),
    var(--red),
    var(--primary)
  );

  background-size: 300% 100%;

  animation:
    titleGradient 6s linear infinite,
    linePulse 2s ease-in-out infinite;

  box-shadow:
    0 0 10px rgba(88, 185, 232, 0.35),
    0 0 20px rgba(8, 127, 91, 0.2);
}

/* COLOR MOVEMENT */

@keyframes titleGradient {
  0% {
    background-position: 0% 50%;
  }

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

/* ENTRANCE EFFECT */

@keyframes titleEntrance {
  from {
    opacity: 0;

    transform: translateY(35px) scale(0.96);

    filter: blur(8px);
  }

  to {
    opacity: 1;

    transform: translateY(0) scale(1);

    filter: blur(0);
  }
}

/* UNDERLINE PULSE */

@keyframes linePulse {
  0%,
  100% {
    transform: scaleX(0.85);
    opacity: 0.65;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* HOVER EFFECT */

.property-interface-title:hover {
  transform: translateY(-4px);

  filter: drop-shadow(0 10px 18px rgba(8, 127, 91, 0.18));
}

/* ================= SUBTEXT STYLING ================= */

.property-interface-title + p {
  position: relative;

  max-width: 600px;

  margin-top: 28px;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.8;

  animation: subtitleEntrance 1.1s ease both;
}

@keyframes subtitleEntrance {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   SERVICES GOALS - IMAGE CARD ENHANCEMENT
========================================================= */

.services-goals-card,
.goals-card,
.service-visual-card {
  position: relative;
  overflow: hidden;

  min-height: 480px;

  border-radius: 24px;

  background: linear-gradient(
    135deg,
    rgba(3, 42, 23, 0.92),
    rgba(8, 127, 91, 0.75)
  );
}

/* IMAGE INSIDE THE CARD */

.services-goals-card img,
.goals-card img,
.service-visual-card img {
  width: 100%;
  height: 100%;

  position: absolute;

  inset: 0;

  object-fit: cover;

  z-index: 1;

  transition: transform 0.7s ease;
}

/* DARK GRADIENT OVER IMAGE */

.services-goals-card::after,
.goals-card::after,
.service-visual-card::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  background: linear-gradient(
    135deg,
    rgba(3, 32, 21, 0.88),
    rgba(3, 32, 21, 0.3)
  );
}

/* KEEP TEXT ABOVE IMAGE */

.services-goals-card > *,
.goals-card > *,
.service-visual-card > * {
  position: relative;

  z-index: 3;
}

/* IMAGE ZOOM EFFECT */

.services-goals-card:hover img,
.goals-card:hover img,
.service-visual-card:hover img {
  transform: scale(1.08);
}
/* =========================================================
WHY US CARD IMAGE
IMAGE STAYS BEHIND THE ORIGINAL TEXT
========================================================= */

.visual-card-main {
  position: relative;
  overflow: hidden;
}

/* IMAGE - BACKGROUND LAYER */

.visual-card-main .why-us-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 1;

  transition: transform 0.7s ease;
}

/* DARK OVERLAY - BETWEEN IMAGE AND TEXT */

.visual-card-main .visual-card-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    rgba(3, 32, 21, 0.88),
    rgba(3, 32, 21, 0.45)
  );

  z-index: 2;
}

/* KEEP ORIGINAL TEXT ABOVE EVERYTHING */

.visual-card-main .visual-card-label,
.visual-card-main .visual-card-title {
  position: relative;
  z-index: 3;

  color: #ffffff;
}

/* IMAGE ZOOM EFFECT */

.visual-card-main:hover .why-us-image {
  transform: scale(1.08);
}

/* =========================================================
   GRANDEUR CRIBS LTD.
   PREMIUM DESIGN ENHANCEMENT LAYER
   Add this AFTER your existing CSS
========================================================= */

/* =========================================================
   1. GLOBAL SMOOTHNESS
========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* =========================================================
   2. PREMIUM SELECTION
========================================================= */

::selection {
  background: #168f5a;
  color: #ffffff;
}

/* =========================================================
   3. CUSTOM SCROLLBAR
========================================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f4f7f5;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #168f5a, #0c7045);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0c7045;
}

/* =========================================================
   4. SECTION REVEAL
   Works safely without covering content
========================================================= */

section {
  position: relative;
}

section > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   5. PREMIUM PROPERTY CARDS
========================================================= */

.property-card,
.property-item,
.property-box,
.listing-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
  will-change: transform;
}

.property-card:hover,
.property-item:hover,
.property-box:hover,
.listing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   6. PROPERTY IMAGE EFFECT
========================================================= */

.property-card img,
.property-item img,
.property-box img,
.listing-card img {
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
}

.property-card:hover img,
.property-item:hover img,
.property-box:hover img,
.listing-card:hover img {
  transform: scale(1.045);
}

/* Prevent image zoom from spilling outside card */

.property-card,
.property-item,
.property-box,
.listing-card {
  overflow: hidden;
}

/* =========================================================
   7. IMAGE OVERLAY
========================================================= */

.property-card .property-image,
.property-item .property-image,
.property-box .property-image,
.listing-card .property-image {
  position: relative;
  overflow: hidden;
}

.property-card .property-image::after,
.property-item .property-image::after,
.property-box .property-image::after,
.listing-card .property-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.22));

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.4s ease;
}

.property-card:hover .property-image::after,
.property-item:hover .property-image::after,
.property-box:hover .property-image::after,
.listing-card:hover .property-image::after {
  opacity: 1;
}

/* =========================================================
   8. PREMIUM BUTTON EFFECT
========================================================= */

button,
.btn,
.button,
.cta-button,
a.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

button:hover,
.btn:hover,
.button:hover,
.cta-button:hover,
a.btn:hover {
  transform: translateY(-2px);
}

button::before,
.btn::before,
.button::before,
.cta-button::before,
a.btn::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.7s ease;

  pointer-events: none;
  z-index: -1;
}

button:hover::before,
.btn:hover::before,
.button:hover::before,
.cta-button:hover::before,
a.btn:hover::before {
  left: 150%;
}

/* =========================================================
   9. SERVICE CARDS
========================================================= */

.service-card,
.service-item,
.services-card {
  position: relative;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.service-card:hover,
.service-item:hover,
.services-card:hover {
  transform: translateY(-7px);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.service-card::before,
.service-item::before,
.services-card::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 3px;

  background: linear-gradient(90deg, #168f5a, #66c9ed, #d71920);

  transition: width 0.4s ease;
}

.service-card:hover::before,
.service-item:hover::before,
.services-card:hover::before {
  width: 100%;
}

/* =========================================================
   10. ICON ANIMATION
========================================================= */

.service-card i,
.service-item i,
.services-card i,
.service-card svg,
.service-item svg,
.services-card svg {
  transition:
    transform 0.4s ease,
    color 0.4s ease;
}

.service-card:hover i,
.service-item:hover i,
.services-card:hover i,
.service-card:hover svg,
.service-item:hover svg,
.services-card:hover svg {
  transform: translateY(-4px) scale(1.08);
}

/* =========================================================
   11. NAVBAR PREMIUM EFFECT
========================================================= */

header,
.navbar,
nav {
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* Only activates when a class is added by JS */

header.scrolled,
.navbar.scrolled,
nav.scrolled {
  background: rgba(255, 255, 255, 0.94);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   12. NAVIGATION LINK ANIMATION
========================================================= */

nav a,
.navbar a {
  position: relative;
}

nav a::after,
.navbar a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -5px;

  width: 0;
  height: 2px;

  background: #168f5a;

  transform: translateX(-50%);

  transition: width 0.3s ease;
}

nav a:hover::after,
.navbar a:hover::after {
  width: 70%;
}

/* =========================================================
   13. HERO IMAGE MOTION
========================================================= */

.hero img,
.hero-section img,
.banner img {
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero:hover img,
.hero-section:hover img,
.banner:hover img {
  transform: scale(1.025);
}

/* =========================================================
   14. HERO CONTENT DEPTH
========================================================= */

.hero-content,
.hero-text,
.hero-section .content {
  position: relative;
  z-index: 5;
}

/* =========================================================
   15. PREMIUM HEADINGS
========================================================= */

.section-title,
.section-heading,
.hero h1,
.hero-section h1 {
  text-wrap: balance;
}

/* =========================================================
   16. GRADIENT TEXT ACCENT
   Apply only to elements using .gradient-text
========================================================= */

.gradient-text {
  background: linear-gradient(90deg, #168f5a, #58bfe7, #d71920);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}

/* =========================================================
   17. FLOATING DECORATIVE ELEMENT
========================================================= */

.floating-element {
  animation: grandeurFloat 5s ease-in-out infinite;
}

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

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

/* =========================================================
   18. IMAGE FLOAT
========================================================= */

.floating-image {
  animation: grandeurImageFloat 6s ease-in-out infinite;
}

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

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

/* =========================================================
   19. STATS CARDS
========================================================= */

.stat-card,
.stats-card,
.counter-card {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.stat-card:hover,
.stats-card:hover,
.counter-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.09);
}

/* =========================================================
   20. TESTIMONIAL CARDS
========================================================= */

.testimonial-card,
.testimonial-item {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.testimonial-card:hover,
.testimonial-item:hover {
  transform: translateY(-6px);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   21. TESTIMONIAL IMAGE
========================================================= */

.testimonial-card img,
.testimonial-item img {
  transition: transform 0.4s ease;
}

.testimonial-card:hover img,
.testimonial-item:hover img {
  transform: scale(1.06);
}

/* =========================================================
   22. ABOUT IMAGE
========================================================= */

.about-image,
.about-section img {
  transition:
    transform 0.6s ease,
    box-shadow 0.6s ease;
}

.about-image:hover,
.about-section img:hover {
  transform: translateY(-5px);
}

/* =========================================================
   23. CTA SECTION
========================================================= */

.cta-section,
.cta-banner,
.call-to-action {
  position: relative;
  overflow: hidden;
}

.cta-section::before,
.cta-banner::before,
.call-to-action::before {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -100px;
  top: -120px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(102, 201, 237, 0.18),
    transparent 70%
  );

  pointer-events: none;
}

.cta-section::after,
.cta-banner::after,
.call-to-action::after {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  left: -100px;
  bottom: -100px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(22, 143, 90, 0.14), transparent 70%);

  pointer-events: none;
}

/* =========================================================
   24. CTA CONTENT ALWAYS ABOVE DECORATION
========================================================= */

.cta-section > *,
.cta-banner > *,
.call-to-action > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   25. FORM INPUTS
========================================================= */

input,
textarea,
select {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;

  border-color: #168f5a;

  box-shadow: 0 0 0 4px rgba(22, 143, 90, 0.1);
}

/* =========================================================
   26. FOOTER LINKS
========================================================= */

footer a {
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

footer a:hover {
  color: #66c9ed;
}

/* =========================================================
   27. SOCIAL ICONS
========================================================= */

.social-icons a,
.social-links a {
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

.social-icons a:hover,
.social-links a:hover {
  transform: translateY(-4px);
}

/* =========================================================
   28. BACK TO TOP
========================================================= */

.back-to-top {
  position: fixed;

  right: 25px;
  bottom: 25px;

  width: 45px;
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #168f5a;
  color: #ffffff;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);

  z-index: 999;

  opacity: 0;
  visibility: hidden;

  transform: translateY(15px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #0c7045;
}

/* =========================================================
   29. RESPONSIVE REFINEMENT
========================================================= */

@media (max-width: 992px) {
  .property-card:hover,
  .property-item:hover,
  .property-box:hover,
  .listing-card:hover {
    transform: translateY(-4px);
  }

  .service-card:hover,
  .service-item:hover,
  .services-card:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 768px) {
  .property-card:hover img,
  .property-item:hover img,
  .property-box:hover img,
  .listing-card:hover img {
    transform: scale(1.02);
  }

  .floating-element,
  .floating-image {
    animation: none;
  }
}

/* =========================================================
   30. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================
   GRANDEUR CRIBS LTD.
   PREMIUM JAVASCRIPT SUPPORT
========================================================= */

/* =========================================================
   SCROLL REVEAL
========================================================= */

.grandeur-reveal {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grandeur-visible,
.grandeur-reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   ACTIVE NAVIGATION
========================================================= */

.grandeur-active-link {
  color: #168f5a !important;
}

/* =========================================================
   BUTTON PRESS
========================================================= */

.grandeur-pressed {
  transform: scale(0.97) !important;
}

/* =========================================================
   PROPERTY IMAGE
========================================================= */

.property-gallery-image {
  cursor: zoom-in;
}

/* =========================================================
   PROPERTY LIGHTBOX
========================================================= */

.grandeur-lightbox {
  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  opacity: 0;

  visibility: hidden;

  z-index: 99999;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.grandeur-lightbox.active {
  opacity: 1;

  visibility: visible;
}

/* =========================================================
   LIGHTBOX BACKDROP
========================================================= */

.grandeur-lightbox-backdrop {
  position: absolute;

  inset: 0;

  background: rgba(5, 15, 12, 0.94);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* =========================================================
   LIGHTBOX CONTENT
========================================================= */

.grandeur-lightbox-content {
  position: relative;

  z-index: 2;

  max-width: min(1100px, 90vw);

  max-height: 85vh;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;
}

/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.grandeur-lightbox-image {
  display: block;

  max-width: 100%;

  max-height: 78vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 10px;

  opacity: 0;

  transform: scale(0.94);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
}

.grandeur-lightbox-image.lightbox-image-visible {
  opacity: 1;

  transform: scale(1);
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.grandeur-lightbox-close {
  position: absolute;

  top: 25px;

  right: 30px;

  z-index: 5;

  width: 48px;

  height: 48px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.1);

  color: #ffffff;

  font-size: 32px;

  line-height: 1;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.grandeur-lightbox-close:hover {
  background: #d71920;

  transform: rotate(90deg);
}

/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.grandeur-lightbox-prev,
.grandeur-lightbox-next {
  position: absolute;

  top: 50%;

  z-index: 5;

  width: 50px;

  height: 50px;

  transform: translateY(-50%);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.1);

  color: #ffffff;

  font-size: 22px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.grandeur-lightbox-prev {
  left: 25px;
}

.grandeur-lightbox-next {
  right: 25px;
}

.grandeur-lightbox-prev:hover,
.grandeur-lightbox-next:hover {
  background: #168f5a;
}

.grandeur-lightbox-prev:hover {
  transform: translateY(-50%) translateX(-3px);
}

.grandeur-lightbox-next:hover {
  transform: translateY(-50%) translateX(3px);
}

/* =========================================================
   IMAGE COUNTER
========================================================= */

.grandeur-lightbox-counter {
  margin-top: 15px;

  color: rgba(255, 255, 255, 0.85);

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 1px;
}

/* =========================================================
   PREVENT BACKGROUND SCROLL
========================================================= */

body.lightbox-open {
  overflow: hidden;
}

/* =========================================================
   MOBILE LIGHTBOX
========================================================= */

@media (max-width: 768px) {
  .grandeur-lightbox {
    padding: 15px;
  }

  .grandeur-lightbox-content {
    max-width: 94vw;

    max-height: 82vh;
  }

  .grandeur-lightbox-image {
    max-width: 94vw;

    max-height: 72vh;

    border-radius: 7px;
  }

  .grandeur-lightbox-close {
    top: 15px;

    right: 15px;

    width: 42px;

    height: 42px;

    font-size: 27px;
  }

  .grandeur-lightbox-prev,
  .grandeur-lightbox-next {
    width: 42px;

    height: 42px;

    font-size: 18px;
  }

  .grandeur-lightbox-prev {
    left: 10px;
  }

  .grandeur-lightbox-next {
    right: 10px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
}

.grandeur-reveal {
  opacity: 1;

  transform: none;

  transition: none;
}

.grandeur-lightbox-image {
  transition: none;
}
/* =========================================================
   GRANDEUR CRIBS — HOMEPAGE VISIBILITY FIX
   ========================================================= */

/* Make homepage sections visible even if JavaScript
   reveal animation fails or is delayed. */

.featured-section,
.home-about,
.stats-section,
.home-services,
.home-cta {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Reveal elements */

.reveal,
.reveal-left,
.reveal-right {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Keep normal animation transitions */

.reveal,
.reveal-left,
.reveal-right {
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

/* Homepage property grid */

.homepage-property-grid {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Stats */

.stats-section {
  display: block !important;
}

.stats-grid {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Services */

.home-services-grid {
  opacity: 1 !important;
  visibility: visible !important;
}

.home-service {
  opacity: 1 !important;
  visibility: visible !important;
}

/* CTA */

.home-cta {
  position: relative;
  display: block !important;
}

.home-cta-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* About section */

.home-about-visual,
.home-about-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* About image */

.about-image-large {
  overflow: hidden;
}

.about-image-large img {
  display: block !important;
  width: 100%;
  height: 540px;
  object-fit: cover;
}

/* =========================================================
   COUNTERS
   ========================================================= */

.counter {
  display: inline-block;
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   HERO IMAGE
   ========================================================= */

.hero {
  background-image: url("../images/hero-house.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.send-button.whatsapp-button {
  background: #25d366;
}

.send-button.whatsapp-button:hover {
  background: #1ebe5d;
}

/* =========================================================
   FREE MEDICAL OUTREACH
   ========================================================= */

.medical-outreach-section {
  padding: 100px 0;
  background: var(--light);
  overflow: hidden;
}

.medical-outreach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.medical-outreach-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.medical-outreach-image img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

.medical-outreach-badge {
  position: absolute;
  left: 25px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.medical-outreach-badge span {
  font-size: 28px;
}

.medical-outreach-badge strong {
  display: block;
  color: var(--primary);
  font-size: 15px;
}

.medical-outreach-badge small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.medical-outreach-content h2 {
  margin: 10px 0 15px;
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--dark);
}

.medical-outreach-lead {
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

.medical-outreach-content > p:not(.medical-outreach-lead) {
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 15px;
}

.medical-outreach-features {
  display: grid;
  gap: 18px;
  margin: 30px 0;
}

.medical-feature {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.medical-feature-icon {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 131, 59, 0.1);
  border-radius: 10px;
  font-size: 21px;
}

.medical-feature h4 {
  margin: 0 0 5px;
  color: var(--dark);
  font-size: 16px;
}

.medical-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   MEDICAL OUTREACH RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .medical-outreach-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .medical-outreach-image img {
    height: 420px;
  }
}

@media (max-width: 600px) {
  .medical-outreach-section {
    padding: 70px 0;
  }

  .medical-outreach-image img {
    height: 320px;
  }

  .medical-outreach-badge {
    left: 15px;
    bottom: 15px;
    padding: 12px 15px;
  }
}

/* ---------------------------------------------------------
   PROPERTY GRID
--------------------------------------------------------- */

.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  align-items: stretch;
}

/* ---------------------------------------------------------
   MAIN PROPERTY CARD
--------------------------------------------------------- */

.property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: 20px;

  box-shadow: 0 8px 25px rgba(16, 32, 27, 0.06);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;

  isolation: isolate;
}

/* CARD HOVER */

.property-card:hover {
  transform: translateY(-8px);

  border-color: rgba(8, 127, 91, 0.25);

  box-shadow: 0 20px 45px rgba(16, 32, 27, 0.12);
}

/* ---------------------------------------------------------
   PROPERTY IMAGE
--------------------------------------------------------- */

.property-image {
  position: relative;

  width: 100%;
  height: 245px;

  overflow: hidden;

  background: #edf2ef;
}

/* IMAGE */

.property-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}

/* IMAGE ZOOM */

.property-card:hover .property-image img {
  transform: scale(1.07);
}

/* ---------------------------------------------------------
   IMAGE OVERLAY
--------------------------------------------------------- */

.property-image-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.02) 25%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.45) 100%
  );

  pointer-events: none;
}

/* ---------------------------------------------------------
   STATUS BADGE
--------------------------------------------------------- */

.property-status {
  position: absolute;

  top: 16px;
  left: 16px;

  z-index: 5;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 32px;

  padding: 6px 13px;

  background: var(--primary);

  color: var(--white);

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.35px;

  box-shadow: 0 7px 18px rgba(8, 127, 91, 0.25);
}

/* LITTLE STATUS DOT */

.property-status::before {
  content: "";

  width: 6px;
  height: 6px;

  margin-right: 7px;

  border-radius: 50%;

  background: currentColor;

  opacity: 0.9;
}

/* ---------------------------------------------------------
   FAVORITE BUTTON
--------------------------------------------------------- */

.property-favorite {
  position: absolute;

  top: 14px;
  right: 14px;

  z-index: 10;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.65);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);

  color: var(--dark);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  cursor: pointer;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

/* HEART */

.property-favorite span {
  display: block;

  font-size: 23px;
  line-height: 1;

  transform: translateY(-1px);

  transition: transform 0.25s ease;
}

/* FAVORITE HOVER */

.property-favorite:hover {
  transform: scale(1.08);

  background: var(--white);

  color: var(--red);

  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.15);
}

.property-favorite:hover span {
  transform: translateY(-1px) scale(1.1);
}

/* ACTIVE FAVORITE */

.property-favorite.active {
  background: var(--red);

  color: var(--white);

  border-color: var(--red);

  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.25);
}

/* ---------------------------------------------------------
   PROPERTY TYPE
--------------------------------------------------------- */

.property-type {
  position: absolute;

  left: 16px;
  bottom: 15px;

  z-index: 5;

  display: inline-flex;
  align-items: center;

  padding: 7px 11px;

  background: rgba(255, 255, 255, 0.94);

  color: var(--dark);

  border-radius: 8px;

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.75px;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------
   PROPERTY CONTENT
--------------------------------------------------------- */

.property-content {
  display: flex;

  flex-direction: column;

  flex: 1;

  padding: 21px 21px 20px;
}

/* ---------------------------------------------------------
   LOCATION
--------------------------------------------------------- */

.property-location {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 9px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 500;

  line-height: 1.4;
}

/* LOCATION ICON */

.location-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 23px;
  height: 23px;

  flex: 0 0 23px;

  border-radius: 7px;

  background: var(--primary-light);

  color: var(--primary);

  font-size: 14px;
  font-weight: 700;
}

/* ---------------------------------------------------------
   PROPERTY TITLE
--------------------------------------------------------- */

.property-title {
  margin: 0 0 9px;

  color: var(--dark);

  font-family: "Playfair Display", serif;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.32;

  letter-spacing: -0.2px;

  transition: color 0.25s ease;
}

/* TITLE HOVER */

.property-card:hover .property-title {
  color: var(--primary);
}

/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.property-description {
  display: -webkit-box;

  margin: 0 0 18px;

  color: var(--muted);

  font-size: 12.5px;

  line-height: 1.65;

  overflow: hidden;

  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------------------------------------------------------
   PROPERTY FEATURES
--------------------------------------------------------- */

.property-features {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 7px;

  margin-bottom: 19px;

  padding: 13px 0;

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);
}

/* INDIVIDUAL FEATURE */

.property-feature {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  min-width: 0;
}

/* FEATURE ICON */

.feature-icon {
  display: grid;

  place-items: center;

  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  border-radius: 8px;

  background: var(--light);

  font-size: 13px;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

/* FEATURE ICON HOVER */

.property-card:hover .feature-icon {
  background: var(--primary-light);

  transform: translateY(-2px);
}

/* FEATURE TEXT */

.property-feature div {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

/* FEATURE VALUE */

.property-feature strong {
  color: var(--dark);

  font-size: 12px;
  font-weight: 800;

  line-height: 1.15;
}

/* FEATURE LABEL */

.property-feature small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 600;

  line-height: 1;
}

/* ---------------------------------------------------------
   PROPERTY FOOTER
--------------------------------------------------------- */

.property-footer {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 15px;

  margin-top: auto;
}

/* ---------------------------------------------------------
   PRICE
--------------------------------------------------------- */

.property-price {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

/* PRICE LABEL */

.property-price small {
  margin-bottom: 4px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 600;

  line-height: 1;
}

/* PRICE VALUE */

.property-price strong {
  color: var(--primary);

  font-size: 18px;
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -0.3px;
}

/* ---------------------------------------------------------
   VIEW DETAILS BUTTON
--------------------------------------------------------- */

.property-view-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 41px;

  padding: 9px 15px;

  border: 0;

  border-radius: 10px;

  background: var(--primary);

  color: var(--white);

  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: 0 7px 18px rgba(8, 127, 91, 0.18);

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* BUTTON ARROW */

.property-view-btn span {
  font-size: 15px;

  line-height: 1;

  transition: transform 0.25s ease;
}

/* BUTTON HOVER */

.property-view-btn:hover {
  background: var(--primary-dark);

  transform: translateY(-2px);

  box-shadow: 0 10px 23px rgba(8, 127, 91, 0.25);
}

/* ARROW MOVEMENT */

.property-view-btn:hover span {
  transform: translateX(4px);
}

/* BUTTON ACTIVE */

.property-view-btn:active {
  transform: translateY(0);
}

/* ---------------------------------------------------------
   CARD FOCUS ACCESSIBILITY
--------------------------------------------------------- */

.property-card:focus-within {
  border-color: rgba(8, 127, 91, 0.4);

  box-shadow:
    0 0 0 4px rgba(8, 127, 91, 0.08),
    0 20px 45px rgba(16, 32, 27, 0.12);
}

/* ---------------------------------------------------------
   IMAGE LOADING / BROKEN IMAGE FALLBACK
--------------------------------------------------------- */

.property-image img {
  background: var(--light);
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1050px) {
  .properties-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;
  }

  .property-image {
    height: 235px;
  }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 680px) {
  .properties-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .property-image {
    height: 245px;
  }

  .property-content {
    padding: 19px 18px 18px;
  }

  .property-title {
    font-size: 19px;
  }

  .property-description {
    font-size: 12.5px;
  }
}

/* ---------------------------------------------------------
   SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 420px) {
  .property-image {
    height: 220px;
  }

  .property-content {
    padding: 17px 16px;
  }

  .property-title {
    font-size: 18px;
  }

  .property-location {
    font-size: 11px;
  }

  .property-features {
    gap: 4px;
  }

  .property-feature {
    gap: 5px;
  }

  .feature-icon {
    width: 27px;
    height: 27px;

    flex-basis: 27px;

    font-size: 12px;
  }

  .property-price strong {
    font-size: 16px;
  }

  .property-view-btn {
    min-height: 38px;

    padding: 8px 11px;

    font-size: 10px;
  }
}

/* ---------------------------------------------------------
   EXTRA SMALL DEVICES
--------------------------------------------------------- */

@media (max-width: 350px) {
  .property-footer {
    align-items: center;

    gap: 10px;
  }

  .property-price strong {
    font-size: 15px;
  }

  .property-view-btn {
    padding: 8px 9px;

    font-size: 9px;
  }

  .property-view-btn span {
    font-size: 13px;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .property-card,
  .property-image img,
  .property-favorite,
  .property-favorite span,
  .property-view-btn,
  .property-view-btn span,
  .property-title,
  .feature-icon {
    transition: none !important;
  }

  .property-card:hover {
    transform: none;
  }

  .property-card:hover .property-image img {
    transform: none;
  }
}

/* =========================================================
   GRANDEUR CRIBS — PROPERTIES PAGE FINAL UI OVERRIDES
   These rules match properties.html exactly and intentionally
   come last so older/duplicate rules cannot break this page.
========================================================= */

/* ---------- HEADER COMPATIBILITY ---------- */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  position: relative;
  padding: 8px 0;
  transition: color 0.25s ease;
}

.nav a:hover,
.nav a.active {
  color: #fff;
}

.nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.nav .nav-cta {
  padding: 11px 17px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
}

.nav .nav-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* ---------- PROPERTIES HERO ---------- */
.properties-page-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  padding: 135px 0 80px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(3, 42, 23, 0.94),
      rgba(5, 62, 32, 0.76),
      rgba(5, 62, 32, 0.28)
    ),
    url("../images/hero-house.jpg") center/cover no-repeat;
}

.properties-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.properties-page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero-content {
  max-width: 760px;
  color: #fff;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  margin-bottom: 17px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  backdrop-filter: blur(8px);
}

.page-hero-content h1 {
  margin: 0 0 16px;
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.page-hero-content p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}

/* ---------- SEARCH AREA ---------- */
.property-search-section {
  position: relative;
  z-index: 5;
  padding: 34px 0;
  background: var(--light);
  border-bottom: 1px solid var(--border);
}

.property-search-box {
  display: grid;
  grid-template-columns: minmax(250px, 1.8fr) repeat(4, minmax(125px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(16, 32, 27, 0.08);
}

.property-search-field,
.property-filter-field {
  min-width: 0;
}

.property-search-field label,
.property-filter-field label {
  display: block;
  margin: 0 0 7px;
  color: var(--dark);
  font-size: 11px;
  font-weight: 800;
}

.search-input-wrap {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 19px;
  line-height: 1;
  pointer-events: none;
}

.search-input-wrap input,
.property-filter-field select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.search-input-wrap input {
  padding-left: 39px;
}

.search-input-wrap input:focus,
.property-filter-field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 127, 91, 0.09);
}

.filter-reset-btn {
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--dark);
  font-size: 11px;
  font-weight: 800;
  transition: 0.25s ease;
}

.filter-reset-btn:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- PROPERTIES SECTION ---------- */
.properties-section {
  padding: 85px 0 100px;
  background: #fff;
}

.properties-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 25px;
}

.properties-header > div:first-child {
  max-width: 700px;
}

.properties-header h2 {
  margin: 9px 0 12px;
  color: var(--dark);
  font-family: "Playfair Display", serif;
  font-size: clamp(31px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.7px;
}

.properties-header p {
  max-width: 620px;
  color: var(--muted);
  font-size: 13px;
}

.properties-results {
  flex: 0 0 auto;
  min-width: 145px;
  padding: 16px 19px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--light);
  text-align: center;
}

.properties-results strong {
  display: block;
  color: var(--primary);
  font-family: "Playfair Display", serif;
  font-size: 29px;
  line-height: 1;
}

.properties-results span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.active-filter-status {
  min-height: 20px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 11px;
}

/* ---------- PROPERTY GRID ---------- */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
  align-items: stretch;
}

.properties-grid .property-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfa 100%);
  border: 1px solid rgba(16, 32, 27, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(16, 32, 27, 0.08);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    filter 0.35s ease;
}

.properties-grid .property-card:hover {
  transform: translateY(-8px);
  border-color: rgba(8, 127, 91, 0.25);
  box-shadow: 0 26px 60px rgba(16, 32, 27, 0.13);
  filter: saturate(1.04);
}

.properties-grid .property-image {
  position: relative;
  width: 100%;
  height: 270px;
  min-height: 270px;
  overflow: hidden;
  background: linear-gradient(135deg, #edf4ef, #dfece5);
}

.properties-grid .property-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.properties-grid .property-card:hover .property-image img {
  transform: scale(1.08);
}

.properties-grid .property-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.02) 18%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.54) 100%
  );
}

.properties-grid .property-status {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(8, 127, 91, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  box-shadow: 0 10px 25px rgba(8, 127, 91, 0.3);
}

.properties-grid .property-status::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
}

.properties-grid .property-favorite {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 8;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--dark);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: 0.25s ease;
}

.properties-grid .property-favorite:hover,
.properties-grid .property-favorite.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: scale(1.08);
}

.properties-grid .property-favorite span {
  font-size: 23px;
  line-height: 1;
}

.properties-grid .property-type {
  position: absolute;
  left: 15px;
  bottom: 14px;
  z-index: 5;
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.properties-grid .property-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;
}

.properties-grid .property-location {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.properties-grid .location-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(8, 127, 91, 0.08);
  color: var(--primary);
  font-size: 14px;
}

.properties-grid .property-title {
  margin: 0 0 10px;
  color: var(--dark);
  font-family: "Playfair Display", serif;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.25px;
}

.properties-grid .property-card:hover .property-title {
  color: var(--primary);
}

.properties-grid .property-description {
  margin: 0 0 18px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.properties-grid .property-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 18px;
  padding: 13px 0;
  border-top: 1px solid rgba(16, 32, 27, 0.08);
  border-bottom: 1px solid rgba(16, 32, 27, 0.08);
}

.properties-grid .property-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 2px;
  border-radius: 10px;
  background: rgba(8, 127, 91, 0.02);
}

.properties-grid .feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: rgba(8, 127, 91, 0.08);
  color: var(--primary);
  font-size: 12px;
}

.properties-grid .property-feature div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.properties-grid .property-feature strong {
  color: var(--dark);
  font-size: 12px;
  line-height: 1.1;
}

.properties-grid .property-feature small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
}

.properties-grid .property-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 13px;
  margin-top: auto;
  padding-top: 4px;
}

.properties-grid .property-price {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.properties-grid .property-price small {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.properties-grid .property-price strong {
  color: var(--primary);
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.properties-grid .property-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 15px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary) 0%, #0d8d63 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(8, 127, 91, 0.22);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.properties-grid .property-view-btn:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #0a6d4d 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(8, 127, 91, 0.3);
  filter: brightness(1.02);
}

.properties-grid .property-view-btn span {
  font-size: 15px;
  transition: transform 0.25s ease;
}

.properties-grid .property-view-btn:hover span {
  transform: translateX(4px);
}

/* ---------- EMPTY STATE ---------- */
.no-properties {
  padding: 70px 20px;
  text-align: center;
}

.no-properties-icon {
  margin-bottom: 14px;
  font-size: 48px;
}

.no-properties h3 {
  margin-bottom: 6px;
  color: var(--dark);
  font-family: "Playfair Display", serif;
  font-size: 25px;
}

.no-properties p {
  max-width: 450px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- MODAL MATCHES properties.html ---------- */
.property-modal-content {
  width: min(960px, 100%);
  max-height: 90vh;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 22px;
}

.modal-property-image {
  min-height: 500px;
  background: #edf2ef;
}

.modal-property-image img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
}

.modal-property-content {
  min-width: 0;
  padding: 48px;
  overflow-y: auto;
}

.modal-property-label {
  display: inline-block;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.modal-property-content h2 {
  margin: 10px 0 15px;
  color: var(--dark);
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
}

.modal-property-description {
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.modal-close {
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.modal-close:hover {
  background: var(--red);
  color: #fff;
  transform: rotate(90deg);
}

.property-inquiry-form {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.property-inquiry-form form {
  display: grid;
  gap: 13px;
}

.property-inquiry-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.property-inquiry-form label {
  color: var(--dark);
  font-size: 11px;
  font-weight: 700;
}

.property-inquiry-form input,
.property-inquiry-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  resize: vertical;
}

.property-inquiry-form input:focus,
.property-inquiry-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 127, 91, 0.08);
}

/* ---------- FOOTER MATCH ---------- */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  color: #fff;
  font-weight: 800;
}

.footer-logo img {
  width: 62px;
  max-height: 45px;
  object-fit: contain;
}

.footer-logo span {
  font-size: 14px;
}

/* ---------- WHATSAPP BUTTON ---------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9990;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
}

.whatsapp-float span {
  font-size: 22px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .property-search-box {
    grid-template-columns: 1.5fr repeat(2, 1fr);
  }

  .property-search-field {
    grid-column: span 2;
  }

  .filter-reset-btn {
    grid-column: span 1;
  }

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

@media (max-width: 800px) {
  .header-container {
    gap: 15px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    padding: 7px;
  }

  .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
  }

  .nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 4%;
    right: 4%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background: rgba(7, 21, 16, 0.98);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  }

  .nav.active,
  .nav.open {
    display: flex;
  }

  .nav a {
    padding: 11px 12px;
    border-radius: 8px;
  }

  .nav a:hover,
  .nav a.active {
    background: rgba(255, 255, 255, 0.06);
  }

  .nav a.active::after {
    display: none;
  }

  .nav .nav-cta {
    text-align: center;
    margin-top: 5px;
  }

  .properties-page-hero {
    min-height: 390px;
    padding: 125px 0 70px;
  }

  .property-search-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .property-search-field {
    grid-column: 1 / -1;
  }

  .filter-reset-btn {
    grid-column: 1 / -1;
  }

  .properties-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .properties-results {
    width: 100%;
    text-align: left;
  }

  .properties-results strong,
  .properties-results span {
    display: inline;
  }

  .properties-results strong {
    margin-right: 7px;
  }

  .property-modal-content {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }

  .modal-property-image,
  .modal-property-image img {
    min-height: 280px;
    height: 280px;
  }

  .modal-property-content {
    padding: 30px;
  }
}

@media (max-width: 600px) {
  .container {
    width: min(94%, 1180px);
  }

  .properties-page-hero {
    min-height: 350px;
    padding: 115px 0 60px;
  }

  .page-hero-content h1 {
    font-size: 39px;
  }

  .page-hero-content p {
    font-size: 13px;
  }

  .property-search-section {
    padding: 20px 0;
  }

  .property-search-box {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .property-search-field,
  .filter-reset-btn {
    grid-column: auto;
  }

  .properties-section {
    padding: 60px 0 75px;
  }

  .properties-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .properties-grid .property-image {
    height: 250px;
    min-height: 250px;
  }

  .properties-grid .property-content {
    padding: 19px 18px;
  }

  .properties-grid .property-title {
    font-size: 19px;
  }

  .properties-grid .property-description {
    font-size: 12px;
  }

  .modal-property-content {
    padding: 24px 20px;
  }

  .whatsapp-float {
    right: 17px;
    bottom: 17px;
    width: 50px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .properties-grid .property-card,
  .properties-grid .property-image img,
  .properties-grid .property-favorite,
  .properties-grid .property-view-btn,
  .properties-grid .property-view-btn span,
  .whatsapp-float {
    transition: none !important;
  }

  .properties-grid .property-card:hover,
  .properties-grid .property-card:hover .property-image img {
    transform: none !important;
  }
}

.our-team-section {
  position: relative;
  padding: 100px 20px;
  background: #f8faf9;
  overflow: hidden;
}

.our-team-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(8, 127, 91, 0.05);
  top: -180px;
  left: -180px;
  pointer-events: none;
}

.our-team-section::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(88, 185, 232, 0.05);
  right: -120px;
  bottom: -120px;
  pointer-events: none;
}

.team-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

.team-section-header {
  max-width: 750px;
  margin: 0 auto 55px;
  text-align: center;
}

.team-section-label {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #087f5b;
}

.team-section-header h2 {
  margin: 0 0 18px;
  color: #12372d;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  font-weight: 800;
}

.team-section-header h2 span {
  color: #087f5b;
}

.team-section-header p {
  margin: 0 auto;
  max-width: 650px;
  color: #64746e;
  font-size: 16px;
  line-height: 1.8;
}

/* =========================================================
   TEAM GRID
   ========================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* =========================================================
   TEAM CARD
   ========================================================= */

.team-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(8, 127, 91, 0.08);
  box-shadow: 0 12px 35px rgba(10, 40, 30, 0.07);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 50px rgba(10, 40, 30, 0.14);
}

/* =========================================================
   TEAM IMAGE
   ========================================================= */

.team-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #e9efec;
}

.team-member-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}

.team-card:hover .team-member-image {
  transform: scale(1.07);
}

/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.team-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 25px;
  background: linear-gradient(
    to top,
    rgba(3, 45, 32, 0.82),
    rgba(3, 45, 32, 0.05) 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.team-card:hover .team-image-overlay {
  opacity: 1;
}

.team-profile-btn {
  border: 0;
  padding: 12px 22px;
  border-radius: 30px;
  background: #ffffff;
  color: #087f5b;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.team-profile-btn:hover {
  background: #087f5b;
  color: #ffffff;
  transform: translateY(-2px);
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.team-card-content {
  padding: 24px;
  text-align: center;
}

.team-card-content h3 {
  margin: 0 0 7px;
  color: #12372d;
  font-size: 20px;
  font-weight: 800;
}

.team-position {
  display: block;
  margin-bottom: 15px;
  color: #087f5b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.team-card-content p {
  margin: 0 0 20px;
  color: #687a74;
  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.team-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.team-social-link {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef6f2;
  color: #087f5b;
  text-decoration: none;
  font-size: 13px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.team-social-link:hover {
  background: #087f5b;
  color: #ffffff;
  transform: translateY(-3px);
}

/* =========================================================
   PROFILE MODAL
   ========================================================= */

.team-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.team-modal.active {
  display: flex;
}

.team-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 25, 19, 0.78);
  backdrop-filter: blur(7px);
}

.team-modal-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  display: grid;
  grid-template-columns: 300px 1fr;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  animation: teamModalIn 0.35s ease;
}

@keyframes teamModalIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }

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

.team-modal-close {
  position: absolute;
  z-index: 5;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #12372d;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.team-modal-close:hover {
  background: #087f5b;
  color: #ffffff;
  transform: rotate(90deg);
}

.team-modal-image {
  min-height: 420px;
  background: #e9efec;
}

.team-modal-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center top;
}

.team-modal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
}

.team-modal-position {
  margin-bottom: 10px;
  color: #087f5b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.team-modal-info h3 {
  margin: 0 0 20px;
  color: #12372d;
  font-size: 34px;
  line-height: 1.15;
}

.team-modal-info p {
  margin: 0 0 25px;
  color: #64746e;
  font-size: 15px;
  line-height: 1.8;
}

.team-modal-socials {
  display: flex;
  gap: 10px;
}

.team-modal-socials a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef6f2;
  color: #087f5b;
  text-decoration: none;
  transition: 0.3s ease;
}

.team-modal-socials a:hover {
  background: #087f5b;
  color: #ffffff;
  transform: translateY(-3px);
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal-team {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal-team.team-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-image-wrapper {
    height: 360px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .our-team-section {
    padding: 75px 16px;
  }

  .team-section-header {
    margin-bottom: 40px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .team-image-wrapper {
    height: 380px;
  }

  .team-image-overlay {
    opacity: 1;
  }

  .team-modal {
    padding: 12px;
  }

  .team-modal-content {
    max-height: 92vh;
    overflow-y: auto;
    grid-template-columns: 1fr;
  }

  .team-modal-image {
    min-height: 300px;
    height: 300px;
  }

  .team-modal-image img {
    min-height: 300px;
  }

  .team-modal-info {
    padding: 30px 24px;
  }

  .team-modal-info h3 {
    font-size: 28px;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {
  .our-team-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .team-card-content {
    padding: 20px 17px;
  }

  .team-image-wrapper {
    height: 330px;
  }
}