#lead-hunt-submit {
    background: blue !important;
}



.underline-animation {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.underline-animation::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 1px;
    border-radius: 5px;
    background: #b22e31;
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.underline-animation:hover {
    opacity: 1;
}
.underline-animation:hover::after {
    --scale: 1;
}



document.querySelectorAll('.underline-animation').forEach((elem) => {
	elem.onmouseenter = elem.onmouseleave = (e) => {
        const tolerance = 10;
		const left = 0;
		const right = elem.clientWidth;
		let x = e.pageX - elem.offsetLeft;
		if (x - tolerance < left) x = left;
		if (x + tolerance > right) x = right;
		elem.style.setProperty('--x', `${ x }px`);
	}
});




.filling-animation {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.filling-animation::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: -1;
    border-radius: 5px;
    background: #b22e31;
    transform: scale(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.filling-animation:hover {
    opacity: 1;
}
.filling-animation:hover::after {
    --scale: 1;
}



document.querySelectorAll('.filling-animation').forEach((elem) => {
	elem.onmouseenter = elem.onmouseleave = (e) => {
        const tolerance = 10;
		const left = 0;
		const right = elem.clientWidth;
		let x = e.pageX - elem.offsetLeft;
		if (x - tolerance < left) x = left;
		if (x + tolerance > right) x = right;
		elem.style.setProperty('--x', `${ x }px`);
	}
});