/* Custom CSS for BBX Infotech */

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

.nav-link.active {
    @apply text-primary;
}

.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,
.nav-link.active::after {
    @apply w-full;
}

.mobile-nav-link {
    @apply text-gray-700 hover:text-primary hover:bg-gray-50 block px-3 py-2 rounded-md text-base font-medium transition-all duration-300;
}

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

/* Navbar scroll effect */
.navbar-scrolled {
    @apply bg-white/95 backdrop-blur-md border-b border-gray-200;
}

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

.hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Button Styles */
.btn-primary {
    @apply bg-gradient-to-r from-primary to-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:shadow-xl transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300;
}

.btn-secondary {
    @apply bg-gradient-to-r from-secondary to-teal-600 text-white px-8 py-3 rounded-full font-semibold hover:shadow-xl transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-teal-300;
}

.btn-outline {
    @apply border-2 border-primary text-primary px-8 py-3 rounded-full font-semibold hover:bg-primary hover:text-white transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300;
}

/* Card Styles */
.feature-card {
    @apply bg-white p-8 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100;
}

.service-card {
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 group;
}

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

.testimonial-card {
    @apply bg-white p-6 rounded-xl shadow-lg border border-gray-100;
}

/* Icon Styles */
.feature-icon {
    @apply w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center text-white text-2xl mb-6 mx-auto group-hover:scale-110 transition-transform duration-300;
}

.service-icon {
    @apply w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center text-white text-xl mb-4 group-hover:scale-110 transition-transform duration-300;
}

/* Typography */
.section-title {
    @apply text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight;
}

.section-subtitle {
    @apply text-xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed;
}

.gradient-text {
    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
}

/* Social Icons */
.social-icon {
    @apply w-10 h-10 bg-gray-800 hover:bg-primary rounded-full flex items-center justify-center text-white transition-all duration-300 transform hover:scale-110;
}

/* Footer Links */
.footer-link {
    @apply text-gray-400 hover:text-white transition-colors duration-300;
}

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

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300 resize-none;
}

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

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

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

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

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
}

/* Notification Styles */
.notification {
    @apply fixed top-20 right-4 z-50 px-6 py-4 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300;
}

.notification.show {
    @apply translate-x-0;
}

.notification.success {
    @apply bg-success text-white;
}

.notification.error {
    @apply bg-error text-white;
}

.notification.info {
    @apply bg-primary text-white;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .section-title {
        @apply text-3xl;
    }
    
    .hero-gradient {
        min-height: 70vh;
    }
    
    .feature-card {
        @apply p-6;
    }
    
    .service-card {
        @apply p-4;
    }
}

/* 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-blue-600;
}

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

/* Focus States */
*:focus {
    outline: 2px solid theme('colors.primary');
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .nav-link {
        @apply border border-transparent hover:border-primary;
    }
}

/* Motion Reduced Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .fixed {
        @apply static;
    }
    
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl {
        @apply shadow-none;
    }
}