/* Reset & Global */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { font-family: 'Roboto', sans-serif; scroll-behavior: smooth; }

/* Sticky Navbar */
.navbar {
  position: fixed; /* fixed ensures always on top */
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.25);
  z-index: 1000;
}
.navbar img.logo { height: 50px; }
.navbar ul { list-style: none; display: flex; gap: 2rem; }
.navbar ul li a { text-decoration: none; color: #000; font-weight: 500; transition: color 0.3s; }
.navbar ul li a:hover { color: #f04e31; }

/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  animation: heroFade 1.2s ease forwards;
}

.hero-content h1 {
  font-size: 4rem;
  letter-spacing: 2px;
}

.hero-content p {
  margin-top: 1rem;
  font-size: 1.2rem;
}

@keyframes heroFade {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



/* Cards Section below hero */
.section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5rem 5%;
  flex-wrap: wrap;
  gap: 3rem;
}
.card {
  background: #fff;
  width: 48%; /* original size */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
}
.card img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.4s ease; }
.card-text { padding: 1.5rem; }
.card:hover { transform: scale(1.05); }
.card:hover img { transform: scale(1.1); }

/* Residential Projects */
.projects {
  padding: 5rem 5%;
  text-align: center;
}
.projects h2 { margin-bottom: 3rem; }
.projects-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.project-card {
  flex: 1 1 48%;
  height: 400px;
  overflow: hidden; position: relative; cursor: pointer;
  transition: transform 0.4s ease;
}
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.project-card.active, .project-card:hover { transform: scale(1.1); }

/* homes h2 */
#homes-h2 {
  text-align: center;
  margin-bottom: 3rem;
}

/* Extra Images Grid - Larger and 3 per row */
.extra-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 3rem 5%;
}
.extra-images img {
  width: 100%; height: 200px; object-fit: cover;
  transition: transform 0.4s ease;
}
.extra-images img:hover { transform: scale(1.05); }

/* Experience Section */
.experience {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5rem 5%; flex-wrap: wrap;
}
.experience-text { flex: 1 1 45%; }
.experience-card {
  flex: 1 1 45%;
  background: #f4f4f4; padding: 2rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}
.experience-card:hover { transform: translateX(0) scale(1.05); }

/* Footer */
footer {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 3rem 5%; background: #222; color: white; flex-wrap: wrap; gap: 2rem;
}
footer .left, footer .center, footer .right { flex: 1 1 30%;  }
footer a { color: white; text-decoration: none; margin-right: 1rem; }
footer img.logo-footer { height: 50px; margin-bottom: 1rem; }

/* Scroll Animations */
[data-animate] { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; }
[data-animate].active { opacity: 1; transform: translateY(0); }

body { padding-top: 80px; } /* offset for fixed navbar */