/*
Template Name: Ling - Login Registration Form,Multistep Form ,Contact Form &  Coming Soon
Description:  Ling - Login Registration Form,Multistep Form ,Contact Form &  Coming Soon HTML5 Template
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;500;700&display=swap');
body{
	margin: 0;
	padding: 0;
	font-size: 16px;
	color: #191919;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-style: normal;
}
a,
button {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}
*::-moz-selection {
	background: #d6b161;
	color: #000;
	text-shadow: none;
}
::-moz-selection {
	background: #8f32f3;
	color:#000;
	text-shadow: none;
}
::selection {
	background: #8f32f3;
	color: #000;
	text-shadow: none;
}
*::-moz-placeholder {
	color: #555555;
	font-size: 14px;
	opacity: 1;
}
*::placeholder {
	color: #555555;
	font-size: 14px;
	opacity: 1;
}
h1,h2,h3,h4,h5,h6,p{
	margin:0;
	padding: 0;
}
ul{
	margin:0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration: none;
	transition: .4s;
	-webkit-transition: all .4s ease-in-out;
}
a:hover{
	text-decoration: none;
	color: #82B60B;
}
button:focus{
	outline: none;
}
input:focus{
	outline: none;
}
p{
	color: #191919;
}


/*======================================================================================*/
/*  index4 start  */
/*======================================================================================*/

.animate-login-form{
  position: relative;
  height: 100vh;
  width: 100%;
  background: #0b0a0a;
  overflow: hidden;
  animation: changebg 10s linear infinite alternate-reverse;
}
@keyframes changebg {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg) brightness(200%);
  }
}
.grad {
  background: linear-gradient(transparent 40%, #8f32f3 60%,transparent);
  animation: 5s rotate infinite linear;
  height: 100%;
  width: 100%;
  position: absolute;
}
.cubes {
  height: 100vh;
  width: 100%;
  display: flex;
  gap: 0.1rem;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
}

.pause {
  animation-play-state: paused;
}
@keyframes rotate {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
.cube {
  z-index: 1;

  width: 4rem;
  height: 4rem;
  background: #181717;
  transition: 1.5s ease-in-out;
}
.cube:hover {
  transition: 0s;
  background:  linear-gradient(45deg, #8f32f3, #ab65f6);;
}
.colorgreen {
  color: #8f32f3;;
}
.login-form form {
  box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.701);
  background: #282626;
  z-index: 100;
  text-align: center;
  padding: 2rem 1.5rem;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  border-radius: 20px;
}
.inputdiv {
  margin: 1rem 0;
  display: grid;
  gap: 1rem;
}
.eyeicon.none #eyeoff {
  transform:scale(0.0);
}
.emailcont {
  position: relative;
}
.eyeicon i {
  transition: 0.2s ease;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  z-index: 100;
  cursor: pointer;
  opacity: 0.7;
}
.login-form form input {
  padding: 1rem;
  background: #393737;
  color: #f2f2f2;
  font-size: 1rem;
  transition: 0.3s ease;
  width: 100%;
  border-radius: 15px;
}
.login-form form input::placeholder {
  transition: 0.3s ease;
  color: #726f6f;
}
.login-form form input:is(:active, :focus) {
  background: #2f2b2b;
}
.login-form form input:is(:active, :focus)::placeholder {
  transform: translateY(-0.5rem);
  color: #b1aeae;
}
.data {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data p{
  color: #fff;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
}
.data p:hover {
  text-decoration: underline;
  cursor: pointer;
}
.login-form form button {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  transition: 0.3s ease;
  font-size: 1rem;
  font-weight: 600;
  background: #595454;
  color: #fff;
}
.login-form form button:hover {
  background:#8f32f3;;
}

/*======================================================================================*/