@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
*{
    margin: 0;
    font-family: 'Poppins', sans-serif;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #00092c;
}
.navigation{
    position: relative;
    width: 540px;
    height: 120px;
    background: #f0f0f1;
    box-shadow:  25px 25px 75px rgba(240, 238, 236, 0.123);
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation li{
    position: relative;
    list-style: none;
    width: 80px;
    margin: 0 5px;
}


.navigation li::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #ff5f00;
    border-radius: 50%;
    transition: 0.5s;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}

.navigation li.active::before{
    background: #00092c;
    box-shadow: 0 0 5px #00092c,
    0 0 10px #00092c,
    0 0 20px #00092c,
    0 0 30px #00092c,
    0 0 40px #00092c,
    0 0 50px #00092c;

}
.navigation li a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
}

.navigation li a .icon{
    position: absolute;
    font-size: 1.7em;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00092c;
    border-radius: 50%;
    transition: 0.5s;
    transition-delay: 0.2s;

}

.navigation li.active a .icon{
    background: #ff5f00;
    color: #ffff;
    transform: translateY(-55px);
    transition: 0s;
}

.navigation li a .icon::before{
   content: '';
   position: absolute;
   inset: 10px;
   background: #00092c;
   border-radius: 50%;
   transform: scale(0); 
   transition: 0.5s;
}


.navigation li.active a .icon::before{
    content: '';
    transform: scale(1); 
}

.navigation li a .text{
   position: absolute;
   font-size: 0.7em;
   color: #f0f0f1;
   transform: translateY(20px);
   padding: 2px 10px;
   background:#00092c ;
   border-radius: 10px;
   opacity: 0;
   transition: 0.5s;
   transition-delay: 0s;

} 

.navigation li.active a .text{
   opacity: 1;
   transform: translateY(10px);
   transition-delay: 0.2s;
}