/* --- Breadcrumb Section Container --- */
.hr-breadcrumb {
    min-height: 450px; /* Adjust height to match your desired banner size */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    font-family: var(--font-03); /* Recommended clean font */
    z-index: 1;
}
.hr-breadcrumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 0.6 is the opacity. Make it higher (e.g., 0.8) for darker */
    z-index: -1; /* Puts the overlay behind the text but over the image */
}
/* --- Breadcrumb Links Styling --- */
.custom-breadcrumb {
    /* Changes default Bootstrap '/' separator to the '-' seen in the image */
    --bs-breadcrumb-divider: '-'; 
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.custom-breadcrumb .breadcrumb-item a {
    color: #fff; /* Dark text */
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 18px;
}

.custom-breadcrumb .breadcrumb-item a:hover {
    color: #dca759; /* Gold/Accent color on hover */
}

/* The active (current) page text */
.custom-breadcrumb .breadcrumb-item.active {
    color: #fff;
    font-weight: 800; /* Bold as requested in the design */
}

/* Separator styling */
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
    font-weight: 900;
    padding: 0 12px;
}

/* --- Main Large Title Styling --- */
.page-main-title {
    font-size: 4.5rem; /* Massive typography */
    font-weight: 900; /* Extra bold weight */
    color: #fff;
    margin-top: 15px;
    letter-spacing: -1.5px; /* Tighter letter spacing for modern feel */
}

/* --- Responsive Adjustments for Mobile/Tablet --- */
@media (max-width: 768px) {
    .hr-breadcrumb {
        min-height: 350px;
    }
    .page-main-title {
        font-size: 3rem;
        letter-spacing: -1px;
    }
    .custom-breadcrumb {
        font-size: 14px;
    }
}