@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;
}

body{
min-height:100vh;
overflow:scroll;
overflow-x: hidden;
background:linear-gradient(
-45deg,
#120024,
#2a0052,
#45008f,
#5f1fff,
#2e0080
);

background-size:400% 400%;
animation:gradient 12s ease infinite;
position:relative;
}

@keyframes gradient{

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

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

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

}

.circle{
position:absolute;
border-radius:50%;
filter:blur(40px);
animation:float 8s infinite ease-in-out;
z-index:2;
}

.circle1{
width:220px;
height:220px;
background:#00d4ff;
top:-80px;
left:-80px;
}

.circle2{
width:300px;
height:300px;
background:#ff00c8;
bottom:-120px;
right:-120px;
}

.circle3{
width:180px;
height:180px;
background:#ff9800;
top:20%;
right:15%;
}

@keyframes float{

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

}

.register-container{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    margin-top: 13%;
}
.register-card{

position:relative;

width:470px;

padding:40px;

border-radius:30px;

overflow:hidden;
}

.register-card::before{

content:'';

position:absolute;

width:180%;
height:180%;

top:-40%;
left:-40%;

background:conic-gradient(
#00d4ff,
#7f3dff,
#ff00cc,
#ff9800,
#00d4ff
);

animation:rotateBorder 4s linear infinite;
}

.register-card::after{

content:'';

position:absolute;

inset:3px;

border-radius:28px;

background:rgba(10,10,30,.95);

backdrop-filter:blur(20px);
}

.register-card *{
position:relative;
z-index:2;
}

@keyframes rotateBorder{

100%{
transform:rotate(360deg);
}

}

.logo{
width:90px;
display:block;
margin:auto;
margin-bottom:10px;
}

.register-card h2{
text-align:center;
color:yellowgreen;
font-weight:700;
margin-bottom:25px;
}

.form-control{

height:55px;

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

border:none;

border-radius:15px;

color:white;
}

.form-control::placeholder{
color:#d0d0d0;
}

.form-control:focus{

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

color:white;

box-shadow:
0 0 10px #00d4ff,
0 0 20px #00d4ff;
}

.password-box{
position:relative;
}

.eye-icon{
position:absolute;
right:18px;
top:17px;
color:white;
cursor:pointer;
font-size:18px;
}

.form-check-input{
cursor:pointer;
}

.register-btn{

width:100%;

height:55px;

border:none;

border-radius:15px;

color:white;

font-size:18px;

font-weight:600;

background:linear-gradient(
90deg,
#00d4ff,
#7f3dff,
#ff00cc
);

background-size:300%;

animation:btnMove 4s linear infinite;

transition:.4s;
}

.register-btn:hover{

transform:translateY(-4px);

box-shadow:
0 0 20px #7f3dff,
0 0 40px #ff00cc;
}

@keyframes btnMove{

100%{
background-position:300%;
}

}

.signin-link{
text-align:center;
margin-top:20px;
color:white;
}

.signin-link a{
color:#ff9800;
text-decoration:none;
}

@media(max-width:550px){

.register-card{
width:95%;
padding:30px;
}

}

/***************************************Signin****************************************/

/* Login Card */

.login-card{

    width:420px;

    padding:45px;

    border-radius:30px;

    background:skyblue;

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 10px 50px rgba(0,0,0,.3);

    z-index:100;
}

/* Logo */

.logo{
    width:200px;
    display:block;
    margin:auto;
    margin-bottom:15px;
}

.login-card h2{
    color:#fff;
    text-align:center;
    font-weight:700;
    margin-top:-15px;
    margin-bottom:20px;
    color: yellowgreen;
}

.login-card p{
    text-align:center;
    color:black;
    margin-bottom:25px;
}

/* Inputs */

.form-control{

    height:58px;

    border:none;

    border-radius:15px;

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

    color:white;
}

.form-control::placeholder{
    color:#ddd;
}

.form-control:focus{

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

    color:white;

    box-shadow:
    0 0 10px #00d4ff,
    0 0 20px #00d4ff;
}

/* Password Box */

.password-box{
    position:relative;
}

.eye-icon{

    position:absolute;

    top:18px;

    right:18px;

    color:white;

    cursor:pointer;

    font-size:18px;
}

