body{
    background:#f5f7fb;
    font-family:'Segoe UI',sans-serif;
}

.navbar{
    box-shadow:0 2px 15px rgba(0,0,0,.08);
}

.hero{
    background:linear-gradient(
    135deg,
    #0d6efd,
    #6610f2);

    color:#fff;

    padding:100px 0;
}

.hero h1{
    font-size:55px;
    font-weight:700;
}

.hero p{
    font-size:20px;
}

.category-card{
    background:#fff;

    border-radius:15px;

    padding:25px;

    text-align:center;

    transition:.3s;

    box-shadow:0 3px 12px rgba(0,0,0,.05);
}

.category-card:hover{

    transform:translateY(-5px);

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

.category-card i{
    font-size:40px;
    color:#0d6efd;
    margin-bottom:15px;
}

.section-title{
    font-size:35px;
    font-weight:700;
    text-align:center;
    margin-bottom:40px;
}

.auth-card{
    max-width:500px;
    margin:auto;
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.footer{
    background:#111827;
    color:#fff;
    padding:20px;
    text-align:center;
}

.btn-main{
    background:#0d6efd;
    color:#fff;
    border:none;
}

.btn-main:hover{
    background:#0b5ed7;
    color:#fff;
}

.dashboard-card{
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.07);
}

.stat-box{
    color:#fff;
    padding:25px;
    border-radius:15px;
}

.bg-blue{
    background:#0d6efd;
}

.bg-green{
    background:#198754;
}

.bg-orange{
    background:#fd7e14;
}

.bg-red{
    background:#dc3545;
}