/* Styles for modern store and insurance pages */

/* Hero section with background image */
.hero-modern {
  position: relative;
  /* Default to a self-contained gradient so pages don't depend on 3rd-party images. */
  background-image:
    radial-gradient(1200px circle at 15% 20%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #1f2f45 0%, #0b1220 100%);
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: #fff;
}

/* Dark overlay for hero images */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

.hero-modern .container {
  position: relative;
  z-index: 2;
}

/* Card styling for feature grids */
.card.shadow-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.shadow-sm:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}