/* ================================
   Hero Background & Layout Styling
================================== */

/* Wrapper to contain and center background images */
.hero-bg-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
/* Ensure smooth fade without white flash */
.hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 3s ease-in-out, visibility 0s linear 1.5s; /* delay hiding */
  z-index: 0;
}

.hero-bg.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s ease-in-out;
  z-index: 1; /* bring to front */
}

.hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Darker overlay */
  z-index: 2;
}

/* Content sits above backgrounds */
.hero-content {
  position: relative;
  z-index: 3;
  color: #fff;
}

/* Optional: smoother text transitions */
.hero-title,
.hero-text,
.hero-btns {
  transition: all 0.3s ease-in-out;
}
/* ========== EXISTING CSS REMAINS SAME ABOVE ========== */

/* Ensure body has white background to avoid black corners */
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Ensure hero-inner takes full width */
.hero-inner {
  background-color: #fff; /* backup color */
  width: 100%;
  position: relative;
  overflow: hidden;
}