.animated-background {
  min-height: 480px; /* Same size as before */
  width: 100%;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  background-image: 
      linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), 
      url("image/1.jpg");  /* Initial background image */

  animation: changeBackground 20s infinite; /* Timing for image rotation */
}

@keyframes changeBackground {
  0% {
      background-image: 
          linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), 
          url("image/1.jpg");
  }
  25% {
      background-image: 
          linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), 
          url("https://wallpaperaccess.com/full/2300060.jpg");
  }
  50% {
      background-image: 
          linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), 
          url("https://img.goodfon.com/wallpaper/big/a/cb/chess-best-good-7489.webp");
  }
  75% {
      background-image: 
          linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), 
          url("https://wallpapercat.com/w/full/f/3/f/5549-3840x2160-desktop-4k-the-witcher-game-wallpaper-photo.jpg");
  }
  100% {
      background-image: 
          linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), 
          url("https://store-images.s-microsoft.com/image/apps.20177.9007199266246402.7c18c93d-0b98-4bdb-8459-2bf2a69a1bbf.84b8a60e-d086-4293-a29b-f3ad993e5fab?mode=scale&q=90&h=1080&w=1920");
  }
}

.login-with-google-btn {
  transition: background-color .3s, box-shadow .3s;
    
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;
  
  &:hover {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
  }
  
  &:active {
    background-color: #eeeeee;
  }
  
  &:focus {
    outline: none;
    box-shadow: 
      0 -1px 0 rgba(0, 0, 0, .04),
      0 2px 4px rgba(0, 0, 0, .25),
      0 0 0 3px #c8dafc;
  }
  

}

.login-with-facebook-btn {
    transition: background-color .3s, box-shadow .3s;
      
    padding: 12px 16px 12px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTAsMGgyNHYyNEgweiIvPiAgICA8cGF0aCBmaWxsPSIjMzc0RUIyIiBkPSJNMTUuNzI5LDEyLjQ3MWgyLjU1MkwxOC4zMjQsMjRoLTMuMjV2LTYuMDA3aC0yLjkzM2MtLjAwNS0xLjYzNiwwLTEuMzkxLDAtMy4yOThoMi45MzVWMTAuMjM3IGMtLjAwMy0yLjYyMiwyLjQxMy0yLjcyMywzLjUwMy0yLjcyM2gyLjU0NXYzLjI2OWgtMS43NDVjLTEuMDk1LDAtMS4yMzcsLjUxNi0xLjIzNywxLjI0OXYyLjg3OGg0LjUwMnoiLz48L3N2Zz4=');
    background-color:#4267B2;
    background-repeat: no-repeat;
    background-position: 12px 11px;
    
    &:hover {
      box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }
    
    &:active {
      background-color: #eeeeee;
    }
    
    &:focus {
      outline: none;
      box-shadow: 
        0 -1px 0 rgba(0, 0, 0, .04),
        0 2px 4px rgba(0, 0, 0, .25),
        0 0 0 3px #c8dafc;
    }
    
  
  }

/* Popup Overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Make sure it appears above other content */
}

/* Popup Content */
.popup-content {
  background-color: #b5bbc77b;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

/* Close Button */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

/* Form Styles */
form {
  display: flex;
  flex-direction: column;
}

form label {
  margin-top: 10px;
}

form input {
  margin-top: 5px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form button {
  margin-top: 20px;
  padding: 10px;
  background-color: #127ee3;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}
/* Set up the container */
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background video styles */
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px); /* Adjust the blur value as needed */
  opacity: 0.8; /* Adjust the opacity to make the content more visible */
}

/* Content styles */

/* Footer Styles */
footer {
  background-color: #111a22; /* Matches the main background color */
  color: #93adc8; /* Text color for consistency */
  border-top: 1px solid #243647; /* Subtle border to match the top border style */
  padding: 10px 20px; /* Padding for space inside the footer */
  text-align: center; /* Center the text */
  font-family: "Noto Sans", sans-serif; /* Consistent font-family */
}

footer p {
  margin: 0; /* Remove default margin */
  font-size: 0.875rem; /* Font size similar to other small text */
  line-height: 1.5; /* Line height for readability */
}
/* Header Styles */
header {
  background-color: #111a22; /* Matches the main background color */
  border-bottom: 1px solid #243647; /* Border to match the style of other borders */
  padding: 10px 20px; /* Padding for space inside the header */
  display: flex;
  justify-content: space-between; /* Align items on the left and right */
  align-items: center; /* Center items vertically */
  font-family: "Noto Sans", sans-serif; /* Consistent font-family */
}

header .logo {
  display: flex;
  align-items: center;
}

header .logo h2 {
  color: white; /* Text color for the logo */
  font-size: 1.25rem; /* Size for the logo text */
  font-weight: bold; /* Bold text for prominence */
  margin: 0; /* Remove default margin */
}

header .nav-links {
  display: flex;
  gap: 15px; /* Space between navigation items */
}

header .nav-links a {
  color: #93adc8; /* Link color */
  text-decoration: none; /* Remove underline from links */
  font-size: 1rem; /* Font size for navigation items */
  font-weight: 500; /* Medium weight for navigation items */
  transition: color 0.3s; /* Smooth color transition on hover */
}

header .nav-links a:hover {
  color: #1980e6; /* Highlight color on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
      flex-direction: column; /* Stack items vertically on smaller screens */
      align-items: flex-start; /* Align items to the start */
  }
  header .nav-links {
      margin-top: 10px; /* Space between logo and navigation on smaller screens */
      flex-direction: column; /* Stack navigation items vertically */
      gap: 10px; /* Space between navigation items */
  }
}
.highlight{
  color: red;
}

.Log{
  background-color: rgba(14, 41, 76, 0.406);
  border-radius: 10px;
}