/*
==================================
WHY CHOOSE DWALLNET
==================================
*/


.dw-section-heading{

max-width:750px;

margin:0 auto 60px;

}


.dw-section-heading p{

margin-top:20px;

}





.dw-why-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}
@media(max-width:1100px){


.dw-why-grid{


grid-template-columns:

repeat(2,1fr);


}


}



@media(max-width:600px){


.dw-why-grid{


grid-template-columns:

1fr;


}


}




.dw-feature-card{


background:white;


padding:40px 30px;


border-radius:

var(--dw-radius);


box-shadow:

var(--dw-shadow);


transition:

var(--dw-transition);


position:relative;


overflow:hidden;


}





.dw-feature-card::before{


content:"";


position:absolute;


top:0;


left:0;


width:100%;


height:4px;


background:

linear-gradient(

90deg,

var(--dw-secondary),

var(--dw-accent)

);


transform:scaleX(0);


transition:.4s;


}





.dw-feature-card:hover{


transform:

translateY(-12px);


}




.dw-feature-card:hover::before{


transform:scaleX(1);


}





.dw-feature-icon{


width:70px;


height:70px;


border-radius:20px;


background:

var(--dw-light);


display:flex;


align-items:center;


justify-content:center;


font-size:35px;


margin-bottom:25px;


}





.dw-feature-card h3{


margin-bottom:15px;


}

/*
==================================
LEARNING ROADMAP
==================================
*/


.dw-roadmap-wrapper{


position:relative;


max-width:900px;


margin:auto;


}



.dw-roadmap-wrapper::before{


content:"";


position:absolute;


left:35px;


top:0;


height:100%;


width:3px;


background:

linear-gradient(

var(--dw-secondary),

var(--dw-accent)

);


}





.dw-roadmap-item{


display:flex;


gap:35px;


margin-bottom:50px;


position:relative;


}




.dw-roadmap-number{


width:70px;


height:70px;


border-radius:50%;


background:

linear-gradient(

135deg,

var(--dw-secondary),

var(--dw-accent)

);


color:white;


display:flex;


align-items:center;


justify-content:center;


font-weight:800;


font-size:20px;


flex-shrink:0;


z-index:2;


}





.dw-roadmap-content{


background:white;


padding:

30px;


border-radius:

var(--dw-radius);


box-shadow:

var(--dw-shadow);


flex:1;


transition:

var(--dw-transition);


}





.dw-roadmap-content:hover{


transform:

translateX(10px);


}



.dw-roadmap-content h3{


margin-bottom:15px;


}

/*
==================================
LIVE CLASSES
==================================
*/


.dw-live-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:25px;


}





.dw-live-card{


background:white;


padding:

35px;


border-radius:

var(--dw-radius);


box-shadow:

var(--dw-shadow);


transition:

var(--dw-transition);


}



.dw-live-card:hover{


transform:

translateY(-10px);


}




.dw-live-status{


display:inline-block;


padding:

8px 18px;


background:

var(--dw-light);


border-radius:

50px;


font-size:14px;


font-weight:700;


margin-bottom:25px;


}



.dw-live-card h3{


margin-bottom:15px;


}



.dw-live-info{


display:flex;


justify-content:space-between;


margin:

25px 0;


font-size:14px;


font-weight:600;


}

@media(max-width:1000px){


.dw-live-grid{


grid-template-columns:

repeat(2,1fr);


}


}



@media(max-width:600px){


.dw-live-grid{


grid-template-columns:

1fr;


}


}

@media(max-width:900px){


.dw-dashboard-grid{


grid-template-columns:

1fr;


}



.dw-dashboard-features{


grid-template-columns:

1fr;


}



.dashboard-cards{


grid-template-columns:

1fr;


}


}

/*
==================================
DASHBOARD PREVIEW
==================================
*/


