/* Custom styles beyond Tailwind */

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

/* Custom hover effects */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Custom section spacing */
.section-spacing {
    padding: 4rem 0;
}

/* Custom text gradient */
.text-gradient {
    background: linear-gradient(45deg, #2596be, #3ca4d6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom button styles */
.btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-md transition-all duration-300;
}

.btn-primary:hover {
    @apply bg-accent2 transform -translate-y-1;
}

/* Custom card styles */
.card {
    @apply bg-white rounded-lg shadow-md p-6 transition-all duration-300;
}

.card:hover {
    @apply shadow-lg transform -translate-y-1;
}

/* Custom form styles */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Custom section backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, #2596be 0%, #3ca4d6 100%);
}

/* Custom navigation styles */
.nav-link {
    @apply relative text-gray-600 hover:text-primary transition-colors duration-300;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
}

.nav-link:hover::after {
    @apply w-full;
}

/* Custom footer styles */
.footer-link {
    @apply text-gray-300 hover:text-white transition-colors duration-300;
}

/* Custom service card styles */
.service-card {
    @apply bg-white rounded-lg shadow-md p-6 transition-all duration-300;
}

.service-card:hover {
    @apply shadow-lg transform -translate-y-1;
}

.service-icon {
    @apply w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mb-4;
}

/* Custom testimonial styles */
.testimonial-card {
    @apply bg-white rounded-lg shadow-md p-6 relative;
}

.testimonial-quote {
    @apply text-4xl text-primary absolute -top-4 -left-2 opacity-20;
}

/* Custom contact form styles */
.contact-form {
    @apply space-y-6;
}

.contact-form input,
.contact-form textarea {
    @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
}

.contact-form textarea {
    @apply h-32;
}

/* Custom loading animation */
.loading-spinner {
    @apply w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-accent2;
} 