/* =========================
   GLOBAL STYLES
========================= */

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

body{
    background:#fcfcfc;
    color:#333;
    overflow-x:hidden;
}

/* =========================
   PARTICLE BACKGROUND
========================= */

#particles-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #fdfd03 0%,
        #e3f704 50%,
        #f6fa02 100%
    );
}

.particle{
    position:absolute;
    border-radius:50%;
    background:rgb(38, 0, 255);
    box-shadow:
        0 0 15px rgb(38, 0, 255),
        0 0 30px rgb(38, 0, 255),
        0 0 45px rgb(38, 0, 255);
    animation:floatParticle linear infinite;
}

@keyframes floatParticle{

    0%{
        transform:translateY(100vh);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    100%{
        transform:translateY(-100px);
        opacity:0;
    }

}

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

header{
    text-align:center;
    padding:50px 20px;
    background:#2563eb;
    color:rgb(247, 244, 244);
}

header h1{
    font-size:3rem;
    margin-bottom:10px;
}

header p{
    margin-bottom:20px;
}

#search{
    width:300px;
    max-width:90%;
    padding:12px;
    border:none;
    border-radius:8px;
}

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

section{
    padding:40px 8%;
}

section h2{
    margin-bottom:25px;
    text-align:center;
}

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

.categories{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.categories button{
    padding:10px 50px;
    border:none;
    border-radius:250px;
    cursor:pointer;
    background:#2563eb;
    color:rgb(254, 253, 253);
    transition:0.3s;
}

.categories button:hover{
    transform:translateY(-3px);
}

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

#courseContainer{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 4px 15px rgb(55, 0, 255);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.card-content{
    padding:20px;
}

.card-content h3{
    margin-bottom:10px;
}

.card-content p{
    margin-bottom:10px;
}

.card-content button{
    padding:10px 15px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    margin-right:8px;
    margin-top:8px;
    background:#2563eb;
    color:rgb(247, 244, 244);
}

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

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
}

.stat-card{
    background:white;
    padding:25px;
    text-align:center;
    border-radius:15px;
    box-shadow:0 4px 10px rgb(7, 0, 0);
}

.stat-card h3{
    color:#2563eb;
    font-size:2rem;
}

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

.progress-bar{
    width:100%;
    height:12px;
    background:#ddd;
    border-radius:10px;
}

.progress{
    width:60%;
    height:100%;
    background:#2563eb;
    border-radius:10px;
}

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

#badgesContainer{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.badge{
    background:gold;
    padding:12px 18px;
    border-radius:25px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.badge:hover{
    transform:scale(1.1);
}

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

.leaderboard{
    text-align:center;
}

.leaderboard ol{
    max-width:400px;
    margin:auto;
    text-align:left;
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
}

.leaderboard li{
    margin-bottom:10px;
}

/* =========================
   ANALYTICS
========================= */

.chart-container{
    background:white;
    padding:20px;
    border-radius:15px;
    box-shadow:0 4px 10px rgb(0, 0, 0);
}

/* =========================
   QUIZ
========================= */

.quiz-card{
    background:white;
    padding:25px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.quiz-card button{
    margin:10px;
    padding:10px 15px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#2563eb;
    color:white;
}

/* =========================
   REVIEWS
========================= */

textarea{
    width:100%;
    min-height:120px;
    padding:15px;
    border-radius:10px;
    border:1px solid #ccc;
}

.review-section button{
    padding:10px 20px;
    border:none;
    border-radius:8px;
    background:#2563eb;
    color:white;
    cursor:pointer;
}

.review{
    background:white;
    margin-top:15px;
    padding:15px;
    border-radius:10px;
    box-shadow:0 3px 8px rgba(0,0,0,0.1);
}

/* =========================
   CERTIFICATE
========================= */

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

#certificateBtn{
    margin-top:15px;
    padding:12px 25px;
    border:none;
    border-radius:8px;
    background:#16a34a;
    color:white;
    cursor:pointer;
    font-size:16px;
}

/* =========================
   MODAL
========================= */

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

.modal-content{
    background:rgb(255, 255, 255);
    width:80%;
    max-width:800px;
    margin:60px auto;
    padding:20px;
    border-radius:15px;
}

.close{
    float:right;
    font-size:30px;
    cursor:pointer;
}

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

footer{
    text-align:center;
    padding:20px;
    background:#1e293b;
    color:white;
    margin-top:40px;
}

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

@media(max-width:768px){

    header h1{
        font-size:2rem;
    }

    .modal-content{
        width:95%;
    }

}