/* ==========================================
   HEADER
   header.css
========================================== */


/* ===== HEADER ===== */


header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

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

    backdrop-filter:blur(15px);

    box-shadow:0 5px 25px rgba(0,0,0,.05);

}



header .container{

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* ===== LOGO ===== */


.logo{

    display:flex;

    align-items:center;

    gap:15px;

}



.logo img{

    width:55px;

}



.logo h2{

    margin:0;

    font-size:24px;

    white-space:nowrap;

}



/* ===== MENU ===== */


nav ul{

    display:flex;

    align-items:center;

    gap:20px;

}



nav a{

    color:#333;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}



nav a:hover,
nav a.active{

    color:var(--blue);

}



/* ===== BURGER ===== */


.burger{

    display:none;

    width:40px;

    height:30px;

    position:relative;

    cursor:pointer;

    z-index:1100;

    padding:0;

    border:0;

    background:transparent;

}



.burger span{

    position:absolute;

    left:0;

    width:100%;

    height:4px;

    background:var(--blue);

    border-radius:10px;

    transition:.3s;

}



.burger span:nth-child(1){

    top:0;

}



.burger span:nth-child(2){

    top:13px;

}



.burger span:nth-child(3){

    top:26px;

}



.burger.active span:nth-child(1){

    transform:rotate(45deg);

    top:13px;

}



.burger.active span:nth-child(2){

    opacity:0;

}



.burger.active span:nth-child(3){

    transform:rotate(-45deg);

    top:13px;

}



/* ===== OVERLAY ===== */


.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:900;

}



.menu-overlay.show{

    opacity:1;

    visibility:visible;

}



body.menu-open{

    overflow:hidden;

}



/* ===== MOBILE MENU ===== */


@media(max-width:1280px){


.burger{

    display:block;

}


nav{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:var(--dark);

    padding-top:120px;

    transition:.4s;

    z-index:1000;

    box-shadow:-15px 0 40px rgba(0,0,0,.35);

}



nav.open{

    right:0;

}



nav ul{

    flex-direction:column;

    gap:25px;

    align-items:flex-start;

    padding:0 35px;

}



nav a{

    color:#fff;

    font-size:20px;

}



}



.header-btn{
    display:inline-block;
}


/* мобильная кнопка скрыта всегда */
.mobile-calc{
    display:none;
}