/* .dw-dashboard-grid{


display:grid;


grid-template-columns:

1fr 1fr;


gap:

60px;


align-items:center;


}




.dw-dashboard-features{


display:grid;


grid-template-columns:

1fr 1fr;


gap:

15px;


margin:

30px 0;


}




.dw-dashboard-features div{


background:

var(--dw-light);


padding:

15px;


border-radius:

15px;


font-weight:600;


}





.dw-dashboard-screen{


background:

#081120;


padding:

25px;


border-radius:

30px;


box-shadow:

0 30px 80px rgba(0,0,0,.25);


color:white;


}




.dashboard-header{


display:flex;


justify-content:space-between;


padding-bottom:

20px;


border-bottom:

1px solid rgba(255,255,255,.15);


}





.dashboard-profile{


display:flex;


align-items:center;


gap:20px;


margin:

30px 0;


}




.profile-circle{


width:60px;


height:60px;


border-radius:50%;


background:white;


display:flex;


align-items:center;


justify-content:center;


font-size:30px;


}





.progress-bar{


height:

12px;


background:

rgba(255,255,255,.2);


border-radius:

20px;


overflow:hidden;


margin:

15px 0;


}




.progress-bar span{


display:block;


width:

75%;


height:100%;


background:

linear-gradient(

90deg,

var(--dw-secondary),

var(--dw-accent)

);


}





.dashboard-cards{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:

15px;


margin-top:

30px;


}




.dashboard-cards div{


background:

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


padding:

20px;


border-radius:

15px;


text-align:center;


}



.dashboard-cards strong{


display:block;


font-size:

30px;


margin-top:

10px;


} */

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


.dw-newsletter{


padding-bottom:

100px;


}





.dw-newsletter-box{


background:

linear-gradient(

135deg,

var(--dw-secondary),

var(--dw-accent)

);


padding:

60px;


border-radius:

35px;


display:grid;


grid-template-columns:

1fr 1fr;


gap:

50px;


align-items:center;


color:white;


}




.dw-newsletter .section-label{


color:white;


}




.dw-newsletter-content h2{


color:white;


margin-bottom:

20px;


}




.dw-newsletter-content p{


color:

rgba(255,255,255,.85);


}





.dw-newsletter-form form{


display:flex;


background:white;


padding:

8px;


border-radius:

50px;


}





.dw-newsletter-form input{


flex:1;


border:none;


outline:none;


padding:

15px 25px;


font-size:16px;


}





.dw-newsletter-form button{


border:none;


padding:

0 30px;


border-radius:

50px;


background:

var(--dw-dark);


color:white;


font-weight:700;


cursor:pointer;


}




.dw-newsletter-form p{


margin-top:

20px;


font-size:14px;


color:

rgba(255,255,255,.8);


}


@media(max-width:900px){


.dw-newsletter-box{


grid-template-columns:

1fr;


padding:

40px;


}



.dw-newsletter-form form{


flex-direction:

column;


background:none;


gap:15px;


}



.dw-newsletter-form input{


border-radius:

50px;


}



.dw-newsletter-form button{


height:

55px;


}


}

/*
==================================
FINAL CTA SECTION
==================================
*/


.dw-cta-box{


background:

#081120;


padding:

70px;


border-radius:

40px;


display:grid;


grid-template-columns:

1.5fr 1fr;


gap:

40px;


align-items:center;


overflow:hidden;


position:relative;


}


@media(max-width:900px){


.dw-cta-box{


grid-template-columns:

1fr;


padding:

40px;


text-align:center;


}



.dw-cta-buttons{


justify-content:center;


}



.dw-cta-shape{


margin-top:

30px;


}



}


@media(max-width:500px){


.dw-cta-buttons{


flex-direction:

column;


}



}



.dw-cta-content h2{


color:white;


font-size:

clamp(

2rem,

4vw,

3rem

);


margin-bottom:

20px;


}




.dw-cta-content p{


color:

rgba(255,255,255,.75);


margin-bottom:

35px;


}





.dw-cta .section-label{


color:

var(--dw-accent);


}




.dw-cta-buttons{


display:flex;


gap:

20px;


}




.dw-cta-shape{


display:flex;


justify-content:center;


gap:

20px;


position:relative;


}





.dw-cta-shape div{


width:

90px;


height:

90px;


border-radius:

25px;


background:

rgba(255,255,255,.1);


display:flex;


align-items:center;


justify-content:center;


font-size:

40px;


animation:

floating 4s infinite;


}




.dw-cta-shape div:nth-child(2){


animation-delay:

1s;


}



.dw-cta-shape div:nth-child(3){


animation-delay:

2s;


}

/* ==========================================================
   DWALLNET COURSE SYSTEM
========================================================== */


/* Course Grid */

.dw-course-grid-section {
    padding: 80px 0;
}


.dw-course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


