.colorful-cta-93 {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	text-decoration: none;
	cursor: pointer;
	font-weight: 800;
	font-size: 24px;
	padding: 10px 20px;
	border-radius: 50px;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.colorful-cta-93-text {
	--gradient-start: #ff0000;
	--gradient-end: #8a2be2;
	background: linear-gradient(90deg, var(--gradient-start), #ff7f00, #ffff00, #00ff00, #0000ff, var(--gradient-end), var(--gradient-start), #ff7f00, #ffff00);
	background-size: 200% auto;
	background-position: 0% center;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	display: inline-block;
	letter-spacing: 1px;
}

/* Only animate the gradient on hover */
.colorful-cta-93:hover .colorful-cta-93-text {
	animation: gradient-flow 4s linear infinite;
}

@keyframes gradient-flow {
	0% {
		background-position: 0% center;
	}
	100% {
		background-position: -200% center;
	}
}

.colorful-cta-93-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* For smooth line extension */
	width: 35px; /* Base width */
	transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.colorful-cta-93-icon svg {
	color: #ffffff;
	width: 100%;
	height: auto;
}

.colorful-cta-93-icon .arrow-line {
	stroke-dasharray: 40;
	stroke-dashoffset: 15; /* Hide part of the line initially */
	transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.colorful-cta-93-icon .arrow-head {
	transform: translateX(-5px); /* Pull head back initially */
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover Animation: Extend the arrow */
.colorful-cta-93:hover .colorful-cta-93-icon {
	width: 50px; /* Expand container */
}

.colorful-cta-93:hover .arrow-line {
	stroke-dashoffset: 0; /* Reveal full line */
}

.colorful-cta-93:hover .arrow-head {
	transform: translateX(5px); /* Push head forward */
}

.colorful-cta-93:hover {
	background-color: rgba(255, 255, 255, 0.05);
}