@media only screen and (max-width: 768px) {
    delcon>navigasi nav {
        display: flex;
        position: fixed;
        justify-content: space-around;
        align-items: center;
        height: 10vh;
        width: 100%;
        background-color: white;

        z-index: 5;
    }

    /* ********** navbar >> logo ********** */
    delcon .navbar-logo {
        height: 10vh;
    }

    delcon .navbar-logo img {
        padding: 2.5vh 0;
        height: 100%;
    }

    /* ********** navbar >> burger menu ********** */
    delcon .burgermenu {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 7vh;
        width: 7vh;
        font-size: 1.5rem;
        cursor: pointer;
        border-radius: 4px;
        /*border: 5px ridge darkgreen;*/
        color: green;
    }

    /* ********** navbar >> login/logout ********** */

    delcon>navigasi .login {
        background-color: green;
        color: white;
        height: 5vh;
        width: 5vh;
        cursor: pointer;
        /* border-radius: 5px; */
        border-radius: 50%;
        border: 4px outset black;

        display: flex;
        /* display: none; */
        justify-content: center;
        align-items: center;
    }

    delcon>navigasi .login>p {
        display: none;
    }

    /* ********** navbar >> navigasi konten ********** */

    delcon>navigasi .navigasi {
        display: none;
        background-color: rgba(0, 0, 0, .8);
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;

    }

    delcon>navigasi .navigasi>.navikon {
        width: 75%;
        background-color: cyan;
        padding: 10% 5% 20%;
    }

    delcon>navigasi .nav-menu {
        margin-bottom: 2px;
    }


    delcon>navigasi .nav-link {
        text-decoration: none;
        height: 100%;
        color: white;
        background-color: green;

        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;


        border-radius: 0 25px 25px 0;
        /* border: 1px solid burlywood; */
        padding: 5% 5%;
        width: 100%;

        display: flex;

    }



    /* >>>>>>>>>> dropdown <<<<<<<<<< */


    delcon>navigasi .dropdown01 {
        background-color: aquamarine;
        border: 3px inset black;
        border-radius: 5px;
        margin: 0.5vh 5vw 2vh 0;
        /* padding: 2vh 1vw 2vh 3vw; */
    }

    .dropdown-link {
        display: flex;
        align-items: center;
        font-size: 0.8em;
        text-decoration: none;
        padding: 2vh 0.5vw 2vh 2vw;
        gap: 2vw;
    }

}

/* ******************** end #ALL IN# ******************** */
/* *************************************************** */

/* ******************** #DESKTOP# ******************** */

@media only screen and (min-width: 768px) {

    delcon>navigasi {
        background-color: white;
        height: 8vh;
    }

    /* ================== #desktop# navbar ======================== */

    delcon>navigasi nav {
        display: flex;
        position: fixed;
        align-items: center;
        justify-content: space-between;
        padding: 0 7vw;
        height: 8vh;
        width: 100%;

        z-index: 5;
        /* background-color: transparent; */
        background-color: white;
    }

    /* ********** #desktop# navbar >> logo ********** */
    delcon .navbar-logo {
        height: 8vh;
        /* background-color: violet; */
    }

    delcon .navbar-logo img {
        padding: 1.5vh 0;
        height: 100%;
    }



    /* ********** #desktop# navbar >> burger menu ********** */
    delcon .burgermenu {
        display: none;
    }


    /* ********** #desktop# navbar >> login/logout ********** */

    /* delcon>navigasi .login {
        display: none;
    } */

    delcon>navigasi .login>i {
        display: none;
    }

    delcon>navigasi .login>p {
        border-radius: 5px;
        border: 1px solid yellow;
        padding: 0.5vh 2vh;

        background-color: #000;
        color: yellow;
    }

    /* ********** #desktop# navbar >> navigasi&konten ********** */

    delcon>navigasi .navigasi {
        /* background-color: firebrick; */

        /* display: block; */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
        margin-right: 2vw;
        /* height: 100%; */
    }

    delcon>navigasi .navikon {
        /* background-color: gray; */
        display: flex;
        align-items: center;
        /* height: 8vh; */
    }

    delcon>navigasi .nav-menu {
        /* background-color: aqua; */
        height: 8vh;
        display: flex;
        align-items: center;
    }


    delcon>navigasi .nav-link {
        text-decoration: none;
        display: flex;
        justify-content: center;
        padding: 1.5vh 3.5vh;
        /* height: 7vh; */
        border-radius: 5px;

        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        /* letter-spacing: .75px; */
        color: black;
    }

    /* delcon>navigasi .nav-menu.nav-aktif>.nav-link {
        background-color: royalblue;
        color: yellow;
    } */

    delcon>navigasi .nav-link.active {
        background-color: #b0b0b0;
        color: white;
    }

    delcon>navigasi .nav-link.nav-home {
        padding: 1.5vh;
        margin-right: 1.2vh;
    }

    delcon>navigasi .nav-menu:hover>.nav-link {
        background-color: #2a8c28;
        color: white;
    }


    delcon>navigasi .nav-link.nav-home>span {
        display: none;
    }

    delcon .nav-link:not(.nav-home)>i {
        display: none;
    }





    /* >>>>>>>>>> #desktop# dropdown <<<<<<<<<< */

    delcon>navigasi .dropdown01 {
        display: none;
        position: fixed;
        background-color: aqua;
        top: 8vh;
        border: 3px inset black;
        border-radius: 5px;
        padding: 2vh 0;
    }

    delcon>navigasi .nav-menu:hover .dropdown01 {
        display: block;
    }

    /* >>>>>>>>>> #desktop# dropdown pertama <<<<<<<<<< */

    .dropdown-link {
        display: flex;
        text-decoration: none;
    }

    .dropdown-link>i {
        display: none;
    }

    .dropdown-link>p {
        padding: 2vh 2vw;
        color: darkblue;
        text-transform: capitalize;
        width: 100%;
    }

    .dropdown-link:hover>p {
        background-color: lightgreen;
    }

}