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

body{
background:#f5f7fb;
color:#222;
padding-top:90px;
}


/*====================================*
* HEADER
*====================================*/

.header{
position:fixed;
top:0;
left:0;
width:100%;
height:90px;
background:#123A63;
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
box-shadow:0 3px 10px rgba(0,0,0,.2);
}


.menu-btn{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
background:none;
border:none;
color:white;
font-size:27px;
cursor:pointer;
padding:8px;
z-index:1001;
}


.logo-area{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
color:white;
text-align:left;
}


.logo{
display:flex;
align-items:center;
justify-content:center;
}


.logo svg{
width:45px;
height:45px;
display:block;
}


.programme-name{
display:flex;
flex-direction:column;
justify-content:center;
}


.programme-name h2{
margin:0;
font-size:17px;
font-weight:700;
line-height:1.2;
white-space:nowrap;
}


.programme-name p{
margin:3px 0 0;
font-size:12px;
line-height:1.2;
white-space:nowrap;
opacity:.9;
}
/*====================================*
* DRAWER
*====================================*/

.overlay{
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:rgba(0,0,0,.5);
display:none;
z-index:1100;
}


.overlay.show{
display:block;
}



.drawer{
position:fixed;
top:0;
left:-330px;
width:320px;
height:100%;
background:white;
z-index:1200;
transition:left .3s ease;
overflow-y:auto;
}


.drawer.show{
left:0;
}



/*====================================*
* DRAWER HEADER
*====================================*/

.drawer-header{
height:70px;
background:#123A63;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
}


.drawer-header button{
background:none;
border:none;
color:white;
font-size:25px;
cursor:pointer;
}



/*====================================*
* DRAWER CONTENT
*====================================*/

.drawer-content{
padding:15px;
}


.menu-item{
border-bottom:1px solid #ddd;
}


.accordion{
width:100%;
padding:15px 5px;
border:none;
background:white;
display:flex;
justify-content:space-between;
align-items:center;
font-size:15px;
font-weight:bold;
color:#123A63;
cursor:pointer;
}


.accordion span{
display:flex;
gap:10px;
align-items:center;
}


.panel{
display:none;
padding:10px 15px 15px;
font-size:14px;
color:#555;
}


.panel ul,
.panel ol{
padding-left:20px;
}


.menu-item.active .panel{
display:block;
}



/* LANDING PAGE */


.welcome{
text-align:center;
padding:50px 20px 30px;
}


.welcome h1{
font-size:22px;
color:#555;
}


.welcome h2{
font-size:30px;
color:#123A63;
margin:15px 0;
}


.welcome p{
font-size:16px;
color:#555;
}



.closing-card{
background:white;
margin:20px;
padding:25px;
border-radius:15px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,.1);
border-left:5px solid #D4AF37;
}


.closing-card h3{
color:#123A63;
}


.closing-card h2{
color:#2E7D32;
font-size:30px;
margin-top:10px;
}




.action-buttons{
padding:20px;
display:flex;
flex-direction:column;
gap:15px;
}


.action-buttons a{
text-decoration:none;
text-align:center;
padding:16px;
border-radius:12px;
font-size:18px;
font-weight:bold;
}


.action-buttons a:nth-child(1){
background:#2E7D32;
color:white;
}


.action-buttons a:nth-child(2){
background:#123A63;
color:white;
}


.action-buttons a:nth-child(3){
background:white;
color:#123A63;
border:2px solid #123A63;
}
/* INSPIRING BURSARY IMAGE */

