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

.animate-scroll {
  animation: scroll 30s linear infinite;
  min-width: 100%;
  display: flex;
}

.testimonial-slider {
  width: 100%;
  overflow: hidden;
}

/* Add smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent zoom on mobile */
body, html {
  touch-action: pan-x pan-y;
  overflow-x: hidden;
}

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Gradient effect for cards */
.card-hover-gradient:hover {
  background-image: linear-gradient(to bottom right, rgba(0, 100, 250, 0.05), rgba(255, 255, 255, 0));
}

/* Subtle frosted glass effect for certain elements */
.frosted-glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Extra effects for mobile */
@media (max-width: 768px) {
  .testimonial-slider {
    padding-bottom: 20px;
  }
  
  .hero-section {
    padding-top: 24px;
    padding-bottom: 40px;
  }
}

/* Ensure images don't break layout */
img {
  max-width: 100%;
}

/* Animation for hover states */
.hover-scale {
  transition: transform 0.3s ease-in-out;
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Focus state styling */
/* a:focus, button:focus {
  outline: 2px solid rgba(0, 100, 250, 0.5);
  outline-offset: 2px;
}

/* Style for code blocks */
pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Force dark mode text to be readable */
@media (prefers-color-scheme: dark) {
  pre, code {
    color: #1a1a1a !important;
  }
}