/* Custom CSS for TechMaster Systems */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  @apply antialiased;
}

/* Custom Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slider Styles */
.slider-container {
  @apply relative w-full;
  height: 70vh; /* Dynamic height based on viewport */
  min-height: 500px; /* Minimum height for smaller screens */
  max-height: 800px; /* Maximum height for larger screens */
}

.slider-track {
  @apply flex h-full w-full transition-transform duration-500 ease-in-out;
}

.slide {
  @apply min-w-full h-full relative;
}

.slide img {
  @apply w-full h-full object-cover;
}

.slide-content {
  @apply absolute inset-0 flex items-center px-4 md:px-16;
}

/* Slider Controls */
.slider-control {
  @apply absolute top-1/2 -translate-y-1/2 z-10 bg-white/30 hover:bg-white/50 text-white p-3 rounded-full transition;
}

.slider-prev {
  @apply left-4;
}

.slider-next {
  @apply right-4;
}

.slider-dots {
  @apply absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-2 z-10;
}

.slider-dot {
  @apply w-3 h-3 rounded-full bg-white/50 hover:bg-white transition cursor-pointer;
}

.slider-dot.active {
  @apply bg-white;
}
/* Hero Section */
/* Add to your main.css */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    33% { 
        transform: translateY(-15px) rotate(5deg); 
    }
    66% { 
        transform: translateY(-8px) rotate(-3deg); 
    }
}

.hero-particle-1 {
    animation: float 7s ease-in-out infinite;
    animation-delay: 0s;
}

.hero-particle-2 {
    animation: float 5s ease-in-out infinite;
    animation-delay: 1s;
}

.hero-particle-3 {
    animation: float 6s ease-in-out infinite;
    animation-delay: 2s;
}

/* Smooth gradient transitions */
.bg-gradient-to-r {
    transition: background-position 0.5s ease;
    background-size: 200% 200%;
}

.bg-gradient-to-r:hover {
    background-position: 100% 100%;
}

/* Scroll indicator animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

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

/* Custom Scrollbar (works in Chrome/Edge/Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f3f4f6; /* gray-100 */
}

.dark ::-webkit-scrollbar-track {
  background-color: #1f2937; /* gray-800 */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(50, 42, 166, 0.5); /* primary/50 */
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background-color: #322aa6; /* primary */
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #322aa6; /* primary */
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #4338ca;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    @apply bg-white text-black;
    font-size: 12pt;
  }
  
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
}

/* Custom Form Styles (for future forms) */
.input-primary {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:text-white transition;
}

.btn-primary {
  @apply bg-primary text-white font-medium py-2 px-6 rounded-lg transition duration-300;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  @apply bg-secondary text-white font-medium py-2 px-6 rounded-lg transition duration-300;
}

.btn-secondary:hover {
  opacity: 0.9;
}

/* Custom Tooltip (for accessibility) */
[data-tooltip] {
  @apply relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-sm rounded whitespace-nowrap opacity-0 invisible transition-all duration-200;
}

[data-tooltip]:hover::after {
  @apply opacity-100 visible;
}

/* Custom Underline Animation */
.link-underline {
  @apply inline-block relative;
}

.link-underline::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300;
}

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

/* Custom Grid Gap Fix for older browsers */
@supports not (gap: 1rem) {
  .grid-fallback {
    margin: -0.5rem;
  }
  
  .grid-fallback > * {
    margin: 0.5rem;
  }
}

/* Custom Dark Mode Overrides */
.dark .dark\:prose-invert {
  @apply text-gray-300;
}

/* Custom Image Effects */
.img-hover-zoom {
  @apply overflow-hidden;
}

.img-hover-zoom img {
  @apply transition-transform duration-500 ease-in-out;
}

.img-hover-zoom:hover img {
  @apply transform scale-110;
}

/* Custom Pulse Animation (for CTAs) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-custom {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Aspect Ratios */
.aspect-16\/9 {
  aspect-ratio: 16/9;
}

/* Custom Transition Effects */
.transition-all-slow {
  transition: all 0.5s ease;
}

/* Custom Focus Styles */
.focus-primary:focus {
  @apply outline-none ring-2 ring-primary ring-opacity-50;
}