/* =========================================================
MOBILE BOTTOM NAVIGATION
========================================================= */

.mobile-bottom-nav {
position: fixed;
left: 0;
bottom: 0;

width: 100%;  
height: 60px;  

display: none;  
justify-content: space-around;  
align-items: center;  

background-color: #1a1c23;  

box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);  

border-top: 1px solid rgba(255, 255, 255, 0.05);  

z-index: 9999;  

/* Scroll Hide / Show */  
transition: transform 0.3s ease;  
transform: translateY(0);

}

/* =========================================================
NAV ITEM
========================================================= */

.mobile-bottom-nav .nav-item {
width: 20%;
height: 100%;

display: flex;  
flex-direction: column;  
align-items: center;  
justify-content: center;  

color: rgba(255, 255, 255, 0.6);  

text-decoration: none;  

font-size: 11px;  
font-weight: 500;  

transition: color 0.25s ease;

}

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

.mobile-bottom-nav .nav-item svg,
.mobile-bottom-nav .nav-item .icon-active {
width: 24px;
height: 24px;

margin-bottom: 4px;  

display: block;  

transition: transform 0.25s ease;

}

/* =========================================================
NORMAL / ACTIVE ICON SWITCH
========================================================= */

/* Active icon default অবস্থায় hidden */

.mobile-bottom-nav .nav-item .icon-active {
display: none;
}

/* Active হলে Normal icon hide */

.mobile-bottom-nav .nav-item.active .icon-normal {
display: none;
}

/* Active হলে Active icon show */

.mobile-bottom-nav .nav-item.active .icon-active {
display: block;
}

/* =========================================================
ACTIVE BUTTON
========================================================= */

.mobile-bottom-nav .nav-item.active {
color: #00ff88 !important;
}

/* =========================================================
ACTIVE ICON POSITION
========================================================= */

.mobile-bottom-nav .nav-item.active .icon-active {
transform: translateY(-2px);
}

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

@media only screen and (max-width: 600px) {

.mobile-bottom-nav {  
    display: flex;  
}  

/*  
   Bottom Nav যেন website content-এর  
   উপর উঠে না যায়  
*/  

body {  
    padding-bottom: 60px !important;  
}

}

/* =========================================================
MOBILE BOTTOM NAV — SCROLL HIDE / SHOW
========================================================= */

@media only screen and (max-width: 600px) {

.mobile-bottom-nav {  
    transition: transform 0.3s ease;  
    transform: translateY(0);  
}  

.mobile-bottom-nav.nav-hidden {  
    transform: translateY(100%);  
}

}

/* =========================================================
VERY SMALL MOBILE SCREEN
========================================================= */

@media only screen and (max-width: 360px) {

.mobile-bottom-nav {  
    height: 58px;  
}  

.mobile-bottom-nav .nav-item {  
    font-size: 10px;  
}  

.mobile-bottom-nav .nav-item svg,  
.mobile-bottom-nav .nav-item .icon-active {  
    width: 24px;  
    height: 24px;  

    margin-bottom: 3px;  
}  

body {  
    padding-bottom: 58px !important;  
}

}