/* Custom animations and styles */
body {
    background-color: #000;
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center top;
}

@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(34, 211, 238, 0.5), inset 0 0 20px rgba(34, 211, 238, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(34, 211, 238, 0.8), inset 0 0 30px rgba(34, 211, 238, 0.2);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 12px));
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(calc(-50% - 12px));
    }
    100% {
        transform: translateX(0);
    }
}

/* Team Slider Styles */
.team-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    scroll-behavior: smooth;
}

.team-slider-track {
    display: flex;
    gap: 24px;
    padding-right: 24px;
    scroll-behavior: smooth;
}

.team-slider-item {
    cursor: pointer;
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

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

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-slideUp {
    animation: slideUp 0.6s ease-out;
}

/* Navigation links */
.nav-link {
    @apply text-gray-300 hover:text-cyan-400 transition-colors relative pb-1;
}

.nav-link::after {
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-cyan-400 to-blue-500 transition-all duration-300;
    content: '';
}

.nav-link:hover::after {
    @apply w-full;
}

/* Service cards hover effect */
.service-card {
    @apply transform transition-all duration-300 hover:translate-y-[-8px];
}

.service-card:hover {
    @apply shadow-2xl;
}

/* Testimonial cards */
.testimonial-card {
    @apply transition-all duration-300;
}

.testimonial-card:hover {
    @apply transform translate-y-[-4px];
}

/* Team member cards */
.team-member {
    @apply transition-all duration-300;
}

.team-member:hover h3 {
    @apply text-cyan-400;
}

/* Blog cards */
.blog-card {
    @apply transition-all duration-300 h-full;
}

.blog-card:hover {
    @apply transform translate-y-[-8px];
}

/* Industry cards */
.industry-card {
    @apply transition-all duration-300 p-6 hover:shadow-lg hover:shadow-cyan-500/20;
}

/* FAQ items */
.faq-item {
    @apply transition-all duration-300;
}

.faq-toggle {
    @apply relative;
}

.faq-toggle:hover {
    @apply bg-opacity-80;
}

.faq-item.open .faq-answer {
    @apply block;
}

.faq-item.open .faq-toggle span:last-child {
    @apply rotate-180;
}

/* Modal styles */
.modal {
    @apply flex items-center justify-center;
}

.modal-box {
    @apply rounded-2xl shadow-2xl shadow-black;
}

/* Input and textarea focus states */
input:focus, textarea:focus, select:focus {
    @apply ring-2 ring-cyan-500/50;
}

/* Success message */
.form-success {
    @apply p-4 rounded-lg bg-green-500/10 border border-green-500/50 text-green-400;
}

/* Error message */
.form-error {
    @apply p-4 rounded-lg bg-red-500/10 border border-red-500/50 text-red-400;
}

/* Loading state */
.loading {
    @apply opacity-50 cursor-not-allowed;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-20 animate-pulse;
}

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

/* Custom 3D Transforms */
.perspective-1000 {
    perspective: 1000px;
}

.rotate-y-12 {
    transform: rotateY(-12deg) rotateX(5deg);
}

.rotate-y-12:hover {
    transform: rotateY(-5deg) rotateX(2deg);
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal.stagger-1 { transition-delay: 100ms; }
.reveal.stagger-2 { transition-delay: 200ms; }
.reveal.stagger-3 { transition-delay: 300ms; }

/* Gradient Text Utility */
.gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600;
}

/* Glassmorphism Utilities */
.glass-panel {
    @apply bg-gray-900/60 backdrop-blur-xl border border-white/10;
}

/* Neon Glows */
.glow-cyan {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Scrollbar styling */
::-webkit-scrollbar {
    @apply w-2;
}

::-webkit-scrollbar-track {
    @apply bg-gray-900;
}

::-webkit-scrollbar-thumb {
    @apply bg-cyan-500 rounded-lg;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-cyan-400;
}

/* Gradient text */
.gradient-text {
    @apply bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 bg-clip-text text-transparent;
}

/* Button hover effects */
button {
    @apply transition-all duration-300;
}

button:active {
    @apply scale-95;
}

/* Responsive grid items */
@media (max-width: 768px) {
    .service-card {
        @apply hover:translate-y-[-4px];
    }
    
    .blog-card {
        @apply hover:translate-y-[-4px];
    }
}

/* Glass morphism effect */
.glass {
    @apply backdrop-blur-md bg-white/10 border border-white/20 rounded-xl;
}

/* Custom z-index layers */
.z-behind {
    @apply -z-10;
}

.z-front {
    @apply z-20;
}

/* Text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animation for page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

h1, h2, h3 {
    @apply animate-slideUp;
}

/* Section stagger animation */
section {
    @apply animate-slideUp;
}

/* Links styling */
a {
    @apply transition-colors duration-300;
}

/* Icon hover effects */
.text-4xl, .text-5xl, .text-6xl {
    @apply transition-transform duration-300;
}

.service-card:hover .text-2xl {
    @apply animate-float;
}

/* Form input styling */
input, textarea, select {
    @apply bg-gray-900 border border-cyan-500/30 rounded-lg text-white placeholder-gray-500 transition-all duration-300;
}

input:hover, textarea:hover, select:hover {
    @apply border-cyan-500/50;
}

/* Backdrop blur effects */
.backdrop-blur-md {
    @apply supports-[backdrop-filter]:bg-white/10;
}

/* Services Slider */
.slider-container {
    width: 100%;
}

.slider-track-row1 {
    animation: scroll 40s linear infinite;
    width: fit-content;
}

.slider-track-row2 {
    animation: scroll-right 45s linear infinite;
    width: fit-content;
}

.slider-track-row1:hover,
.slider-track-row2:hover {
    animation-play-state: paused;
}

.slider-item {
    cursor: pointer;
}

/* Dark mode specific */
@media (prefers-color-scheme: dark) {
    body {
        @apply bg-black text-white;
    }
}

/* Print styles */
@media print {
    .nav-link, button {
        @apply hidden;
    }
}