*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: fangsong;
}

body{
  background:#f5f5f5;
}

/* Navbar Container */
.navbar-container{
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  padding:20px 60px;
}

/* Navbar */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 35px;

  border-radius:20px;

  background:rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);

  border:1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 8px 32px rgba(0,0,0,0.15);

  transition:0.4s ease;
}

/* Logo */
.logo h1{
  color:#fff;
  font-size:30px;
  font-weight:700;
  letter-spacing:1px;
}

.logo span{
  color:#d8ff67;
}

/* Nav Links */
.nav-links ul{
  display:flex;
  gap:35px;
  list-style:none;
}

.nav-links ul li a{
  position:relative;
  text-decoration:none;
  color:#fff;
  font-size:17px;
  font-weight:500;
  transition:0.3s ease;
  padding-bottom:5px;
}

/* Hover Underline Effect */
.nav-links ul li a::after{
  content:"";
  position:absolute;
  width:0%;
  height:2px;
  left:0;
  bottom:0;
  background:#d8ff67;
  transition:0.4s ease;
}

.nav-links ul li a:hover::after,
.nav-links ul li a.active::after{
  width:100%;
}

.nav-links ul li a:hover{
  color:#d8ff67;
}

/* Login Button */
.login-btn{
  padding:12px 28px;
  border:none;
  outline:none;
  border-radius:50px;

  background:linear-gradient(135deg,#d8ff67,#5eff7a);

  color:#111;
  font-size:16px;
  font-weight:600;
  cursor:pointer;

  transition:0.4s ease;

  box-shadow:0 5px 20px rgba(184,255,84,0.4);
}

.login-btn:hover{
  transform:translateY(-3px) scale(1.05);

  box-shadow:0 8px 25px rgba(184,255,84,0.6);
}

/* Responsive */
@media(max-width:700px){

  .navbar-container{
    padding:8px;
    position: fixed;
     top:0;
  left:0;
  z-index:1000;
   
  }

  .navbar{
    flex-direction:row;
    gap:10px;
    padding: 8px 0px;
    border-radius: 15px;
    min-height: unset;
    margin-bottom: 10px

  }

  .nav-links ul{
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .logo h1{
    font-size:16px;
    margin-top: 10px
  }
}

/* BUTTON */
 .open-login-btn{
   padding:14px 28px;
   border:none;
   border-radius:50px;
   background:
     linear-gradient(135deg, #d8ff67, #73ff95);
   color:#111; 
   font-size:15px;
   font-weight:700;
   cursor:pointer;
  }
  /* MODAL */
  .login-modal{
    position:fixed;
    inset:0;
   width:100%;
   height:100vh;

  z-index:9999;

  visibility:hidden;

  opacity:0;

  transition:0.4s ease;
}

/* SHOW */

.login-modal.showLogin{

  visibility:visible;

  opacity:1;
}

/* OVERLAY */

.login-overlay{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,0.6);

  backdrop-filter:blur(6px);
}

/* SIDEBAR */

.login-sidebar-box{

  position:absolute;

  top:0;
  right:-100%;

  width:100%;

  max-width:520px;

  height:100vh;

  padding:45px 35px;

  overflow-y:auto;

  background:
  radial-gradient(circle at top left,#1eff9b18,transparent 22%),
  linear-gradient(135deg,#03110d,#071d18,#0a2a22);

  border-right:1px solid rgba(255,255,255,0.08);

  transition:0.5s ease;
}

/* OPEN */

.login-modal.showLogin
.login-sidebar-box{

  right:0;
}

/* CLOSE */

.close-login{

  position:absolute;

  top:25px;
  right:25px;

  width:45px;
  height:45px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
  rgba(255,255,255,0.06);

  color:#fff;

  font-size:18px;

  cursor:pointer;
}

/* TAG */

.login-small-tag{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:12px 22px;

  border-radius:50px;

  background:
  rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  color:#73ff95;

  font-size:13px;

  font-weight:600;

  margin-bottom:28px;
}

/* DOT */

.login-small-tag span{

  width:10px;
  height:10px;

  border-radius:50%;

  background:#73ff95;

  box-shadow:0 0 15px #73ff95;
}

/* TITLE */

.login-sidebar-top h2{

  color:#fff;

  font-size:52px;

  line-height:1.1;

  margin-bottom:22px;

  font-weight:850;
}

/* TEXT */

.login-sidebar-top p{

  color:#d8d8d8;

  line-height:1.9;

  margin-bottom:40px;
}

/* FORM */

.sidebar-login-form{

  display:flex;

  flex-direction:column;

  gap:24px;
}

/* BOX */

.login-input-box{

  display:flex;

  flex-direction:column;

  gap:12px;
}

/* LABEL */

.login-input-box label{

  color:#fff;

  font-size:15px;
}

/* INPUT */

.login-input-box input{

  width:100%;

  padding:18px;

  border:none;

  outline:none;

  border-radius:18px;

  background:
  rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  color:#fff;

  font-size:15px;
}

/* PLACEHOLDER */

.login-input-box input::placeholder{

  color:#bdbdbd;
}

/* OPTIONS */

.login-options-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;
}

/* REMEMBER */

.remember-check{

  display:flex;

  align-items:center;

  gap:10px;

  color:#d8d8d8;

  font-size:14px;
}

/* LINK */

.login-options-row a{

  color:#73ff95;

  text-decoration:none;

  font-size:14px;
}

/* LOGIN BUTTON */

.sidebar-login-btn,
.otp-login-btn{

  width:100%;

  padding:18px;

  border:none;

  border-radius:60px;

  background:
  linear-gradient(
  135deg,
  #d8ff67,
  #73ff95
  );

  color:#111;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  transition:0.4s ease;
}

/* HOVER */

.sidebar-login-btn:hover,
.otp-login-btn:hover{

  transform:translateY(-4px);
}

/* DIVIDER */

.sidebar-divider{

  text-align:center;

  margin:28px 0;

  position:relative;
}

.sidebar-divider span{

  background:#071d18;

  padding:0 18px;

  color:#bdbdbd;

  position:relative;

  z-index:2;
}

.sidebar-divider::before{

  content:"";

  position:absolute;

  top:50%;
  left:0;

  width:100%;
  height:1px;

  background:rgba(255,255,255,0.08);
}

/* SIGNUP */

.signup-text{

  margin-top:30px;

  text-align:center;

  color:#d8d8d8;
}

.signup-text a{

  color:#73ff95;

  text-decoration:none;

  font-weight:600;
}

/* MOBILE */

@media(max-width:600px){

  .login-sidebar-box{

    max-width:100%;

    padding:40px 22px;
  }

  .login-sidebar-top h2{

    font-size:38px;
  }

}
/* FORM */

.otp-login-form{

  display:flex;

  flex-direction:column;

  gap:24px;
}

/* INPUT BOX */

.otp-input-box{

  display:flex;

  flex-direction:column;

  gap:12px;
}

/* LABEL */

.otp-input-box label{

  color:#fff;

  font-size:15px;

  font-weight:500;
}

/* MOBILE BOX */

.mobile-box{

  display:flex;

  gap:14px;
}

/* INPUT */

.mobile-box input,
.otp-field input{

  width:100%;

  padding:18px;

  border:none;

  outline:none;

  border-radius:18px;

  background:
  rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  color:#fff;

  font-size:15px;
}

/* PLACEHOLDER */

.mobile-box input::placeholder,
.otp-field input::placeholder{

  color:#bdbdbd;
}

/* SEND OTP */

#sendOtpBtn{

  min-width:150px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
  135deg,
  #73ff95,
  #d8ff67
  );

  color:#111;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  transition:0.4s ease;
}

/* HOVER */

#sendOtpBtn:hover{

  transform:translateY(-3px);
}

