@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --navy-dark: #001a2e;
  --black-bg: #0a0e27;
  --cyan-accent: #00d9ff;
  --gold-accent: #ffd700;
  --red-accent: #ff4757;
}
body {
  background: linear-gradient(to bottom, #1a202c, #2d3748);
  color: white;
  font-family: 'Montserrat', sans-serif;
}
/* Animations */
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fade-in-down 1s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 1s ease-out;
}

.delay-300 {
  animation-delay: 300ms;
}

/* Service Card Hover Effect */
.service-card:hover .service-icon {
  transform: scale(1.1);
  filter: brightness(1.2);
}

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

::-webkit-scrollbar-track {
  background: var(--black-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--cyan-accent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-accent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-text {
    font-size: 2rem;
  }
  
  .service-grid {
    grid-template-columns: 1fr;
  }
}