/* =========================================
DIGITAL VIDYALAYA LMS
PART 1 : CORE THEME + HEADER + FOOTER
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================================
ROOT VARIABLES
========================================= */

:root{

--primary:#0056d2;
--primary-dark:#003b8f;
--secondary:#1f2937;
--accent:#14b8a6;
--orange:#f97316;

--white:#ffffff;
--light:#f8fafc;
--gray:#64748b;
--border:#e5e7eb;

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

--radius:18px;

}

/* =========================================
RESET
========================================= */

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

html{
scroll-behavior:smooth;
}

body{
background:#f5f7fb;
color:#334155;
line-height:1.6;
overflow-x:hidden;
}

a{
text-decoration:none;
}

img{
max-width:100%;
display:block;
}

ul{
list-style:none;
}

.container{
width:90%;
max-width:1300px;
margin:auto;
}

.success-msg{

background:#d4edda;

color:#155724;

padding:15px;

border-radius:8px;

margin-bottom:20px;

text-align:center;

font-weight:bold;

}
/* =========================================
UTILITY CLASSES
========================================= */

.text-center{
text-align:center;
}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

/* =========================================
BUTTONS
========================================= */

.btn-primary{

display:inline-block;

background:var(--primary);
color:#fff;

padding:12px 24px;

border:none;
border-radius:50px;

font-weight:600;
cursor:pointer;

transition:.3s;
}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-2px);

box-shadow:
0 8px 20px rgba(0,86,210,.25);

}

.btn-secondary{

display:inline-block;

background:#fff;

color:var(--primary);

border:2px solid var(--primary);

padding:12px 24px;

border-radius:50px;

font-weight:600;

transition:.3s;
}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

.btn-success{

display:inline-block;

background:#16a34a;

color:#fff;

padding:12px 24px;

border-radius:50px;

font-weight:600;

}

.btn-danger{

display:inline-block;

background:#dc2626;

color:#fff;

padding:12px 24px;

border-radius:50px;

font-weight:600;

}

.btn-sm{

padding:8px 15px;

font-size:14px;

border-radius:8px;

}




/* =========================================
TOP BAR
========================================= */

.top-bar{

background:#0f172a;

color:#fff;

padding:10px 40px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

font-size:14px;

}

.top-bar div{

display:flex;

align-items:center;

gap:8px;

}

.top-bar i{

color:var(--accent);

}


/* ====================================
   Header
==================================== */


.course-layout{

display:flex;
gap:20px;
padding:30px;

}