/* Forgot Password */

a{
    color:#ffc107;
    text-decoration:none;
}

/* Button */

.signin-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:15px;

    color:white;

    font-size:18px;

    font-weight:600;

    background:linear-gradient(
    90deg,
    #ff0080,
    #ff9800
    );

    transition:.4s;
}

.signin-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 10px 30px rgba(255,152,0,.4);
}

/* Responsive */

@media(max-width:500px){

.login-card{
width:90%;
padding:30px;
}

}
.login-container{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:100;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    position:relative;
    overflow:hidden;
}

.login-card::before{
    content:'';
    position:absolute;

    width:300%;
    height:300%;

    background:
    conic-gradient(
    transparent,
    #00d4ff,
    #ff00cc,
    #ff9800,
    transparent);

    animation:rotateBorder 5s linear infinite;
}

.login-card::after{
    content:'';
    position:absolute;

    inset:2px;

    border-radius:28px;

    background:rgba(18,18,35,.9);

    backdrop-filter:blur(20px);
}

.login-card>*{
    position:relative;
    z-index:5;
}

@keyframes rotateBorder{

100%{
transform:rotate(360deg);
}

}


/***************************************************************************/


/* Center */

.auth-container{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
z-index:10;
padding:20px;
}

/* Card */

.auth-card{
position:relative;
width:450px;
max-width:95%;
padding:35px;
border-radius:30px;
overflow:hidden;
}

/* Animated Border */

.auth-card::before{

content:'';

position:absolute;

width:180%;
height:180%;

top:-40%;
left:-40%;

background:conic-gradient(
#00d4ff,
#7f3dff,
#ff00cc,
#ff9800,
#00d4ff
);

animation:rotateBorder 4s linear infinite;
}

.auth-card::after{

content:'';

position:absolute;

inset:3px;

border-radius:28px;

background:rgba(10,10,30,.95);

backdrop-filter:blur(20px);
}

.auth-card *{
position:relative;
z-index:2;
}

@keyframes rotateBorder{

100%{
transform:rotate(360deg);
}

}

/* Logo */

.logo{
width:100px;
display:block;
margin:0 auto 10px;
}

/* Heading */

.auth-card h2{
text-align:center;
color:yellowgreen;
font-weight:700;
margin-bottom:10px;
}

.subtitle{
text-align:center;
color:#d0d0d0;
margin-bottom:25px;
font-size:14px;
}

/* Input */

.form-control{
height:55px;
background:rgba(255,255,255,.08);
border:none;
border-radius:15px;
color:white;
}

.form-control::placeholder{
color:#cfcfcf;
}

.form-control:focus{

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

color:white;

box-shadow:
0 0 10px #00d4ff,
0 0 20px #00d4ff;
}

/* Button */

.auth-btn{

width:100%;
height:55px;

border:none;

border-radius:15px;

font-size:18px;
font-weight:600;

color:white;

background:linear-gradient(
90deg,
#00d4ff,
#7f3dff,
#ff00cc
);

background-size:300%;

animation:btnMove 4s linear infinite;
}

.auth-btn:hover{

transform:translateY(-3px);

box-shadow:
0 0 20px #7f3dff,
0 0 40px #ff00cc;
}

@keyframes btnMove{

100%{
background-position:300%;
}

}

/* Back Link */

.back-link{
margin-top:20px;
text-align:center;
}

.back-link a{
color:#ff9800;
text-decoration:none;
font-weight:500;
}

.back-link a:hover{
color:#fff;
}

@media(max-width:500px){

.auth-card{
padding:25px;
}

}

/******************************************************************************/
/* Center */

.success-container{

    width:100%;
    top:50%;
    left:50%;
    display:flex;
    justify-content:center;
    align-items:center;

    z-index:10;
}

/* Success Table */

.success-table{

    width:520px;

    max-width:95%;

    text-align:center;

    border-collapse:collapse;

    position:relative;

    overflow:hidden;

    border-radius:25px;
}

/* Animated Border */

.success-table::before{

    content:"";

    position:absolute;

    width:180%;
    height:180%;

    top:-40%;
    left:-40%;

    background:conic-gradient(
    #00d4ff,
    #7f3dff,
    #ff00cc,
    #ff9800,
    #00d4ff
    );

    animation:rotateBorder 4s linear infinite;

    z-index:-2;
}

