:where([class^="ri-"])::before { content: "\f3c2"; }
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-bg {
background: linear-gradient(-45deg, #5727b0, #8b5cf6, #ec4899, #3b82f6);
background-size: 400% 400%;
animation: gradientFlow 15s ease infinite;
}
.gradient-text {
background: linear-gradient(90deg, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.btn-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-hover:hover {
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3), 0 4px 6px -2px rgba(139, 92, 246, 0.2);
}
input:focus {
outline: none;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes slideIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.chatbot-widget {
animation: bounce 3s ease-in-out infinite;
}
.chatbot-widget:hover {
animation: none;
transform: scale(1.1);
transition: transform 0.3s ease;
}
.chat-window {
animation: slideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: bottom right;
}
.chat-message-bot {
animation: fadeIn 0.5s ease-out;
}
.chat-message-user {
animation: fadeIn 0.5s ease-out;
}

@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-message {
opacity: 0;
}
.chat-message.animate {
animation: slideUp 0.5s ease forwards;
}
.chat-message:nth-child(2) {
animation-delay: 0.2s;
}

@keyframes rotateClockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateCounterClockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}