.hero { padding: 28px 0 20px; background-color: #1a1a2e; background-image: url(../images/hero-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(26, 26, 46, 0.92) 0%, rgba(22, 33, 62, 0.88) 100%); z-index: 1; }
.hero .container { position: relative; z-index: 2; }
.hero .hero-content { max-width: 800px; margin: 0 auto; text-align: center; }
.hero .hero-heading { margin-bottom: 8px; font-size: 26px; color: #ffffff; }
.hero .hero-heading .heading-accent { color: #f59e0b; }
.hero .hero-text { font-size: 14px; line-height: 22px; color: #b0b0c0; margin-bottom: 0; }
@media (min-width: 768px) {
  .hero { padding: 36px 0 28px; }
  .hero .hero-heading { font-size: 32px; }
  .hero .hero-text { font-size: 15px; line-height: 24px; }
}
@media (min-width: 1024px) {
  .hero { padding: 44px 0 32px; }
  .hero .hero-heading { font-size: 38px; }
}