/*========================================
MOBILE MENU BUTTON
========================================*/
.mobile-menu-button{
display:none;
width:46px;
height:46px;
background:transparent;
border:0;
cursor:pointer;
position:relative;
z-index:10002;
padding:0;
}

.mobile-menu-button span{
position:absolute;
left:11px;
width:24px;
height:2px;
background:#ffffff;
border-radius:5px;
transition:.35s;
}

.mobile-menu-button span:nth-child(1){
top:14px;
}

.mobile-menu-button span:nth-child(2){
top:22px;
}

.mobile-menu-button span:nth-child(3){
top:30px;
}

.mobile-menu-button.active span:nth-child(1){
transform:rotate(45deg);
top:22px;
}

.mobile-menu-button.active span:nth-child(2){
opacity:0;
}

.mobile-menu-button.active span:nth-child(3){
transform:rotate(-45deg);
top:22px;
}

/*========================================
OVERLAY
========================================*/
.mobile-menu-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
backdrop-filter:blur(3px);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:9998;
}

.mobile-menu-overlay.active{
opacity:1;
visibility:visible;
}

/*========================================
MOBILE MENU
========================================*/
.mobile-menu{
position:fixed;
top:0;
right:-340px;
width:320px;
max-width:90%;
height:100vh;
background:#0f2235;
box-shadow:-10px 0 40px rgba(0,0,0,.30);
transition:.40s ease;
z-index:9999;
display:flex;
flex-direction:column;
overflow-y:auto;
}

.mobile-menu.active{
right:0;
}

/*========================================
TOP
========================================*/
.mobile-menu__top{
display:flex;
align-items:center;
padding:20px 25px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile-menu__top img{
height:60px;
width:auto;
display:block;
}

/*========================================
MENU LINKS
========================================*/
.mobile-menu ul{
list-style:none;
margin:0;
padding:15px 25px;
display:flex;
flex-direction:column;
gap:4px;
}

.mobile-menu ul li{
width:100%;
}

.mobile-menu ul li a{
display:flex;
align-items:center;
width:100%;
padding:16px 18px;
border-radius:14px;
font-size:17px;
font-weight:600;
color:#ffffff;
text-decoration:none;
transition:.30s;
}

.mobile-menu ul li a:hover{
background:rgba(255,255,255,.08);
color:#00A8DE;
padding-left:24px;
}

/*========================================
BOTTOM
========================================*/
.mobile-menu__bottom{
padding:20px 25px 25px;
border-top:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
gap:15px;
}

.mobile-phone{
display:flex;
align-items:center;
justify-content:center;
height:54px;
border:1px solid rgba(255,255,255,.15);
border-radius:14px;
color:#ffffff;
font-size:16px;
font-weight:600;
text-decoration:none;
transition:.30s;
}

.mobile-phone:hover{
background:#00A8DE;
border-color:#00A8DE;
}

.mobile-button{
display:flex;
align-items:center;
justify-content:center;
height:56px;
border-radius:14px;
background:#25D366;
color:#ffffff;
font-size:17px;
font-weight:700;
text-decoration:none;
transition:.30s;
box-shadow:0 10px 30px rgba(37,211,102,.25);
}

.mobile-button:hover{
background:#1FB557;
transform:translateY(-2px);
box-shadow:0 15px 35px rgba(37,211,102,.35);
}

/*========================================
BODY LOCK
========================================*/
body.mobile-menu-open{
overflow:hidden;
}

/*========================================
RESPONSIVE
========================================*/
@media(max-width:991px){

.header__menu{
display:none;
}

.header__phone{
display:none;
}

.header__button{
display:none;
}

.mobile-menu-button{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.header__actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}

.mobile-menu{
width:320px;
max-width:88%;
}

}

@media(max-width:420px){

.mobile-menu{
width:290px;
}

.mobile-menu__top{
padding:18px 20px;
}

.mobile-menu__top img{
height:52px;
}

.mobile-menu ul{
padding:12px 20px;
}

.mobile-menu ul li a{
padding:15px 16px;
font-size:16px;
}

.mobile-menu__bottom{
padding:18px 20px 22px;
}

.mobile-phone,
.mobile-button{
height:52px;
font-size:15px;
}

}

@media(min-width:992px){

.mobile-menu,
.mobile-menu-overlay{
display:none!important;
}

.mobile-menu-button{
display:none!important;
}

}