.dw-course-card {
    background: rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all .35s ease;
    border: 1px solid rgba(255,255,255,.12);
}


.dw-course-card:hover {
    transform: translateY(-10px);
}


.dw-course-card img {
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:16px;
    margin-bottom:20px;
}


.dw-course-card h3 {
    margin-bottom:15px;
}


.dw-course-card p {
    opacity:.8;
    line-height:1.7;
}


.dw-course-icon {

    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    font-size:35px;
    margin-bottom:25px;

}




/* Course Categories */


.dw-course-categories {

    padding:80px 0;

}



.dw-category-grid {

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.dw-category-card {

    padding:30px;
    border-radius:18px;
    background:rgba(255,255,255,.07);
    text-align:center;
    transition:.3s;

}



.dw-category-card:hover {

    transform:translateY(-8px);

}





/* Single Course */


.dw-single-course {

    padding:80px 0;

}



.dw-course-single-header img {

    width:100%;
    max-height:500px;
    object-fit:cover;
    border-radius:25px;

}



.dw-course-single-header h1 {

    margin-top:30px;

}



.dw-course-information {

    margin-top:40px;
    padding:35px;
    border-radius:25px;
    background:rgba(255,255,255,.06);

}



.dw-course-meta {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

}



.dw-course-meta div {

    padding:20px;
    border-radius:15px;
    background:rgba(255,255,255,.08);

}


/* ==========================================================
   DWALLNET COURSE + CODE CHALLENGE RESPONSIVE
========================================================== */


/* Tablets */

@media (max-width: 1024px) {


/* Courses */


.dw-course-grid {

    grid-template-columns:repeat(2,1fr);

}



.dw-category-grid {

    grid-template-columns:repeat(2,1fr);

}



.dw-course-meta {

    grid-template-columns:1fr;

}



/* Challenges */


.dw-challenge-grid {

    grid-template-columns:repeat(2,1fr);

}



.dw-statistics-grid {

    grid-template-columns:repeat(2,1fr);

}



.dw-badges-grid {

    grid-template-columns:repeat(2,1fr);

}



.dw-code-editor-wrapper {

    grid-template-columns:1fr;

}



}




/* Mobile Devices */

@media (max-width:768px){



/* Courses */


.dw-course-grid {

    grid-template-columns:1fr;

}



.dw-category-grid {

    grid-template-columns:1fr;

}



.dw-course-grid-section,
.dw-course-categories,
.dw-single-course {

    padding:50px 0;

}



.dw-course-card {

    padding:25px;

}





/* Challenges */


.dw-challenge-grid {

    grid-template-columns:1fr;

}



.dw-statistics-grid {

    grid-template-columns:1fr;

}



.dw-badges-grid {

    grid-template-columns:1fr;

}



.dw-code-editor-wrapper {

    gap:25px;

}



.dw-code-input {

    min-height:250px;

}



.dw-leaderboard-item {

    flex-direction:column;

    align-items:flex-start;

}



/* Timeline */


.dw-timeline-item {

    flex-direction:column;

}



/* CTA */


.dw-cta-buttons {

    flex-direction:column;

}



.dw-cta-buttons a {

    width:100%;

}



}




/* Small Phones */

@media (max-width:480px){


.dw-course-card h3,
.dw-challenge-card h3 {

    font-size:20px;

}



.dw-stat-card h3 {

    font-size:32px;

}



.dw-badge-icon {

    font-size:40px;

}



.dw-cta-wrapper {

    padding:40px 20px;

}



}



/* ==========================================================
   CODE CHALLENGE SYSTEM
========================================================== */

.dw-editor-code-wrapper {

    position:relative;

    display:flex;

    height:520px;

    background:#0f172a;

    overflow:hidden;

}


.dw-line-numbers {

    width:55px;

    flex-shrink:0;

    padding-top:20px;

    background:#0b1220;

    color:#64748b;

    text-align:right;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:14px;

    line-height:1.7;

    overflow:hidden;

    user-select:none;

}


.dw-line-numbers span {

    display:block;

    padding-right:14px;

    height:24px;

}


.dw-code-input {

    display:none;

    width:100%;

    height:100%;

    resize:none;

    border:0;

    outline:none;

    padding:20px;

    background:#0f172a;

    color:#e2e8f0;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:14px;

    line-height:1.7;

    tab-size:4;

    white-space:pre;

    overflow:auto;

}


.dw-code-input.active {

    display:block;

}


.dw-code-input::selection {

    background:rgba(59,130,246,.35);

}
/* Challenge Cards */


.dw-challenge-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}



