/* default hidden */

.bottom-nav{
display:none;
}

/* mobile view */

@media(max-width:768px){

.bottom-nav{
display:flex;
position:fixed;
bottom:0;
left:0;
width:100%;
height:65px;
background:#fff;
justify-content:space-around;
align-items:center;
box-shadow:0 -3px 15px rgba(0,0,0,0.15);
border-top-left-radius:20px;
border-top-right-radius:20px;
z-index:999;
}

/* nav links */

.bottom-nav a{
text-decoration:none;
color:#555;
font-size:11px;
display:flex;
flex-direction:column;
align-items:center;
transition:.25s;
}

.bottom-nav a i{
font-size:18px;
}

/* hover */

.bottom-nav a:hover{
color:#ff9800;
transform:translateY(-3px);
}

.bottom-nav a:hover i{
transform:scale(1.15);
}

.bottom-nav a:active{
transform:scale(.95);
}

/* floating button */

.middle-btn{
position:absolute;
top:-25px;
background:#ff9800;
color:#fff !important;
width:55px;
height:55px;
border-radius:50%;
display:flex !important;
align-items:center;
justify-content:center;
font-size:22px;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transition:.3s;
}

.middle-btn:hover{
transform:scale(1.1);
box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

.middle-btn i{
font-size:22px;
}

/* curve */

.bottom-nav::before{
content:"";
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
width:90px;
height:40px;
background:#fff;
border-bottom-left-radius:45px;
border-bottom-right-radius:45px;
}

}

/* prevent content hiding */

body{
padding-bottom:80px;
}