/* Zuri Elementor Button */
.zuri-btn-wrap {
	display: flex;
	width: 100%;
	justify-content: flex-start;
}

.zuri-btn {
	--zuri-green: #163B25;
	--zuri-gold: #B57D3D;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	padding: 14px 28px;
	border-radius: 8px;

	font-family: "Inter", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;

	transition-property: color, border-color, box-shadow, background-color;
	transition-duration: 700ms;
	transition-timing-function: ease;
}

.zuri-btn-inner {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.zuri-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.zuri-btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.zuri-btn::before {
	content: "";
	position: absolute;
	left: -60px;
	top: 0;
	width: 0;
	height: 100%;
	transform: skewX(45deg);
	transition-property: width;
	transition-duration: 700ms;
	transition-timing-function: ease;
	z-index: 1;
}

.zuri-btn:hover::before,
.zuri-btn:focus-visible::before {
	width: 270%;
}

/* Filled Green */
.zuri-green-filled {
	background: var(--zuri-green);
	color: #fff;
	border: 1px solid var(--zuri-green);
}

.zuri-green-filled::before {
	background: var(--zuri-gold);
}

.zuri-green-filled:hover,
.zuri-green-filled:focus-visible {
	color: #fff;
	border-color: var(--zuri-gold);
}

/* Filled Gold */
.zuri-gold-filled {
	background: var(--zuri-gold);
	color: #fff;
	border: 1px solid var(--zuri-gold);
}

.zuri-gold-filled::before {
	background: var(--zuri-green);
}

.zuri-gold-filled:hover,
.zuri-gold-filled:focus-visible {
	color: #fff;
	border-color: var(--zuri-green);
}

/* Transparent Green */
.zuri-green-outline {
	background: transparent;
	color: var(--zuri-green);
	border: 2px solid var(--zuri-green);
}

.zuri-green-outline::before {
	background: var(--zuri-green);
}

.zuri-green-outline:hover,
.zuri-green-outline:focus-visible {
	color: #fff;
	border-color: var(--zuri-green);
}

/* Transparent Gold */
.zuri-gold-outline {
	background: transparent;
	color: var(--zuri-gold);
	border: 2px solid var(--zuri-gold);
}

.zuri-gold-outline::before {
	background: var(--zuri-gold);
}

.zuri-gold-outline:hover,
.zuri-gold-outline:focus-visible {
	color: #fff;
	border-color: var(--zuri-gold);
}

.zuri-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Laptop keeps the requested 16px */
@media (max-width: 1366px) {
	.zuri-btn {
		font-size: 16px;
	}
}

/* Tablet */
@media (max-width: 991px) {
	.zuri-btn {
		font-size: 15px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.zuri-btn {
		font-size: 14px;
	}
}