.dw-challenge-card {

    overflow:hidden;
    border-radius:22px;
    background:#111827;
    transition:.35s;
    border:1px solid rgba(255,255,255,.1);

}



.dw-challenge-card:hover {

    transform:translateY(-10px);

}



.dw-challenge-card img {

    width:100%;
    height:220px;
    object-fit:cover;

}



.dw-challenge-content {

    padding:25px;

}



.dw-challenge-points {

    display:inline-block;
    margin-top:15px;
    padding:8px 15px;
    border-radius:50px;
    background:#2563eb;
    font-size:14px;

}




/* Code Editor */


.dw-code-editor-section {

    padding:80px 0;

}



.dw-code-editor-wrapper {

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;

}



.dw-editor-box {

    background:#0f172a;
    padding:25px;
    border-radius:20px;

}



.dw-editor-header {

    display:flex;
    justify-content:space-between;
    margin-bottom:20px;

}



.dw-code-input {

    width:100%;
    min-height:350px;
    background:#020617;
    color:#fff;
    border-radius:15px;
    padding:20px;
    font-family:monospace;
    resize:none;

}





/* Leaderboard */


.dw-leaderboard-table {

    display:flex;
    flex-direction:column;
    gap:15px;

}



.dw-leaderboard-item {

    display:flex;
    align-items:center;
    gap:25px;
    padding:20px;
    border-radius:18px;
    background:rgba(255,255,255,.07);

}



.dw-rank {

    font-size:28px;
    font-weight:700;

}





/* Statistics */


.dw-statistics-grid {

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.dw-stat-card {

    padding:35px;
    border-radius:20px;
    text-align:center;
    background:rgba(255,255,255,.08);

}



.dw-stat-card h3 {

    font-size:40px;

}





/* Timeline */


.dw-timeline-wrapper {

    position:relative;

}



.dw-timeline-item {

    display:flex;
    gap:25px;
    margin-bottom:35px;

}



.dw-timeline-number {

    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2563eb;
    font-weight:bold;

}




/* Badges */


.dw-badges-grid {

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.dw-badge-card {

    padding:35px;
    text-align:center;
    border-radius:20px;
    background:rgba(255,255,255,.07);
    transition:.3s;

}



.dw-badge-card:hover {

    transform:translateY(-8px);

}



.dw-badge-icon {

    font-size:50px;
    margin-bottom:20px;

}





/* CTA */


.dw-challenge-cta {

    padding:90px 0;

}



.dw-cta-wrapper {

    text-align:center;
    padding:60px 30px;
    border-radius:30px;
    background:#0f172a;

}



.dw-cta-buttons {

    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:20px;

}


/* ==========================================================
   START LEARNING PAGE
========================================================== */


.dw-start-learning-page {
    overflow:hidden;
}


/* Learning Hero */

.dw-learning-hero {

    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    rgba(15,23,42,.95),
    rgba(37,99,235,.85)
    );

    color:#fff;

}


.dw-learning-content {

    max-width:750px;

}


.dw-learning-content h1 {

    font-size:56px;
    line-height:1.15;
    margin-bottom:25px;

}


.dw-learning-content p {

    font-size:20px;
    line-height:1.8;
    opacity:.9;
    margin-bottom:35px;

}



/* Learning Paths */


.dw-learning-paths {

    padding:90px 0;

}



.dw-path-grid {

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.dw-path-card {

    padding:40px 30px;

    border-radius:25px;

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

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

    text-align:center;

    transition:.35s ease;

}



.dw-path-card:hover {

    transform:translateY(-12px);

}



.dw-path-card:first-letter {

    font-size:40px;

}


.dw-path-card h3 {

    margin:20px 0 15px;

}


.dw-path-card p {

    opacity:.8;

    line-height:1.7;

}



/* Learning CTA */


.dw-learning-cta {

    padding:90px 0;

    text-align:center;

}



.dw-learning-cta h2 {

    font-size:42px;

    margin-bottom:30px;

}




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


.dw-courses-page {

    overflow:hidden;

}



/* Courses Header */


.dw-courses-header {

    padding:120px 0;

    text-align:center;

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #2563eb
    );

    color:#fff;

}



.dw-courses-header h1 {

    font-size:60px;

    margin-bottom:20px;

}



.dw-courses-header p {

    max-width:700px;

    margin:auto;

    font-size:20px;

    opacity:.9;

}





/* Course Section Enhancement */


.dw-courses-page .dw-course-grid-section {

    padding-top:90px;

}



.dw-courses-page .dw-course-card {

    backdrop-filter:blur(15px);

}



.dw-courses-page .dw-course-card:hover {

    box-shadow:

    0 20px 50px rgba(0,0,0,.25);

}



/* Course Category Enhancement */


.dw-courses-page .dw-category-card {

    position:relative;

    overflow:hidden;

}



.dw-courses-page .dw-category-card:before {

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(37,99,235,.2),
    transparent
    );

    opacity:0;

    transition:.3s;

}



