.button,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	font-family: "DM Sans", sans-serif;
	color: #fff;
	text-decoration: none;
	text-align: center;
	background: #00113F;
	cursor: pointer;
	transition: 0.3s all ease-in-out;
	border-radius: 0;
	font-weight: 500;
	font-size: 1.125rem;
	line-height: normal;
	border: none;
}
.button:hover,
.button:focus,
.btn:hover,
.btn:focus {
	color: #fff;
	text-decoration: none;
	background: var(--secondary-green);
}

.button--white {
	background: white;
	color: black;
}

.button--white:hover,
.button--white:focus {
	color: white;
	background: #00113F;
}

.button--green {
	background: var(--secondary-green);
	color: white;
}

.button--green:hover,
.button--green:focus { 
	color: #00113F;
	background: white;
}

.button--with-icon {
	gap: 4.2px;
}

.button--with-icon:hover .button__icon,
.button--with-icon:focus .button__icon {
	transform: translateX(5px);
}

.button__icon {
	width: 13px;
	height: 13px;
	transition: 0.3s all ease-in-out;
	fill: currentColor;
}

.arrow-button {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background: var(--primary-blue);
	transition: 0.3s all ease-in-out;
}

.arrow-button:hover,
.arrow-button:focus {
	color: white;
	background: var(--secondary-green);
}

.arrow-button:hover .button__icon,
.arrow-button:focus .button__icon {
	transform: translateX(3px);
}

@media (min-width: 48em) {
	.button--with-icon {
		gap: 5px;
	}
	.button__icon {
		width: 16px;
		height: 16px;
	}

	.arrow-button {
		width: 42px;
		height: 42px;
	}

	.arrow-button .button__icon {
		width: 18.7px;
		height: 17.5px;
	}
}