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

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(-45deg, #1e3c72, #2a5298, #0f9b8e, #00c6ff);
    background-size: 400% 400%;
    animation: bgMove 15s ease infinite;
    position: relative;
}

/* ==========================
      Animated Background
========================== */

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* ==========================
     Floating Circles
========================== */

body::before{
content:'';
position:absolute;
width:320px;
height:320px;
border-radius:50%;
background:rgba(255,255,255,.12);
top:-120px;
left:-120px;
backdrop-filter:blur(20px);
animation:float1 12s ease-in-out infinite;
}

body::after{
content:'';
position:absolute;
width:450px;
height:450px;
border-radius:50%;
background:rgba(255,255,255,.10);
bottom:-180px;
right:-180px;
animation:float2 15s ease-in-out infinite;
}

@keyframes float1{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(30px);
}

100%{
transform:translateY(0px);
}

}

@keyframes float2{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-35px);
}

100%{
transform:translateY(0px);
}

}

/* ==========================
        Login Card
========================== */

.card{

position:relative;

width:430px;
max-width:95%;

padding:40px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(22px);

border-radius:22px;

border:1px solid rgba(255,255,255,.25);

box-shadow:

0 20px 45px rgba(0,0,0,.25),
0 0 25px rgba(255,255,255,.08);

z-index:5;

animation:fadeUp .8s ease;

}

/* ==========================
      Card Animation
========================== */

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* ==========================
         Logo
========================== */

.logo{

font-size:65px;

text-align:center;

margin-bottom:12px;

animation:pulse 2.5s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/* ==========================
      Heading
========================== */

h2{

text-align:center;

color:#fff;

font-size:30px;

font-weight:700;

letter-spacing:.5px;

margin-bottom:8px;

}

.subtitle{

text-align:center;

color:#eef6ff;

font-size:14px;

margin-bottom:28px;

opacity:.9;

}

/* ==========================
      Input Group
========================== */

.input-group{

position:relative;

margin-bottom:22px;

}

.input-group input{

width:100%;

height:56px;

padding:15px 18px;

border:none;

outline:none;

border-radius:12px;

background:rgba(255,255,255,.22);

color:#fff;

font-size:15px;

transition:.35s;

}

.input-group input::placeholder{

color:#f1f1f1;

}

.input-group input:focus{

background:rgba(255,255,255,.30);

box-shadow:

0 0 0 3px rgba(255,255,255,.15);

}

/* ==========================
        Buttons
========================== */

button{

width:100%;

height:54px;

border:none;

outline:none;

border-radius:12px;

background:#ffffff;

color:#0d6efd;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.35s;

box-shadow:

0 8px 18px rgba(0,0,0,.15);

}

button:hover{

transform:translateY(-3px);

box-shadow:

0 15px 28px rgba(0,0,0,.25);

}

button:active{

transform:scale(.98);

}

button:disabled{

background:#dddddd;

cursor:not-allowed;

}

/* ===========================
   OTP SECTION
=========================== */

#otpSection{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    margin-top:20px;

}


/* ==========================
       OTP Section
========================== */

#otpSection{

display:none;

margin-top:20px;

animation:fadeUp .6s ease;

}

.otp-input{

display:flex;

justify-content:center;

gap:12px;

margin:25px 0;

}

.otp-input input{

width:55px;

height:60px;

border:none;

outline:none;

border-radius:14px;

background:rgba(255,255,255,.22);

color:#fff;

font-size:24px;

font-weight:700;

text-align:center;

transition:.3s;

box-shadow:0 5px 15px rgba(0,0,0,.12);

}

.otp-input input:focus{

background:rgba(255,255,255,.35);

transform:translateY(-3px);

box-shadow:
0 0 0 3px rgba(255,255,255,.20),
0 12px 20px rgba(0,0,0,.18);

}

/* ==========================
          Timer
========================== */

.timer{

margin-top:18px;

text-align:center;

font-size:15px;

color:#ffffff;

font-weight:500;

}

#time{

font-size:20px;

