/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ===========================
   RESET
=========================== */

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

body{
    background:#f5f7fb;
}

/* ===========================
   NAVBAR
=========================== */

.navbar{
    background:linear-gradient(90deg,#0f9d58,#2ecc71);
    padding:15px 0;
}

.navbar-brand{
    font-size:22px;
    font-weight:700;
}

.nav-link{
    color:white !important;
    margin-left:15px;
    transition:.3s;
}

.nav-link:hover{
    color:#ffe082 !important;
}

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

.hero{

    background:linear-gradient(135deg,#0f9d58,#2ecc71);

    color:white;

    padding:60px 0;

    border-bottom-left-radius:40px;

    border-bottom-right-radius:40px;

}

.hero h1{

    font-size:40px;

    font-weight:700;

}

.hero p{

    margin-top:15px;

    opacity:.9;

}

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

.dashboard-card{

    border:none;

    border-radius:20px;

    transition:.4s;

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

}

.dashboard-card:hover{

    transform:translateY(-8px);

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

}

.dashboard-card .card-body{

    padding:25px;

}

.dashboard-card h6{

    color:#666;

    margin-top:15px;

}

.dashboard-card h2{

    font-weight:700;

    margin-top:10px;

}

.icon{

    font-size:35px;

    color:#17a34a;

}

/* ===========================
   STATUS
=========================== */

.status{

    display:inline-block;

    margin-top:10px;

    padding:6px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}

.normal{

    background:#d1fae5;

    color:#047857;

}

.warning{

    background:#fef3c7;

    color:#92400e;

}

.danger{

    background:#fee2e2;

    color:#b91c1c;

}

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

.card{

    border:none;

    border-radius:20px;

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

}

/* ===========================
   TABLE
=========================== */

.table thead{

    background:#17a34a;

    color:white;

}

.table{

    border-radius:15px;

    overflow:hidden;

}

/* ===========================
   BUTTON
=========================== */

.btn-success{

    background:#16a34a;

    border:none;

    border-radius:12px;

    padding:12px;

    transition:.3s;

}

.btn-success:hover{

    background:#15803d;

}

/* ===========================
   LOGIN
=========================== */

.login-page{

    background:linear-gradient(135deg,#16a34a,#4ade80);

}

.login-card{

    border:none;

    border-radius:25px;

    overflow:hidden;

}

.login-card .card-body{

    padding:45px;

}

.input-group-text{

    background:#16a34a;

    color:white;

    border:none;

}

.form-control{

    border:1px solid #ddd;

}

.form-control:focus{

    border-color:#16a34a;

    box-shadow:0 0 10px rgba(22,163,74,.3);

}

/* ===========================
   CHART
=========================== */

canvas{

    width:100% !important;

    height:380px !important;

}

/* ===========================
   BADGE
=========================== */

.badge{

    font-size:14px;

    border-radius:20px;

    padding:10px 20px;

}

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

footer{

    background:#0f172a;

    color:white;

    padding:20px;

    text-align:center;

}

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

@media(max-width:768px){

.hero{

text-align:center;

padding:40px 20px;

}

.hero h1{

font-size:28px;

}

.dashboard-card{

margin-bottom:20px;

}

.navbar-brand{

font-size:18px;

}

}