/* Mengubah warna background navbar */
.navbar-navy {
    background-color: #002B5B; /* Ini adalah warna biru navy yang bagus */
}

/* Mengubah warna teks dan link di dalam navbar menjadi putih agar terbaca */
.navbar-navy .navbar-brand,
.navbar-navy .nav-link {
    color: #ffffff;
}

/* Mengubah warna ikon toggler agar terlihat di background gelap */
.navbar-navy .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* (Opsional) Mengubah warna link saat kursor di atasnya */
.navbar-navy .nav-link:hover {
    color: #33bc26;
}

/* Memberi gaya khusus untuk link navbar yang sedang aktif */
.navbar-navy .nav-link.active {
    background-color: #198754; /* Warna hijau standar Bootstrap */
    color: #ffffff;      
    font-weight: bold;
    border-radius: 10px;      /* Membuat sudut sedikit melengkung */
    padding-left: 12px;      /* Menambah sedikit jarak di kiri */
    padding-right: 12px;     /* Menambah sedikit jarak di kanan */
}

/* Class baru untuk background gradient pada Call to Action */
.cta-gradient {
    /* Membuat background gradien dari warna biru ke hijau */
    background: linear-gradient(45deg, #0d6efd, #198754);
    
    /* Mengubah warna semua teks di dalamnya menjadi putih agar mudah dibaca */
    color: #ffffff;
}

/* Pastikan heading dan paragraf di dalamnya juga berwarna putih */
.cta-gradient h2, .cta-gradient .lead {
    color: #ffffff;
}

.navbar-brand .logo-brand {
    height: 50px; /* Ukuran tinggi ideal navbar. Kalau kurang besar, ganti jadi 60px */
    width: auto;  /* INI KUNCINYA! Biar logo melebar otomatis dan nggak gepeng */
    object-fit: contain; /* Memastikan logo tidak terpotong */
}

/* Biar logonya agak mengecil dikit kalau dibuka di HP */
@media (max-width: 768px) {
    .navbar-brand .logo-brand {
        height: 40px; 
    }
}