.hero-container {
    margin-bottom: 5rem;
}

    .hero-container .container-fluid {
        padding-top: 12.5rem;
        padding-bottom: 5rem;
        border-radius: 0;
        transform: translateY(-121px);
        margin-bottom: -61px;
    }

    .hero-container .wistia-embed {
        height: 100%;
        width: 100%;
    }
    /*Pulse used this. Color may need to change for new brand.*/
    .hero-container .container-fluid.bg-blue {
        background-color: #f5f8ff;
    }

.hero-form-container iframe,
.hero-centered iframe {
    width: 100%;
}

/* || Dark background colors*/
/*
    Change menu text to white when hero has dark bg. 
*/
header:has(.nav-sticky):has(+ main .hero-container [class*="bg-dark"]) #mega-menu a.dropdown-toggle:not(.btn, .callout),
header:has(.nav-sticky):has(+ main .hero-container [class*="bg-dark"]) #mega-menu .nav-1 .navbar-links span:not(.btn) {
    color: white !important;
}

header:has(.nav-sticky):has(+ main .hero-container [class*="bg-dark"]) #mega-menu .desktop-nav {
    border-color: #FFFFFF0A !important;
}

header:has(.nav-sticky):has(+ main .hero-container [class*="bg-dark"]) #mega-menu .ng-logo {
    display: none;
}

    header:has(.nav-sticky):has(+ main .hero-container [class*="bg-dark"]) #mega-menu .ng-logo.alt-white {
        display: inline;
    }

/*End Dark background colors*/

.hero-container .ng-serif-regular.ng-5xl {
    letter-spacing: -1.28px;
}

.hero-container .hero-ctas {
    display: flex;
    column-gap: 20px;
}

/*todo - Look into removing. From previous design.*/
/*.hidden-for-video {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
}*/
/*end - Look into removing. From previous design.*/

.hero-centered .hero-content {
    margin: 0 auto;
}

.hero-centered:has(.img-wrap) .hero-content {
    margin-bottom: var(--ng-size-28px);
}

.hero-centered .container-fluid {
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (min-width:993px) {
    /*todo - Look into removing. From previous design.*/

    .hero-container.no-image-full-text .img-wrap {
        display: none;
    }

    .hero-container.no-image-full-text .content-wrap {
        width: 100%;
    }

    .hero-container.split-60-40 .img-wrap {
        width: 40%;
    }

    .hero-container.split-60-40 .content-wrap {
        width: 60%;
    }

    /*    .hero-container.split-50 .img-wrap,
    .hero-container.split-50 .content-wrap {
        width: 50%;
    }*/
    /*end - Look into removing. From previous design.*/

}

@media (max-width:1024px) {
    .hero-container .ng-serif-regular.ng-5xl {
        font-size: var(--ng-size-32px);
        line-height: 140%;
        letter-spacing: -0.56px;
    }

    .hero-container .ng-serif-regular.ng-4xl {
        font-size: var(--ng-size-28px);
        line-height: 140%;
        letter-spacing: -0.56px;
    }

    .hero-container .ng-sans-regular.ng-l,
    .hero-container .ng-sans-semibold.ng-m {
        font-size: var(--ng-size-16px);
        line-height: 140%;
    }
}


@media (max-width:991px) {
    .hero-container {
        margin-bottom: 0;
    }

        .hero-container .mb-12px {
            margin-bottom: var(--ng-size-8px);
        }

        .hero-container .mb-24px,
        .hero-centered .mb-32px {
            margin-bottom: var(--ng-size-16px);
        }

        .hero-container .hero-ctas {
            justify-content: space-between;
            margin-bottom: var(--ng-size-40px);
            gap: 12px;
        }

    .hero-centered:has(.img-wrap) .hero-content {
        margin-bottom: 0;
    }

    .hero-container .force-font-52 {
        font-size: var(--ng-size-32px);
    }
}