*{
	padding: 0px;
	border: 0px;
	margin: 0px;
	box-sizing: border-box;
}

  body {

  font-family: 'Segoe UI', sans-serif;
  background-image: url('bk3.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  color: white;
      
    }

#allforms {
  display: flex;
  width: 100vw;
  height: 100vh;
 
}

/* Image Section */
#myimage {
  width: 52vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  animation: slideFromLeft 1.5s ease-out forwards;
}

#im {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Top Text */
#topflow {
  position: absolute;
  top: 4em;
  left: 2em;
  z-index: 2;
  width: 90%;
  text-align: center;
  font-family: monospace;
}

#topflow h3 {
  font-size: 3.2em;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 0.5em;
}

.auto-type {
  font-size: 1.8em;
  font-weight: bold;
  color: #fff;
  display: block;
}

/* Login Form Section */
#firstlog {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 48vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: url("bk3.jpg");
  padding: 3em 2em;
  overflow-y: auto;
  text-align: center;
  animation: slideFromRight 1.5s ease-out forwards;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  font-size: 2em;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .1em;
  animation: typing 3s steps(30, end) infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Inputs */
.use {
  width: 100%;
  max-width: 400px;
  height: 3em;
  padding: 0 1em;
  text-align: left;
  margin-bottom: 1.5em;
  border: none;
  border-bottom: 2px solid white;
  background: transparent;
  color: white;
  font-size: 1em;
}

label{color: white;}

.use::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.use:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* Icons */
#fa {
  font-size: 4em;
  color: #fff;
  margin: 0.5em 0;
}

#una, #lock {
  position: relative;
  right: 2.5em;
  color: #ccc;
}

#whatsapp {
  font-size: 1.5em;
  float: right;
  margin-top: -2em;
  margin-right: 1em;
  color: #25D366;
}

/* Submit Button */
#sub {
  width: 50%;
  height: 2em;
  background-color: #1abc9c;
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#sub:hover {
  background-color: #16a085;
  transform: scale(1.05);
}

/* Error */
.error {
  color: white;
  animation: err 1s infinite;
  margin-bottom: 1em;
}

@keyframes err {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}

/* Register Text */
#ee {
  color: white;
  font-weight: bold;
  margin-top: 1em;
  cursor: pointer;
 pointer-events: auto;
}

#ee:hover {
    cursor: pointer;
      pointer-events: auto;
}


/* Slide Animations */
@keyframes slideFromLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}




#register {
      background: fff;
        background-image: url(bk3.jpg);
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
      width: 48%;
      height: 100%;
      padding: 30px 25px;
      animation: 2s anima;
      position: absolute;
      text-align: center;
      top: 0px;
      right: 0px;
      display: none;
    }

    /* Close Button */
    .close-btn {
      position: absolute;
      top: 13px;
      right: 16px;
      font-size: 25px;
      color black;
      cursor: pointer;
    }
    .close-btn:hover {
      color: #e74c3c;
    }

    /* Error Message */
    .error {
      color: red;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
    }

    /* Input Group Wrapper */
    .input-group {
      position: relative;
      margin-top: 20px;
    }

    .input-group input {
      width: 70%;
      padding: 12px 45px 12px 40px;
      font-size: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      transition: 0.3s;
    }

    .input-group input:focus {
      border-color: #764ba2;
      outline: none;
      box-shadow: 0 0 6px rgba(118, 75, 162, 0.2);
    }

    /* Icon Inside Input */
     .input-group .fa {
  position: absolute;
  left: calc(15% + 12px); /* aligns icon relative to the input field */
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 16px;
  pointer-events: none;
}

    /* Label */
    form label {
      font-weight: 600;
      display: block;
      margin-top: 10px;
      color: #333;
    }

    /* Gender */
    .gender {
      margin-top: 15px;
    }

    label {
      margin-right: 15px;
      font-weight: normal;
    }

    /* Submit Button */
    #sub1 {
      width: 70%;
      padding: 12px;
      margin-top: 25px;
      background: #764ba2;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s ease;
    }

    #sub1:hover {
      background: #5a3e9c;
    }

     @keyframes anima{
  	from{margin-top: -50%;}
  	to{width: 48%;}
  }


#error{color: red; }
.error{color: white; }


@media screen and (max-width: 320px){
	.use,#use1{ width: 15em;}

#close{ 
	position: relative;
	top: 0px;
	left: 5em;
	font-size: 1.5em;
}

}


/* Responsive Design */
@media (max-width: 480px) {
  #allforms {
    flex-direction: column;
  }
  

  #myimage, #firstlog {
    width: 100%;
    height: auto;
  }

  #firstlog{top: 13em;}

  #register{
   min-width: 100vw;
   z-index: 999;
   position: absolute;
   top: 13em;
   }

  #topflow h3 {
    font-size: 2em;
  }

  .auto-type {
    font-size: 1.2em;
  }

  .use, #sub {
    width: 90%;
  }


 @keyframes anima{
  	from{margin-right: -100%;}
  	to{width: 100%;}
  }



  }