.success-table::after{

    content:"";

    position:absolute;

    inset:3px;

    background:rgba(10,10,30,.95);

    border-radius:22px;

    z-index:-1;
}

@keyframes rotateBorder{

    100%{
        transform:rotate(360deg);
    }
}

/* Rows */

.success-table th,
.success-table td{

    color:white;

    padding:18px;

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

/* Icon */

.icon-row{

    border:none !important;

    padding-top:35px !important;
}

.success-icon{

    width:90px;
    height:90px;

    margin:auto;

    border-radius:50%;

    background:#00ff88;

    color:white;

    font-size:48px;

    font-weight:bold;

    line-height:90px;

    box-shadow:
    0 0 20px #00ff88,
    0 0 40px #00ff88;
}

/* Heading */

.heading-row{

    border:none !important;

    font-size:38px;

    font-weight:700;

    padding-bottom:25px !important;

    color: yellowgreen;
}

/* Table */

.table-head th{

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

    font-size:22px;
}

.table-data td{

    font-size:20px;
}

/* Button */

.button-row{

    border:none !important;

    padding:30px !important;
}

.login-btn{

    display:inline-block;

    width:100%;

    padding:14px;

    border-radius:12px;

    text-decoration:none;

    color:white;

    font-size:18px;

    font-weight:600;

    background:linear-gradient(
    90deg,
    #ff00cc,
    #7f3dff
    );

    transition:.4s;
}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 20px #ff00cc,
    0 0 40px #7f3dff;
}

/* Responsive */

@media(max-width:600px){

    .success-table{
        width:90%;
    }

    .heading-row{
        font-size:20px;
    }

    .table-head th,
    .table-data td{
        font-size:16px;
    }

    .success-icon{
        width:70px;
        height:70px;
        line-height:70px;
        font-size:35px;
    }
}


/**************************************************************/

/* Error Table */

.error-table{

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

    text-align:center;

    border-collapse:separate;

    border-spacing:0;

    position:relative;

    border-radius:25px;

    overflow:hidden;
}

/* Animated Border */

.error-table::before{

    content:"";

    position:absolute;

    width:180%;
    height:180%;

    top:-40%;
    left:-40%;

    background:conic-gradient(
        #00d4ff,
        #7f3dff,
        #ff00cc,
        #ff9800,
        #00d4ff
    );

    animation:rotateBorder 4s linear infinite;

    z-index:-2;
}

.error-table::after{

    content:"";

    position:absolute;

    inset:3px;

    background:rgba(10,10,30,.95);

    border-radius:22px;

    z-index:-1;
}

@keyframes rotateBorder{

    100%{
        transform:rotate(360deg);
    }
}

/* Icon */

.icon-row{

    padding-top:40px;

    font-size:30px;
}

/* Heading */

.heading-row{

    color:white;

    font-size:40px;

    font-weight:300;

    padding-top:10px;

    padding-bottom:40px;
}

/* Divider */

.divider{

    width:90%;

    margin:auto;

    border:none;

    height:1px;

    background:rgba(255,255,255,.15);
}

/* Message */

.message-row{

    color:#d25cff;

    font-size:30px;

    font-weight:500;

    padding-top:50px;

    padding-bottom:50px;
}

/* Button */

.button-row{

    padding-bottom:40px;
}

.retry-btn{

    display:inline-block;

    padding:14px 40px;

    border-radius:12px;

    text-decoration:none;

    color:white;

    font-weight:600;

    background:linear-gradient(
        90deg,
        #ff00cc,
        #7f3dff
    );

    transition:.4s;
}

.retry-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 20px #ff00cc,
        0 0 40px #7f3dff;
}

/* Mobile */

@media(max-width:768px){

    .heading-row{
        font-size:34px;
    }

    .message-row{
        font-size:22px;
    }

    .icon-row{
        font-size:50px;
    }
}
.error-table{
    width:500px;     /* pehle 750px tha */
    max-width:90%;

    text-align:center;

    border-collapse:separate;
    border-spacing:0;

    position:relative;

    border-radius:20px;
    overflow:hidden;
}