/* Tambahkan gaya khusus untuk footer */
.page-footer {
    background: linear-gradient(to right, #141E46, #192655, #192655);
    color: #fff;
    padding: 40px 0;
    font-family: 'Montserrat', sans-serif;
}

.page-footer h5 {
    font-weight: 500;
}

.page-footer p, .page-footer a {
    color: #ffffff;
    text-decoration: none;
}

.page-footer a:hover {
    color: #ff8800;
}

/* Tambahkan gaya untuk header dengan latar belakang bergradasi */
.navbar {
    background: linear-gradient(to right, #192655, #192655, #141E46);
    border: none;
    font-family: 'Open Sans', sans-serif;
    position: sticky;
    top: 0;
    width: 100%;
}

.navbar a {
    color: #fff;
}

.navbar a:hover {
    color: #ff8800;
}

/* Gaya untuk sp-top-bar */
#sp-top-bar {
    background-color: #141E46;
    color: #ccc;
    padding: 10px 0;
}

#sp-top-bar .container-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#sp-top-bar .sp-column .sp-contact-info a {
    color: #ccc;
    text-decoration: none;
    border-bottom: none;
}

#sp-top-bar .sp-contact-info a:hover {
    color: #ff8800;
}

.social-icons a {
    color: #777;
    text-decoration: none;
    margin-right: 10px;
}

.social-icons a:hover {
    color: #ff8800;
}

/* Gaya responsif untuk header dan footer */
@media (max-width: 991px) {
    .navbar {
        background: #192655;
        padding: 15px 0;
    }

    .navbar a {
        color: #fff;
    }

    .navbar-toggler-icon {
        background-color: #fff;
    }

    .page-footer {
        padding: 20px 0;
    }

    #sp-top-bar {
        padding: 10px 0;
    }
}

/* Gaya untuk mengatur tampilan chart */
.chart-container {
    display: flex;
    justify-content: space-between;
}

.chart-container canvas {
    max-width: 100%; /* Membuat chart responsif */
}