/* =========================================
   HAS FRAMEWORK 1.0
   File : 13-navigation.css
   Website : haldi.my.id
   Author : Haldi Ali Syukur
========================================= */


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

.floating-nav{

    position:fixed;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    padding:14px 28px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(255,255,255,.5);

    border-radius:40px;

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

    z-index:9999;

}


/* =========================================
   LINK
========================================= */

.floating-nav a{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-width:65px;

    color:var(--primary);

    text-decoration:none;

    transition:.35s;

}


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

.floating-nav i{

    font-size:22px;

    margin-bottom:6px;

    transition:.35s;

}


/* =========================================
   TEXT
========================================= */

.floating-nav span{

    font-size:12px;

    font-weight:600;

}


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

.floating-nav a:hover{

    color:var(--primary-dark);

    transform:translateY(-6px);

}

.floating-nav a:hover i{

    transform:scale(1.15);

}


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

.floating-nav a.active{

    color:var(--primary-dark);

}

.floating-nav a.active i{

    transform:scale(1.2);

}


/* =========================================
   PORTAL GURU
========================================= */

.portal{

    width:78px;

    height:78px;

    margin-top:-40px;

    border-radius:50%;

    background:linear-gradient(135deg,#1565c0,#0d47a1);

    color:#ffffff !important;

    box-shadow:0 15px 35px rgba(21,101,192,.40);

}

.portal i{

    font-size:30px;

    color:#ffffff;

}

.portal span{

    font-size:12px;

    font-weight:bold;

}

.portal:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(21,101,192,.45);

}


/* =========================================
   ANIMATION
========================================= */

@keyframes navFade{

    from{

        opacity:0;

        transform:translate(-50%,30px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}

.floating-nav{

    animation:navFade .8s ease;

}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

.floating-nav{

    width:95%;

    gap:5px;

    padding:10px;

    border-radius:25px;

}

.floating-nav a{

    min-width:auto;

}

.floating-nav i{

    font-size:18px;

}

.floating-nav span{

    font-size:10px;

}

.portal{

    width:62px;

    height:62px;

    margin-top:-25px;

}

.portal i{

    font-size:22px;

}

.portal span{

    font-size:10px;

}

}