/* OTP FIELD */

.otp-field{

  display:none;
}

/* SHOW */

.otp-field.showOtp{

  display:flex;
}

/* TIMER */

.otp-timer{

  color:#d8ff67;

  font-size:14px;

  display:none;
}

/* VERIFY BUTTON */

.verify-btn{

  width:100%;

  padding:18px;

  border:none;

  border-radius:60px;

  background:
  linear-gradient(
  135deg,
  #d8ff67,
  #73ff95
  );

  color:#111;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  transition:0.4s ease;
}

/* HOVER */

.verify-btn:hover{

  transform:translateY(-4px);
}

/* MOBILE */

@media(max-width:600px){

  .mobile-box{

    flex-direction:column;
  }

  #sendOtpBtn{

    width:100%;

    padding:18px;
  }
  .login-btn {
   padding: 5px 19px
  }
}

/* BACK BUTTON */

.back-login-btn{

  width:100%;

  padding:16px;

  border:none;

  border-radius:60px;

  background:
  rgba(255,255,255,0.06);

  border:1px solid rgba(255,255,255,0.08);

  color:#fff;

  cursor:pointer;

  margin-top:10px;

  font-size:15px;
}

/* OTP FORM CONTAINER */

.otp-login-form{

  display:flex;

  flex-direction:column;

  gap:28px;

  margin-top:25px;

  animation:fadeOtp 0.5s ease;
}

/* ANIMATION */

