/*===========================
      16.Breadcrumb css 
===========================*/


.breadcrumb-area{
    padding: 30px 0 0;
}

.breadcrumb{
    margin-bottom: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    
    & .breadcrumb-item{
        font-size: 16px;
        font-weight: 400;
        color: $black;
        
        @media #{$xs}{
            font-size: 14px;
        }
        @media #{$sm}{
            font-size: 16px;
        }
        
        & + .breadcrumb-item{
            padding-left: 10px;
            
            &::before{
                content: "\f054";
                font-family: "Font Awesome 5 Pro";
                font-size: 15px;
                padding-right: 10px;
                
                @media #{$xs}{
                    font-size: 13px;
                }
                @media #{$sm}{
                    font-size: 15px;
                }
            }
        }
        
        & a{
            color: $black;
            @include transition(0.3s);
            
            &:hover{
                color: $theme-color;
            }
        }
    }
}