/* ==========================================================
   LEGACY FITNESS ZONE
   NAVBAR STYLE
========================================================== */



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


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:0.4s ease;

}





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


.navbar{


    width:90%;

    max-width:1200px;

    height:90px;


    margin:auto;


    display:flex;

    align-items:center;

    justify-content:space-between;


    transition:0.4s ease;


}







/* =========================
   NAVBAR SCROLL STATE
========================= */


header.scrolled{


    background:

    rgba(5,5,5,0.92);


    backdrop-filter:blur(15px);


    box-shadow:

    0 10px 30px rgba(0,0,0,0.4);


}








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


.logo{


    display:flex;

    align-items:center;

    gap:15px;


}



.logo img{


    width:65px;

    height:65px;


    object-fit:contain;


}







.logo .badge{


    padding:6px 12px;


    border-radius:20px;


    background:#ff3c00;


    color:white;


    font-size:11px;


    font-weight:700;


    letter-spacing:1px;


}








/* =========================
   NAV LINKS
========================= */


.nav-links{


    display:flex;


    align-items:center;


    gap:40px;


}



.nav-links a{


    position:relative;


    color:white;


    font-size:15px;


    font-weight:500;


    transition:0.3s ease;


}





.nav-links a::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-8px;


    width:0;


    height:2px;


    background:#ff3c00;


    transition:0.3s ease;


}





.nav-links a:hover{


    color:#ff3c00;


}




.nav-links a:hover::after{


    width:100%;


}








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


.nav-actions{


    display:flex;


    align-items:center;


    gap:20px;


}







.join-btn{


    padding:12px 28px;


    background:#ff3c00;


    border-radius:50px;


    color:white;


    font-size:14px;


    font-weight:600;


    transition:0.3s ease;


}





.join-btn:hover{


    transform:translateY(-4px);


    box-shadow:

    0 10px 25px rgba(255,60,0,0.4);


}








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


.menu-toggle{


    display:none;


    width:45px;


    height:45px;


    border-radius:50%;


    background:#ff3c00;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:5px;


}






.menu-toggle span{


    width:22px;


    height:2px;


    background:white;


    transition:0.3s ease;


}







/* =========================
   ACTIVE MENU ANIMATION
========================= */


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


    transform:

    translateY(7px)

    rotate(45deg);


}




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


    opacity:0;


}





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


    transform:

    translateY(-7px)

    rotate(-45deg);


}








/* =========================
   TABLET
========================= */


@media(max-width:900px){



.navbar{


    height:80px;


}





.nav-links{


    position:absolute;


    top:80px;


    left:0;


    width:100%;


    background:#080808;


    flex-direction:column;


    gap:25px;


    padding:40px 0;


    transform:translateY(-150%);


    opacity:0;


    pointer-events:none;


    transition:0.4s ease;


}







.nav-links.active{


    transform:translateY(0);


    opacity:1;


    pointer-events:auto;


}







.menu-toggle{


    display:flex;


}





.join-btn{


    display:none;


}


}







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


@media(max-width:480px){


.logo img{


    width:50px;


    height:50px;


}




.logo .badge{


    display:none;


}





.navbar{


    width:92%;


}


}