#gradient-canvas {
  width: 100%;
  height: 100%;
  --gradient-color-1: #5a51eb;
  /* Slightly lighter than base */
  --gradient-color-2: #4F45E4;
  /* Your specified color */
  --gradient-color-3: #4439d6;
  /* Slightly darker */
  --gradient-color-4: #3a30c7;
  /* A bit darker */
}

#gradient-canvas-2 {
  width: 100%;
  height: 100%;
  --gradient-color-1: #5a51eb;
  /* Slightly lighter than base */
  --gradient-color-2: #4F45E4;
  /* Your specified color */
  --gradient-color-3: #4439d6;
  /* Slightly darker */
  --gradient-color-4: #3a30c7;
  /* A bit darker */
}

.modal {
  display: none;
}

.modal.active {
  display: block;
}

.modal-content {
  transform: scale(0.7);
  transition: all 0.3s ease;
}

.modal.active .modal-content {
  transform: scale(1);
}

.cursor-pointer {
  transition: all 0.3s ease;
}

.cursor-pointer:hover .relative.overflow-hidden {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.cursor-pointer:hover img.absolute.inset-0 {
  transform: scale(1.05);
  transition: transform 0.6s ease;
}

.cursor-pointer img.absolute.inset-0 {
  transition: transform 0.6s ease;
}