/* Enhanced Hero Banner Styles */

.hero-banner {
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.hero-banner .container {
  z-index: 10; /* Ensure content stays above background images and overlays */
}

.hero-content {
  transition: all 0.3s ease;
}

/* For split layout */
@media (max-width: 768px) {
  .hero-banner .flex-row,
  .hero-banner .flex-row-reverse {
    flex-direction: column !important;
  }
  
  .hero-banner .flex-row > div,
  .hero-banner .flex-row-reverse > div {
    width: 100% !important;
    height: 50% !important;
  }
}

/* Button hover effects */
.hero-banner a.inline-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}