/* Hero Section */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    /* Slightly lighter overlay */
      var(
        --hero-bg-image,
        url("https://ividtek.s3.us-east-1.amazonaws.com/defaults/template-defaults/00-hero.jpg")
      );
  background-size: cover;
  background-position: center center; /* Center the background image */
  min-height: 750px; /* Slightly taller hero section */
  display: flex;
  align-items: center;
  padding: var(--spacing-xl) 0;
  position: relative; /* For pseudo-element background */
}

/* Subtle gradient overlay for hero */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.4) 100%
  ); /* Soft gradient overlay */
  pointer-events: none; /* Make sure it doesn't interfere with interactions */
}

.hero-content {
  text-align: center;
  max-width: 900px; /* Wider hero content area */
  margin: 0 auto;
  position: relative; /* Ensure content is above the pseudo-element overlay */
  z-index: 1; /* Ensure content is above the pseudo-element overlay */
}

.hero-title {
  font-size: var(--font-size-3xl);
  color: var(--text-light);
  margin-bottom: var(--spacing-xl);
  font-weight: 700; /* Stronger font weight for hero title */
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* Add text shadow for depth */
}

/* Search Box */
.search-box {
  background: var(--bg-primary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color); /* Add a light border to search box */
  margin-bottom: var(--spacing-xl); /* Add margin below search box */
}

.search-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
}

.search-group select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  appearance: none; /* Reset default appearance */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */
  background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Custom dropdown arrow */
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 8px;
  padding-right: 2rem; /* Space for arrow */
}

/* For IE and Edge */
select::-ms-expand {
  display: none;
}

.search-group select:focus {
  outline: none;
  border-color: var(--primary-color); /* Highlight border on focus */
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2); /* Subtle focus ring */
}

.search-group {
  position: relative; /* For positioning icon */
}

.search-input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden; /* To contain border-radius */
  background-color: var(--bg-primary); /* Ensure background color */
}

.search-input-group i {
  display: flex; /* Ensure icon is flex for centering */
  justify-content: center; /* Center icon horizontally */
  align-items: center; /* Center icon vertically */
  padding: 0 var(--spacing-md); /* Padding for icon area */
  color: var(--text-secondary); /* Icon color */
  font-size: var(--font-size-sm); /* Icon size */
  width: 40px; /* Fixed width for icon area */
}

.search-input-group select {
  border: none; /* Remove border from select (border is on parent) */
  padding-left: 0; /* Remove left padding from select */
  padding-right: 2.5rem; /* Adjust right padding to accommodate arrow and icon area */
  flex-grow: 1; /* Allow select to take remaining space */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 50%; /* Center arrow vertically */
  padding-right: 2rem;
}

.search-input-group select:focus {
  outline: none;
  border-color: var(
    --primary-color
  ); /* Focus border is now on .search-input-group in focus state */
  box-shadow: none; /* Remove box-shadow from select focus, we'll add to parent if needed */
}

/* Focus state for the input group (when select is focused) */
.search-input-group:focus-within {
  border-color: var(--primary-color); /* Highlight border on focus */
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2); /* Subtle focus ring */
}

/* Featured Properties Section */
.featured-properties {
  padding: var(--spacing-xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.section-title {
  font-size: var(--font-size-2xl);
  color: var(--secondary-color); /* Darker title color */
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-primary); /* Serif font for titles */
  font-weight: 700;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(320px, 1fr)
  ); /* Slightly wider property cards */
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* Why Choose Us Section */
.features-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Wider feature cards */
  gap: var(--spacing-xl);
}

.feature-card {
  text-align: center;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color); /* Add border to feature cards */
  box-shadow: var(--shadow-sm); /* Add shadow to feature cards */
  background-color: var(--bg-primary); /* Ensure background is white */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for hover effect */
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md); /* Slightly stronger shadow on hover */
}

.feature-icon {
  width: 72px; /* Slightly larger icons */
  height: 72px;
  margin-bottom: var(--spacing-md);
  opacity: 0.9; /* Slightly reduce icon opacity */
}

.feature-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--secondary-color); /* Darker title color */
  font-weight: 600;
}

.feature-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7; /* Adjusted line height */
}

/* Stats Section */
.stats-section {
  background: var(--bg-secondary);
  padding: var(--spacing-xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
  text-align: center;
}

.stat-item h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-xs);
  color: var(--primary-color);
  font-family: var(--font-primary); /* Serif font for stat numbers */
  font-weight: 700;
}

.stat-item p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500; /* Slightly bolder stat descriptions */
}

/* Explore Cities Section */
.explore-cities {
  padding: var(--spacing-xl) 0;
}

.cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.city-card {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--shadow-sm); /* Add shadow to city cards */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for hover effect */
}

.city-card:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md); /* Slightly stronger shadow on hover */
}

