.hero-section {
  position: relative;
  margin-top: -100px;
  padding-top: 120px;
  padding-bottom: 0px; /* ✅ extra breathing room so info section doesn’t overlap */
  background-image: url('../img/bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  min-height: auto;
  color: white;
  text-align: center;
  z-index: 1;
}

.hero-section .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px; /* Optional horizontal padding */
}

/* Heading */
.hero-section h1 {
  font-size: 26px;
  margin-bottom: 1.5rem; /* spacing below heading */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* soft drop shadow */
  font-family: Rubik;
}

/* Subheading */
.hero-section p {
  font-size: 17px;
  margin-top: 0;
  line-height: 1.2;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50); /* slight shadow for readability */
  font-family: Rubik;
}

/* Reset shadows for footer and company contact sections */
#company-contact-box h3,
#company-contact-box p,
#company-footer-box p {
  text-shadow: none !important;
  color: #ffffff; /* keep footer text crisp */
}

/* 🔥 Hero Tiles Section */
.hero-tiles {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap; /* ensures responsiveness */
  position: relative;
  z-index: 2; /* ✅ tiles sit above hero background */
}

.hero-tile {
  flex: 1 1 250px; /* flexible width, min 250px */
  max-width: 300px;
  text-align: center;
  align-items: center;
  padding: 20px;
  border: 0.2px solid rgb(132,138,141); /* golden border */
  background-color: rgba(131, 208, 244, 0.08); /* very light golden background */
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  display: flex;          /* block layout so text-align works */
  flex-direction: column;
  cursor: pointer;         /* entire tile feels interactive */
}

.hero-tile a {
  text-decoration: none;
  color: inherit;       /* keeps text color consistent */
  display: flex;
  flex-direction: column;
  align-items: center;
}


.hero-tile img,
.hero-tile p {
  pointer-events: none; /* ✅ ensures hover is detected on the parent tile */
}

.hero-tile img {
  display: block;          /* centers logo horizontally */
  margin: 0auto 15px;
  width: 60px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.0)); /* ✅ subtle shadow */
}

.hero-tile p {
  font-size: 15px;
  color: white; /* matches hero text */
  line-height: 1.4;
  margin: 0;
  font-family: Rubik;
}

.hero-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(126,129,130,0.4);
  background-color: rgba(21,186,238,0.35); /* deeper golden tint on hover */
}

/* 📱 Responsive: stack tiles on small screens */
@media (max-width: 768px) {
  .hero-tiles {
    flex-direction: column;
    align-items: center;
  }

  .hero-tile {
    max-width: 90%;
  }
}