.custom-breadcrumb {
    list-style: none;
    margin: 0;
    left: 144px;
}

.custom-breadcrumb ul {
    display: flex;
    gap: 12px;
    padding-left: 0 !important;
    padding-bottom: 20px;
}

.custom-breadcrumb li {
    display: inline;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
}

.custom-breadcrumb li a {
    color: rgb(0, 0, 0);
    text-decoration: underline;
}
.custom-breadcrumb a:hover {
    color: rgb(176, 0, 26);
}

.custom-breadcrumb li:not(:last-child)::after {
    content: "";
    display: inline-block;
    background: url('/themes/custom/axway2020/img/breadcrumb-arrow.svg') no-repeat center;
    margin-left: 12px;
    color: #666;
    height: 10px;
    width: 7px;
}

@media (max-width: 767px) {
    .custom-breadcrumb {
        left: 0 !important;
    }
    .custom-breadcrumb ul {
        display: flex;
        gap: 10px;
        padding-bottom: 10px !important;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.desktop-breadcrumb {
    display: block;
}

.mobile-breadcrumb {
    display: none;
}

/* Mobile: Move breadcrumb below image and before the title */
@media (max-width: 768px) {
    .desktop-breadcrumb {
        display: none;
    }

    .mobile-breadcrumb {
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
@media (min-width: 768px) {
    #hero-2024.breadcrumb-active.hero-t1 .container {
        padding: 40px 0 80px 0 !important;
    }
    .hero-t2 .custom-breadcrumb {
        margin-top: -40px;
        padding-bottom: 40px;
    }
}

/* Center the breadcrumb inside hero-t2 */
.hero-t2 .custom-breadcrumb {
    display: flex;
    justify-content: center;
}