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


.page-navigation{

    position:fixed;

    right:30px;

    top:50%;

    transform:translateY(-50%);

    z-index:9998;

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:15px 10px;

    border-radius:40px;

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

    backdrop-filter:blur(15px);

    box-shadow:0 20px 50px rgba(15,23,42,.12);

}



/* Links */

.page-dot{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    color:#24324B;

    background:#ffffff;

    text-decoration:none;

    transition:.35s ease;

}



.page-dot i{

    font-size:1rem;

}



.page-dot span{

    position:absolute;

    right:55px;

    white-space:nowrap;

    padding:8px 16px;

    background:#0D0A63;

    color:#ffffff;

    border-radius:20px;

    font-size:.8rem;

    opacity:0;

    visibility:hidden;

    transform:translateX(10px);

    transition:.35s ease;

}



.page-dot:hover span{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}



/* Hover */

.page-dot:hover{

    background:#1E8BFF;

    color:#ffffff;

    transform:translateX(-5px);

}



/* Active */

.page-dot.active{

    background:#0D0A63;

    color:#ffffff;

    box-shadow:0 0 0 6px rgba(13,10,99,.12);

}



/* Mobile hide */

@media(max-width:991px){

    .page-navigation{

        display:none;

    }

}