*{
    --bapenda-primary: #0C48E4;
    --bapenda-primary-hover: #0e2e85;
    --bapenda-navbar: #FFFBFB;
    --bapenda-footer: #3069F3;
}

.btn-bapenda-primary{
    background-color: var(--bapenda-primary);
    color: white;
}

.btn-bapenda-primary:hover{
    background-color: var(--bapenda-primary-hover);
    color: white;
}

.bg-bapenda-navbar {
    background-color: var(--bapenda-navbar);
}

.bapenda-footer {
    background-color: var(--bapenda-footer);
    padding-top: 3rem;
    padding-bottom: .5rem;
    padding-left: 8rem;
    padding-right: 8rem;
}

.bapenda-footer .logo-footer{
    height: 100px;
    
}

.gap-1{
    gap: 0.5rem;
}

.gap-2{
    gap: 1rem;
}

.gap-3{
    gap: 1.5rem;
}

.main-content{
    min-height: 100vh;
}

.navbar .navbar-brand .logo {
  height: 50px;
}

.bg-doughnut-chart {
    position: relative;
    overflow: hidden; /* optional, to ensure background doesn't overflow */
}

.bg-doughnut-chart::before {
    content: '';
    background-image: linear-gradient(
        to bottom,
        rgba(68, 118, 245, 0.1),
        rgba(62, 111, 237, 0.7)
    ), url('../img/photos/view-bg-grafik.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.doughnut-chart-wrapper {
    height: 350px;
    position: relative;
    z-index: 3; /* higher than the background layers */
}

.bar-chart-wrapper{
    height: 400px;
}

.chart-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28rem;
    margin-top: 5rem;
}

.kalkulator-card-wrapper {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.kalkulator-card-wrapper .card {
    width: 50rem;
}

.landing-page-hero {
    background-image: url('../img/photos/landing-page-hero-bg.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 40vh;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    z-index: 1;
    text-align: center;
}

.landing-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #016AFFCC;
    opacity: 0.8;
    z-index: 1;
}

.landing-page-hero .container {
    position: relative;
    z-index: 2;
}


/* Mobile responsive */
@media (max-width: 768px) {
    .main-content {
        min-height: 100vh;    /* fallback */
        min-height: 100svh;   /* modern support */
    }

    .doughnut-chart-wrapper{
        height: 200px;
    }
    
    .bar-chart-wrapper{
        height: 300px;
    }

    .bapenda-footer {
        padding-top: 2rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    
    .bapenda-footer .logo-footer{
        height: 80px;
        
    }

    .landing-page-hero {
        height: 30vh;
        min-height: 30vh;
    }
}