/* Custom CSS rules here */

.hero-section {width: 100%; overflow: hidden;}
.hero-section::after {content: ''; display: block; position: absolute; inset: 0; background: rgba(var(--mw-dark-rgb), .85);}
.hero-content {padding: 10rem 0 2rem;}
.hero-video {position: absolute; width: 100%; height: 100vh; object-fit: cover;}
.hero-celebration-banner {display: block; position: absolute; top: -35px; right: -440px; z-index: 1; max-width: none; max-height: none; transform: rotate(30deg) scale(.3);}

.btn-primary, .btn-secondary, .btn-dark {border: 2px solid #FFF !important;}

.section-bgimg::after {content: ''; display: block; position: absolute; inset: 0; background: rgba(var(--mw-dark-rgb), .9);}

@media (min-width: 992px) {
    .hero-section::after {background: linear-gradient(to top, rgba(var(--mw-dark-rgb), .85) 0%, rgba(7, 38, 37, 0) 100%);}
    .hero-content {padding: 20rem 0 4rem;}
    .hero-celebration-banner {top: 0px; right: -395px; transform: rotate(30deg) scale(.5);}
    .section-bgimg::after {background: linear-gradient(to left, rgba(var(--mw-dark-rgb), .9) 50%, rgba(0, 0, 0, 0) 100%);}
}