.inspiring-image{
margin:20px;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.inspiring-image img{
width:100%;
height:230px;
object-fit:cover;
display:block;
}


/* FOOTER */

footer{
background:#123A63;
color:white;
text-align:center;
padding:30px 15px;
margin-top:40px;
}


footer p{
margin-top:8px;
font-size:14px;
}



@media(max-width:500px){

.welcome h2{
font-size:24px;
}

.drawer{
width:85%;
}

}
/*====================================
APPLY PAGE
====================================*/

.apply-page{
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

.apply-card{
width:100%;
max-width:650px;
background:#ffffff;
border-radius:18px;
padding:35px 25px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
text-align:center;
}

.apply-card h1{
color:#123A63;
font-size:30px;
margin-bottom:12px;
}

.apply-card p{
color:#555;
font-size:16px;
line-height:1.6;
}

.date-box{
margin:30px 0;
padding:20px;
background:#f8f9fc;
border-left:6px solid #D4AF37;
border-radius:12px;
}

.date-box h3{
color:#123A63;
margin-bottom:8px;
font-size:20px;
}

.date-box p{
margin-bottom:8px;
}

.date-box strong{
font-size:28px;
color:#2E7D32;
}

.application-options{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:30px;
}

.option-card{
display:block;
text-decoration:none;
background:#ffffff;
border:2px solid #e5e7eb;
border-radius:16px;
padding:25px 20px;
transition:.3s;
}

.option-card:hover{
transform:translateY(-5px);
border-color:#123A63;
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.option-icon{
font-size:50px;
margin-bottom:15px;
}

.option-card h2{
color:#123A63;
font-size:22px;
margin-bottom:10px;
}

.option-card p{
font-size:15px;
color:#666;
margin-bottom:20px;
}

.option-button{
display:inline-block;
background:#123A63;
color:#fff;
padding:12px 24px;
border-radius:10px;
font-weight:bold;
font-size:15px;
}

.option-card:last-child .option-button{
background:#2E7D32;
}

@media(max-width:700px){

.application-options{
grid-template-columns:1fr;
}

.apply-card{
padding:25px 18px;
}

.apply-card h1{
font-size:26px;
}

.date-box strong{
font-size:24px;
}

}
/*====================================
CREATE ACCOUNT PAGE
====================================*/

.account-page{
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

.account-card{
width:100%;
max-width:650px;
background:#ffffff;
padding:35px 25px;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.account-card h1{
text-align:center;
color:#123A63;
font-size:30px;
margin-bottom:10px;
}

.account-card p{
text-align:center;
color:#666;
margin-bottom:25px;
line-height:1.6;
}

.account-card form{
display:flex;
flex-direction:column;
}

.account-card label{
font-weight:600;
color:#123A63;
margin-top:15px;
margin-bottom:8px;
}

.account-card input{
width:100%;
padding:14px 15px;
font-size:16px;
border:1px solid #d1d5db;
border-radius:10px;
outline:none;
transition:.3s;
}

.account-card input:focus{
border-color:#123A63;
box-shadow:0 0 0 3px rgba(18,58,99,.12);
}

.terms-box{
display:flex;
align-items:flex-start;
gap:10px;
margin:22px 0;
}

.terms-box input{
width:18px;
height:18px;
margin-top:3px;
cursor:pointer;
}

.terms-box label{
margin:0;
font-size:14px;
font-weight:400;
color:#555;
line-height:1.5;
cursor:pointer;
}

.primary-btn{
width:100%;
padding:16px;
background:#2E7D32;
color:#fff;
border:none;
border-radius:12px;
font-size:17px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.primary-btn:hover{
background:#256a2a;
}

.login-link{
margin-top:25px;
text-align:center;
}

.login-link p{
margin:0;
color:#555;
}

.login-link a{
color:#123A63;
font-weight:700;
text-decoration:none;
}

.login-link a:hover{
text-decoration:underline;
}

@media(max-width:700px){

.account-card{
padding:25px 18px;
}

.account-card h1{
font-size:26px;
}

.account-card input{
font-size:15px;
}

.primary-btn{
font-size:16px;
}

}
/*====================================
LOGIN PAGE
====================================*/

.login-page{
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

.login-card{
width:100%;
max-width:550px;
background:#ffffff;
padding:35px 25px;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.login-card h1{
text-align:center;
color:#123A63;
font-size:30px;
margin-bottom:10px;
}

.login-card p{
text-align:center;
color:#666;
margin-bottom:25px;
line-height:1.6;
}

.login-card form{
display:flex;
flex-direction:column;
}

.login-card label{
font-weight:600;
color:#123A63;
margin-top:15px;
margin-bottom:8px;
}

.login-card input[type="email"],
.login-card input[type="password"]{
width:100%;
padding:14px 15px;
font-size:16px;
border:1px solid #d1d5db;
border-radius:10px;
outline:none;
transition:.3s;
}

.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus{
border-color:#123A63;
box-shadow:0 0 0 3px rgba(18,58,99,.12);
}

.login-options{
display:flex;
justify-content:space-between;
align-items:center;
margin:20px 0;
gap:10px;
}

.remember-me{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:#555;
cursor:pointer;
}

.remember-me input{
width:18px;
height:18px;
cursor:pointer;
}

.forgot-password{
text-decoration:none;  
color:#123A63;
font-size:14px;
font-weight:600;
}

.forgot-password:hover{
text-decoration:underline;
}

.login-card .primary-btn{
width:100%;
padding:16px;
background:#123A63;
color:#fff;
border:none;
border-radius:12px;
font-size:17px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.login-card .primary-btn:hover{
background:#0f2f4e;
}

.login-link{
margin-top:25px;
text-align:center;
}

.login-link p{
margin:0;
color:#555;
}

.login-link a{
color:#2E7D32;
font-weight:700;
text-decoration:none;
}

.login-link a:hover{
text-decoration:underline;
}

@media(max-width:700px){

.login-card{
padding:25px 18px;
}

.login-card h1{
font-size:26px;
}

.login-options{
flex-direction:column;
align-items:flex-start;
}

.forgot-password{
margin-left:26px;
}

}
/*====================================
STUDENT DASHBOARD
====================================*/

.dashboard-page{
display:flex;
justify-content:center;
padding:40px 20px;
}

.dashboard-card{
width:100%;
max-width:700px;
background:#fff;
border-radius:18px;
padding:35px 25px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.dashboard-card h1{
text-align:center;
color:#123A63;
font-size:30px;
margin-bottom:10px;
}

.dashboard-card>p{
text-align:center;
color:#666;
margin-bottom:30px;
}

/* STATUS */

.status-card,
.progress-card,
.notifications-card{
background:#f8f9fc;
border-radius:14px;
padding:20px;
margin-bottom:22px;
border-left:5px solid #123A63;
}

.status-card h3,
.progress-card h3,
.notifications-card h3{
color:#123A63;
margin-bottom:12px;
}

.status{
display:inline-block;
padding:8px 18px;
border-radius:20px;
font-weight:700;
font-size:14px;
}

.status.pending{
background:#fff3cd;
color:#856404;
}

/* PROGRESS BAR */

.progress{
width:100%;
height:18px;
background:#e5e7eb;
border-radius:20px;
overflow:hidden;
margin:12px 0;
}

.progress-fill{
width:0%;
height:100%;
background:#2E7D32;
border-radius:20px;
transition:.4s;
}

.progress-card p{
font-weight:600;
color:#555;
}

/* NOTIFICATIONS */

.notifications-card ul{
padding-left:20px;
}

.notifications-card li{
margin-bottom:10px;
color:#555;
line-height:1.6;
}

/* ACTION BUTTONS */

.dashboard-actions{
display:flex;
flex-direction:column;
gap:15px;
margin-top:30px;
}

.dashboard-btn{
display:block;
text-align:center;
text-decoration:none;
padding:16px;
border-radius:12px;
font-weight:700;
font-size:17px;
transition:.3s;
}

.start-btn{
background:#2E7D32;
color:#fff;
}

.secondary-btn{
background:#123A63;
color:#fff;
}

.logout-btn{
background:#dc3545;
color:#fff;
}

.dashboard-btn:hover{
opacity:.92;
transform:translateY(-2px);
}

@media(max-width:700px){

.dashboard-card{
padding:25px 18px;
}

.dashboard-card h1{
font-size:26px;
}

.dashboard-btn{
font-size:16px;
}

}

/* ==================================
   BURSARY APPLICATION STYLE
   ================================== */


.bursary-application-page{

min-height:100vh;
background:#f4f7fb;
padding:30px 15px;
font-family:Arial, sans-serif;

}


/* BRAND AREA */

.application-logo-area{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
margin-bottom:35px;

}

.application-logo{

width:95px;
height:95px;
margin-bottom:15px;

}

.application-logo svg{

width:100%;
height:100%;
display:block;

}

.application-logo-area h1{

margin:0;
font-size:30px;
color:#123A63;
font-weight:700;

}

.application-logo-area h2{

margin:8px 0;
font-size:22px;
color:#123A63;

}

.application-logo-area p{

margin-top:8px;
font-size:16px;
color:#666;

}



/* STEP HEADER */

.application-step-header{

text-align:center;
background:white;
max-width:650px;
margin:0 auto 20px;
padding:20px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);

}


.application-step-header h3{

margin:0;
font-size:18px;
color:#D4AF37;

}


.application-step-header h2{

margin:10px 0 0;
font-size:26px;
color:#123A63;

}



/* FORM CARD */

.application-form-card{

background:white;
max-width:650px;
margin:auto;
padding:30px;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,0.10);

}



.application-form-card label{

display:block;
font-size:17px;
font-weight:bold;
color:#123A63;
margin-top:20px;
margin-bottom:8px;

}



.application-form-card input,
.application-form-card select{

width:100%;
padding:16px;
font-size:16px;
border:1px solid #ccd5e0;
border-radius:12px;
box-sizing:border-box;

}



.application-form-card input:focus,
.application-form-card select:focus{

outline:none;
border-color:#123A63;

}



/* BUTTON */

.next-button{

width:100%;
margin-top:35px;
padding:17px;

background:#123A63;
color:white;

border:none;
border-radius:12px;

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

cursor:pointer;

}


.next-button:hover{

background:#0d2c4d;

}



/* MOBILE */

@media(max-width:600px){

.application-logo{

width:80px;
height:80px;

}


.application-logo-area h1{

font-size:23px;

}


.application-logo-area h2{

font-size:19px;

}


.application-form-card{

padding:20px;

}

}
/* ==================================
   STEP NAVIGATION BUTTONS
   ================================== */

.form-navigation{

display:flex;
justify-content:space-between;
gap:15px;
margin-top:35px;

}

.back-btn{

flex:1;
padding:16px;
background:#e9ecef;
color:#123A63;
border:none;
border-radius:12px;
font-size:17px;
font-weight:bold;
cursor:pointer;
transition:.3s;

}

.back-btn:hover{

background:#d6dbe2;

}

.next-button{

flex:1;

}

@media(max-width:700px){

.form-navigation{

flex-direction:column;

}

}
/*====================================
STEP 4 - SUBMIT APPLICATION
====================================*/

.application-form-card{

background:#ffffff;
border-radius:18px;
padding:25px;
margin-top:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);

}

#step4Form{

display:flex;
flex-direction:column;
min-height:70vh;

}

#step4Form h2{

font-size:30px;
text-align:center;
color:#123A63;
margin-top:10px;
margin-bottom:20px;

}

#step4Form p{

font-size:17px;
line-height:1.8;
text-align:center;
color:#555;
margin-bottom:12px;

}

.form-navigation{

margin-top:auto;
padding-top:120px;

}

#submitApplication{

width:100%;
height:65px;

background:#123A63;
color:#ffffff;

border:none;
border-radius:12px;

font-size:20px;
font-weight:bold;

cursor:pointer;

transition:.3s;

}

#submitApplication:hover{

background:#0d2f4d;

}

#submitApplication:active{

transform:scale(.98);

}

#submitApplication:disabled{

background:#9aa5b1;
cursor:not-allowed;

}
.success-message{

display:none;

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);

