body{
    font-family: Arial, sans-serif;
}

.hero-section{
    height: 90vh;

    background:
    linear-gradient(rgba(0,0,0,0.7),
    rgba(0,0,0,0.7)),
    url('../images/hero.jpg');

    background-size: cover;
    background-position: center;
}

.card{
    border-radius: 15px;
    border: none;
}

    body{
            background:#0d1117;
            color:white;
            font-family:Arial, sans-serif;
        }

        .sidebar{
            height:100vh;
            background:#161b22;
            padding:20px;
            position:fixed;
            width:250px;
        }

        .sidebar h2{
            color:#00ffaa;
            margin-bottom:40px;
        }

        .sidebar a{
            display:block;
            color:white;
            text-decoration:none;
            margin:20px 0;
            font-size:18px;
        }

        .sidebar a:hover{
            color:#00ffaa;
        }

        .main-content{
            margin-left:270px;
            padding:30px;
        }

        .dashboard-card{
            background:#161b22;
            border-radius:20px;
            padding:25px;
            margin-bottom:20px;
            border:1px solid rgba(255,255,255,0.08);
        }

        .upload-box{
            border:2px dashed #00ffaa;
            border-radius:20px;
            padding:40px;
            text-align:center;
        }

        .btn-custom{
            background:#00ffaa;
            color:black;
            border:none;
            padding:12px 20px;
            border-radius:10px;
            font-weight:bold;
        }

        .btn-custom:hover{
            background:#00cc88;
        }

        table{
            color:white !important;
        }

        .status-pending{
            color:orange;
            font-weight:bold;
        }

        .status-completed{
            color:#00ffaa;
            font-weight:bold;
        }

.button-group{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}

.submit-btn{

    background:#00ffaa;

    color:#000;

    border:none;

    padding:16px 35px;

    border-radius:14px;

    font-size:18px;

    font-weight:bold;

    transition:0.3s;

    cursor:pointer;

    box-shadow:0 0 15px rgba(0,255,170,0.3);

}

.submit-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(0,255,170,0.6);

}

.priority-btn{

    background:linear-gradient(
        135deg,
        #ffcc00,
        #ff8800
    );

    color:white;

    border:none;

    padding:16px 35px;

    border-radius:14px;

    font-size:18px;

    font-weight:bold;

    transition:0.3s;

    cursor:pointer;

    box-shadow:0 0 15px rgba(255,136,0,0.4);

}

.priority-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(255,136,0,0.7);

}

/* Navbar */

.custom-navbar{

    background: rgba(0,0,0,0.85);

    backdrop-filter: blur(12px);

    border-bottom:
    1px solid rgba(0,255,170,0.2);

    padding-top: 1px;

    padding-bottom: 1px;

}

/* Common Button Style */

.nav-btn{

    border: none;

    padding: 10px 22px;

    border-radius: 12px;

    font-weight: 600;

    transition: 0.3s;

    color: black;

}

/* Home */

.home-btn{

    background: #00bfff;

}

/* User Dashboard */

.user-btn{

    background: #00ffaa;

    color: black;

}

/* Municipality */

.admin-btn{

        background:linear-gradient(
        45deg,
        #00ffaa,
        #00bfff
    );

}

/* Login */

.login-btn{

    background: #ffaa00;

    color: black;

}

/* Hover Effects */

.nav-btn:hover{

    transform: translateY(-2px);

    box-shadow: 0 0 15px rgba(255,255,255,0.25);

}