/* Maintaining the same style on hover, focus, and active states */
.social-btn.facebook:hover, .social-btn.facebook:focus, .social-btn.facebook:active,
.social-btn.google:hover, .social-btn.google:focus, .social-btn.google:active,
.social-btn.instagram:hover, .social-btn.instagram:focus, .social-btn.instagram:active,
.social-btn.linkedin:hover, .social-btn.linkedin:focus, .social-btn.linkedin:active {
  color: inherit; /* Keeps the color the same as the normal state */
  border-color: inherit; /* Keeps the border color the same as the normal state */
  background-color: transparent; /* Ensures background stays transparent */
}

.social-buttons {
  display: flex;
  flex-direction: row; /* Align buttons horizontally */
  justify-content: center; /* Center buttons horizontally */
  gap: 10px; /* Adjust the space between buttons */
}

.social-btn {
  border: 2px solid gray; /* Gray outer circle */
  border-radius: 50%; /* Make the buttons circular */
  width: 50px; /* Diameter of the button */
  height: 50px; /* Diameter of the button */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Transparent background */
  color: gray; /* Icon color */
  cursor: pointer;
}

.social-btn i {
  font-size: 24px; /* Icon size */
}

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

.sign-in {
        padding: 10px;
}

/* .sign-up {
	padding: 10px;
  min-height: 25vh;
  background-size: 200% 200%;
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 50%, #fad0c4 100%);
  animation: backgroundAnimation 10s ease infinite;
} */

.sign-up {
	padding: 10px;
  background-image: linear-gradient(to right, #0062E6, #33AEFF);
}

.btn-white {
  color: white; /* White text */
  border: 2px solid white; /* White border */
  background-color: transparent; /* Transparent background */
  transition: none; /* Disable transitions */
}

.btn-white:hover, .btn-white:focus, .btn-white:active {
  color: white; /* Maintain white text */
  border: 2px solid white; /* Maintain white border */
  background-color: transparent; /* Maintain transparency */
  box-shadow: none; /* No shadow on focus */
}