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

body{
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(145deg,#0F2027,#2C5364);
}


#main-container{

    display: flex ;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

#main-container-2{

    display: none ;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.main-heading-box h2{

  text-align:center;
  text-transform: uppercase;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 3px;
  color:#e0f7fa;
  margin-bottom: 2px;

}

.main-heading-box p{

  text-align:center;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 2px;
   /* color:#e0f7fa; */
   margin-bottom: 30px;
  color:#9fbfc7;


}




.form-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  padding: 33px;
  border-radius: 18px;
  background: #1b3a44;
  box-shadow: 8px 8px 20px #0c1c21,
             -8px -8px 20px #2f5a67;
  transition: all 0.2s ease;
}

.input-box{

    border: 1px solid red;
    border: none;
    width: 100%;
    line-height: 30px;
     margin-bottom: 8px;
    
}

label{

  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 2px;
  color:#e0f7fa;
  

}

input{

  margin-bottom: 17px;
  height: 60px;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 0 15px;
  background:#1b3a44;
  color: white;
  box-shadow: inset 4px 4px 10px #0c1c21,
              inset -4px -4px 10px #2f5a67;
}


input::placeholder{

  color:#9fbfc7;
  
}

.form-box button{

  width: 100%;
  height: 58px;
  border: none;
  border-radius: 10px;
  background:#1b3a44;
  color:#e0f7fa;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 4px 4px 10px #0c1c21,
              -4px -4px 10px #2f5a67;

  transition: 0.2s ease;

}

.form-box button:hover i{

    transform: translateX(3px);
}

.form-box button:hover{

    transform: translateY(-2px);

}


.form-box button:active{

  box-shadow: inset 4px 4px 10px #0c1c21,
              inset -4px -4px 10px #2f5a67;

} 




.Secure-Access{
   
    margin-top: 30px;
}

.Secure-Access span{

  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  /* color:#e0f7fa; */
   color:#9fbfc7;
  border-bottom: 2px solid #9fbfc7;
  
}

.button-box{

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 34px;

}

.button-box p{

  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 2px;
  color:#e0f7fa;
   /* color:#9fbfc7; */
  
}

.button-box button{

  border: none;
  outline: none;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 2px;
  /* color: #070f11; */
  
  color:#9fbfc7;
  transition:all 0.2s ease;

}

.button-box button:hover{

   transform: translateY(-2px);
   border-bottom: 2px solid #e0f7fa;

}



@media (max-width: 768px){

  body{
    padding:40px 15px;
  }

  .main-heading-box h2{
    font-size:1.6rem;
    letter-spacing:2px;
  }

  .main-heading-box p{
    font-size:0.75rem;
    letter-spacing:1px;
  }

  .form-box{
    width:100%;
    padding:25px;
  }

  input{
    height:50px;
    font-size:14px;
  }

  .form-box button{
    height:50px;
    font-size:14px;
  }

  .button-box{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  .button-box p{
    font-size:0.8rem;
  }

  .button-box button{
    font-size:0.8rem;
  }

}