[data-header-type="Default"] {
    --breadCrumpSoftColor: var(--neutral-666666);
    --breadCrumpActiveColor: var(--neutral-1A1818);
    --headingColor: var(--neutral-1A1818);
}
[data-header-type="Alternate"],
[data-header-type="Alternate_v2"] {
    --breadCrumpSoftColor: #ddd4d5;
    --breadCrumpActiveColor: var(--neutral-FFFFFF);
    --headingColor: var(--neutral-FFFFFF);
}


/* =========================================================
       HERO SECTION
       ========================================================= */
.page-header-section {
    position: relative;
    width: 100%;
    height: 45vh;
    min-height: 45vh;
    overflow: hidden;
    background: url("../../img/banner-mock-img.svg") no-repeat center/cover;
    padding-top: var(--space-8);
    padding-bottom: 18vh;
    background-position: 20% 0;
}

.page-header-section .slogan-pill{
    background-color: rgb(255 255 255 / 10%);
    color: var(--neutral-FFFFFF);
    backdrop-filter: blur(12px);
}

.page-header-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url("../../img/wave.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
    pointer-events: none;
    z-index: 2;
}

/* =========================================================
       BREADCRUMB
       ========================================================= */

.bc-icon{
    min-width:10px;
}

.hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--df-text-fs-12);
    font-weight: var(--fw-medium);
    color: var(--neutral-666666);
    margin-bottom: var(--space-10);
}

    .hero-breadcrumb .bc-sep {
        color: var(--breadCrumpSoftColor);
        font-size: var(--df-text-fs-12);
        flex-shrink: 0;
    }

    .hero-breadcrumb .bc-current {
        cursor: default;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .hero-breadcrumb .br-link {
        color: var(--breadCrumpSoftColor);
        font-weight: var(--fw-regular);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: none;
        flex-shrink: 0;
        border-bottom: 1px solid transparent;
        transition: ease-out all .2s;
    }

    .hero-breadcrumb a.br-link:hover {
        border-color: var(--breadCrumpSoftColor);
    }

    .hero-breadcrumb a.br-link:last-child {
        color: var(--breadCrumpActiveColor);
        font-weight: var(--fw-semibold);
        min-width: 0;
        max-width: 100%;
        flex-shrink: 1;
    }

.hero-right {
    margin-top: 8vh;
}

.hero-heading {
    color: var(--headingColor);
}
/* =========================================================
       RESPONSIVE
       ========================================================= */
@media (max-width: 991.98px) {
    .hero-right {
        margin-bottom: 4vh;
        margin-top:0;
    }

    .page-header-section {
        padding-bottom: 80px;
        height: 40vh;
        min-height: 40vh;
    }
    .page-header-section::after {
        background: url("../../img/wave-mobile.svg") no-repeat;
        background-size: cover;
        height: 80px;
    }
    .hero-heading {
        text-align: left;
        margin-bottom: 70px;
    }
}

@media (max-width: 768.98px) {
    .slogan-pill {
        font-size: var(--df-text-fs-14);
    }
}
@media (max-width: 575.98px) {
    .page-header-section {
        height: 50vh;
        min-height: 50vh;
    }
    .page-header-section {
        padding-top: var(--space-6);
        padding-bottom: 64px;
        
    }

    .page-header-section::after {
        width:100%;
        height: 80px;
    }
}