html {
  scroll-behavior: smooth;
}

/* Small tweaks for better mobile spacing */
section {
  scroll-margin-top: 80px;
}

/* Make images or backgrounds scale nicely */
img, video {
  max-width: 100%;
  height: auto;
}

/* Ensure text wraps properly */
p, h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
}
/* ✅ Perfectly Responsive Hero Image - No Stretching */
.hero {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  background: url("home-section.jpg") no-repeat center center;
  background-size: cover; /* Ensures image covers area without stretching */
  background-attachment: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Remove the <img> stretching issue entirely */
.hero img {
  display: none;
}

/* Adjust hero height for different devices */
@media (max-width: 1024px) {
  .hero {
    min-height: 90vh;
    background-position: center top;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 80vh;
    background-position: center;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 70vh;
    background-position: top center;
  }
}