:root{
  --secondary-color:#0c650c;
  --btn-color:#222;
}

body{
  background:#000;
  color:#fff;
  height:100vh;
}

/* left image area */

.left-side{
  background: url('https://i.pinimg.com/1200x/d9/0a/33/d90a33fc5d7ede15549260e5ea92af49.jpg')top center/cover no-repeat;
}

.login-image{
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-image img{
  max-width:70%;
}

/* form */
.login-box{
  width:100%;
  max-width:520px;
 
}
.right-side-box{
  background:rgba(0,0,0,0.8);
  border-radius:10px;
}

.form-control{
  background:#1a1a1c;
  border:none;
  color:#fff;
  padding:18px;
  font-size:16px;
  border-radius:10px;
}

.form-control::placeholder{
  color:#aaa;
}

.login-box h2{
  font-size:33px;
  font-weight:700;
}

.login-box h2 span{
  color: #00ff5e;
}

.btn-primary {
  background: #00ff88;
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  width: 100%;
  padding: 15px 15px;
}

.btn-primary:hover {
  background: #00cc6a;
  color: #000;
}

.secondary-btn {
  display: inline-block;
  padding: 12px 30px;
  background: #fff;
  color: #000;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.secondary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  background: #00ff5e;
  color: #000;
}


.btn-second {
  background: var(--btn-color);
  color: #FFF;
  padding: 10px 10px;
  transition: 0.3s;
  border-radius:100px;
  justify-content: center !important;
  text-align: center !important;
  justify-items: center !important;
}

.btn-second:hover {
  background: var(--secondary-color);
  color: #FFF;
  transform: translateY(-2px);
}

.social-btn{
  width:70px;
}

.form-check-input{
  background-color:#1a1a1c;
  border:1px solid #444;
}

.form-check-input:checked{
  background-color:var(--secondary-color);
  border-color:var(--secondary-color);
}
.social-btn i{
  font-size:20px;
}

/* Mobile responsive fix */
@media (max-width: 768px) {

  .login-box{
    padding:30px 10px;
  }
  
  .login-box h2{
    margin-top: 25px;
    font-size:22px;
  }
  
  .form-control{
    padding:10px;
  }
  
  .btn-primary{
    padding:10px;
    font-size:16px;
    
  }
  .remember-text{
    font-size:13px;
  }
  
  .social-btn{
    width:55px;
    height:50px;
  }
  .brand-logo{
    width:100px;
  }
  
  }
  .brand-logo{
    width: 100px;
  }
/* image */
.login-image {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}