/* General Breadcrumb Styling */
.breadcrumb {
    font-family: Arial, sans-serif;
    margin: 20px 0;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.breadcrumb ul li {
    margin: 0;
    display: inline;
    color: #555;
    white-space: nowrap; /* Prevent text wrapping */
}

.breadcrumb ul li + li::before {
    content: ">";
    margin: 0 10px;
    color: #aaa;
}

.breadcrumb ul li a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.3s ease;
}

.breadcrumb ul li a:hover {
    color: #0056b3;
}

.breadcrumb ul li:last-child {
    font-weight: bold;
    color: #333;
    text-overflow: ellipsis;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .breadcrumb ul {
        flex-wrap: nowrap; /* Prevent wrapping */
        overflow-x: auto; /* Horizontal scrolling for small screens */
    }

    .breadcrumb ul li {
        font-size: 14px; /* Reduce font size */
    }

    .breadcrumb ul li.hide-on-small {
        display: none; /* Hide additional items */
    }

    .breadcrumb ul li + li::before {
        margin: 0 5px; /* Reduce separator spacing */
    }
}

@media screen and (max-width: 480px) {
    .breadcrumb {
        padding: 5px 10px; /* Reduce padding for small screens */
    }

    .breadcrumb ul li {
        font-size: 12px; /* Further reduce font size */
    }
}


/* Hide on desktop */
.hide-on-desktop {
    display: none; /* Hide by default */
}

/* Show only on smaller screens */
@media screen and (max-width: 991px) {
    .hide-on-desktop {
        display: block; /* Show for devices with width <= 991px */
    }
}

/* Hide on desktop */
.hide_on_mobile {
    display: block; /* Hide by default */
}

/* Show only on smaller screens */
@media screen and (max-width: 991px) {
    .hide_on_mobile {
        display: none; /* Show for devices with width <= 991px */
    }
}

/* Hide on desktop */


/* Show only on smaller screens */
@media screen and (max-width: 991px) {
    .logo_on_mobile {
    width: 170px!important; /* Set width for mobile logo */
    height: 50px!important; /* Set height for mobile logo */
    }
}

@media  screen and (max-width: 991px) {
    .off_canvas_on_mobile {
        width: 170px!important; /* Set width for off-canvas logo */
        height: 50px!important; /* Set height for off-canvas logo */
    }
    
}