:root {
    --color-white: #fff;
    --color-white-light: #F8F8F8;
    --color-black: #0A2426;
    --color-easter-blue: #3FE1EC;
    --color-easter-blue-2: #D0FDF4;
    --color-green: #03C79A;
/*     --color-tangy-teal: #63F5CF; */
    --color-tangy-teal: #00D8A0;
	--color-tangy-teal-dark: #00D8A0;
    --color-gray-shade-1: #303F66;
	 --color-purple: #9B5CFF;
    --color-orange: #D9A73F;
	--color-blue: #001242;
	--border-radius-12: 0.75rem;
	--border-radius-15: 0.9375rem;
	--border-radius-22: 1.375rem;
	--border-radius-23: 1.4375rem;
	--border-radius-30: 1.875rem;
	--border-radius-33: 2.0625rem;
	--border-radius-40: 2.5rem;
}

.text_easter_blue {
    color: var(--color-easter-blue);
}

.text_tangy_teal {
    color: var(--color-tangy-teal);
}
.text_tangy_teal-dark {
    color: var(--color-tangy-teal-dark);
}

.text_black {
    color: var(--color-black);
}

.text_blue {
    color: var(--color-blue);
}

.gradient-1 {
    background: linear-gradient(95deg, #9B5CFF, #622ABA);
}

.gradient-2 {
  background: linear-gradient(90deg, #57C6A9, #A8FFE8);
}

/* Make sure content stays above */
.gradient-2 > * {
  position: relative;
  z-index: 1;
}

.gradient-3 {
    background: linear-gradient(134deg, #5D359D, #00A57F)
}

.border-radiux-30 {
	border-radius:30px;
}

/* Button Hover Effect */
.button_1,
.button_2,
.button_3:not(input),
.snake-btn {
	position: relative;
	padding: 0.375rem 1.125rem;
	border-radius: 2.5rem;
	font-weight: 700;
	font-size: 0.938rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	color: var(--btn-text);
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
	z-index: 1;
	text-decoration: none;
}

/* Animated Border */
.button_1::before,
.button_2::before, 
.button_3:not(input)::before, 
.snake-btn::before {
	content: "";
	position: absolute;
	width: 150%;
	height: 500%;
	background: conic-gradient(transparent,
		transparent,
		transparent,
		rgba(255, 255, 255, 0.8),
		var(--snake-color),
		transparent);
	animation: rotate 3s linear infinite;
	animation-play-state: paused;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -2;
}

.button_1:hover::before,
.button_2:hover::before,
.button_3:not(input):hover::before,
.snake-btn:hover::before {
	opacity: 1;
	animation-play-state: running;
}

/* Inner Background */
.button_1::after,
.button_2::after,
.button_3:not(input)::after,
.snake-btn::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: var(--btn-bg);
	border-radius: inherit;
	z-index: -1;
	transition: background 0.3s ease, opacity 0.3s ease;
}

/* Hover Effects */
.button_1:hover,
.button_2:hover,
.button_3:not(input):hover,
.snake-btn:hover {
	transform: translateY(-2px);
	box-shadow: 1px 6px 15px rgba(0, 0, 0, 0.2);
}

.button_1:active,
.button_2:active,
.button_3:not(input):active,
.snake-btn:active {
	transform: translateY(0);
}

/* Focus (Accessibility) */
.button_1:focus-visible,
.button_2:focus-visible,
.button_3:not(input):focus-visible,
.snake-btn:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* ================= Variants ================= */

/* Primary */
.gradient-2 {
	--btn-bg: #63F5CF;
	--btn-text: #0A2426;
	--snake-color: #63F5CF;
}

/* Secondary */
.button_3:not(input).bg-white,
.btn-secondary {
	--btn-bg: #FFFFFF;
	--btn-text: #0A2426;
	--snake-color: #FFFFFF;
}

/* Tertiary */
.gradient-1.button_1:not(input),
.btn-tertiary {
	--btn-bg: linear-gradient(95deg, #9B5CFF 0%, #622ABA 100%);
	--btn-text: #FFFFFF;
	--snake-color: #9B5CFF;
}

/* ================= Animation ================= */
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}