.city-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease; /* Smooth opacity transition on hover */
}

.city-card:hover img {
  opacity: 0.9; /* Slightly reduce image opacity on hover */
}

.city-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: var(--text-light);
  text-align: center; /* Center text in overlay */
}

.city-name {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
  font-weight: 600; /* Bolder city name */
}

.city-properties {
  font-size: var(--font-size-sm);
  opacity: 0.8; /* Slightly reduced opacity for property count */
}

/* Testimonials Section */
.testimonials {
  padding: var(--spacing-xl) 0;
  background: var(--bg-secondary);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(350px, 1fr)
  ); /* Wider testimonial cards */
  gap: var(--spacing-lg);
}

.testimonial-card {
  background: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color); /* Add border to testimonial cards */
}

.testimonial-content {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.8; /* Adjusted line height */
  font-style: italic; /* Italicize testimonials for a quote-like feel */
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.author-avatar {
  width: 56px; /* Slightly larger avatars */
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-secondary); /* Add a border to avatars */
}

.author-info h4 {
  color: var(--secondary-color); /* Darker author name */
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
}

.author-info p {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

/* Media Queries for Responsiveness in index.css */

/* For tablets and smaller desktops */
@media (max-width: 1024px) {
  .hero {
    min-height: 600px; /* Slightly shorter hero on smaller screens */
    padding: var(--spacing-lg) 0; /* Reduce hero padding */
  }

  .hero-title {
    font-size: var(--font-size-2xl); /* Smaller hero title */
    margin-bottom: var(--spacing-lg); /* Reduce title margin */
  }

  .search-form {
    grid-template-columns: repeat(2, 1fr) auto; /* 2 columns for search form on medium screens */
  }

  .property-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(300px, 1fr)
    ); /* Adjust property grid columns */
  }

  .features-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(280px, 1fr)
    ); /* Adjust features grid columns */
  }

  .stats-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* 2 columns for stats grid on medium screens */
    gap: var(--spacing-md); /* Reduce gap in stats grid */
  }

  .cities-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* 2 columns for cities grid on medium screens */
    gap: var(--spacing-sm); /* Reduce gap in cities grid */
  }

  .testimonials-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(320px, 1fr)
    ); /* Adjust testimonials grid columns */
  }
}

/* For mobile devices */
@media (max-width: 768px) {
  .hero {
    min-height: 500px; /* Even shorter hero on mobile */
    padding: var(--spacing-md) 0; /* Further reduce hero padding */
    background-position: center top; /* Adjust background position on mobile */
  }

  .hero-title {
    font-size: var(--font-size-xl); /* Even smaller hero title on mobile */
    margin-bottom: var(--spacing-md); /* Reduce title margin further */
  }

  .search-form {
    grid-template-columns: 1fr; /* Single column search form on mobile */
  }

  .search-group {
    margin-bottom: var(
      --spacing-sm
    ); /* Add margin between search groups on mobile */
  }

  .search-group select {
    padding: var(--spacing-sm); /* Reduce padding in search selects on mobile */
    font-size: var(
      --font-size-xs
    ); /* Smaller font size in search selects on mobile */
  }

  .btn.btn-primary[type="submit"] {
    /* Target search submit button specifically */
    padding: var(--spacing-sm) var(--spacing-md); /* Adjust search button padding on mobile */
    font-size: var(--font-size-sm); /* Smaller font size on search button */
  }

  .section {
    padding: var(--spacing-lg) 0; /* Reduce section padding on mobile */
  }

  .section-title {
    font-size: var(--font-size-xl); /* Smaller section titles on mobile */
    margin-bottom: var(--spacing-md); /* Reduce section title margin */
  }

  .section-subtitle {
    font-size: var(--font-size-sm); /* Smaller section subtitles on mobile */
  }

  .property-grid {
    grid-template-columns: 1fr; /* Single column property grid on mobile */
  }

  .features-grid {
    grid-template-columns: 1fr; /* Single column features grid on mobile */
  }

  .stats-grid {
    grid-template-columns: 1fr; /* Single column stats grid on mobile */
  }

  .cities-grid {
    grid-template-columns: 1fr; /* Single column cities grid on mobile */
  }

  .testimonials-grid {
    grid-template-columns: 1fr; /* Single column testimonials grid on mobile */
  }

  .testimonial-content {
    font-size: var(
      --font-size-sm
    ); /* Slightly smaller testimonial text on mobile */
  }
}

/* For even smaller mobile screens (optional, adjust breakpoint as needed) */
@media (max-width: 480px) {
  .hero-title {
    font-size: var(
      --font-size-lg
    ); /* Even smaller hero title on very small mobiles */
  }
  .stat-item h3 {
    font-size: var(
      --font-size-xl
    ); /* Smaller stat numbers on very small mobiles */
  }
}