.course-sidebar{

width:320px;
background:#fff;
padding:20px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.course-sidebar ul{

list-style:none;
padding:0;

}

.course-sidebar li{

margin-bottom:10px;

}

.course-sidebar a{

display:block;
padding:10px;
border-radius:8px;

}

.course-sidebar a.active{

background:#0056d2;
color:#fff;

}

.course-content{

flex:1;
background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.video-container{

width:100%;
height:500px;
margin-bottom:20px;

}

.video-container iframe{

width:100%;
height:100%;
border:none;
border-radius:10px;

}

.progress-bar{

height:12px;
background:#ddd;
border-radius:20px;
overflow:hidden;
margin-bottom:10px;

}

.progress-fill{

height:100%;
background:#16a34a;

}

.certificate-ready{

background:#dcfce7;
padding:15px;
border-radius:10px;
margin-top:20px;
color:#166534;

}

.course-actions{

display:flex;
gap:15px;
margin-top:20px;

}

@media(max-width:992px){

.course-layout{

flex-direction:column;

}

.course-sidebar{

width:100%;

}

.video-container{

height:300px;

}

}


.certificate-footer{

    position:absolute;

    left:60px;
    right:60px;
    bottom:40px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    z-index:10;

}

.qr-box{

    text-align:center;

}

.qr-box img{

    width:110px;
    height:110px;

}

.qr-box p{

    margin-top:5px;
    font-size:14px;

}

.signature-box{

    text-align:center;

}

.signature-box img{

    width:150px;
    display:block;
    margin:auto;

}

.signature-line{

    border-top:1px solid #000;

    padding-top:8px;

    width:180px;

}

body{

    background:#f1f5f9;

    font-family:'Poppins',sans-serif;

    margin:0;

    padding:30px;

}

.certificate-container{

    width:1123px;

    height:794px;

    margin:auto;

    background:#fff;

    position:relative;

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

}



.certificate-border{

    position:absolute;

    top:15px;
    left:15px;
    right:15px;
    bottom:15px;

    border:10px solid #0f4c81;

    padding:40px;

    text-align:center;

}



.certificate-border::before{

    content:'';

    position:absolute;

    top:12px;
    left:12px;
    right:12px;
    bottom:12px;

    border:2px solid #d4af37;

}

.certificate-watermark{

    position:absolute;

    top:50%;

    left:50%;

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

    opacity:0.05;

    z-index:1;

}

.certificate-watermark img{

    width:450px;

}

.certificate-content{

    position:relative;

    z-index:5;
   

}

.certificate-logo{

    width:120px;
   

}



.certificate-title{

    font-size:48px;

    color:#0056d2;

    margin:15px 0;

}

.student-name{

    font-size:52px;

    font-weight:700;

    margin:20px 0;

    color:#111827;

}

.course-name{

    font-size:34px;

    color:#0056d2;

    margin:15px 0;

}

.certificate-details{

    display:flex;

    justify-content:space-around;

    margin-top:35px;

}

.certificate-signatures{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-top:90px;

}
.certificate-description{

    max-width:700px;

    margin:15px auto;

    line-height:1.5;

    font-size:16px;

}

@page{

    size:A4 landscape;

    margin:0;

}

@media print{

    body{

        background:#ffffff;

        margin:0;

        padding:0;

    }

    .certificate-actions,
    header,
    footer{

        display:none !important;

    }

    .certificate-container{

        width:100%;

        min-height:100%;

        box-shadow:none;

        margin:0;

    }

}


.certificate-logo,
.certificate-title,
.certificate-subtitle,
.certificate-text,
.student-name,
.course-name,
.certificate-description,
.certificate-details,
.qr-section,
.certificate-signatures{

    position:relative;

    z-index:5;

}

.qr-section img{

    width:100px;

}

.actions{

    text-align:center;

    margin-top:20px;

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

.header{

background:#fff;

position:sticky;

top:0;

z-index:9999;

box-shadow:
0 4px 20px rgba(0,0,0,.08);

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 40px;

}

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

.logo-section{

display:flex;

align-items:center;

gap:12px;

}

.site-logo{

width:60px;

height:60px;

object-fit:contain;

}

.logo-text h2{

font-size:24px;

color:var(--primary);

margin:0;

}

.logo-text span{

font-size:12px;

color:var(--gray);

}

/* =========================================
NAVIGATION
========================================= */

.nav-links{

display:flex;

align-items:center;

gap:25px;

}

.nav-links li{

position:relative;

}

.nav-links li a{

color:var(--secondary);

font-size:15px;

font-weight:600;

transition:.3s;

position:relative;

}

.nav-links li a:hover{

color:var(--primary);

}

.nav-links li a::after{

content:'';

position:absolute;

left:0;

bottom:-5px;

width:0;

height:3px;

background:var(--primary);

transition:.3s;

}

.nav-links li a:hover::after{

width:100%;

}

.nav-links li a.active{

color:var(--primary);

}

.nav-links li a.active::after{

width:100%;

}

/* ====================================
   Header
==================================== */
.certificate-grid{

    display:grid;

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

    gap:25px;

    margin-top:30px;

}

.certificate-card{

    background:#fff;

    padding:25px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.certificate-card:hover{

    transform:translateY(-5px);

}

.certificate-icon{

    font-size:60px;

    margin-bottom:15px;

}

.certificate-card h3{

    color:#0056d2;

    margin-bottom:15px;

}

.certificate-actions{

    display:flex;

    gap:10px;

    justify-content:center;

    margin-top:20px;

}

.search-box{

    margin:25px 0;

}

.search-box form{

    display:flex;

    gap:10px;

}

.search-box input{

    flex:1;

    padding:12px;

    border:1px solid #ddd;

    border-radius:8px;

}

@media(max-width:768px){

.certificate-actions{

    flex-direction:column;

}

.search-box form{

    flex-direction:column;

}

}



/* ====================================
   Header
==================================== */

.header{
    background:#ffffff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:999;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.logo a{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo img{
    width:60px;
    height:60px;
    object-fit:contain;
}

.logo-text h2{
    margin:0;
    color:#0056d2;
    font-size:24px;
}

.logo-text p{
    margin:0;
    color:#64748b;
    font-size:12px;
}

.menu{
    display:flex;
    align-items:center;
    gap:20px;
    list-style:none;
}

.menu li{
    position:relative;
}

.menu a{
    text-decoration:none;
    color:#1e293b;
    font-weight:500;
}

.menu a:hover{
    color:#0056d2;
}

.register-btn{
    background:#0056d2;
    color:#fff !important;
    padding:10px 20px;
    border-radius:8px;
}

.notification-badge{
    background:red;
    color:#fff;
    font-size:11px;
    padding:2px 7px;
    border-radius:50px;
    margin-left:5px;
}

.dropdown-menu{
    position:absolute;
    right:0;
    top:100%;
    background:#fff;
    width:220px;
    display:none;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.dropdown:hover .dropdown-menu{
    display:block;
}

.dropdown-menu li{
    display:block;
}

.dropdown-menu a{
    display:block;
    padding:12px 15px;
}

.mobile-menu-btn{
    display:none;
    font-size:28px;
    cursor:pointer;
}

@media(max-width:992px){

.mobile-menu-btn{
    display:block;
}

#mainMenu{
    display:none;
    width:100%;
}

#mainMenu.active{
    display:block;
}

.menu{
    flex-direction:column;
    align-items:flex-start;
    padding-top:15px;
}

.navbar{
    flex-wrap:wrap;
}

}

.site-logo{
    width:60px;
    height:60px;
    object-fit:contain;
}

.logo-section{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-text h2{
    margin:0;
    font-size:24px;
}

.logo-text span{
    font-size:12px;
    color:#64748b;
}

.notification-badge{
    background:red;
    color:#fff;
    font-size:11px;
    padding:2px 7px;
    border-radius:20px;
    margin-left:5px;
}

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:100%;
    right:0;
    background:#fff;
    min-width:220px;
    display:none;
    box-shadow:0 10px 20px rgba(0,0,0,.1);
    border-radius:10px;
    z-index:999;
}

.dropdown:hover .dropdown-menu{
    display:block;
}

.dropdown-menu li{
    list-style:none;
}

.dropdown-menu a{
    display:block;
    padding:12px 15px;
}

.mobile-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
}

@media(max-width:992px){

.mobile-toggle{
    display:block;
}

#mainMenu{
    display:none;
}

#mainMenu.active{
    display:block;
}

.nav-menu{
    flex-direction:column;
}

}

/* =========================================
DROPDOWN
========================================= */

.dropdown{

position:relative;

}

.dropdown-menu{

position:absolute;

top:120%;

left:0;

min-width:250px;

background:#fff;

border-radius:15px;

box-shadow:
0 15px 35px rgba(0,0,0,.12);

border-top:4px solid var(--primary);

opacity:0;

visibility:hidden;

transform:translateY(10px);

transition:.3s;

z-index:999;

}

.dropdown:hover .dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.dropdown-menu li{

width:100%;

}

.dropdown-menu li a{

display:block;

padding:14px 20px;

border-bottom:1px solid #f1f5f9;

color:#334155;

}

.dropdown-menu li:last-child a{

border-bottom:none;

}

.dropdown-menu li a:hover{

background:#f8fafc;

color:var(--primary);

padding-left:25px;

}

/* =========================================
NAV ACTIONS
========================================= */

.nav-actions{

display:flex;

align-items:center;

gap:12px;

}

.welcome-user{

font-size:14px;

font-weight:600;

color:#475569;

}

/* ====================================
   Notification
==================================== */

.notification-card{

    background:#ffffff;

    padding:25px;

    border-radius:15px;

    margin-bottom:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    border-left:5px solid #0056d2;

}

.notification-card.unread{

    border-left-color:#dc2626;

}

.notification-card.read{

    opacity:.9;

}

.notification-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

.notification-header h3{

    margin:0;

    color:#1e293b;

}

