@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

body{
    font-family: 'Poppins', sans-serif;
    background: #ececec;
}


.box-area{
    width: 930px;
}
.anim {
  opacity: 0;
}
.anim.fade-in {
  animation: fadeInAnimation 1.5s forwards;
}
.anim.fade-in.anim-delay-05s{
	animation-delay:0.5s;
}.anim.fade-in.anim-delay-1s{
	animation-delay:1s;
}
.anim.fade-in.anim-delay-2s{
	animation-delay:2s;
}
.anim.fade-in.anim-delay-3s{
	animation-delay:3s;
}
.anim.fade-in.anim-delay-4s{
	animation-delay:4s;
}
.anim.fade-in.anim-delay-5s{
	animation-delay:5s;
}
@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}

.right-box{
    padding: 40px 30px 40px 40px;
}

::placeholder{
    font-size: 16px;
}

.rounded-4{
    border-radius: 20px;
}
.rounded-5{
    border-radius: 30px;
}


.form-control:focus {
  border-color: #ced4da;
  box-shadow: none;
}

@media only screen and (max-width: 768px){

     .box-area{
        margin: 0 10px;

     }
     .left-box{
        overflow: hidden;
     }
     .right-box{
        padding: 20px;
     }
	 .logo{
		 width:100px;
	 }
}
.logo path {
      stroke: #801316;
      fill: none;
      stroke-width: 2; 
    }
.logo path:nth-child(1) {
		animation:animate-body 2s linear forwards;
		animation-delay: 0s;
		stroke-dasharray:2232;
		stroke-dashoffset:0;
}
.logo path:nth-child(2) {
		animation:animate-head 2s linear forwards;
		animation-delay: 0s; 
		stroke-dasharray:315;
		stroke-dashoffset:0;
}
@keyframes animate-body{
		0%{
			stroke-dashoffset:2332;
		}
		
		80%{
			stroke-dashoffset:4464;
			fill:transparent;
		}
		100%{
			stroke-dashoffset:4464;
			fill:#801316;
		}
	}
@keyframes animate-head{
		0%{
			stroke-dashoffset:315;
		}
		80%{
			stroke-dashoffset:630;
			fill:transparent;
		}
		100%{
			stroke-dashoffset:630;
			fill:#801316;
		}
}
a{
	transition: color 1.4s ease;
	z-index: 1;
}
.login::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #4285F4;
  border-radius:0.5rem;
  transition: width 1.4s ease;
  z-index: -1;
}

.login small {
  transition: color 1.4s ease;
}

.login:hover small {
  color: white;
}

.login:hover::after {
  width: 100%;
}
.login img {

  transition: filter 0.7s ease;
}

.login:hover img {
  filter: brightness(0) invert(1);
}
.login:not(:hover) img {
  transition: filter 1.4s ease;
}
.login:not(:hover) {
  transition: color 1.4s ease;
}