/* Custom Hero untuk Integrasi dengan Overlay 50% */
.integrasi-hero {
    background: linear-gradient(rgba(10, 35, 66, 0.5), rgba(10, 35, 66, 0.5)), 
                url('../img/IMG20211116081012_2-scaled.jpg') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Styling Progress Bar untuk visualisasi kinerja */
.chart-box {
    border-top: 4px solid var(--accent-gold);
}

.progress-bar {
    font-weight: bold;
    font-size: 0.8rem;
    text-align: left;
    padding-left: 15px;
}

/* Hover Effect pada kartu alur */
.card-berakhlak .icon-box {
    transition: all 0.3s ease;
}

.card-berakhlak:hover .icon-box {
    background: var(--accent-gold);
    color: var(--deep-blue);
    transform: rotate(360deg);
}

.nav-link.active {
    color: var(--accent-gold) !important;
    border-bottom: 2px solid var(--accent-gold);
}