.notification-type{

    background:#0056d2;

    color:white;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

}

.notification-message{

    margin-bottom:15px;

    line-height:1.7;

}

.notification-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.read-badge{

    background:#dcfce7;

    color:#166534;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

.btn-sm{

    padding:8px 15px;

    font-size:13px;

}

@media(max-width:768px){

.notification-header,
.notification-footer{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}

}

.notification-count{

    background:red;

    color:white;

    padding:2px 8px;

    border-radius:50%;

    font-size:11px;

    margin-left:5px;

}

.notification-count{

    background:red;

    color:white;

    padding:2px 8px;

    border-radius:50%;

    font-size:11px;

    margin-left:5px;

}

/* =========================================
NOTIFICATION BADGE
========================================= */

.notification-badge{

background:red;

color:white;

font-size:11px;

padding:2px 7px;

border-radius:20px;

margin-left:5px;

}

/* ====================================
   Change Password
==================================== */
.change-password-wrapper{

    max-width:700px;

    margin:50px auto;

}

.password-card{

    background:#ffffff;

    padding:35px;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.password-card h2{

    color:#0056d2;

    margin-bottom:10px;

}

.password-card p{

    margin-bottom:25px;

    color:#64748b;

}

.password-card .form-group{

    margin-bottom:20px;

}

.password-card label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.password-card small{

    color:#64748b;

}

.back-link{

    margin-top:20px;

}

.back-link a{

    color:#0056d2;

    font-weight:600;

}

.back-link a:hover{

    text-decoration:underline;

}

/* ====================================
  PROFILE
==================================== */
.profile-wrapper{

    margin:40px 0;

}

.profile-card{

    background:#fff;

    border-radius:15px;

    display:grid;

    grid-template-columns:300px 1fr;

    gap:30px;

    padding:30px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.profile-left{

    text-align:center;

    border-right:1px solid #eee;

    padding-right:20px;

}

.profile-image{

    width:180px;

    height:180px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:15px;

}

.profile-right{

    width:100%;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

@media(max-width:768px){

.profile-card{

    grid-template-columns:1fr;

}

.profile-left{

    border-right:none;

    border-bottom:1px solid #eee;

    padding-bottom:20px;

}

.form-row{

    grid-template-columns:1fr;

}

}

/* ====================================
   PAGE BANNER
==================================== */

.page-banner{

background:
linear-gradient(
135deg,
#003b8f,
#0056d2
);

color:white;

text-align:center;

padding:100px 20px;

}

.page-banner h1{

font-size:50px;

margin-bottom:10px;

}
.assignment-card{

    background:#fff;

    padding:25px;

    border-radius:15px;

    margin-bottom:25px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.assignment-card h3{

    color:#0056d2;

    margin-bottom:10px;

}

.assignment-meta{

    display:flex;

    gap:25px;

    margin:15px 0;

    font-weight:600;

}

.assignment-form{

    margin-top:20px;

}

.submission-status{

    background:#ecfdf5;

    padding:15px;

    border-radius:10px;

    color:#065f46;

}

@media(max-width:768px){

.assignment-meta{

    flex-direction:column;

    gap:10px;

}

}

.quiz-card{

    background:#ffffff;

    padding:25px;

    border-radius:15px;

    margin-bottom:25px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.quiz-header{

    margin-bottom:10px;

}

.quiz-header h3{

    color:#0056d2;

}

.quiz-meta{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    margin:15px 0;

    font-weight:600;

}

.quiz-result{

    background:#ecfdf5;

    color:#065f46;

    padding:15px;

    border-radius:10px;

    margin-top:15px;

}

.empty-box{

    text-align:center;

    padding:60px;

    background:#fff;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

@media(max-width:768px){

.quiz-meta{

    flex-direction:column;

    gap:10px;

}

}

.quiz-attempt-box{

    background:#fff;

    padding:30px;

    border-radius:15px;

    margin:40px 0;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.quiz-info{

    margin:15px 0;

    font-weight:600;

}

#quiz-timer{

    background:#dc2626;

    color:#fff;

    padding:15px;

    border-radius:10px;

    font-size:20px;

    text-align:center;

    margin-bottom:25px;

}

.question-box{

    margin-bottom:30px;

    padding:20px;

    border:1px solid #e5e7eb;

    border-radius:10px;

}

.question-box h3{

    margin-bottom:15px;

}

.question-box label{

    display:block;

    margin-bottom:10px;

    cursor:pointer;

}

.question-number{

    background:#0056d2;

    color:white;

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    margin-bottom:10px;

    font-size:13px;

}


.question-number{

    background:#0056d2;

    color:white;

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    margin-bottom:10px;

    font-size:13px;

}

.attempt-table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    border-radius:15px;

    overflow:hidden;

}

.attempt-table th{

    background:#0056d2;

    color:#ffffff;

    padding:15px;

    text-align:left;

}

.attempt-table td{

    padding:15px;

    border-bottom:1px solid #eee;

}

.attempt-table tr:hover{

    background:#f8fafc;

}

.pass{

    color:#16a34a;

    font-weight:700;

}

.fail{

    color:#dc2626;

    font-weight:700;

}

.btn-sm{

    padding:8px 15px;

    font-size:14px;

}

.table-responsive{

    overflow-x:auto;

}

.empty-box{

    text-align:center;

    background:#ffffff;

    padding:60px;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.table-container{

    margin-top:30px;

    overflow-x:auto;

}

.attempt-table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.attempt-table th{

    background:#0056d2;

    color:#ffffff;

    padding:15px;

    text-align:left;

}

.attempt-table td{

    padding:15px;

    border-bottom:1px solid #eee;

}

.attempt-table tr:hover{

    background:#f8fafc;

}

.badge-success{

    background:#dcfce7;

    color:#166534;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.badge-danger{

    background:#fee2e2;

    color:#991b1b;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.page-actions{

    margin-top:25px;

    display:flex;

    gap:15px;

}

.empty-box{

    text-align:center;

    background:#fff;

    padding:50px;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.empty-box img{

    width:180px;

    margin-bottom:20px;

}

.stats-grid{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}

.stat-card{

    background:#fff;

    padding:25px;

    text-align:center;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.btn-sm{

    padding:8px 15px;

    font-size:14px;

}

.quiz-container{

    background:#fff;

    padding:30px;

    border-radius:15px;

    margin:40px 0;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.quiz-header{

    text-align:center;

    margin-bottom:30px;

}

.quiz-header h1{

    color:#0056d2;

    margin-bottom:10px;

}

.quiz-info{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:25px;

    font-weight:600;

}

#quiz-timer{

    position:sticky;

    top:80px;

    background:#dc2626;

    color:#fff;

    text-align:center;

    padding:15px;

    border-radius:10px;

    margin-bottom:25px;

    font-size:22px;

    font-weight:bold;

    z-index:100;

}

.question-card{

    border:1px solid #e5e7eb;

    padding:20px;

    border-radius:12px;

    margin-bottom:20px;

}

.question-number{

    display:inline-block;

    background:#0056d2;

    color:#fff;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    margin-bottom:15px;

}

.question-card label{

    display:block;

    padding:10px;

    margin:8px 0;

    border-radius:8px;

    cursor:pointer;

}

.question-card label:hover{

    background:#f1f5f9;

}

.quiz-warning{

    background:#fff3cd;

    color:#856404;

    padding:15px;

    border-radius:10px;

    margin-bottom:20px;

}

@media(max-width:768px){

.quiz-info{

    flex-direction:column;

    gap:10px;

    text-align:center;

}

}


.table-responsive{

    overflow-x:auto;

    margin-top:30px;

}

.attempt-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.attempt-table th{

    background:#0056d2;

    color:#fff;

    padding:15px;

    text-align:left;

}

.attempt-table td{

    padding:15px;

    border-bottom:1px solid #eee;

}

.attempt-table tr:hover{

    background:#f8fafc;

}

.badge-success{

    background:#dcfce7;

    color:#166534;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.badge-danger{

    background:#fee2e2;

    color:#991b1b;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.stats-grid{

    display:grid;

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

    gap:20px;

    margin:30px 0;

}

.stat-card{

    background:#fff;

    padding:25px;

    text-align:center;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.empty-box{

    text-align:center;

    background:#fff;

    padding:50px;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.empty-box img{

    width:180px;

    margin-bottom:20px;

}

.page-actions{

    margin-top:30px;

    display:flex;

    gap:15px;

}

.btn-sm{

    padding:8px 15px;

    font-size:14px;

}

@media(max-width:768px){

.page-actions{

    flex-direction:column;

}

}


.quiz-wrapper{

    background:#fff;

    padding:30px;

    margin:40px 0;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.quiz-header{

    text-align:center;

    margin-bottom:25px;

}

.quiz-info{

    display:flex;

    gap:20px;

    justify-content:center;

    flex-wrap:wrap;

    margin-bottom:20px;

}

.quiz-info-box{

    background:#eef4ff;

    padding:12px 20px;

    border-radius:10px;

    font-weight:600;

}

#quiz-timer{

    background:#dc2626;

    color:#fff;

    padding:15px;

    text-align:center;

    border-radius:10px;

    font-size:22px;

    font-weight:bold;

    margin-bottom:25px;

}

.question-card{

    border:1px solid #ddd;

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

}

.question-no{

    background:#0056d2;

    color:#fff;

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    margin-bottom:10px;

}

.question-card label{

    display:block;

    margin:10px 0;

    cursor:pointer;

}

.quiz-warning{

    background:#fff3cd;

    color:#856404;

    padding:15px;

    border-radius:10px;

    margin:20px 0;

}
/* =========================================
QUIZZES
========================================= */

.quiz-card{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

margin-bottom:20px;

border-left:
5px solid #14b8a6;

}

.quiz-card h3{

margin-bottom:10px;

}

.quiz-info{

display:flex;

justify-content:space-between;

margin-top:15px;

}

/* ====================================
   COURSE SEARCH
==================================== */

.course-search-section{

padding:40px 0;

background:white;

}

.course-search-section form{

display:flex;

max-width:700px;

margin:auto;

}

.course-search-section input{

flex:1;

padding:15px;

border:
1px solid #ddd;

border-radius:10px 0 0 10px;

}

.course-search-section button{

background:#0056d2;

color:white;

padding:15px 25px;

border:none;

border-radius:0 10px 10px 0;

cursor:pointer;

}

/* ====================================
   COURSE IMAGE
==================================== */

.course-image img{

width:100%;

height:200px;

object-fit:cover;

border-radius:15px;

margin-bottom:15px;

}

.page-banner{

    background:linear-gradient(
    135deg,
    #0056d2,
    #003b8f
    );

    color:white;

    text-align:center;

    padding:80px 20px;

}

.course-card-large{

    background:white;

    border-radius:20px;

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

    overflow:hidden;

    display:grid;

    grid-template-columns:350px 1fr;

    margin:50px 0;

}

.course-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.course-details{

    padding:30px;

}

.course-category{

    background:#eef4ff;

    color:#0056d2;

    padding:6px 14px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.course-meta{

    display:flex;

    gap:30px;

    margin:20px 0;

}

.progress-bar{

    width:100%;

    height:12px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

    margin-top:10px;

}

.progress-fill{

    height:100%;

    background:#10b981;

}

.course-actions{

    margin-top:25px;

    display:flex;

    gap:15px;

}

.btn-success{

    background:#10b981;

    color:white;

    padding:12px 20px;

    border-radius:8px;

}

.empty-course{

    text-align:center;

    padding:60px 20px;

}

.empty-course img{

    width:200px;

    margin-bottom:20px;

}

@media(max-width:768px){

.course-card-large{

    grid-template-columns:1fr;

}

.course-actions{

    flex-direction:column;

}

}

/* ====================================
   COURSE META
==================================== */

.course-meta{

display:flex;

justify-content:space-between;

margin:15px 0;

font-size:14px;

font-weight:600;

color:#64748b;

}

/* ====================================
   COURSE BUTTONS
==================================== */



.course-buttons{
    margin-top:auto;

    display:flex;
    gap:10px;
}

.course-buttons a{

    flex:1;

    text-align:center;

    padding:12px;

    border-radius:30px;

}



/* ==========================
   CATEGORY FILTER
========================== */

.category-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

padding:20px 0;

}

.filter-btn{

background:white;

border:none;

padding:12px 25px;

border-radius:30px;

cursor:pointer;

box-shadow:0 5px 15px rgba(0,0,0,.08);

font-weight:600;

transition:.3s;

}

.filter-btn:hover,
.filter-btn.active{

background:#0056d2;

color:white;

}

/* ==========================
   COURSE CATEGORY
========================== */

.course-category{

display:inline-block;

background:#eef5ff;

color:#0056d2;

padding:5px 15px;

border-radius:20px;

font-size:13px;

font-weight:600;

margin-bottom:10px;

}

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

.hidden-course{

display:none;

}

/* ==========================
   LOAD MORE
========================== */

.text-center{

text-align:center;

}

.mt-5{

margin-top:40px;

}

/* ===========================
BUTTONS
=========================== */

.btn-primary{

background:var(--primary);
color:white;

padding:14px 30px;

border-radius:50px;

display:inline-block;

transition:.3s;

font-weight:600;

}

.btn-primary:hover{

transform:translateY(-3px);

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

}

.btn-secondary{

background:white;

border:2px solid var(--primary);

color:var(--primary);

padding:14px 30px;

border-radius:50px;

font-weight:600;

}

.btn-admission{

background:var(--orange);

color:white;

padding:12px 24px;

border-radius:50px;

}



/* ==========================================
   BUTTONS
========================================== */

.btn-primary{

    background:#0056d2;

    color:#fff;

    padding:12px 24px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:#003b8f;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,86,210,.25);

}

.btn-secondary{

    background:#ffffff;

    border:2px solid #0056d2;

    color:#0056d2;

    padding:12px 24px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#0056d2;

    color:#ffffff;

}


/* ======================================
   LOGIN & APPLY BUTTONS
====================================== */

.nav-actions{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:nowrap;

}

.nav-actions a{

    white-space:nowrap;

}

/* Student Login */

.btn-secondary{

    background:#ffffff;

    color:#0056d2;

    border:2px solid #0056d2;

    padding:12px 24px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#0056d2;

    color:#ffffff;

}

/* Apply Now */

.btn-primary{

    background:#0056d2;

    color:#ffffff;

    padding:12px 24px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:#003b8f;

    transform:translateY(-2px);

}



/* ======================================
   PULSE EFFECT
====================================== */

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,86,210,.4);

}

70%{

box-shadow:0 0 0 15px rgba(0,86,210,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,86,210,0);

}

}

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

@media(max-width:1100px){

    .nav-links{

        gap:15px;

    }

    .nav-links a{

        font-size:14px;

    }

}

@media(max-width:992px){

    .nav-links{

        display:none;

    }

    .nav-actions{

        display:none;

    }

    .mobile-menu{

        display:block;

    }

}

@media(max-width:768px){

    .top-bar{

        flex-direction:column;

        gap:8px;

        text-align:center;

    }

    .navbar{

        padding:15px 20px;

    }

    .logo a{

        font-size:24px;

    }

}

@media(max-width:480px){

    .logo a{

        font-size:20px;

    }

    .mobile-menu{

        font-size:24px;

    }

}

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

.hero{

background:
linear-gradient(
135deg,
#003b8f,
#0056d2
);

color:white;

min-height:90vh;

display:flex;
align-items:center;

position:relative;

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;

width:500px;
height:500px;

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

border-radius:50%;

top:-150px;
right:-150px;

}

.hero-wrapper{

display:flex;

justify-content:space-between;
align-items:center;

gap:50px;

}

.hero-left{

flex:1;

}

.hero-right{

flex:1;

text-align:center;

}

.hero-badge{

display:inline-block;

background:#14b8a6;

padding:10px 20px;

border-radius:30px;

margin-bottom:25px;

font-weight:600;

}

.hero h1{

font-size:65px;

line-height:1.15;

margin-bottom:20px;

}

.hero p{

font-size:20px;

margin-bottom:30px;

}

.hero-buttons{

display:flex;

gap:15px;

}

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

section{

padding:80px 0;

}

.section-title{

text-align:center;

margin-bottom:50px;

}

.section-title h2{

font-size:42px;

color:var(--secondary);

}

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

.course-grid{

display:grid;

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

gap:25px;

}

.course-card{

    background:#fff;

    border-radius:20px;

    padding:20px;

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

    display:flex;

    flex-direction:column;

    min-height:520px;

    transition:.3s;
}

.course-card:hover{

    transform:translateY(-10px);

}

/* ===========================
STATS
=========================== */

.stats-grid{

display:grid;

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

gap:25px;

}

.stat-card{

background:white;

padding:30px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h2{

font-size:45px;

color:var(--primary);

}

.director-card{

    display:flex;

    align-items:center;

    gap:25px;

    max-width:900px;

    margin:auto;

    padding:30px;

    background:#fff;

    border-radius:20px;

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

}

.director-card img{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}

/* ===========================
FEATURES
=========================== */

.feature-grid{

display:grid;

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

gap:25px;

}

.feature-card{

background:white;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

text-align:center;

}


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

.main-content{

margin-left:280px;

padding:30px;

min-height:100vh;

background:#f5f7fb;

}

.course-player-container{

    display:flex;

    min-height:100vh;

}

/* Sidebar */

.lesson-sidebar{

    width:320px;

    background:#0f172a;

    color:white;

    padding:25px;

    overflow-y:auto;

}

.lesson-sidebar h3{

    margin-bottom:20px;

    border-bottom:1px solid rgba(255,255,255,.2);

    padding-bottom:10px;

}

.lesson-sidebar ul{

    list-style:none;

}

.lesson-sidebar li{

    margin-bottom:8px;

}

.lesson-sidebar a{

    display:block;

    color:white;

    padding:12px;

    border-radius:8px;

    transition:.3s;

}

.lesson-sidebar a:hover{

    background:#1e293b;

}

.active-lesson{

    background:#0056d2;

}

/* Main Area */

.lesson-content{

    flex:1;

    padding:30px;

    background:#f8fafc;

}

.course-header h2{

    margin-bottom:20px;

    color:#1e293b;

}

.video-wrapper{

    width:100%;

    height:550px;

    margin-bottom:30px;

}

.video-wrapper iframe{

    width:100%;

    height:100%;

    border:none;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.lesson-description{

    background:white;

    padding:25px;

    border-radius:15px;

    margin-bottom:25px;

}

.notes-box{

    margin-bottom:20px;

}

.lesson-actions{

    display:flex;

    gap:15px;

}

@media(max-width:992px){

.course-player-container{

    flex-direction:column;

}

.lesson-sidebar{

    width:100%;

}

.video-wrapper{

    height:350px;

}

}

.form-container button{

width:100%;

background:var(--primary);

color:white;

border:none;

padding:14px;

border-radius:10px;

cursor:pointer;

font-size:16px;

font-weight:600;

}



/* =========================================
COURSE PROGRESS
========================================= */

.progress{

width:100%;

height:12px;

background:#e5e7eb;

border-radius:20px;

overflow:hidden;

}

.progress-bar{

height:100%;

background:
linear-gradient(
90deg,
#14b8a6,
#06b6d4
);

}


/* =========================================
QUIZZES
========================================= */

.quiz-card{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

margin-bottom:20px;

border-left:
5px solid #14b8a6;

}

.quiz-card h3{

margin-bottom:10px;

}

.quiz-info{

display:flex;

justify-content:space-between;

margin-top:15px;

}

/* =========================================
CERTIFICATES
========================================= */

.certificate-card{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

border-left:
5px solid #22c55e;

margin-bottom:20px;

}

.certificate-card h3{

color:#15803d;

margin-bottom:10px;

}

.download-btn{

display:inline-block;

margin-top:15px;

background:#22c55e;

color:white;

padding:10px 20px;

border-radius:8px;

}

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

.course-progress-card{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

margin-bottom:20px;

}

.course-progress-card h3{

margin-bottom:10px;

}

.course-progress-card p{

margin-bottom:15px;

}


/* =========================================
TESTIMONIALS
========================================= */

.testimonial-section{

background:#f8fafc;

}

.testimonial-slider{

display:grid;

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

gap:25px;

}

.testimonial-card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.4s;

position:relative;

overflow:hidden;

}

.testimonial-card:hover{

transform:
translateY(-10px);

}

.testimonial-card::before{

content:'"';

position:absolute;

top:-20px;
right:20px;

font-size:120px;

color:
rgba(0,86,210,.08);

}

.testimonial-card h4{

margin-top:15px;

color:var(--secondary);

}


/* =========================================
GLASSMORPHISM
========================================= */

.glass{

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

backdrop-filter:
blur(15px);

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

border-radius:20px;

}

/* =========================================
FLOATING SHAPES
========================================= */

.floating-shape-1{

position:absolute;

width:250px;
height:250px;

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

border-radius:50%;

top:10%;
right:5%;

animation:
floatOne 8s infinite ease-in-out;

}

.floating-shape-2{

position:absolute;

width:180px;
height:180px;

background:
rgba(20,184,166,.12);

border-radius:50%;

bottom:10%;
left:5%;

animation:
floatTwo 10s infinite ease-in-out;

}

@keyframes floatOne{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-30px);

}

100%{

transform:
translateY(0);

}

}

@keyframes floatTwo{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(30px);

}

100%{

transform:
translateY(0);

}

}

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

.course-card,
.feature-card,
.stat-card,
.dashboard-card{

transition:.4s;

}

.course-card:hover,
.feature-card:hover,
.dashboard-card:hover{

transform:
translateY(-10px);

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

}

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

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

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

transition:.5s;

}

.btn-primary:hover::before{

left:100%;

}







/* =========================================
SCROLLBAR
========================================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

background:#94a3b8;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#64748b;

}

/* =========================================
DARK MODE
========================================= */

.dark-mode{

background:#0f172a;

color:white;

}

.dark-mode .course-card,
.dark-mode .feature-card,
.dark-mode .dashboard-card,
.dark-mode .stat-card{

background:#1e293b;

color:white;

}

.dark-mode .navbar{

background:#1e293b;

}

.dark-mode .table-container{

background:#1e293b;

}


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

.contact-section{

background:white;

}

.contact-box{

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.contact-box p{

margin-bottom:15px;

font-size:17px;

}

/* ==========================================
   APPLY NOW ANIMATION
========================================== */

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,86,210,.4);

}

70%{

box-shadow:0 0 0 15px rgba(0,86,210,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,86,210,0);

}

}

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

.mobile-menu{

display:none;

cursor:pointer;

font-size:28px;

color:var(--primary);

}

.mobile-nav{

display:none;

background:#fff;

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

}

.mobile-nav ul li a{

display:block;

padding:15px 20px;

border-bottom:1px solid #f1f5f9;

color:#334155;

font-weight:500;

}

.mobile-nav ul li a:hover{

background:#f8fafc;

color:var(--primary);

}

.show-mobile-nav{

display:block;

}

/* =========================================
PAGE BANNER
========================================= */

.page-banner{

background:
linear-gradient(
135deg,
var(--primary-dark),
var(--primary)
);

color:#fff;

text-align:center;

padding:80px 20px;

}

.page-banner h1{

font-size:50px;

margin-bottom:10px;

}

/* =========================================
FOOTER
========================================= */

footer{

background:#0f172a;

color:#fff;

margin-top:50px;

}

.footer-container{

display:grid;

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

gap:30px;

padding:60px 30px;

}

.footer-section h3{

margin-bottom:20px;

font-size:22px;

}

.footer-section ul li{

margin-bottom:10px;

}

.footer-section ul li a{

color:#fff;

transition:.3s;

}

.footer-section ul li a:hover{

color:var(--accent);

padding-left:5px;

}

.copyright{

text-align:center;

padding:20px;

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

}

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

@media(max-width:992px){

.nav-links,
.nav-actions{

display:none;

}

.mobile-menu{

display:block;

}

.navbar{

padding:15px 20px;

}

}

@media(max-width:768px){

.top-bar{

flex-direction:column;

text-align:center;

gap:8px;

}

.logo-text h2{

font-size:20px;

}

.page-banner h1{

font-size:34px;

}

.footer-container{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

}

/* =========================================
PART 2 : DASHBOARD + SIDEBAR + FORMS
========================================= */

/* =========================================
DASHBOARD LAYOUT
========================================= */

.dashboard-wrapper{

display:flex;

gap:25px;

width:100%;

max-width:1400px;

margin:30px auto;

padding:0 20px;

align-items:flex-start;

}

.dashboard-content{

flex:1;

min-width:0;

}

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

.dashboard-sidebar{

width:280px;

background:#0f172a;

border-radius:20px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

flex-shrink:0;

}

.sidebar-top{

text-align:center;

padding:30px 20px;

background:
linear-gradient(
135deg,
#08142e,
#0f172a
);

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

}

.sidebar-top img{

width:90px;

height:90px;

object-fit:contain;

margin:auto;

margin-bottom:10px;

}

.sidebar-top h3{

color:#fff;

font-size:22px;

margin-bottom:5px;

}

.sidebar-top p{

color:#cbd5e1;

font-size:13px;

}

.sidebar-menu{

list-style:none;

margin:0;

padding:0;

}

.sidebar-menu li{

border-bottom:
1px solid rgba(255,255,255,.04);

}

.sidebar-menu li a{

display:flex;

align-items:center;

gap:10px;

padding:16px 22px;

color:#d1d5db;

font-size:15px;

font-weight:500;

transition:.3s;

}

.sidebar-menu li a:hover{

background:#0056d2;

color:#fff;

padding-left:28px;

}

.sidebar-menu li.active a{

background:#0056d2;

color:#fff;

border-left:4px solid #fbbf24;

}

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

.profile-card{

background:#fff;

padding:25px;

border-radius:20px;

display:flex;

align-items:center;

gap:25px;

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

margin-bottom:25px;

}

.profile-card img{

width:110px;

height:110px;

border-radius:50%;

object-fit:cover;

border:5px solid #0056d2;

}

.profile-info h2{

color:#0f172a;

font-size:28px;

margin-bottom:8px;

}

.profile-info p{

color:#64748b;

margin-bottom:6px;

font-size:15px;

}

/* =========================================
STATS GRID
========================================= */

.stats-grid{

display:grid;

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

gap:20px;

margin-bottom:25px;

}

.stat-card{

background:#fff;

padding:25px;

border-radius:18px;

text-align:center;

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

transition:.3s;

}

.stat-card:hover{

transform:translateY(-5px);

}

.stat-card h2{

font-size:38px;

color:#0056d2;

margin-bottom:10px;

}

.stat-card p{

color:#64748b;

font-weight:500;

}

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

.dashboard-card{

background:#fff;

padding:25px;

border-radius:20px;

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

margin-bottom:25px;

}

.dashboard-card h3{

font-size:22px;

margin-bottom:20px;

color:#0f172a;

}

/* =========================================
QUICK LINKS
========================================= */

.quick-links{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.quick-links a{

background:#0056d2;

color:#fff;

padding:12px 18px;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.quick-links a:hover{

background:#003b8f;

transform:translateY(-2px);

}

/* =========================================
FORMS
========================================= */

.form-container{

background:#fff;

padding:30px;

border-radius:20px;

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

max-width:800px;

margin:auto;

}

.form-container h2{

margin-bottom:25px;

text-align:center;

}

.form-group{

margin-bottom:18px;

}

.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

color:#334155;

}

.form-control{

width:100%;

padding:12px 15px;

border:1px solid #dbe3ec;

border-radius:10px;

outline:none;

transition:.3s;

}

.form-control:focus{

border-color:#0056d2;

box-shadow:
0 0 0 4px rgba(0,86,210,.1);

}

textarea.form-control{

min-height:120px;

resize:vertical;

}

/* =========================================
TABLES
========================================= */

.table{

width:100%;

border-collapse:collapse;

background:#fff;

}

.table thead{

background:#0056d2;

}

.table th{

padding:14px;

color:#fff;

text-align:left;

font-weight:600;

}

.table td{

padding:14px;

border-bottom:
1px solid #e5e7eb;

}

.table tr:hover{

background:#f8fafc;

}

/* =========================================
STATUS BADGES
========================================= */

.badge{

display:inline-block;

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.badge-success{

background:#dcfce7;

color:#166534;

}

.badge-warning{

background:#fef3c7;

color:#92400e;

}

.badge-danger{

background:#fee2e2;

color:#991b1b;

}

.badge-primary{

background:#dbeafe;

color:#1d4ed8;

}

/* =========================================
NOTIFICATIONS
========================================= */

.notification-card{

background:#fff;

padding:18px;

border-radius:15px;

margin-bottom:15px;

box-shadow:
0 5px 15px rgba(0,0,0,.05);

border-left:5px solid #0056d2;

}

.notification-title{

font-weight:600;

margin-bottom:6px;

}

.notification-time{

font-size:13px;

color:#64748b;

}

.notification-count{

background:red;

color:#fff;

padding:3px 8px;

font-size:12px;

border-radius:20px;

margin-left:5px;

}

/* =========================================
PROFILE PAGE
========================================= */

.profile-grid{

display:grid;

grid-template-columns:
300px 1fr;

gap:25px;

}

.profile-sidebar{

background:#fff;

padding:25px;

border-radius:20px;

text-align:center;

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

}

.profile-sidebar img{

width:150px;

height:150px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:15px;

border:5px solid #0056d2;

}

.profile-content{

background:#fff;

padding:25px;

border-radius:20px;

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

}

/* =========================================
TRANSCRIPT / LEADERBOARD
========================================= */

.transcript-card,
.leaderboard-card{

background:#fff;

padding:25px;

border-radius:20px;

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

}

.rank-number{

font-size:28px;

font-weight:700;

color:#0056d2;

}

/* =========================================
EMPTY STATE
========================================= */

.empty-box{

text-align:center;

padding:40px;

background:#fff;

border-radius:20px;

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

color:#64748b;

}

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

@media(max-width:1100px){

.dashboard-wrapper{

flex-direction:column;

}

.dashboard-sidebar{

width:100%;

}

.profile-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.profile-card{

flex-direction:column;

text-align:center;

}

.quick-links{

flex-direction:column;

}

.quick-links a{

text-align:center;

}

.stats-grid{

grid-template-columns:1fr;

}

.table{

display:block;

overflow-x:auto;

}

}

/* =========================================
PART 2 : DASHBOARD + SIDEBAR + FORMS
========================================= */

/* =========================================
DASHBOARD LAYOUT
========================================= */

.dashboard-wrapper{

display:flex;

gap:25px;

width:100%;

max-width:1400px;

margin:30px auto;

padding:0 20px;

align-items:flex-start;

}

.dashboard-content{

flex:1;

min-width:0;

}

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

.dashboard-sidebar{

width:280px;

background:#0f172a;

border-radius:20px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

flex-shrink:0;

}

.sidebar-top{

text-align:center;

padding:30px 20px;

background:
linear-gradient(
135deg,
#08142e,
#0f172a
);

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

}

.sidebar-top img{

width:90px;

height:90px;

object-fit:contain;

margin:auto;

margin-bottom:10px;

}

.sidebar-top h3{

color:#fff;

font-size:22px;

margin-bottom:5px;

}

.sidebar-top p{

color:#cbd5e1;

font-size:13px;

}

.sidebar-menu{

list-style:none;

margin:0;

padding:0;

}

.sidebar-menu li{

border-bottom:
1px solid rgba(255,255,255,.04);

}

.sidebar-menu li a{

display:flex;

align-items:center;

gap:10px;

padding:16px 22px;

color:#d1d5db;

font-size:15px;

font-weight:500;

transition:.3s;

}

.sidebar-menu li a:hover{

background:#0056d2;

color:#fff;

padding-left:28px;

}

.sidebar-menu li.active a{

background:#0056d2;

color:#fff;

border-left:4px solid #fbbf24;

}

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

.profile-card{

background:#fff;

padding:25px;

border-radius:20px;

display:flex;

align-items:center;

gap:25px;

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

margin-bottom:25px;

}

.profile-card img{

width:110px;

height:110px;

border-radius:50%;

object-fit:cover;

border:5px solid #0056d2;

}

.profile-info h2{

color:#0f172a;

font-size:28px;

margin-bottom:8px;

}

.profile-info p{

color:#64748b;

margin-bottom:6px;

font-size:15px;

}

/* =========================================
STATS GRID
========================================= */

.stats-grid{

display:grid;

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

gap:20px;

margin-bottom:25px;

}

.stat-card{

background:#fff;

padding:25px;

border-radius:18px;

text-align:center;

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

transition:.3s;

}

.stat-card:hover{

transform:translateY(-5px);

}

.stat-card h2{

font-size:38px;

color:#0056d2;

margin-bottom:10px;

}

.stat-card p{

color:#64748b;

font-weight:500;

}

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

.dashboard-card{

background:#fff;

padding:25px;

border-radius:20px;

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

margin-bottom:25px;

}

.dashboard-card h3{

font-size:22px;

margin-bottom:20px;

color:#0f172a;

}

/* =========================================
QUICK LINKS
========================================= */

.quick-links{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.quick-links a{

background:#0056d2;

color:#fff;

padding:12px 18px;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.quick-links a:hover{

background:#003b8f;

transform:translateY(-2px);

}

/* =========================================
FORMS
========================================= */

.form-container{

background:#fff;

padding:30px;

border-radius:20px;

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

max-width:800px;

margin:auto;

}

.form-container h2{

margin-bottom:25px;

text-align:center;

}

.form-group{

margin-bottom:18px;

}

.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

color:#334155;

}

.form-control{

width:100%;

padding:12px 15px;

border:1px solid #dbe3ec;

border-radius:10px;

outline:none;

transition:.3s;

}

.form-control:focus{

border-color:#0056d2;

box-shadow:
0 0 0 4px rgba(0,86,210,.1);

}

textarea.form-control{

min-height:120px;

resize:vertical;

}

/* =========================================
TABLES
========================================= */

.table{

width:100%;

border-collapse:collapse;

background:#fff;

}

.table thead{

background:#0056d2;

}

.table th{

padding:14px;

color:#fff;

text-align:left;

font-weight:600;

}

.table td{

padding:14px;

border-bottom:
1px solid #e5e7eb;

}

.table tr:hover{

background:#f8fafc;

}

/* =========================================
STATUS BADGES
========================================= */

.badge{

display:inline-block;

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.badge-success{

background:#dcfce7;

color:#166534;

}

.badge-warning{

background:#fef3c7;

color:#92400e;

}

.badge-danger{

background:#fee2e2;

color:#991b1b;

}

.badge-primary{

background:#dbeafe;

color:#1d4ed8;

}

/* =========================================
NOTIFICATIONS
========================================= */

.notification-card{

background:#fff;

padding:18px;

border-radius:15px;

margin-bottom:15px;

box-shadow:
0 5px 15px rgba(0,0,0,.05);

border-left:5px solid #0056d2;

}

.notification-title{

font-weight:600;

margin-bottom:6px;

}

.notification-time{

font-size:13px;

color:#64748b;

}

.notification-count{

background:red;

color:#fff;

padding:3px 8px;

font-size:12px;

border-radius:20px;

margin-left:5px;

}

/* =========================================
PROFILE PAGE
========================================= */

.profile-grid{

display:grid;

grid-template-columns:
300px 1fr;

gap:25px;

}

.profile-sidebar{

background:#fff;

padding:25px;

border-radius:20px;

text-align:center;

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

}

.profile-sidebar img{

width:150px;

height:150px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:15px;

border:5px solid #0056d2;

}

.profile-content{

background:#fff;

padding:25px;

border-radius:20px;

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

}

/* =========================================
TRANSCRIPT / LEADERBOARD
========================================= */

.transcript-card,
.leaderboard-card{

background:#fff;

padding:25px;

border-radius:20px;

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

}

.rank-number{

font-size:28px;

font-weight:700;

color:#0056d2;

}

/* =========================================
EMPTY STATE
========================================= */

.empty-box{

text-align:center;

padding:40px;

background:#fff;

border-radius:20px;

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

color:#64748b;

}

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

@media(max-width:1100px){

.dashboard-wrapper{

flex-direction:column;

}

.dashboard-sidebar{

width:100%;

}

.profile-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.profile-card{

flex-direction:column;

text-align:center;

}

.quick-links{

flex-direction:column;

}

.quick-links a{

text-align:center;

}

.stats-grid{

grid-template-columns:1fr;

}

.table{

display:block;

overflow-x:auto;

}

}