/* ==========================
   LOUDVISION DIGITAL NAVBAR
   ========================== */


.navbar {

    position: fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:rgba(8,8,8,.75);

    backdrop-filter:blur(15px);

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

}




.nav-container {


    max-width:2000px;

    margin:5px auto;

    padding:10px 8%;


    display:flex;

    align-items:center;

    justify-content:space-between;


}




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


.logo {


    font-size:20px;

    font-weight:500;

    letter-spacing:-.5px;

    color:white;


}



.logo span {

    color:#8c5cff;

}





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


.nav-links {


    display:flex;

    align-items:center;

    gap:40px;

    list-style:none;


}



.nav-links li {


    position:relative;


}



.nav-links a {


    color:#b5b5b5;

    font-size:15px;

    font-weight:500;

    transition:.3s ease;


}



.nav-links a:hover {


    color:white;


}





/* UNDERLINE */


.nav-links a::after {


    content:"";


    position:absolute;

    left:0;

    bottom:-8px;


    width:0;

    height:2px;


    background:white;


    transition:.3s ease;


}



.nav-links a:hover::after {


    width:100%;


}







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


.nav-button {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:13px 28px;


    background:#8c5cff;


    border-radius:10px;


    color:white;


    font-size:15px;


    font-weight:700;


    transition:.3s ease;


}



.nav-button:hover {


    transform:translateY(-2px);


    box-shadow:0 10px 30px rgba(255,255,255,.4);


}







/* ==========================
   HAMBURGER
   ========================== */


.hamburger {


    display:none;


    width:32px;

    height:25px;


    background:none;

    border:none;


    cursor:pointer;


    flex-direction:column;

    justify-content:space-between;


    z-index:2000;


}




.hamburger span {


    width:100%;


    height:3px;


    background:white;


    border-radius:5px;


    transition:.3s ease;


}








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


@media(max-width:900px){



    .nav-container {


        padding:18px 5%;


    }



    .logo {


        font-size:18px;

        margin:0;

        min-width:auto;


    }





    .hamburger {


        display:flex;


    }






    .nav-links {


        position:fixed;


        top:0;


        right:-100%;


        width:280px;


        height:100vh;



        background:rgba(8,8,8,.95);


        backdrop-filter:blur(20px);



        display:flex;


        flex-direction:column;


        justify-content:center;


        align-items:center;



        gap:35px;



        transition:.35s ease;


    }






    .nav-links.active {


        right:0;


    }






    .nav-links a {


        font-size:18px;


        color:white;


    }







    .nav-button {


        display:none;


    }





    /* ANIMAZIONE X */


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


        transform:rotate(45deg) translateY(11px);


    }




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


        opacity:0;


    }





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


        transform:rotate(-45deg) translateY(-11px);


    }



}