.dw-courses-page .dw-category-card:hover:before {

    opacity:1;

}

/* ==========================================================
   ACADEMY AUTH PAGES - PREMIUM DESIGN
========================================================== */


.dw-registration-page,
.dw-login-page {

    background:
    linear-gradient(
    180deg,
    #f8fafc,
    #ffffff
    );

}



/* HERO */

.dw-registration-hero,
.dw-login-hero {

    min-height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(
    circle at top right,
    rgba(37,99,235,.5),
    transparent 40%
    ),

    linear-gradient(
    135deg,
    #020617,
    #1d4ed8
    );

    color:white;

}



.dw-registration-hero:after,
.dw-login-hero:after {

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    top:-120px;

    right:-100px;

}



.dw-registration-hero h1,
.dw-login-hero h1 {

    font-size:64px;

    font-weight:800;

}



.dw-registration-hero p,
.dw-login-hero p {

    font-size:20px;

    max-width:700px;

    margin:auto;

    opacity:.9;

}



/* REGISTRATION WRAPPER */


.dw-registration-wrapper {

    background:white;

    padding:60px;

    border-radius:35px;

    box-shadow:

    0 30px 80px rgba(15,23,42,.12);

}



/* INFO PANEL */


.dw-registration-intro {

    background:

    linear-gradient(
    145deg,
    #0f172a,
    #1e40af
    );

    color:white;

    border-radius:30px;

    padding:45px;

}



.dw-registration-intro li {

    display:flex;

    gap:12px;

    align-items:center;

}



/* FORM */

.dw-registration-form-box {

    background:white;

    border-radius:30px;

    padding:45px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.08);

}



.dw-form-group input,
.dw-form-group select,
.dw-form-group textarea {


    background:#f8fafc;

    border:1px solid #e2e8f0;

    color:#0f172a;

    transition:.3s;

}



.dw-form-group input:hover,
.dw-form-group select:hover,
.dw-form-group textarea:hover {

    border-color:#2563eb;

}



.dw-form-group input:focus,
.dw-form-group select:focus,
.dw-form-group textarea:focus {

    background:white;

    box-shadow:

    0 0 0 4px rgba(37,99,235,.15);

}



/* LOGIN */


.dw-login-section {

    padding:100px 0;

}



.dw-login-box {


max-width:520px;

margin:auto;

padding:50px;

background:white;

border-radius:35px;

box-shadow:

0 30px 80px rgba(0,0,0,.12);

}



.dw-login-box h2 {

text-align:center;

font-size:36px;

margin-bottom:30px;

}



.dw-login-box input {

width:100%;

padding:16px;

border-radius:14px;

border:1px solid #e2e8f0;

}



.dw-login-box input:focus {

border-color:#2563eb;

}



.dw-login-box .login-submit input {

width:100%;

background:#2563eb;

color:white;

border:none;

cursor:pointer;

font-weight:700;

}
/* ==========================================================
   DWALLNET ACADEMY REGISTRATION INPUTS
========================================================== */


.dw-registration-form .dw-form-group input,
.dw-registration-form .dw-form-group select,
.dw-registration-form .dw-form-group textarea {

    width:100%;

    height:54px;

    padding:0 18px;

    border-radius:14px;

    border:1px solid #dbe3ef;

    background:#f8fafc;

    color:#0f172a;

    font-size:16px;

    font-family:inherit;

    outline:none;

    transition:all .3s ease;

    box-sizing:border-box;

}


.dw-registration-form .dw-form-group textarea {

    height:auto;

    min-height:140px;

    padding:16px 18px;

    resize:vertical;

}



