.block-course-header.hero-section {
    --hero-section-height: calc( 85vh - var(--main-nav-bar-height) );
}
.block-course-header__badges {
    margin-bottom: var(--spacing-12);
}
.block-course-header .hero-content p,
.block-course-header .hero-content p > a {
    font: var(--sm-14-semi-bold-font-definition);
    text-decoration: none;
}
.block-course-header .hero-content p + p,
.block-course-header .hero-content p + h1 {
    margin-top: var(--spacing-8);
}
#course-header-section__nav {
    top: 0;
    opacity: 0;
    width: 100%;
    position: fixed;
    overflow: hidden;
    height: fit-content;
    padding: var(--spacing-16);
    transition: var(--offcanvas-transition);
    background-color: var(--primary-blue-color);
}
#course-header-section__nav.scroll-down {
    opacity: 1;
}
#course-header-section__nav .course-header-btn .btn {
    width: 50%;
}
#course-header-section__nav .navbar-brand img {
    height: var(--main-logo-height);
}
#course-header-section__nav .course-header-text {
    margin-right: auto;
    padding-left: var(--spacing-48);
    padding-right: var(--spacing-32);
}
#course-header-section__nav .course-header-btn {
    gap: var(--spacing-8);
    width: 100%;
}
#floating-nav {
    position: fixed;
    top: 75%;
    left: 0;
    transform: translateY(-100%);
    z-index: 1050;
    min-width: 240px;
}
#floating-nav .dropdown-menu {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-link-hover-bg: var(--primary-blue-color);
    --bs-dropdown-link-active-bg: var(--primary-blue-color);
}
#floating-nav .dropdown-menu p {
    font: var(--sm-14-semi-bold-font-definition);
    color: var(--neutral-outline-color);
    padding: var(--spacing-16) var(--spacing-24) var(--spacing-8);
}
#floating-nav .dropdown-menu.show {
    opacity: 1;
}
#floating-nav a.dropdown-item {
    color: var(--neutral-white-color);
    font: var(--button-18-font-definition);
    --bs-dropdown-item-padding-y: var(--spacing-16);
    --bs-dropdown-item-padding-x: var(--spacing-24);
}
#floating-nav .sidebar-toggle.show > .icon.icon-caret-left::before {
    transform: rotate(180deg);
}
@media screen and (min-width: 992px) {
    .block-course-header__badges {
        margin-bottom: var(--spacing-20);
    }
    .block-course-header.hero-section {
        --hero-content-padding: var(--spacing-28) 0;
        --hero-section-height: 75vh;
    }
    .block-course-header .hero-content p + h1 {
        margin-top: var(--spacing-16);
    }
    #course-header-section__nav {
        height: var(--main-nav-bar-height);
        background-color: var(--secondary-navy-color);
        padding: var(--main-menu-y-padding) var(--main-menu-x-padding);
    }
    #course-header-section__nav .course-header-btn,
    #course-header-section__nav .course-header-btn .btn {
        gap: var(--spacing-16);
        width: fit-content;
    }
}
@media screen and (min-width: 1200px) {
    .block-course-header.hero-section {
        --hero-section-height: 60vh;
    }
}
@media screen and (min-width: 1440px) {
    .block-course-header.hero-section {
        --hero-section-height: 65vh;
    }
}
@media screen and (min-width: 1600px) {
    .block-course-header.hero-section {
        --hero-section-height: 55vh;
    }
}