/* Hero Section Styles */
.hero-section-generic {
  position: relative;
  width: 100%;
  height: 500px !important;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #ffffff;
  /* Animation classes are kept for JS functionality */
}

.hero-section-generic .gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, rgba(59, 130, 246, 0.2), transparent);
  z-index: 9;
}


.hero-section-generic .dark-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.hero-section-generic .hero-content {
  position: relative;
  z-index: 9;
  text-align: left;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

.hero-section-generic .hero-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.75rem; /* mb-3 */
}

.hero-section-generic .hero-subtitle {
  font-weight: 600 !important; /* !font-semibold */
  font-size: 1rem; /* text-md */
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem; /* mb-6 */
}

/* Responsive Styles */
@media (min-width: 640px) {
  .hero-section-generic .hero-content {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }
  .hero-section-generic .hero-subtitle {
    font-size: 1.125rem; /* sm:text-lg */
    margin-bottom: 2rem; /* sm:mb-8 */
  }
}

@media (min-width: 768px) {
    .hero-section-generic .hero-subtitle {
        font-size: 1.125rem; /* md:text-lg */
    }
}

@media (min-width: 1024px) {
  .hero-section-generic .hero-content {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
}