// main-btn


.main-btn {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	outline: none;
	background-color: #fff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	padding: 13px 32px;
	transition: all 0.5s linear;
	overflow: hidden;
	z-index: 1;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: -0.1px;
	text-align: center;
	border-radius: 10px;

	&:hover {
		color: #fff;

		span {
			svg {
				stroke: currentColor;
				color: #fff;
				transition: all 0.3s;
			}
            i {
				stroke: currentColor;
				color: #fff;
				transition: all 0.3s;
			}
		}

		&::before {
			transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}

		&::after {
			transform: translate3d(0, 0, 0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}
	}

	&:before {
		position: absolute;
		content: '';
		background-color: var(--primary-color);
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
		z-index: -1;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: var(--primary-color);
		transform: translate3d(0, -100%, 0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		z-index: -1;
	}
}




.main-btn-two {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	outline: none;
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: #fff;
	width: 188px;
	height: 68px;
	transition: all 0.5s linear;
	overflow: hidden;
	z-index: 1;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: -0.1px;
	text-align: center;
	border-radius: 10px;
	line-height: 40px;

	span {
		svg {
			stroke: currentColor;
			color: #fff;
		}
	}

	&:hover {
		color: var(--primary-color);

		&::before {
			transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}

		&::after {
			transform: translate3d(0, 0, 0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}

		span {
			svg {
				stroke: currentColor;
				color: var(--primary-color);
				transition: all 0.5s linear;
			}
            i {
				stroke: currentColor;
				color: var(--primary-color);
				transition: all 0.5s linear;
			}
		}
	}

	&:before {
		position: absolute;
		content: '';
		background-color: #fff;
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
		z-index: -1;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: #fff;
		transform: translate3d(0, -100%, 0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		z-index: -1;
	}
}




.main-btn-three {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	outline: none;
	background-color: #fff;
	border: 1.5px solid rgba(211, 213, 218, 0.50);
	color: var(--grey-scale-500);
	width: 100%;
	height: 54px;
	transition: all 0.5s linear;
	overflow: hidden;
	z-index: 1;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.09px;
	text-align: center;
	line-height: 54px;
	border-radius: 10px;







	&:hover {
		color: #fff;

		span {
			svg {
				stroke: currentColor;
				color: #fff;
				transition: all 0.3s;
			}
            i {
				stroke: currentColor;
				color: #fff;
				transition: all 0.3s;
			}
		}

		&::before {
			transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}

		&::after {
			transform: translate3d(0, 0, 0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}
	}

	&:before {
		position: absolute;
		content: '';
		background-color: var(--primary-color);
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
		z-index: -1;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: var(--primary-color);
		transform: translate3d(0, -100%, 0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		z-index: -1;
	}
}









.main-btn-four {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	outline: none;
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: #fff;
	padding: 13px 32px;
	transition: all 0.5s linear;
	overflow: hidden;
	z-index: 1;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: -0.1px;
	text-align: center;
	border-radius: 10px;

	&:hover {
		color: var(--primary-color);

		&::before {
			transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}

		&::after {
			transform: translate3d(0, 0, 0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}
	}

	&:before {
		position: absolute;
		content: '';
		background-color: #fff;
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
		z-index: -1;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: #fff;
		transform: translate3d(0, -100%, 0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		z-index: -1;
	}
}




.main-btn-five {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	outline: none;
	width: 163px;
	background-color: #fff;
	border: 1.5px solid rgba(211, 213, 218, 0.50);
	color: var(--grey-scale-500);
	padding: 12px 16px;
	transition: all 0.5s linear;
	overflow: hidden;
	z-index: 1;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 145%;
	/* 26.1px */
	letter-spacing: -0.09px;
	text-align: center;
	border-radius: 10px;


	&:hover {
		color: #fff;

		&::before {
			transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}

		&::after {
			transform: translate3d(0, 0, 0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}


		span {
			svg {
				stroke: currentColor;
				color: #fff;
				transition: all 0.3s;
			}
            i {
				stroke: currentColor;
				color: #fff;
				transition: all 0.3s;
			}
		}
	}

	&:before {
		position: absolute;
		content: '';
		background-color: var(--primary-color);
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
		z-index: -1;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: var(--primary-color);
		transform: translate3d(0, -100%, 0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		z-index: -1;
	}
}

.main-btn-six {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	outline: none;
	width: 100%;
	background-color: var(--primary-color);
	border: 1.5px solid var(--primary-color);
	color: #fff;
	padding: 12px 16px;
	transition: all 0.5s linear;
	overflow: hidden;
	z-index: 1;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 145%;
	/* 26.1px */
	letter-spacing: -0.09px;
	text-align: center;
	border-radius: 10px;


	&:hover {
		color: var(--grey-scale-500);

		&::before {
			transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}

		&::after {
			transform: translate3d(0, 0, 0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}


		span {
			svg {
				stroke: currentColor;
				color: var(--grey-scale-500) !important;
				transition: all 0.3s;
			}
            i {
				stroke: currentColor;
				color: var(--grey-scale-500) !important;
				transition: all 0.3s;
			}
		}
	}

	&:before {
		position: absolute;
		content: '';
		background-color: #fff;
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
		z-index: -1;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color:#fff;
		transform: translate3d(0, -100%, 0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		z-index: -1;
	}
}





.main-btn-two-banner {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	appearance: none;
	outline: none;
	background-color: #fff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	width: 188px;
	height: 68px;
	transition: all 0.5s linear;
	overflow: hidden;
	z-index: 1;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: -0.1px;
	text-align: center;
	border-radius: 10px;
	line-height: 68px;

	span {
		svg {
			stroke: currentColor;
			color: var(--primary-color);
			transition: all 0.5s linear;
		}
	}

	&:hover {
		color: #fff;

		&::before {
			transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}

		&::after {
			transform: translate3d(0, 0, 0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}

		span {
			svg {
				stroke: currentColor;
				color: #fff;
			}
            i {
				stroke: currentColor;
				color: #fff;
			}
		}
	}

	&:before {
		position: absolute;
		content: '';
		background-color: var(--primary-color);
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
		z-index: -1;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		background-color: var(--primary-color);
		transform: translate3d(0, -100%, 0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		z-index: -1;
	}
}






.location-btn {
	position: relative;

	.btn-secondary {
		color: #fff;
		background-color: transparent;
		border-color: transparent;

		&:focus {
			box-shadow: 0 0 0 0.25rem transparent;
		}

		&::after {

			display: none;


		}
	}

	.location-btn-icon {
		position: absolute;
		top: 5px;
		right: -13px;
	}

}