*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

/* BODY BACKGROUND IMAGE */
body{
  height:100vh;

  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url("back.jpg") no-repeat center center/cover;

  background-attachment: fixed;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* Wrapper */
.wrapper{
  width:100%;
  display:flex;
  justify-content:center;
}

/* Card */
.form-card{
  width:360px;
  padding:30px;
  border-radius:25px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  color:white;
  transition:0.3s;
}

.form-card:hover{
  transform: translateY(-5px);
}

/* Heading */
.form-card h2{
  text-align:center;
  font-weight:600;
  margin-bottom:5px;
}

.form-card p{
  text-align:center;
  font-size:13px;
  margin-bottom:20px;
  color:#ddd;
}

/* Fields */
.field{
  position:relative;
  margin-bottom:20px;
}

.field input,
.field textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:none;
  outline:none;
  background: rgba(255,255,255,0.2);
  color:white;
  font-size:14px;
}

.field textarea{
  resize:none;
  height:80px;
}

.field label{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  font-size:13px;
  color:#ccc;
  pointer-events:none;
  transition:0.3s;
}

/* Floating Label */
.field input:focus + label,
.field input:valid + label,
.field textarea:focus + label,
.field textarea:valid + label{
  top:-8px;
  left:8px;
  font-size:11px;
  color:#fff;
}

/* Gender */
.gender{
  margin-bottom:20px;
  color:#ddd;
}

.options{
  display:flex;
  gap:10px;
  margin-top:5px;
}

.options label{
  font-size:13px;
}

/* Button */
.btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:12px;
  background: linear-gradient(45deg,#ff6a00,#ee0979);
  color:white;
  font-size:15px;
  cursor:pointer;
  transition:0.3s;
}

.btn:hover{
  transform: scale(1.05);
}

/* Popup */
.popup{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:white;
  padding:25px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  transition:0.3s;
  z-index:1000;
}

.popup.active{
  transform:translate(-50%,-50%) scale(1);
}

.popup .icon{
  font-size:40px;
  color:green;
  margin-bottom:10px;
}

.popup h3{
  margin-bottom:5px;
}

.popup p{
  font-size:14px;
  color:#555;
}