/*=================================================
SUBWAY ENERGY ACADEMY
STUDENT PORTAL
==================================================*/

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

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#081321;
    color:#fff;
}

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

.login-container{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
    background:linear-gradient(135deg,#081321,#0b3b82);
}

.login-card{

    width:100%;
    max-width:420px;

    background:#ffffff;

    color:#222;

    border-radius:18px;

    padding:40px;

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

}

.login-card h2{

    text-align:center;

    color:#0b3b82;

    margin-bottom:10px;

}

.login-card p{

    text-align:center;

    color:#777;

    margin-bottom:25px;

}

.login-card input{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    margin-bottom:18px;

    font-size:15px;

}

.login-card input:focus{

    outline:none;

    border-color:#c89000;

}

.login-card button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    background:#c89000;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.login-card button:hover{

    background:#d89d00;

}

.login-card a{

    display:block;

    margin-top:20px;

    text-align:center;

    color:#0b3b82;

    text-decoration:none;

}

/*==============================
STUDENT LAYOUT
==============================*/

.student-layout{

    display:flex;

    min-height:100vh;

}

/*==============================
SIDEBAR
==============================*/

.student-sidebar{

    width:250px;

    background:#0b2348;

    padding:30px 20px;

    display:flex;

    flex-direction:column;

    flex-shrink:0;

}

.student-sidebar h2{

    color:#fff;

    font-size:32px;

    margin-bottom:8px;

}

.student-sidebar p{

    color:#d8d8d8;

    margin-bottom:35px;

}

.student-sidebar nav{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.student-sidebar nav a{

    color:#fff;

    text-decoration:none;

    padding:14px 16px;

    border-radius:10px;

    transition:.25s;

    font-size:15px;

}

.student-sidebar nav a:hover{

    background:#123b75;

}

.student-sidebar nav a.active{

    background:#c89000;

}

/*==============================
MAIN CONTENT
==============================*/

.student-main{

    flex:1;

    padding:40px;

    background:#eef2f7;

    color:#222;

    overflow-x:hidden;

}

.student-main h1{

    font-size:34px;

    margin-bottom:10px;

}

.student-main p{

    color:#666;

}

/*==============================
CARDS
==============================*/

.student-cards{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(230px,1fr));

    gap:25px;

    margin:35px 0;

}

.card{

    background:#fff;

    border-radius:18px;

    padding:28px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

}

.card h3{

    color:#0b3b82;

    margin-bottom:18px;

}

.card h1{

    font-size:40px;

    color:#222;

}
/*=========================================
PROGRESS BAR
=========================================*/

.progress-box{

    width:100%;
    height:14px;

    background:#d9d9d9;

    border-radius:30px;

    overflow:hidden;

    margin-top:15px;

}

.progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #0b3b82,
        #c89000
    );

    transition:.5s;

}

#progressText{

    margin-top:10px;

    font-weight:bold;

    color:#0b3b82;

}

/*=========================================
CONTINUE LEARNING CARD
=========================================*/

.continue-card{

    background:#fff;

    padding:30px;

    border-radius:18px;

    margin-bottom:35px;

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

}

.continue-card h2{

    color:#0b3b82;

    margin-bottom:15px;

}

.continue-btn{

    display:inline-block;

    margin-top:20px;

    padding:14px 26px;

    background:#c89000;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

}

.continue-btn:hover{

    background:#d79d00;

}

/*=========================================
COURSES
=========================================*/

.course-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.course-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s;

}

.course-card:hover{

    transform:translateY(-6px);

}

.course-image{

    height:200px;

    background:linear-gradient(
        135deg,
        #0b3b82,
        #165ec7
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:60px;

}

.course-body{

    padding:25px;

}

.course-body h3{

    color:#0b3b82;

    margin-bottom:15px;

}

.course-body p{

    color:#666;

    line-height:1.6;

}

.course-btn{

    display:inline-block;

    margin-top:20px;

    padding:12px 24px;

    background:#c89000;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

}

/*=========================================
VIDEO PLAYER
=========================================*/

.player-layout{

    display:grid;

    grid-template-columns:
    320px 1fr;

    min-height:100vh;

}

.lesson-sidebar{

    background:#0b2348;

    color:#fff;

    padding:25px;

    overflow-y:auto;

}

.lesson-sidebar h3{

    margin:20px 0 12px;

    color:#ffd86a;

}

.lesson-item{

    padding:14px;

    margin-bottom:10px;

    background:#17396b;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}

.lesson-item:hover{

    background:#c89000;

}

.lesson-content{

    background:#eef2f7;

    color:#222;

    padding:35px;

}

.video-wrapper{

    width:100%;

    border-radius:18px;

    overflow:hidden;

    background:#000;

    margin-bottom:25px;

}

.video-wrapper iframe{

    width:100%;

    height:520px;

    border:none;

}

.lesson-actions{

    display:flex;

    gap:15px;

    margin-top:25px;

    flex-wrap:wrap;

}

.lesson-actions button{

    padding:14px 22px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:#0b3b82;

    color:#fff;

    font-weight:bold;

}

.lesson-actions button:hover{

    background:#165ec7;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.student-layout{

flex-direction:column;

}

.student-sidebar{

width:100%;

}

.player-layout{

grid-template-columns:1fr;

}

.lesson-sidebar{

height:auto;

}

.video-wrapper iframe{

height:420px;

}

.student-main{

padding:25px;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.student-main h1{

font-size:28px;

}

.student-cards{

grid-template-columns:1fr;

}

.course-grid{

grid-template-columns:1fr;

}

.video-wrapper iframe{

height:240px;

}

.lesson-content{

padding:20px;

}

.student-sidebar{

padding:20px;

}

.student-sidebar nav a{

padding:12px;

}

.login-card{

padding:30px 22px;

}

.card{

padding:20px;

}

}
/*=========================================
HERO
=========================================*/

.hero{

padding:120px 0 80px;

background:#f8fbff;

}

.hero-container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero-content h1{

font-size:3.2rem;

line-height:1.2;

margin:20px 0;

}

.hero-content h1 span{

color:#0056d2;

}

.hero-content p{

font-size:18px;

line-height:1.8;

margin-bottom:30px;

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;

}

.hero-stats{

display:flex;

gap:40px;

flex-wrap:wrap;

}

.hero-stats h2{

font-size:34px;

color:#0056d2;

margin-bottom:5px;

}

.hero-image img{

width:100%;

display:block;

}

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

@media(max-width:992px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-content h1{

font-size:2.6rem;

}

}

@media(max-width:768px){

.hero{

padding:90px 0 60px;

}

.hero-content h1{

font-size:2rem;

}

.hero-content p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

text-align:center;

}

.hero-stats{

gap:25px;

}

}

@media(max-width:480px){

.hero-content h1{

font-size:1.7rem;

}

.hero-content p{

font-size:15px;

}

.hero-stats h2{

font-size:28px;

}

}