/* Navbar Styles */
.navbar {
    background: linear-gradient(135deg, #00d0ff, #132125) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 15px 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 24px;
    color: #000000 !important;
}

.nav-link {
    color: #fff !important;
    font-weight: 500;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-2px);
    color: #f0f0f0 !important;
}

/* Section  */
section {
    padding: 100px 0;
    min-height: 100vh;
    position: relative;
    scroll-margin-top: 70px; /* Adds margin for smooth scrolling with fixed navbar */
}

/* Section backgrounds per theme (hero / kalkulator / makanan / tentang) */
#beranda {
    background:
        linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
        url('https://images.unsplash.com/photo-1498837167922-ddd27525d352?auto=format&fit=crop&w=1770&q=80') center/cover no-repeat;
}

#kalkulator {
    min-height: 100vh;
    height: auto;
    background: linear-gradient(rgba(248,249,250,0.9), rgba(248,249,250,0.9)),
                url('https://images.unsplash.com/photo-1506102383123-c8ef1e872756?auto=format&fit=crop&q=80') center/cover no-repeat;
}

#makanan {
    background:
        linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
        url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1770&q=80') center/cover no-repeat;
    padding-top: calc(70px + 2rem); /* navbar height + extra padding */
    margin-top: 0;
    min-height: calc(100vh - 70px); /* Adjust for navbar height */
}

#tentang {
    background:
        linear-gradient(rgba(250,250,250,0.9), rgba(250,250,250,0.9)),
        url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1770&q=80') center/cover no-repeat;
}

/* common background settings */
#beranda, #kalkulator, #makanan, #tentang {
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* avoid fixed on mobile */
}

/* keep container content readable above images */
#beranda .container,
#kalkulator .container,
#makanan .container,
#tentang .container {
    position: relative;
    z-index: 2;
}

/* fallback for very small screens / slow connections */
@media (max-width: 576px) {
    #beranda, #kalkulator, #makanan, #tentang {
        background-image: none;
        background-color: #f8f9fa;
    }
}

/* Animation navbar */
.fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}