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

.notes-hero{

    padding:120px 0 90px;

    background:linear-gradient(
        135deg,
        #F8FAFC,
        #EEF6FF
    );

}

.notes-hero h1{

    font-size:3.3rem;

    font-weight:800;

    color:#0F172A;

    line-height:1.2;

    margin:20px 0;

}

.notes-hero p{

    font-size:1.15rem;

    color:#64748B;

    line-height:1.9;

    margin-bottom:35px;

}

.hero-badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:#DBEAFE;

    color:#2563EB;

    font-weight:700;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.hero-image{

    max-width:90%;

    animation:floatImage 5s ease-in-out infinite;

}

.hero-stats{

    display:flex;

    gap:40px;

    flex-wrap:wrap;

}

.hero-stats h3{

    color:#2563EB;

    font-weight:800;

    font-size:2rem;

    margin-bottom:5px;

}

.hero-stats span{

    color:#64748B;

}

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:991px){

.notes-hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.notes-hero h1{

font-size:2.6rem;

}

}

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

.search-section{

padding:80px 0;

background:#ffffff;

}

.search-box{

max-width:850px;

margin:auto;

text-align:center;

}

.search-box h2{

font-size:2.4rem;

font-weight:800;

margin-bottom:15px;

}

.search-box p{

color:#64748B;

margin-bottom:35px;

}

.search-bar{

display:flex;

background:#fff;

border-radius:60px;

overflow:hidden;

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

}

.search-bar input{

flex:1;

border:none;

padding:20px;

font-size:1.1rem;

outline:none;

}

.search-bar button{

width:80px;

border:none;

background:#2563EB;

color:#fff;

font-size:1.3rem;

}

/*==================================================
CATEGORIES
==================================================*/

.categories-section{

padding:100px 0;

background:#F8FAFC;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:2.6rem;

font-weight:800;

margin-bottom:15px;

}

.section-title p{

color:#64748B;

}

.category-card{

display:block;

background:#fff;

padding:40px 25px;

text-align:center;

border-radius:20px;

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

transition:.35s;

text-decoration:none;

color:#0F172A;

height:100%;

}

.category-card:hover{

transform:translateY(-10px);

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

}

.category-card i{

font-size:3rem;

color:#2563EB;

margin-bottom:20px;

display:block;

}

.category-card h4{

font-weight:700;

margin-bottom:10px;

}

.category-card span{

color:#64748B;

}

.category-card.disabled{

opacity:.65;

cursor:not-allowed;

}

/*==================================================
FEATURED NOTES
==================================================*/

.featured-notes{

padding:100px 0;

background:#ffffff;

}

.note-card{

background:#ffffff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

height:100%;

display:flex;

flex-direction:column;

}

.note-card:hover{

transform:translateY(-10px);

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

}

.note-card img{

width:100%;

height:220px;

object-fit:cover;

}

.note-content{

padding:28px;

flex:1;

display:flex;

flex-direction:column;

}

.note-category{

display:inline-block;

background:#DBEAFE;

color:#2563EB;

padding:6px 14px;

border-radius:30px;

font-size:.85rem;

font-weight:700;

margin-bottom:15px;

}

.note-content h4{

font-size:1.4rem;

font-weight:700;

margin-bottom:15px;

}

.note-content p{

color:#64748B;

line-height:1.7;

flex:1;

}

.note-meta{

display:flex;

justify-content:space-between;

margin:25px 0;

font-size:.95rem;

color:#64748B;

}

.note-buttons{

display:flex;

gap:12px;

}

.note-buttons .btn{

flex:1;

border-radius:50px;

font-weight:700;

}

/*==================================================
LATEST NOTES
==================================================*/

.latest-notes{

padding:100px 0;

background:#F8FAFC;

}

.notes-table{

background:#ffffff;

border-radius:20px;

overflow:hidden;

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

}

.notes-table thead{

background:#2563EB;

color:#ffffff;

}

.notes-table thead th{

padding:18px;

font-weight:700;

border:none;

}

.notes-table tbody td{

padding:18px;

vertical-align:middle;

border-color:#E5E7EB;

}

.notes-table tbody tr{

transition:.3s;

}

.notes-table tbody tr:hover{

background:#F8FAFC;

}

.notes-table .btn{

border-radius:30px;

padding:8px 18px;

font-weight:600;

}


/*==================================================
POPULAR NOTES
==================================================*/

.popular-notes{

padding:100px 0;

background:#ffffff;

}

.popular-card{

background:#ffffff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

position:relative;

height:100%;

}

.popular-card:hover{

transform:translateY(-12px);

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

}

