:root{
    --hijau-gelap:   #073824;
    --hijau-tua:     #0B5D3B;
    --hijau-terang:  #147a4f;
    --emas:          #C89B3C;
    --emas-terang:   #E8CC85;
    --putih:         #FFFFFF;
    --kabut:         rgba(255,255,255,.86);
}

/* ===========================
   NAVBAR
=========================== */

.katalog-navbar{

    background:rgba(7,56,36,.92);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(232,204,133,.18);

    box-shadow:0 8px 25px rgba(0,0,0,.20);

}

/* ===========================
   LOGO
=========================== */

.katalog-navbar .navbar-brand{

    color:var(--putih);

    text-decoration:none;

    transition:.3s;

}

.katalog-navbar .navbar-brand:hover{

    color:var(--emas-terang);

}

.katalog-navbar .navbar-brand small{

    display:block;

    color:rgba(255,255,255,.70);

    font-size:12px;

}

/* ===========================
   MENU
=========================== */

.katalog-navbar .nav-link{

    color:rgba(255,255,255,.88);

    margin-left:18px;

    font-weight:500;

    transition:.3s;

    position:relative;

}

.katalog-navbar .nav-link:hover{

    color:var(--emas-terang);

}

/* ===========================
   MENU AKTIF
=========================== */

.katalog-navbar .nav-link.active{

    color:var(--emas);

    font-weight:600;

}

.katalog-navbar .nav-link.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:50px;

    background:var(--emas);

}