/* ── Hero — BG + Buttons ─────────────────────────────────────── */

.nml-hbb {
	padding: 80px 0;
}

/* The whole inner is the image; buttons are overlaid on top. */
.nml-hbb__inner {
	position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--color-primary);
    box-shadow: 0px 2px 4px 0px #4C83F33D;
}

.nml-hbb__bg {
	display: block;
	line-height: 0;
}

.nml-hbb__bg-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Buttons overlay ─────────────────────────────────────────── */
.nml-hbb__btns {
	position: absolute;
    left: 0;
    right: 0;
	top: 37%;
	transform: translate(0px, -50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 48px;
}

.nml-hbb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	white-space: nowrap;
	border: 1px solid var(--color-line);
}

.nml-hbb__btn--primary {
	background: var(--color-bg);
	color: var(--color-primary);
}

.nml-hbb__btn--primary:hover {
	background: #FFFFFFCC;
	color: var(--color-primary-dark);
}

.nml-hbb__btn--secondary {
	background: transparent;
	color: var(--color-text-white);
	border: 1px solid var(--color-bg);
}

.nml-hbb__btn--secondary:hover {
	color: var(--color-line);
	border-color: var(--color-line);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.nml-hbb {
		padding: 40px 0;
	}

	.nml-hbb__btns {
		flex-direction: column;
		padding: 24px;
        top: 50%;
        transform: translate(0px, -50%);
	}

	.nml-hbb__btn {
		width: 100%;
        padding: 12px 20px;
        border-radius: 8px;
	}
}