#password_rules ul li {  
  color: white;  
}  

#password_rules ul li.complete {  
  color: #5db406;  
}  

@media (max-width: 430px) {  
  .loginFooter {  
    width: 100% !important;  
    height: 22% !important;  
  }  
  .login-logo p {
    font-size: 1.8rem; /* Reduce font size for smaller screens */
  }
  .actions a {
    font-size: 0.85rem; /* Smaller font size for smaller screens */
    padding: 0.5rem 1rem; /* Adjust button padding */
  }
  .bottom-banner {
    width: 90%; /* Adjust width for smaller screens */
    font-size: 13px; /* Slightly reduce font size */
  }
  .logincard {
    padding: 10px 20px; /* Adjust padding for smaller screens */
  }
}

@media (max-width: 393px) {  
  .loginFooter {  
    width: 100% !important;  
    height: 28% !important;  
  }
  .login-logo p {
    font-size: 1.6rem; /* Further reduce font size */
  }
  .actions a {
    font-size: 0.75rem; /* Even smaller font size */
    padding: 0.4rem 0.9rem; /* Adjust button padding */
  }
  .bottom-banner {
    font-size: 12px; /* Reduce font size further */
  }
  .logincard {
    max-width: 95%; /* Ensure the card stays within screen width */
  }
}

body {  
  margin: 0;  
  padding: 0;  
  font-family: "Montserrat", sans-serif;  
  display: flex;  
  background: url("images/ssabackground.svg") no-repeat center center fixed;  
  justify-content: center;  
  align-items: center;  
  background-size: cover;  
}  

.login-logo p {  
  font-size: 2.3rem;  
  font-weight: 800;  
  text-transform: uppercase;  
  margin-bottom: 1rem;  
  background: linear-gradient(to right, #361013, #5f4243, #776767);  
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent;  
}  

.actions {  
  display: flex;  
  gap: 0.75rem;  
  margin: 5px 0px;  
  text-align: center;  
  flex-direction: column; /* Stacked buttons on smaller screens */
}  

.actions a {  
  text-decoration: none;  
  width: 100%;  
  background: #a37177;  
  padding: 0.55rem 1.2rem;  
  border-radius: 0.9rem;  
  font-weight: bold;  
  color: white;  
  font-size: 0.95rem;  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);  
  transition: all 0.3s ease;  
}  

.actions a:hover {  
  background-color: #3d181a;  
  color: white;  
}  

.highlighted-heading {  
  background-color: #f0e68c;  
  border-radius: 10px;  
  padding: 10px;  
  display: inline-block;  
}  

.bottom-banner p,  
.bottom-banner h2 {  
  margin: 5px 0;  
  font-size: 14.5px;  
}  

.bottom-banner {  
  position: relative;  
  left: 50%;  
  transform: translateX(-50%);  
  width: 500px;  
  max-width:150%;  
  padding: 10px 20px;  
  background: rgba(255, 255, 255, 0.15);  
  backdrop-filter: blur(10px);  
  -webkit-backdrop-filter: blur(10px);  
  color: #000;  
  text-align: center;  
  z-index: 999;  
  font-weight: bold;  
  font-size: 15px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);  
  border-radius: 12px;  
}  

.bottom-wrapper {  
  display: flex;  
  flex-direction: column;  
  gap: 10px;  
  margin-bottom: 12px;  
}  

.logincard {  
  position: relative;  
  left: 50%;  
  transform: translateX(-50%);  
  width: fit-content;  
  max-width: 90%;  
  padding: 12px 24px;  
  background: rgba(255, 255, 255, 0.15);  
  backdrop-filter: blur(10px);  
  -webkit-backdrop-filter: blur(10px);  
  color: #000;  
  text-align: left;  
  z-index: 999;  
  font-weight: bold;  
  font-size: 15px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);  
  border-radius: 12px;  
}  

.registerredirectbtn {  
  font-weight: 100;  
  font-size: 12px;  
  text-align: center;  
  margin: 0;  
  padding: 0;  
}  

.registerredirectbtn a {  
  font-weight: 600;  
}
@media screen and (max-width: 480px) {
  
  .top-banner p,
  .bottom-banner p {
    font-size: 12px;
  }

  .hero{
    padding-top:100px;
  }
  .top-banner,
  .bottom-banner {
    padding: 10px 0px;
    font-size: 13px;
    width:100%;
    max-width:80%;
    
  }
  .bottom-wrapper{
    margin-bottom:50px;
  }
  .actions a:hover {
      background-color: #3d181a;
      color: white;
    }

  .hero h1 {
    font-size: 1.5rem;
  }

  .actions a {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
  }

  .highlighted-heading {
    font-size: 0.95rem;
    padding: 6px;
  }
}
 
  @media screen and (max-width: 768px) {
    body {
    background: url('images/ssabackground-vertical.svg') no-repeat center top scroll;
    background-size: cover;
    background-position: top center;
  }
  .actions a:hover {
      background-color: #3d181a;
      color: white;
    }
  .top-banner,
  .bottom-banner {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .top-banner p{
    font-size: 12px;
  }
.actions a:hover {
      background-color: #3d181a;
      color: white;
    }
  
  .bottom-banner p,
  .bottom-banner h2 {
    font-size: 13px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .actions {
    flex-direction: row;
    gap: 10px;
  }

  .actions a {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }

  .highlighted-heading {
    font-size: 1rem;
    padding: 8px;
  }
}