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

  body {
      font-family: 'Poppins', sans-serif;
      scroll-behavior: smooth;
  }

  .category-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .category-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .resource-showcase {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }

  .hero-pattern {
      background-color: #4f46e5;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  .testimonial-card {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
  }

  .testimonial-card:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hero-image {
      background-image: linear-gradient(rgba(79, 70, 229, 0.7), rgba(79, 70, 229, 0.7)), url('https://images.unsplash.com/photo-1535223289827-42f1e9919769?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
      background-size: cover;
      background-position: center;
  }

  @media (max-width: 768px) {
      .hero-image {
          background-position: 65% center;
      }
  }

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

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  .animate-gradient {
      background-size: 400% 400%;
      animation: gradientFlow 30s ease infinite;
  }

  /* Rainbow ripple text */
  .wave-ripple-text {
      position: relative;
      display: inline-block;
      font-weight: bold;
      background: linear-gradient(270deg,
              #ff0057, #ff7b00, #ffeb00, #0aff99, #00cfff, #8a2be2);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: rainbowFlow 10s linear infinite;
      overflow: hidden;
  }

  /* Add the water wave distortion overlay */
  .wave-ripple-text::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: waveDistort 3s ease-in-out infinite;
      opacity: 0.6;
  }

  /* Smooth color movement */
  @keyframes rainbowFlow {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  /* Wavy ripple distortion */
  @keyframes waveDistort {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-5px) skewX(-5deg);
      }
  }

  /* Subtle animated rainbow background */
  body {
      min-height: 100vh;
      background: linear-gradient(120deg,
              #ffafbd, #ffc3a0, #fff6b7, #a8edea, #d6a4a4, #d4fc79, #96e6a1, #a1c4fd, #c2e9fb, #ffafbd);
      background-size: 200% 200%;
      animation: rainbowShift 18s ease infinite;
  }

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

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }