/*
==========================================
Breadcrumbs
==========================================
*/

.breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:30px;
    padding:14px 20px;
    background:#f8f9fa;
    border:1px solid #e5e7eb;
    border-radius:8px;
    font-size:14px;
    line-height:1.6;
}

/*
==========================================
Links
==========================================
*/

.breadcrumbs a{
    color:#333;
    text-decoration:none;
    transition:.3s ease;
}

.breadcrumbs a:hover{
    color:#d50000;
}

/*
==========================================
Current Page
==========================================
*/

.breadcrumbs span{
    color:#666;
}

/*
==========================================
Separator
==========================================
*/

.breadcrumbs .separator{
    color:#999;
    user-select:none;
}

/*
==========================================
Accessibility
==========================================
*/

.breadcrumbs a:focus-visible{
    outline:2px solid #d50000;
    outline-offset:2px;
    border-radius:4px;
}

/*
==========================================
Responsive
==========================================
*/

@media (max-width:576px){

    .breadcrumbs{
        padding:12px 15px;
        font-size:13px;
        gap:6px;
    }

}