.popular-card img{

width:100%;

height:230px;

object-fit:cover;

}

.popular-content{

padding:28px;

}

.popular-content h4{

font-weight:700;

margin-bottom:15px;

}

.popular-content p{

color:#64748B;

line-height:1.8;

}

.popular-stats{

display:flex;

justify-content:space-between;

margin:25px 0;

font-size:.95rem;

color:#475569;

}

.popular-badge{

position:absolute;

top:18px;

left:18px;

background:#2563EB;

color:#ffffff;

padding:8px 18px;

border-radius:30px;

font-size:.8rem;

font-weight:700;

box-shadow:0 5px 15px rgba(37,99,235,.30);

}

/*==========================================
        Learning Paths
==========================================*/

.learning-paths{

    padding:100px 0;

    background:#f8fafc;

}

.path-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.path-card:hover{

    transform:translateY(-10px);

}

.path-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.path-body{

    padding:30px;

}

.path-level{

    display:inline-block;

    background:#2563eb;

    color:#fff;

    padding:6px 14px;

    border-radius:25px;

    font-size:.8rem;

    margin-bottom:15px;

}

.path-body h3{

    font-size:1.5rem;

    margin-bottom:15px;

    font-weight:700;

}

.path-body p{

    color:#64748b;

    line-height:1.8;

}

.path-info{

    display:flex;

    justify-content:space-between;

    margin:25px 0;

    font-weight:600;

    color:#334155;

}

.path-body .btn{

    width:100%;

    border-radius:10px;

}
/*==========================================
        STUDY ROADMAP
==========================================*/

.study-roadmap{

    padding:100px 0;

    background:#ffffff;

}

.roadmap{

    position:relative;

    max-width:900px;

    margin:auto;

}

.roadmap::before{

    content:"";

    position:absolute;

    left:40px;

    top:0;

    width:4px;

    height:100%;

    background:#2563eb;

}

.roadmap-item{

    display:flex;

    gap:35px;

    margin-bottom:60px;

    position:relative;

}

.roadmap-number{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    font-weight:700;

    flex-shrink:0;

    z-index:2;

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

}

.roadmap-content{

    background:#f8fafc;

    padding:30px;

    border-radius:18px;

    width:100%;

    transition:.3s;

}

.roadmap-content:hover{

    transform:translateY(-6px);

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

}

.roadmap-content h3{

    font-weight:700;

    margin-bottom:15px;

}

.roadmap-content p{

    color:#64748b;

    line-height:1.8;

}

.roadmap-content span{

    display:inline-block;

    margin-top:18px;

    background:#2563eb;

    color:white;

    padding:6px 18px;

    border-radius:25px;

    font-size:.9rem;

}

@media(max-width:768px){

    .roadmap::before{

        left:25px;

    }

    .roadmap-item{

        gap:20px;

    }

    .roadmap-number{

        width:50px;

        height:50px;

        font-size:1.2rem;

    }

}

/*==========================================
      LEARNING ROADMAPS
==========================================*/

.learning-roadmaps{

    padding:100px 0;

    background:#ffffff;

}

.roadmap-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

    height:100%;

}

.roadmap-card:hover{

    transform:translateY(-12px);

}

.roadmap-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563EB,#38BDF8);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:2rem;

}

.roadmap-card h4{

    margin-bottom:15px;

    font-weight:700;

}

.roadmap-card p{

    color:#64748B;

    margin-bottom:20px;

}

.roadmap-card ul{

    list-style:none;

    padding:0;

    text-align:left;

    margin-bottom:25px;

}

.roadmap-card li{

    padding:8px 0;

    color:#334155;

}

/*==========================================
        COURSES & PLAYLISTS
==========================================*/

.course-playlists{

    padding:100px 0;

    background:#F8FAFC;

}

.playlist-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.playlist-card:hover{

    transform:translateY(-10px);

}

.playlist-image{

    height:170px;

    background:linear-gradient(135deg,#2563EB,#38BDF8);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:4rem;

    color:white;

}

.playlist-body{

    padding:25px;

}

.playlist-level{

    display:inline-block;

    padding:6px 14px;

    border-radius:50px;

    color:#fff;

    font-size:.8rem;

    margin-bottom:15px;

}

.beginner{

    background:#10B981;

}

.intermediate{

    background:#F59E0B;

}

.advanced{

    background:#EF4444;

}

.expert{

    background:#7C3AED;

}

.playlist-body h4{

    font-weight:700;

    margin-bottom:10px;

}

.playlist-body p{

    color:#64748B;

    margin-bottom:20px;

}

.playlist-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

    font-size:.9rem;

    color:#475569;

}