/* Custom styles to complement Tailwind CSS */

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

/* Custom focus styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

/* Custom transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Mobile menu styles */
.mobile-menu {
    @apply fixed inset-0 z-40;
    background-color: rgba(0, 0, 0, 0.5);
}

.mobile-menu-content {
    @apply fixed inset-y-0 right-0 max-w-xs w-full bg-white shadow-xl;
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Form styles */
.form-input {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm;
}

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

/* Button styles */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

/* Card styles */
.card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

/* Hero section styles */
.hero {
    @apply relative bg-gray-900;
    min-height: 100vh;
}

.hero-content {
    @apply relative z-10;
}

/* Navigation styles */
.nav-link {
    @apply text-gray-800 hover:text-gray-600 px-3 py-2 rounded-md text-sm font-medium;
}

.nav-link-active {
    @apply text-indigo-600 hover:text-indigo-500;
}

/* Footer styles */
.footer {
    @apply bg-gray-800 text-gray-400;
}

/* Responsive image styles */
.img-cover {
    @apply w-full h-full object-cover;
}

/* Custom container styles */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Section spacing */
.section {
    @apply py-12 sm:py-16;
}

/* Text gradient */
.text-gradient {
    background: linear-gradient(to right, #4f46e5, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

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

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