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

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

@layer base {
  :root {
    --color-primary: 7 150 127; /* #07967f - Primary Green */
    --color-secondary: 243 244 246; /* #F3F4F6 - Slate Gray */
    --color-accent: 20 184 166; /* #14b8a6 - Teal */
  }

  html {
    scroll-behavior: smooth;
  }

  body.font-arabic {
    font-family: 'Cairo', sans-serif;
  }

  body.font-english {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-[#07967f] hover:bg-[#057563] text-white px-6 py-3 rounded-lg font-bold transition-all shadow-md shadow-[#07967f]/20;
  }
  
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 text-center mb-4;
  }
  
  .section-subtitle {
    @apply text-gray-500 text-center max-w-2xl mx-auto mb-12;
  }

  .card-hover {
    @apply hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
  }
}

/* Glassmorphism utilities */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Infinite Carousel */
.logos-slide {
  display: flex;
  width: max-content;
  animation: slide 35s infinite linear;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}