@use '../utils' as *;

/*----------------------------------------*/
/*  2.11 Breadcrumb
/*----------------------------------------*/

.breadcrumb{
    &-bg{
        padding-top: 240px;
        padding-bottom: 140px;
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        @media #{$xs}{
            padding-top: 190px;
            padding-bottom: 100px;
        }
    }
    &-overlay{
        position: relative;
        &::after{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: '';
            background-color: rgba(10, 12, 17, 0.4);
        }
    }
    &-title{
        font-weight: 800;
        font-size: 70px;
        letter-spacing: -0.02em;
        text-transform: capitalize;
        color: var(--tp-common-white); 
        @media #{$md}{
            font-size: 60px;
        }     
        @media #{$xs}{
            font-size: 40px;
        }     
    }
    &-list{
        display: inline-block;
        padding: 0px 10px;
        & span{
            font-weight: 400;
            font-size: 18px;
            line-height: 1;
            text-transform: capitalize;   
            color: var(--tp-common-white);       
            &.dvdr{
                & i{
                    padding: 0px 14px;
                }
            }
        }
    }
    &-style{
        &-2{
            & .breadcrumb-list span {
                color: #525356;
                &.active{
                    color: var(--tp-common-black);
                }
            }
            & .breadcrumb-content {
                padding: 12px 0;
            }
        }
    }
}