/* Sharp hero banners on theme pages — replaces blurry CSS backgrounds + ::before overlay */

.hero-banner .col[class*="HB-"],
.hero-banner .col[class*="hb-"] {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background-image: none !important;
  background-color: #00203f;
  padding: 0;
}

.hero-banner .col[class*="HB-"]::before,
.hero-banner .col[class*="hb-"]::before {
  display: none !important;
  content: none !important;
}

.hero-banner .hero-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-banner .hero-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
  filter: none !important;
  opacity: 1 !important;
}

.hero-banner .hero-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 32, 63, 0.72) 0%,
    rgba(0, 57, 94, 0.4) 42%,
    rgba(0, 57, 94, 0.12) 100%
  );
  pointer-events: none;
}

.hero-banner .hero-desc-sec,
.hero-banner [class*="HB-white-paper"] {
  position: relative;
  z-index: 2;
}

.hero-banner .HB-white-paper {
  background-image: none !important;
  background-color: transparent !important;
  min-height: auto;
}

.hero-banner .inn-banner-header-text,
.hero-banner .col[class*="HB-"] h1,
.hero-banner .col[class*="HB-"] h2,
.hero-banner .col[class*="hb-"] h1,
.hero-banner .col[class*="hb-"] h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.hero-banner .banner-text-sml {
  color: rgba(255, 255, 255, 0.92) !important;
}

#main-content .hero-banner img {
  filter: none !important;
}

#main-content .max-500 img {
  filter: none !important;
  image-rendering: auto;
}