/*=====================================
REGISTER PAGE
=====================================*/

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

body{

font-family:'Segoe UI',sans-serif;
background:#f5f6fa;

}

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

.register-section{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:50px 15px;

background:linear-gradient(135deg,#15161D 0%,#1f2333 50%,#D10024 100%);

}

/*=====================================
CARD
=====================================*/

.register-card{

width:100%;

max-width:520px;

background:#fff;

border-radius:20px;

padding:45px;

box-shadow:0 20px 60px rgba(0,0,0,.18);

animation:fadeUp .5s ease;

}

/*=====================================
LOGO
=====================================*/

.register-logo{

text-align:center;

margin-bottom:25px;

}

.register-logo img{

max-width:170px;

height:auto;

}

/*=====================================
TITLE
=====================================*/

.register-card h2{

text-align:center;

font-size:34px;

font-weight:800;

color:#15161D;

margin-bottom:10px;

}

.register-card p{

text-align:center;

color:#777;

margin-bottom:30px;

}

/*=====================================
FORM
=====================================*/

.form-group{

margin-bottom:18px;

}

.form-group label{

display:block;

font-weight:600;

margin-bottom:8px;

color:#15161D;

}

.input-group{

border-radius:12px;

overflow:hidden;

}

.input-group-text{

background:#f3f5f8;

border:none;

width:52px;

justify-content:center;

}

.form-control{

height:52px;

border:none;

box-shadow:none!important;

font-size:15px;

}

.form-control:focus{

background:#fff;

}

/*=====================================
OTP BUTTON
=====================================*/

#sendOTP{

background:#D10024;

color:#fff;

border:none;

padding:0 18px;

font-weight:700;

}

#sendOTP:hover{

background:#15161D;

}

/*=====================================
VERIFY BUTTON
=====================================*/

#verifyOTP{

background:#28a745;

color:#fff;

border:none;

padding:0 18px;

font-weight:700;

}

#verifyOTP:hover{

background:#1c7a33;

}

/*=====================================
PASSWORD BUTTON
=====================================*/

#togglePassword{

background:#f3f5f8;

border:none;

width:55px;

}

/*=====================================
REGISTER BUTTON
=====================================*/

.register-btn{

width:100%;

height:55px;

background:#D10024;

border:none;

border-radius:12px;

font-size:17px;

font-weight:700;

color:#fff;

transition:.3s;

}

.register-btn:hover{

background:#15161D;

}

/*=====================================
LOGIN LINK
=====================================*/

.login-link{

text-align:center;

margin-top:25px;

font-size:15px;

}

.login-link a{

text-decoration:none;

font-weight:700;

color:#D10024;

}

.login-link a:hover{

text-decoration:underline;

}

/*=====================================
OTP STATUS
=====================================*/

#otpStatus{

font-size:14px;

font-weight:600;

}

/*=====================================
ALERT
=====================================*/

.alert{

border-radius:12px;

}

/*=====================================
ANIMATION
=====================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:768px){

.register-card{

padding:35px 25px;

}

.register-card h2{

font-size:28px;

}

.register-logo img{

max-width:140px;

}

}

@media(max-width:576px){

.register-section{

padding:20px 10px;

}

.register-card{

padding:25px 18px;

border-radius:15px;

}

.register-card h2{

font-size:24px;

}

.form-control{

height:48px;

}

.register-btn{

height:50px;

}

#sendOTP{

font-size:13px;

padding:0 12px;

}

#verifyOTP{

font-size:13px;

padding:0 12px;

}

}