.dw-registration-form .dw-form-group input::placeholder,
.dw-registration-form .dw-form-group textarea::placeholder {

    color:#94a3b8;

}



.dw-registration-form .dw-form-group input:focus,
.dw-registration-form .dw-form-group select:focus,
.dw-registration-form .dw-form-group textarea:focus {

    background:#ffffff;

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.12);

}



.dw-registration-form .dw-form-group select {

    appearance:none;

    cursor:pointer;

}



.dw-registration-form label {

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:#0f172a;

}



/* Checkbox */

.dw-registration-form .dw-checkbox {

    display:flex;

    align-items:center;

    gap:10px;

}


.dw-registration-form .dw-checkbox input {

    width:18px;

    height:18px;

}

.dw-alert{

padding:18px 22px;

border-radius:15px;

margin-bottom:25px;

font-weight:600;

}


.dw-success{

background:#dcfce7;

color:#166534;

border:1px solid #86efac;

}



.dw-error{

background:#fee2e2;

color:#991b1b;

border:1px solid #fca5a5;

}

/*====================================================
 DWALLNET ACADEMY STUDENT DASHBOARD
====================================================*/


.dw-dashboard{

    min-height:100vh;
    background:#f8fafc;
    padding:40px 0;

}



.dw-dashboard-wrapper{

    max-width:1400px;
    margin:auto;
    padding:0 25px;

    display:grid;

    grid-template-columns:280px minmax(0,1fr);

    gap:30px;

}



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


.dw-dashboard-sidebar{

    background:#0f172a;

    color:#ffffff;

    border-radius:24px;

    padding:30px 20px;

    height:calc(100vh - 80px);

    position:sticky;

    top:40px;

    overflow-y:auto;

}



.dw-sidebar-close{

    display:none;

}



.dw-student-profile{

    text-align:center;

    padding-bottom:30px;

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

}



.dw-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    margin:0 auto 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#2563eb;

    color:white;

    font-size:35px;

    font-weight:700;

}



.dw-student-profile h3{

    font-size:20px;

    margin-bottom:8px;

}



.dw-student-profile p{

    font-size:14px;

    color:#cbd5e1;

    word-break:break-word;

}





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


.dw-dashboard-navigation{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:8px;

}



.dw-dashboard-navigation a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    color:#cbd5e1;

    text-decoration:none;

    border-radius:14px;

    transition:.3s ease;

}



.dw-dashboard-navigation a:hover,
.dw-dashboard-navigation a.active{

    background:#2563eb;

    color:white;

}





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


.dw-dashboard-mobile-header{

    display:none;

}



.dw-dashboard-toggle{

    border:none;

    background:#2563eb;

    color:#fff;

    width:45px;

    height:45px;

    border-radius:12px;

    font-size:22px;

    cursor:pointer;

}





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


/* .dw-dashboard-main{

    min-width:0;

}



.dw-dashboard-topbar{

    background:white;

    border-radius:24px;

    padding:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

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

}



.dw-dashboard-topbar h1{

    font-size:36px;

    line-height:1.2;

    margin:0 0 10px;

    color:#0f172a;

}



.dw-dashboard-topbar p{

    color:#64748b;

    margin:0;

}



.dw-dashboard-user{

    width:55px;

    height:55px;

    background:#2563eb;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

}

 */



/*====================================================
 STATISTICS
====================================================*/


/* .dw-dashboard-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:30px;

}



.dw-stat-box{

    background:#fff;

    border-radius:20px;

    padding:25px;

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

}



.dw-stat-box span{

    color:#64748b;

    font-size:15px;

}



.dw-stat-box strong{

    display:block;

    margin-top:12px;

    font-size:34px;

    color:#2563eb;

}

 */



/*====================================================
 DASHBOARD SECTIONS
====================================================*/


/* .dw-dashboard-section{

    background:#fff;

    border-radius:24px;

    padding:30px;

    margin-bottom:30px;

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

}



.dw-dashboard-section h2{

    font-size:25px;

    margin-bottom:25px;

    color:#0f172a;

} */





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


/* .dw-learning-card,
.dw-dashboard-course-card{

    background:#f8fafc;

    border-radius:18px;

    padding:25px;

}



.dw-learning-card h3,
.dw-dashboard-course-card h3{

    font-size:22px;

    margin-bottom:12px;

}



.dw-course-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}


 */


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


