/* Tailwind CSS base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for Eaze Web IT website */

/* Header and Navigation */
header {
    transition: all 0.3s ease;
}

/* Hero Section */
.hero-pattern {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 20%);
}

/* Service Cards */
.service-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* Portfolio Filter */
.filter-btn.active {
    background-color: #3b82f6;
    color: white;
}

/* Form Styles */
input, textarea, select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all;
}

/* Button Styles */
.btn-primary {
    @apply bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium;
}

.btn-secondary {
    @apply border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors font-medium;
}

/* Footer */
footer .social-icon:hover {
    @apply text-blue-600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mobile-menu {
        @apply block;
    }
    
    .hidden-mobile {
        @apply hidden;
    }
    
    .hero-text {
        @apply text-center;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Custom utility classes */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Project Card */
.project-card:hover .project-overlay {
    @apply opacity-100;
}

/* Team Member Card */
.team-member:hover {
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* Form validation */
.error {
    @apply border-red-500;
}

.success {
    @apply border-green-500;
}