.popup-btn {
  background-image: linear-gradient(to right, #ff5f6d, #ffc371); /* Gradient background */
  color: white; /* White text color */
  border: none; /* No border */
  padding: 12px 24px; /* Padding */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Cursor on hover */
  position: relative; /* Relative positioning */
  overflow: hidden; /* Hide the overflow of the button */
}

.popup-btn::before {
  content: ''; /* Empty content */
  position: absolute; /* Absolute positioning */
  top: -50%; /* Position above the button */
  left: -50%; /* Position to the left of the button */
  width: 200%; /* Double the button width */
  height: 200%; /* Double the button height */
  background-image: linear-gradient(to right, #ffc371, #ff5f6d); /* Gradient background */
  border-radius: 50%; /* Make the shape a circle */
  transform: scale(0); /* Scale the shape to zero */
  opacity: 0.5; /* Set the opacity to 50% */
  transition: all 0.5s ease-in-out; /* Transition animation */
}

.popup-btn:hover::before {
  transform: scale(1); /* Scale the shape to full size */
  opacity: 1; /* Set the opacity to 100% */
}

.popup {
  display: none; /* Hide the popup by default */
  position: fixed; /* Fixed positioning */
  z-index: 1; /* Set the z-index */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scrolling */
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
}

.popup-content {
  background-color: white; /* White background */
  margin: 5% auto; /* Center the popup vertically and horizontally */
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  max-width: 600px;
}

.close {
  color: #aaaaaa; /* Grey text color */
  float: right; /* Float to the right */
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000; /* Black text color on hover/focus */
  text-decoration: none;
  cursor: pointer;
}