.form-btn {
	border: 1px solid var(--Gray, #606060);
	background: linear-gradient(to right, #464749 0%, #464749 70%, #f7f7f7 65%)
		left;
	background-size: 400% 100%;
	background-position: right;
	transition:
		background-position 0.6s ease,
		color 0.6s ease;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 4px 30px;
	gap: 16px;
	color: var(--Black, #464749);
	font-family: 'Halisa-WideLight', Mulish, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 36px;
	display: inline-flex;

	@media (min-width: 1024px) {
		font-size: 1.5rem;
	}
}

.form-btn:hover {
	background-position: left;
	color: white;
}

.primary-btn {
	border: 1px solid var(--Gray, #606060);
	background: linear-gradient(to right, #464749 0%, #464749 70%, white 65%) left;
	background-size: 400% 100%;
	background-position: right;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 4px 30px;
	gap: 16px;
	color: var(--Black, #464749);
	font-family: 'Halisa-WideLight', Mulish, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 36px;
	display: inline-flex;
	transition:
		background-position 0.6s ease,
		color 0.6s ease;

	@media (min-width: 1024px) {
		font-size: 1.5rem;
	}
}

.primary-btn:hover {
	background-position: left;
	color: white;
}

.primary-btn-circle {
	border: 1px solid var(--Gray, #606060);
	background: var(--Extra-light-brown, #faf5f2);
	cursor: pointer;
	align-items: center;
	justify-content: center;

	display: flex;
	width: 50px;
	height: 50px;
	padding: 18px 12px;
	flex-direction: column;
	gap: 10px;
	border-radius: 25px;
}

.primary-btn-circle:hover {
	background: var(--Light-brown, #f3ece5);
}

.secondary-btn {
	text-decoration: underline;
	font-size: 1.25rem;
	cursor: pointer;
	color: #464749;
}

.group:hover .section-btn {
	color: #464749;
	opacity: 0.38;
}

.section-btn.active {
	color: #464749;
	opacity: 0.38;
}

.section-btn.active + .underline-transition {
	width: 13px;
}

.button {
	position: relative;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.438rem;
	letter-spacing: 0px;

	@media (min-width: 1024px) {
		font-size: 1.5rem;
	}

	&:hover {
		opacity: 0.4;
	}
}

.btn-underline-transition {
	width: 100%;
	transition: width 0.4s ease;
}

.group:hover .btn-underline-transition {
	width: 13px;
	color: #464749;
}