/*********************************
/* Breadcrumb Start
*********************************/
.breadcrumb__area {
    background: rgba(var(--color-white-rgb), 0.1);
    padding: 130px 0 53px;
    position: relative;
    z-index: 1;

    @include respond (phone-sm) {
        padding: 125px 0 40px;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../images/breadcrumb-overlay.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
        z-index: -1;
    }
    .link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 26px;

        li {
            position: relative;
            font-family: var(--font-roboto);
            font-size: 20px;
            font-weight: var(--font-medium);
            line-height: 22px;
            color: rgba(var(--color-white-rgb), 0.5);
            list-style: none;

            @include respond (phone-sm) {
                font-size: 16px;
            }

            &::after {
                content: "";
                width: 10px;
                height: 4px;
                border-radius: 8px;
                background: var(--color-primary);
                position: absolute;
                right: -19px;
                top: 50%;
                transform: translateY(-50%);
            }

            &:last-of-type {
                &::after {
                    display: none;
                }
            }
            a {
                color: var(--color-white);
                display: inline-block;
                transition: var(--transition);

                &:hover {
                    color: var(--color-primary);
                }
            }
        }
    }
}

/*********************************
/* Breadcrumb End
*********************************/