/* Custom CSS for background and animations */
  body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
      color: #e0e0e0;
      /* Light gray text for dark background */
  }

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

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

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

  /* Custom scrollbar for a sleek look */
  ::-webkit-scrollbar {
      width: 8px;
  }

  ::-webkit-scrollbar-track {
      background: #1a1a2e;
  }

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

  ::-webkit-scrollbar-thumb:hover {
      background: #00cccc;
  }

  /* Card hover effect */
  .card-hover-effect {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

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

  /* Button hover effect */
  .btn-primary {
      transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  }

  .btn-primary:hover {
      background-color: #00cccc;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
  }

  /* Styles for the 3D canvas */
  #three-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      /* Ensure it stays in the background */
      pointer-events: none;
      /* Allow clicks to pass through to elements below */
  }

  /* Ensure content is above the 3D canvas */
  section {
      position: relative;
      /* Needed for z-index to work against the absolute canvas */
      z-index: 1;
  }