/* .dw-progress{

    height:10px;

    background:#e2e8f0;

    border-radius:20px;

    overflow:hidden;

    margin:20px 0;

}



.dw-progress-fill{

    height:100%;

    background:#2563eb;

}



.small-progress{

    height:8px;

    background:#e2e8f0;

    border-radius:20px;

    overflow:hidden;

    margin-top:20px;

}



.small-progress div{

    height:100%;

    background:#2563eb;

}


 */


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


/* .dw-profile-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}



.dw-profile-grid div{

    background:#f8fafc;

    padding:20px;

    border-radius:16px;

}



.dw-profile-grid label{

    color:#64748b;

    font-size:14px;

}



.dw-profile-grid p{

    margin-top:8px;

    font-weight:600;

} */

/*====================================================
 DWALLNET ACADEMY DASHBOARD
====================================================*/


.dw-dashboard{

    background:#f8fafc;

    min-height:100vh;

    padding:40px 0;

    overflow:hidden;

}



.dw-dashboard-wrapper{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 25px;

    display:grid;

    grid-template-columns:280px minmax(0,1fr);

    gap:30px;

}





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


.dw-dashboard-sidebar{

    background:#0f172a;

    color:#fff;

    border-radius:25px;

    padding:30px 20px;

    height:calc(100vh - 80px);

    position:sticky;

    top:40px;

}



.dw-sidebar-close{

    display:none;

}



.dw-student-profile{

    text-align:center;

    padding-bottom:25px;

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

}



.dw-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#2563eb;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:35px;

    font-weight:700;

}



.dw-student-profile h3{

    margin-top:20px;

    font-size:20px;

}



.dw-student-profile p{

    font-size:14px;

    color:#cbd5e1;

    word-break:break-word;

}




/* MENU */


.dw-dashboard-navigation{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:8px;

}



.dw-dashboard-navigation a{

    padding:14px 16px;

    border-radius:14px;

    color:#cbd5e1;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.3s;

}



.dw-dashboard-navigation a:hover,
.dw-dashboard-navigation a.active{

    background:#2563eb;

    color:white;

}





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


.dw-dashboard-mobile-header{

    display:none;

}





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


.dw-dashboard-main{

    min-width:0;

}





.dw-dashboard-topbar{

    background:#fff;

    border-radius:25px;

    padding:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

}



.dw-dashboard-topbar h1{

    font-size:36px;

    color:#0f172a;

    margin-bottom:10px;

}



.dw-dashboard-topbar p{

    color:#64748b;

}



.dw-dashboard-user-avatar{

    width:55px;

    height:55px;

    background:#2563eb;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:22px;

}





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


.dw-dashboard-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:30px 0;

}



.dw-stat-box{

    background:white;

    padding:25px;

    border-radius:20px;

    display:flex;

    gap:15px;

    align-items:center;

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

}



.dw-stat-box span{

    color:#64748b;

}



.dw-stat-box strong{

    display:block;

    font-size:32px;

    color:#2563eb;

}





/*====================================================
 SECTIONS
====================================================*/


.dw-dashboard-section{

    background:#fff;

    padding:30px;

    border-radius:25px;

    margin-bottom:30px;

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

}



.dw-dashboard-section h2{

    font-size:25px;

    margin-bottom:25px;

}





/* COURSES */


/* .dw-course-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

} */



.dw-dashboard-course-card{

    background:#f8fafc;

    padding:25px;

    border-radius:18px;

}





/* PROFILE */


.dw-profile-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}



.dw-profile-item{

    background:#f8fafc;

    padding:20px;

    border-radius:16px;

}



.dw-profile-item label{

    color:#64748b;

    font-size:14px;

}



.dw-profile-item p{

    font-weight:600;

}



/*=====================================================
 DWALLNET DASHBOARD COMPLETE RESPONSIVE SYSTEM
 PLACE AT THE VERY BOTTOM OF style.css
=====================================================*/


.dw-dashboard{
    width:100%;
    min-height:100vh;
    background:#f8fafc;
    padding:40px 0;
    overflow-x:hidden;
}


.dw-dashboard-wrapper{

    max-width:1400px;
    margin:auto;
    padding:0 25px;

    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:30px;

}


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


