:where([class^="ri-"])::before { content: "\f3c2"; }
.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);
}
.filter-active {
background: linear-gradient(135deg, #8b5cf6, #ec4899);
color: white;
}
.pricing-card {
transition: all 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.calculator-slider {
-webkit-appearance: none;
appearance: none;
background: #374151;
outline: none;
border-radius: 50px;
height: 8px;
}
.calculator-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #8b5cf6;
cursor: pointer;
}
.calculator-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #8b5cf6;
cursor: pointer;
border: none;
}