/**
 * Custom CSS styles for Mykaeltech website
 * Supplements Tailwind CSS with additional styles and animations
 */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Navigation link styles */
.nav-link {
    @apply text-gray-700 hover:text-blue-600 transition-colors font-medium;
}

.nav-link.active {
    @apply text-blue-600 font-semibold;
}

.mobile-nav-link {
    @apply block text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-md transition-colors font-medium;
}

.mobile-nav-link.active {
    @apply text-blue-600 bg-blue-50 font-semibold;
}

/* Button styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-all duration-300 shadow-md hover:shadow-lg font-medium;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-2 rounded-lg hover:bg-gray-300 transition-all duration-300 font-medium;
}

.btn-outline {
    @apply border-2 border-blue-600 text-blue-600 px-6 py-2 rounded-lg hover:bg-blue-600 hover:text-white transition-all duration-300 font-medium;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 p-6;
}

.card-hover {
    @apply transform hover:-translate-y-2;
}

/* Form input styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all;
}

.form-label {
    @apply block text-gray-700 font-medium mb-2;
}

.form-error {
    @apply text-red-500 text-sm mt-1;
}

.form-success {
    @apply text-green-500 text-sm mt-1;
}

/* Alert styles */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.alert-error {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.alert-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

/* Modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

/* Gradient backgrounds */
.gradient-bg-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-bg-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-bg-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Technology card hover effects */
.tech-card {
    @apply transition-all duration-300 transform hover:scale-110;
}

/* Service card styles */
.service-card {
    @apply bg-white rounded-xl shadow-lg p-8 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
}

/* Portfolio filter button styles */
.filter-btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-300;
}

.filter-btn.active {
    @apply bg-blue-600 text-white;
}

.filter-btn:not(.active) {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}

/* Team member card styles */
.team-card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl;
}

/* Accordion styles */
.accordion-item {
    @apply border border-gray-200 rounded-lg mb-3 overflow-hidden;
}

.accordion-header {
    @apply w-full text-left p-4 bg-white hover:bg-gray-50 transition-colors flex justify-between items-center font-medium;
}

.accordion-content {
    @apply p-4 bg-gray-50 border-t border-gray-200;
}

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full border-4 border-gray-200 border-t-blue-600;
}

/* Stats counter styles */
.stat-number {
    @apply text-5xl font-bold text-blue-600 mb-2;
}

.stat-label {
    @apply text-gray-600 text-lg;
}

/* Testimonial card styles */
.testimonial-card {
    @apply bg-white rounded-xl shadow-lg p-8 transition-all duration-300 hover:shadow-xl;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .stat-number {
        @apply text-4xl;
    }
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

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