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

.header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

background:
rgba(2,10,28,0.94);

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

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

}

/* =========================
CONTAINER
========================= */

.container{

width:100%;

max-width:1280px;

margin:auto;

padding:0 34px;

}

/* =========================
NAVBAR
========================= */

.navbar{

height:78px;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}

/* =========================
LEFT
========================= */

.nav-left{

display:flex;

align-items:center;

gap:18px;

}

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

.logo-wrap{

display:flex;

align-items:center;

text-decoration:none;

flex-shrink:0;

}

.site-logo{

height:42px;

width:auto;

display:block;

object-fit:contain;

}

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

.nav-menu{

display:flex;

align-items:center;

gap:34px;

}

.nav-menu a{

position:relative;

font-size:14px;

font-weight:600;

color:#ffffff;

text-decoration:none;

transition:0.3s ease;

}

.nav-menu a:hover{

color:#1da1ff;

}

/* =========================
RIGHT
========================= */

.nav-right{

display:flex;

align-items:center;

gap:14px;

}

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

.nav-btn{

height:44px;

padding:0 22px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

text-decoration:none;

font-size:14px;

font-weight:700;

color:#fff;

background:
linear-gradient(
135deg,
#1da1ff,
#5f6fff
);

transition:0.35s ease;

}

.nav-btn:hover{

transform:translateY(-2px);

box-shadow:
0 10px 24px
rgba(29,161,255,0.28);

}

/* =========================
WHATSAPP
========================= */

.nav-icon{

display:none;

align-items:center;
justify-content:center;

width:42px;
height:42px;

border-radius:12px;

color:#fff;

text-decoration:none;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

transition:0.3s ease;

}

.nav-icon:hover{

transform:translateY(-2px);

background:
rgba(255,255,255,0.08);

}

/* =========================
TOGGLE
========================= */

.menu-toggle{

display:none;

position:relative;

width:42px;
height:42px;

border:none;
outline:none;

background:none;

cursor:pointer;

flex-shrink:0;

}

/* LINES */

.menu-toggle span{

position:absolute;

left:10px;

width:22px;
height:2px;

background:#fff;

border-radius:30px;

transition:0.3s ease;

}

/* TOP */

.menu-toggle span:nth-child(1){

top:14px;

}

/* MIDDLE */

.menu-toggle span:nth-child(2){

top:20px;

}

/* BOTTOM */

.menu-toggle span:nth-child(3){

top:26px;

}

/* ACTIVE */

.menu-toggle.active span:nth-child(1){

transform:rotate(45deg);

top:20px;

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:rotate(-45deg);

top:20px;

}