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

.login-hero{
background:var(--silver-color);
padding:30px 20px;
text-align:center;
}

.login-hero__container{
max-width:900px;
margin:auto;
}

.login-hero__logo{
width:100px;
margin-bottom:20px;
}

.login-hero__title{
font-size:42px;
color:var(--lightskyblue-color);
margin-bottom:15px;
}

.login-hero__text{
font-size:18px;
}

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

.account-login{
  padding:80px 20px;
  background:var(--white-color);
}

.account-login__container{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

/*
==========
Welcome
==========
*/

.account-login__welcome h2{
  font-size:36px;
  color:var(--lightskyblue-color);
  margin-bottom:20px;
}

.account-login__welcome p{
  line-height:1.6;
}

/*
==========
Form
==========
*/

.account-login__form{
  background:var(--silver-color);
  padding:40px;
  border-radius:5px;
}

.login-form{
  display:flex;
  flex-direction:column;
}

.form-group{
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
}

.form-group label{
  font-weight:600;
  margin-bottom:6px;
}

.form-group input{
  padding:12px;
  border-radius:6px;
  border:1px solid var(--grey-color);
  transition:all .3s ease;
}

.form-group input:focus{
  border-color:var(--lightskyblue-color);
  outline:none;
}

/*
==========
Button
==========
*/

.login-button{
  background:var(--lightskyblue-color);
  color:var(--white-color);
  border:none;
  padding:12px;
  border-radius:6px;
  cursor:pointer;
  transition:all .3s ease;
}

.login-button:hover{
  background:var(--lightskyblue-color-transparent);
}

/*
==========
Socials
==========
*/

.account-login__socials {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding-top: 2em;
}

.account-login__socials a{
    color: var(--white-color);
    text-decoration: none;
}

.account-login__socials .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
}

.account-login__socials .icon svg{
    fill: var(--lightskyblue-color);
    width: 100%;
    height: 100%;
}

.account__social-link img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.account__social-link:hover img {
  transform: scale(1.2);
}

/*
==========
Animations
==========
*/

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:all .9s ease;
}

.reveal-left{
  opacity:0;
  transform:translateX(-60px);
  transition:all .9s ease;
}

.reveal-right{
  opacity:0;
  transform:translateX(60px);
  transition:all .9s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

.reveal-left.active{
  opacity:1;
  transform:translateX(0);
}

.reveal-right.active{
  opacity:1;
  transform:translateX(0);
}

/*
==========
Hero animation
==========
*/

.login-hero__animate{
  opacity:0;
  transform:translateY(-50px);
  transition:all 1s ease;
}

.login-hero__animate--visible{
  opacity:1;
  transform:translateY(0);
}

/*
==========
Responsive
==========
*/

@media(max-width:900px){
  .account-login__container{
    grid-template-columns:1fr;
    gap:40px;
  }
}