#category-selection #youthx {
    display: none;
}

#category-selection #my-career {
    display: none;
}

#category-selection #my-hustle {
    display: none;
}

#category-selection #my-job {
    display: none;
}

@media (max-width: 1024px) {
    #blog-article {
        margin-top: 120px !important;
    }
}

.image-underlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0; /* keep it at the very bottom */
}

.banner-back {
    position: absolute; /* sit on top of the banner */
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* give it a hit area */
    height: 44px;
    border-radius: 50%; /* optional */
    color: white;
    text-decoration: none;
    cursor: pointer; /* show hand cursor */
    z-index: 10;
}
@media (min-width:320px) and (max-width:640px) {
    .banner-back {
        position: absolute;
        top: 45px;
        left: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: white;
        text-decoration: none;
        cursor: pointer;
        z-index: 10;
    }
}

    .banner-back svg {
        pointer-events: none; /* so clicks go to <a> not the SVG path */
    }



/* Wrapper = same width, padding and margins you had before */
#blog-article .back-link-wrapper {
    max-width: 1000px; /* same as before */
    padding: 0 14rem; /* same side padding */
    margin: 32px auto 48px auto; /* same spacing & centering */
    box-sizing: border-box;
    text-align: left; /* left align inside wrapper */
}

/* Anchor itself shrinks to content so only icon+text clickable */
#blog-article .back-link {
    display: inline-flex; /* width = content only */
    align-items: center;
    gap: 8px; /* space between icon & text */
    color: #940EAF;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

    /* Hover state for link + icon stroke */
    #blog-article .back-link:hover {
        color: #7c1bb3;
    }

    /* Optional: subtle arrow slide animation on hover */
    #blog-article .back-link svg {
        transition: transform 0.2s;
    }

    #blog-article .back-link:hover svg {
        transform: translateX(-4px);
    }
@media (max-width: 700px) {
    #blog-article .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #940EAF;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s;
        width: 256px;
        margin-left: -220px;
    }
    #blog-article {
        margin-top: 0px !important;
    }
}