@use '../utils' as *;

/*=========================
      Breadcrumb
===========================*/
.breadcrumb {
    &__bg {
        background-size: cover;
        background-position: center;
        padding: 230px 0 120px;
        position: relative;
        z-index: 1;
        @media #{$xl} {
            padding: 190px 0 100px;
        }
        @media #{$lg} {
            padding: 180px 0 100px;
        }
        @media #{$md} {
            padding: 180px 0 90px;
        }
        @media #{$xs} {
            padding: 140px 0 70px;
        }
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
            background: linear-gradient(90deg, #0a165e 25.96%, rgba(10, 22, 94, 0.6) 100%);
        }
    }
    &__content {
        & .title {
            margin-bottom: 30px;
            font-size: 50px;
            color: var(--tg-color-white-default);
            @media #{$xl} {
                margin-bottom: 25px;
                font-size: 40px;
            }
            @media #{$lg} {
                margin-bottom: 20px;
                font-size: 36px;
            }
            @media #{$xs} {
                font-size: 32px;
            }
            @media #{$sm} {
                font-size: 34px;
            }
        }
        & .breadcrumb {
            margin-bottom: 0;
            display: inline-flex;
            background: var(--tg-color-blue-light-4);
            @include border-radius(80px);
            gap: 8px;
            padding: 6px 14px 8px;
            @media #{$xs} {
                @include border-radius(20px);
            }
            & span {
                font-size: 16px;
                font-weight: 700;
                text-transform: capitalize;
                color: var(--tg-color-white-default);
                line-height: 1.2;
                & a {
                    color: var(--tg-color-gray-8);
                    &:hover {
                        color: var(--tg-color-white-default);
                    }
                }
                &.breadcrumb-separator {
                    color: var(--tg-color-gray-8);
                }
            }
        }
    }
}