Untitled

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* or any desired height */
    background: url('../../../images/hero-books.png') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay {
    background: rgba(0, 0, 0, 0.5); /* Black background with 50% opacity */
    padding: 40px;
    text-align: center;
    color: white;
    border-radius: 10px;
}

.ux-rfi-heading {
    margin-bottom: 20px;
}

.ux-rfi-content {
    margin-bottom: 20px;
}

.button-container {
    display: flex;
    justify-content: center;
}




<div className="hero-section">
    <div className="overlay">
        <Header
            className="ux-rfi-heading"
            labelKey="HHS_knowledgebase"
        ></Header>
        <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para>
        <div className="button-container">
            <Button
                id="knowledgeBase-btn"
                className="ux-rfi-white-button"
                labelKey="knowledge_base"
                click={() => Navigate.to('/hhs-knowledgebase')}
            ></Button>
        </div>
    </div>
</div>