style.css

/* Custom Styles for SearchExperts Pro */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom gradient backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #1f2937 100%);
}

/* Custom animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #dc2626;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b91c1c;
}

/* Focus styles */
input:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Custom button hover effects */
.btn-hover-effect {
    position: relative;
    overflow: hidden;
}

.btn-hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-hover-effect:hover::before {
    left: 100%;
}

/* Loading animation */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% {
        color: rgba(0, 0, 0, 0);
    text-shadow:
        .25em 0 0 rgba(0, 0, 0, 0),
        .5em 0 0 rgba(0, 0, 0, 0);
    }
    40% {
        color: white;
        text-shadow:
            .25em 0 0 rgba(0, 0, 0, 0),
        .5em 0 0 rgba(0, 0, 0, 0);
    }
    60% {
        text-shadow:
            .25em 0 0 white,
            .5em 0 0 rgba(0, 0, 0, 0);
    }
    80%, 100% {
        text-shadow:
            .25em 0 0 white,
            .5em 0 0 white;
    }
}