font-weight:700;

color:#ffe082;

}

/* ==========================
      Resend Button
========================== */

#resendBtn{

display:none;

margin-top:18px;

background:linear-gradient(135deg,#ff9800,#ff5722);

color:#fff;

}

#resendBtn:hover{

background:linear-gradient(135deg,#ff5722,#ff9800);

}

/* ==========================
          Loader
========================== */

.loader{

display:none;

margin:25px auto;

width:48px;

height:48px;

border-radius:50%;

border:5px solid rgba(255,255,255,.30);

border-top:5px solid #ffffff;

animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* ==========================
      Success / Error
========================== */

.msg{

margin-top:18px;

padding:12px;

border-radius:10px;

text-align:center;

font-size:14px;

font-weight:600;

display:block;

}

.success{

background:rgba(76,175,80,.18);

color:#d4ffd4;

border:1px solid rgba(76,175,80,.45);

}

.error{

background:rgba(244,67,54,.18);

color:#ffdada;

border:1px solid rgba(244,67,54,.45);

}

/* ==========================
      Card Footer
========================== */

.footer{

margin-top:25px;

text-align:center;

font-size:13px;

color:#eeeeee;

opacity:.85;

}

/* ==========================
      Links
========================== */

a{

color:#ffffff;

text-decoration:none;

transition:.3s;

}

a:hover{

color:#ffe082;

}

/* ==========================
      Selection
========================== */

::selection{

background:#0d6efd;

color:#fff;

}

/* ==========================
      Scrollbar
========================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#dddddd;

}

::-webkit-scrollbar-thumb{

background:#0d6efd;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#084298;

}

/* ==========================
      Floating Glow
========================== */

.card::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:rgba(255,255,255,.10);

border-radius:50%;

top:-90px;

right:-90px;

filter:blur(15px);

pointer-events:none;

}

.card::after{

content:"";

position:absolute;

width:120px;

height:120px;

background:rgba(255,255,255,.08);

border-radius:50%;

bottom:-60px;

left:-60px;

filter:blur(15px);

pointer-events:none;

}

/* ==========================
      Input Autofill
========================== */

input:-webkit-autofill{

-webkit-text-fill-color:#fff;

transition:background-color 99999s;

}

/* ==========================
      Mobile
========================== */

@media(max-width:768px){

.card{

width:94%;

padding:30px;

}

.logo{

font-size:55px;

}

h2{

font-size:25px;

}

.subtitle{

font-size:13px;

}

.input-group input{

height:52px;

font-size:14px;

}

button{

height:52px;

font-size:15px;

}

.otp-input{

gap:8px;

}

.otp-input input{

width:45px;

height:50px;

font-size:20px;

}

}

@media(max-width:480px){

.card{

padding:22px;

border-radius:18px;

}

.logo{

font-size:48px;

}

h2{

font-size:22px;

}

.subtitle{

font-size:12px;

}

.input-group input{

padding:12px;

font-size:14px;

}

button{

height:50px;

font-size:14px;

}

.otp-input{

gap:6px;

}

.otp-input input{

width:40px;

height:45px;

font-size:18px;

}

.timer{

font-size:13px;

}

.msg{

font-size:13px;

}

}

/* ==========================
      Desktop Animation
========================== */

@media(min-width:1024px){

.card:hover{

transform:translateY(-5px);

transition:.4s;

box-shadow:

0 30px 60px rgba(0,0,0,.30);

}

button:hover{

letter-spacing:.5px;

}

}

/* ==========================
      Fade Animation
========================== */

.fade{

animation:fadeIn .5s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ======================================
   OTP INPUT
====================================== */

.otp{

    width:40px;

    height:45px;

    border:2px solid #d1d5db;

    border-radius:12px;

    text-align:center;

    font-size:22px;

    font-weight:bold;

    outline:none;

    transition:.3s;

}

.otp:focus{

    border-color:#2563eb;

    box-shadow:0 0 8px rgba(37,99,235,.25);

}

/* ==========================
      End
========================== */