background:#fff;

padding:30px;

width:320px;

border-radius:12px;

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

text-align:center;

z-index:9999;

}

.success-icon{

font-size:40px;

margin-bottom:10px;

}

.success-message h3{

color:#1b7f3b;

margin:0;

}

.success-message{

display:none;

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%) scale(0.9);

width:360px;

background:#ffffff;

border-radius:16px;

border-top:6px solid #123A63;

box-shadow:0 15px 40px rgba(0,0,0,.25);

padding:30px;

text-align:center;

z-index:9999;

animation:popup .3s ease forwards;

}

.success-icon{

width:70px;

height:70px;

margin:auto;

margin-bottom:18px;

border-radius:50%;

background:#28a745;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:white;

}

.success-message h3{

font-size:24px;

color:#123A63;

margin-bottom:10px;

}

.success-message p{

font-size:15px;

color:#666;

margin:0;

}
.error-message{

display:none;

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%) scale(0.9);

width:360px;

background:#ffffff;

border-radius:16px;

border-top:6px solid #dc3545;

box-shadow:0 15px 40px rgba(0,0,0,.25);

padding:30px;

text-align:center;

z-index:9999;

animation:popup .3s ease forwards;

}

.error-message h3{

font-size:22px;

color:#dc3545;

margin:0;

}
@keyframes popup{

from{

opacity:0;

transform:translate(-50%,-50%) scale(.8);

}

to{

opacity:1;

transform:translate(-50%,-50%) scale(1);

}

}
#proceedLogin{

display:none;

margin-top:20px;

}