/* 
 * Custom CSS for AOURIK DIGITAL
 * Freelance Web Developer CRM System
 */

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

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

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

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom shadows */
.shadow-custom {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.shadow-hover {
    transition: all 0.3s ease;
}

.shadow-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Custom buttons */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105;
}

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

/* Hero section */
.hero-bg {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23f7fafc"><polygon points="1000,100 1000,0 0,100"/></svg>');
    background-size: cover;
    background-position: bottom;
}

/* Portfolio cards */
.portfolio-card {
    @apply bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2;
}

/* Service cards */
.service-card {
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
}

/* Contact form */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-textarea {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

/* Navigation */
.nav-link {
    @apply text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300;
}

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

/* Mobile menu */
.mobile-menu {
    @apply md:hidden;
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* Flash messages */
.flash-message {
    @apply fixed top-4 right-4 px-4 py-3 rounded-md shadow-lg z-50 max-w-sm;
}

.flash-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.flash-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.flash-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.flash-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Responsive utilities */
@screen sm {
    .container {
        max-width: 640px;
    }
}

@screen md {
    .container {
        max-width: 768px;
    }
}

@screen lg {
    .container {
        max-width: 1024px;
    }
}

@screen xl {
    .container {
        max-width: 1280px;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: black;
        background: white;
    }
}