.dw-dashboard-mobile-header{

    display:none;

    align-items:center;
    gap:15px;

    padding:15px 20px;

    background:#ffffff;

    border-radius:18px;

    margin:0 20px 20px;

}


.dw-dashboard-toggle{

    width:45px;
    height:45px;

    border:none;

    background:#2563eb;

    color:#ffffff;

    border-radius:12px;

    font-size:22px;

    cursor:pointer;

}


.dw-mobile-title{

    font-size:20px;

    font-weight:700;

    color:#0f172a;

}




/*==========================
 OVERLAY
==========================*/


.dw-dashboard-overlay{

    display:block;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    z-index:1999;

    transition:.3s ease;

}


.dw-dashboard-overlay.active{

    opacity:1;

    visibility:visible;

}



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


.dw-dashboard-sidebar{

    background:#0f172a;

    color:white;

    border-radius:25px;

    padding:30px 20px;

    height:calc(100vh - 80px);

    position:sticky;

    top:40px;

    z-index:2000;

}



.dw-sidebar-close{

    display:none;

}



.dw-dashboard-navigation{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:30px;

}



.dw-dashboard-navigation a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:14px;

    text-decoration:none;

    color:#cbd5e1;

}


.dw-dashboard-navigation a:hover,
.dw-dashboard-navigation a.active{

    background:#2563eb;

    color:white;

}





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


.dw-dashboard-main{

    min-width:0;

}


.dw-dashboard-topbar{

    background:white;

    padding:35px;

    border-radius:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.dw-dashboard-topbar h1{

    font-size:36px;

    margin:0;

    color:#0f172a;

}





.dw-dashboard-user-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}



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


@media(max-width:1100px){


.dw-dashboard-wrapper{

    display:block;

}



.dw-dashboard-mobile-header{

    display:flex;

}



/* SIDEBAR DRAWER */


.dw-dashboard-sidebar{

    position:fixed;

    top:0;

    left:-320px;

    width:280px;

    height:100vh;

    border-radius:0;

    transition:.35s ease;

    z-index:3000;

}



.dw-dashboard-sidebar.active{

    left:0;

}



.dw-sidebar-close{

    display:block;

    text-align:right;

}



.dw-sidebar-close button{

    background:none;

    border:none;

    color:white;

    font-size:35px;

}




.dw-dashboard-stats{

    grid-template-columns:repeat(2,1fr);

}


}



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


@media(max-width:768px){


.dw-dashboard{

    padding:20px 0;

}



.dw-dashboard-wrapper{

    padding:0 15px;

}



.dw-dashboard-topbar{

    padding:25px;

}



.dw-dashboard-topbar h1{

    font-size:24px;

}



.dw-dashboard-user-avatar{

    display:none;

}



.dw-dashboard-stats{

    grid-template-columns:1fr;

}



.dw-course-grid{

    grid-template-columns:1fr;

}



.dw-profile-grid{

    grid-template-columns:1fr;

}



.dw-dashboard-section{

    padding:20px;

}


}



@media(max-width:420px){


.dw-dashboard-topbar h1{

    font-size:21px;

}



.dw-mobile-title{

    font-size:17px;

}


}

.dw-lesson-content{

    line-height:1.8;

    color:#334155;

}



.dw-video-container{

    position:relative;

    padding-bottom:56.25%;

    height:0;

    overflow:hidden;

    border-radius:20px;

}



.dw-video-container iframe{

    position:absolute;

    width:100%;

    height:100%;

    left:0;

    top:0;

}



.dw-dashboard-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    color:white;

    padding:14px 25px;

    border-radius:12px;

    text-decoration:none;

    border:none;

    cursor:pointer;

    font-weight:600;

}

.dw-registration-success,
.dw-registration-error{

padding:18px 20px;

border-radius:14px;

margin-bottom:25px;

font-weight:600;

}



.dw-registration-success{

background:#dcfce7;

color:#166534;

border:1px solid #86efac;

}



.dw-registration-error{

background:#fee2e2;

color:#991b1b;

border:1px solid #fca5a5;

}

.dw-assignment-submission-box{

padding:25px;
border-radius:15px;
background:#f8fafc;
margin-top:20px;

}


.dw-assignment-submission-box h4{

margin-bottom:15px;

}



.dw-feedback-box{

margin-top:15px;
padding:15px;
background:#ffffff;
border-left:4px solid #2563eb;
border-radius:8px;

}