.hero-section {
  position: relative;
  display: flex;
  height: 800px;
  padding-right: 722px;
  align-items: center;
  align-self: stretch;
  overflow: hidden;
  background: var(--color-navy-500);
}
.hero-section__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-section__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  width: 720px;
  height: 800px;
  padding: 248.5px 57px 191.5px 89px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: rgba(0, 16, 41, 0.20);
  backdrop-filter: blur(30px);
}
.hero-section__content { display: flex; width: 574px; height: 360px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.hero-section h1 { width: 574px; color: var(--color-white); font-family: var(--font-heading); font-size: 73px; font-weight: 700; line-height: normal; text-transform: uppercase; }
.hero-section p { width: 574px; color: var(--color-navy-50); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: normal; }
@media (max-width: 767px) {
  .hero-section { height: 800px; padding-right: 0; flex-direction: column; justify-content: center; align-items: center; }
  .hero-section__overlay { width: 430px; max-width: 100%; height: 800px; padding: 220px 41px 220px 24px; justify-content: center; flex-shrink: 0; }
  .hero-section__content { width: 365px; max-width: 100%; height: 360px; padding: 50px 46px 51px 0; gap: 16px; flex-shrink: 0; }
  .hero-section h1 { width: 319px; max-width: 100%; font-size: 40px; }
  .hero-section p { width: 310px; max-width: 100%; font-size: 13px; }
}