/* ===========================
   BESTECH CCC Portal v1.0
   =========================== */

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

body{

background:#f5f5f5;

background-image:

linear-gradient(135deg,#800000,#b8860b);

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}

.login-container{

width:100%;

max-width:500px;

}

.login-card{

background:#ffffff;

border-radius:18px;

padding:35px;

box-shadow:

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

text-align:center;

}

.logo{

width:120px;

height:120px;

border-radius:50%;

margin:auto;

display:block;

margin-bottom:20px;

}

h1{

font-size:26px;

color:#800000;

font-weight:700;

}

h2{

font-size:20px;

color:#b8860b;

margin-top:5px;

font-weight:600;

}

.portal-title{

margin-top:15px;

font-size:18px;

font-weight:600;

color:#333;

}

.form-group{

margin-top:20px;

text-align:left;

}

.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

color:#444;

}

.form-group input,

.form-group select{

width:100%;

padding:14px;

font-size:16px;

border-radius:10px;

border:1px solid #ccc;

outline:none;

transition:.3s;

}

.form-group input:focus,

.form-group select:focus{

border-color:#800000;

box-shadow:0 0 8px rgba(128,0,0,.25);

}
button{

width:100%;

padding:15px;

margin-top:25px;

background:#800000;

color:#fff;

border:none;

border-radius:10px;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#a00000;

transform:translateY(-2px);

}

.instruction-box{

margin-top:20px;

padding:15px;

background:#fff8e6;

border:1px solid #e0c36c;

border-radius:10px;

text-align:left;

font-size:14px;

}

.checkbox{

display:flex;

align-items:flex-start;

gap:10px;

cursor:pointer;

}

.checkbox input{

margin-top:4px;

}

.loading-screen{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:9999;

}

.loader{

width:60px;

height:60px;

border:6px solid #ddd;

border-top:6px solid #800000;

border-radius:50%;

animation:spin 1s linear infinite;

margin-bottom:15px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.footer{

margin-top:25px;

text-align:center;

font-size:13px;

color:#ffffff;

}

@media(max-width:600px){

.login-card{

padding:20px;

}

h1{

font-size:22px;

}

h2{

font-size:18px;

}

.portal-title{

font-size:16px;

}

}