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

@layer base {
  :root {
    --color-primary: #1E4D2B;
    --color-secondary: #4CAF50;
    --color-accent: #FFD700;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all duration-300;
  }
  
  .btn-secondary {
    @apply bg-secondary text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all duration-300;
  }
  
  .section-padding {
    @apply py-16 md:py-24;
  }
  
  .container-padding {
    @apply px-4 md:px-8 lg:px-16;
  }
}

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

@keyframes colorChange {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes shine {
  0% { background-position: -100% 50%; }
  100% { background-position: 200% 50%; }
}

.animate-scroll {
  animation: scroll 30s linear infinite;
}

.partner-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(76, 175, 80, 0.95),
    rgba(30, 77, 43, 0.95),
    rgba(255, 215, 0, 0.95),
    rgba(33, 150, 243, 0.95)
  );
  background-size: 300% 300%;
  animation: colorChange 8s ease-in-out infinite;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
}

.partner-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shine 3s infinite;
}

.partner-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
  background-position: 100% 50%;
}

.partner-gradient {
  background: linear-gradient(
    45deg,
    #ffffff,
    #f0f0f0,
    #ffffff
  );
  background-size: 200% 200%;
  animation: colorChange 4s ease-in-out infinite;
}

.partners-container {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,1) 95%, rgba(255,255,255,0) 100%);
  padding: 2rem 0;
}