@keyframes fadeOtp{

  from{

    opacity:0;

    transform:
    translateY(20px);
  }

  to{

    opacity:1;

    transform:
    translateY(0);
  }
}

/* INPUT BOX */

.otp-input-box{

  display:flex;

  flex-direction:column;

  gap:12px;
}

/* LABEL */

.otp-input-box label{

  color:#fff;

  font-size:15px;

  font-weight:600;

  letter-spacing:0.5px;
}

/* MOBILE ROW */

.mobile-box{

  display:flex;

  gap:14px;
}

/* INPUT */

.mobile-box input,
.otp-field input{

  width:100%;

  padding:18px 22px;

  border:none;

  outline:none;

  border-radius:22px;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,0.05),
  rgba(255,255,255,0.03)
  );

  border:1px solid rgba(255,255,255,0.08);

  color:#fff;

  font-size:15px;

  transition:0.4s ease;

  backdrop-filter:blur(10px);
}

/* FOCUS */

.mobile-box input:focus,
.otp-field input:focus{

  border-color:#73ff95;

  box-shadow:
  0 0 18px rgba(115,255,149,0.15);
}

/* PLACEHOLDER */

.mobile-box input::placeholder,
.otp-field input::placeholder{

  color:#a8a8a8;
}

/* SEND OTP BUTTON */

#sendOtpBtn{

  min-width:160px;

  border:none;

  border-radius:22px;

  background:
  linear-gradient(
  135deg,
  #73ff95,
  #d8ff67
  );

  color:#071711;

  font-size:14px;

  font-weight:700;

  cursor:pointer;

  position:relative;

  overflow:hidden;

  transition:0.4s ease;
}

/* HOVER */

#sendOtpBtn:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 10px 25px rgba(115,255,149,0.25);
}

/* OTP FIELD */

.otp-field{

  display:none;
}

/* SHOW */

.otp-field.showOtp{

  display:flex;

  animation:showOtp 0.5s ease;
}

/* OTP APPEAR */

@keyframes showOtp{

  from{

    opacity:0;

    transform:
    translateY(20px);
  }

  to{

    opacity:1;

    transform:
    translateY(0);
  }
}

/* TIMER */

.otp-timer{

  display:none;

  padding:14px 18px;

  border-radius:18px;

  background:
  rgba(115,255,149,0.08);

  border:1px solid rgba(115,255,149,0.15);

  color:#d8ff67;

  font-size:14px;

  font-weight:600;

  text-align:center;
}

/* TIMER NUMBER */

#timer{

  color:#73ff95;

  font-weight:700;
}

/* VERIFY BUTTON */

.verify-btn{

  width:100%;

  padding:18px;

  border:none;

  border-radius:60px;

  background:
  linear-gradient(
  135deg,
  #d8ff67,
  #73ff95
  );

  color:#071711;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  transition:0.4s ease;

  position:relative;

  overflow:hidden;
}

/* HOVER */

.verify-btn:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 12px 28px rgba(115,255,149,0.25);
}

/* BACK BUTTON */

.back-login-btn{

  width:100%;

  padding:17px;

  border:none;

  border-radius:60px;

  background:
  rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  color:#fff;

  font-size:15px;

  cursor:pointer;

  transition:0.4s ease;
}

/* HOVER */

.back-login-btn:hover{

  background:
  rgba(255,255,255,0.08);

  transform:
  translateY(-3px);
}

/* SUCCESS MESSAGE */

.otp-success{

  padding:16px 18px;

  border-radius:18px;

  background:
  rgba(115,255,149,0.08);

  border:1px solid rgba(115,255,149,0.15);

  color:#73ff95;

  font-size:14px;

  display:flex;

  align-items:center;

  gap:12px;
}

/* MOBILE */

@media(max-width:600px){

  .mobile-box{

    flex-direction:column;
  }

  #sendOtpBtn{

    width:100%;

    padding:18px;
  }

}
/* OTP TOP */

.otp-top-box{

  text-align:center;

  margin-bottom:10px;
}

/* ICON */

.otp-icon{

  width:85px;
  height:85px;

  margin:auto;

  margin-bottom:22px;

  border-radius:28px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:38px;

  background:
  linear-gradient(
  135deg,
  rgba(115,255,149,0.15),
  rgba(216,255,103,0.08)
  );

  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 15px 40px rgba(0,0,0,0.2);
}

/* TITLE */

.otp-top-box h3{

  color:#fff;

  font-size:34px;

  margin-bottom:12px;

  font-weight:800;
}

/* TEXT */

.otp-top-box p{

  color:#cfcfcf;

  line-height:1.8;

  font-size:15px;

  max-width:330px;

  margin:auto;
}