/* =========================================
   PORTAL LAYANAN GTK KABUPATEN KONAWE
   13-navigation.css
   Version : 8.0
========================================= */


/* =========================================
   FLOATING NAVIGATION
========================================= */

.floating-nav{

    position:fixed;

    left:50%;

    bottom:20px;

    top:auto;

    transform:translateX(-50%);

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    width:600px;

    height:80px;

    padding:0 24px;

    background:var(--white);

    border-radius:40px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);

    border:1px solid var(--border);

}


/* =========================================
   NAVIGATION ITEM
========================================= */

.floating-nav a{

    position:relative;

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    height:100%;

    color:#666;

    font-size:14px;

    font-weight:600;

    text-align:center;

    transition:
        color .25s ease,
        transform .25s ease;

}


/* =========================================
   ICON
========================================= */

.floating-nav a i{

    font-size:24px;

    line-height:1;

}


/* =========================================
   LABEL
========================================= */

.floating-nav a span{

    font-size:14px;

    line-height:1.2;

}


/* =========================================
   HOVER
========================================= */

.floating-nav a:hover{

    color:var(--primary);

    transform:translateY(-3px);

}


/* =========================================
   GTK PORTAL BUTTON
========================================= */

.floating-nav .portal{

    flex:0 0 76px;

    width:76px;

    height:76px;

    margin-top:-28px;

    margin-left:4px;

    margin-right:4px;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    border:5px solid var(--white);

    box-shadow:
        0 10px 25px rgba(21,101,192,.30);

    justify-content:center;

    gap:4px;

}


/* =========================================
   GTK ICON
========================================= */

.floating-nav .portal i{

    font-size:28px;

}


/* =========================================
   GTK LABEL
========================================= */

.floating-nav .portal span{

    font-size:14px;

    font-weight:700;

}


/* =========================================
   GTK HOVER
========================================= */

.floating-nav .portal:hover{

    color:var(--white);

    transform:translateY(-3px);

    background:var(--primary-dark);

}


/* =========================================
   TABLET
========================================= */

@media(max-width:992px){

    .floating-nav{

        width:90%;

        max-width:600px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .floating-nav{

        width:92%;

        height:68px;

        padding:0 10px;

        bottom:14px;

        border-radius:34px;

    }


    .floating-nav a{

        gap:3px;

        font-size:12px;

    }


    .floating-nav a i{

        font-size:20px;

    }


    .floating-nav a span{

        font-size:11px;

    }


    .floating-nav .portal{

        flex:0 0 64px;

        width:64px;

        height:64px;

        margin-top:-22px;

        margin-left:2px;

        margin-right:2px;

        border-width:4px;

    }


    .floating-nav .portal i{

        font-size:24px;

    }


    .floating-nav .portal span{

        font-size:11px;

    }

}


/* =========================================
   HP KECIL
========================================= */

@media(max-width:480px){

    .floating-nav{

        width:94%;

        bottom:10px;

    }


    .floating-nav a i{

        font-size:18px;

    }


    .floating-nav a span{

        font-size:10px;

    }


    .floating-nav .portal{

        flex:0 0 60px;

        width:60px;

        height:60px;

        margin-top:-20px;

    }


    .floating-nav .portal i{

        font-size:22px;

    }

}