/* 
===========
Login hero
=========== 
*/

.login-hero{
  margin-top: 100px;
  height: 300px;
  background: linear-gradient(rgba(17, 0, 0, 0.7),rgba(17,0,0,.7)), url('../resources/images/website/cerveza.webp');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  padding:0 8%;
  color: var(--white-color);
}

.login-hero-content h1{
  font-size:50px;
}

.login-hero-content p{
  color:var(--silver-color);
}

/* 
==========
Login
==========
*/

.login-section{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top: 5em;
}

.login-container{
  background: var(--dark-color);
  padding:50px;
  border-radius:15px;
  width:100%;
  max-width:420px;
}

.login-header h2{
  font-size:28px;
  margin-bottom:10px;
  color: var(--yellow-color);
}

.login-header p{
  color: var(--silver-color);
  margin-bottom:30px;
}

.input-group{
  position:relative;
  margin-bottom:20px;
}

.input-group i{
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  top:50%;
  left:15px;
  transform:translateY(-50%);
  color:var(--scarlet-color);
}

.input-group i svg{
  width: 100%;
  height: 100%;
  fill: var(--grey-color);
}

.input-group input{
  width:100%;
  padding:15px 15px 15px 45px;
  border-radius:10px;
  border: 1px solid var(--grey-color);
  background: var(--dark-color);
  color: var(--silver-color);
  font-size:16px;
}

.input-group input:focus{
  outline:none;
  border:1px solid  var(--yellow-color);
}

.checkbox-group{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:30px;
  color: var(--silver-color);
  font-size:14px;
}

.checkbox-group input[type="checkbox"]{
  accent-color: var(--yellow-color);
  width:16px;
  height:16px;
}

button[type="submit"]{
  width:100%;
  padding:15px;
  border:none;
  background:var(--scarlet-color);
  color: var(--white-color);
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  transition:.3s;
  font-size:16px;
}

button[type="submit"]:hover{
  transform:translateY(-3px);
}

.login-footer-text{
  margin-top:20px;
  color: var(--silver-color);
  font-size:14px;
}

.login-footer-text a{
  color: var(--yellow-color);
  text-decoration:none;
  transition:.3s;
}

.login-footer-text a:hover{
  text-decoration:underline;
}