/* =========================================
   AKI FEST NAVBAR
========================================= */


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


.navbar {


    position:fixed;


    top:25px;


    left:50%;


    transform:translateX(-50%);


    width:90%;


    max-width:1200px;


    padding:15px 30px;


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


    backdrop-filter:blur(15px);


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


    border-radius:40px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    z-index:1000;


    box-shadow:


    0 10px 30px rgba(255,140,183,.15);


}







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


.logo {


    display:flex;


    align-items:center;


    gap:10px;


    color:#ff75a8;


    font-size:28px;


    font-weight:800;


    text-decoration:none;


}



.logo img {


    width:35px;


    height:auto;


}







/* =========================
   DESKTOP LINKS
========================= */


.nav-links {


    display:flex;


    align-items:center;


    gap:30px;


}



.nav-links a {


    text-decoration:none;


    color:#704b5b;


    font-weight:700;


    transition:.3s ease;


}



.nav-links a:hover {


    color:#ff75a8;


}







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


.menu-button {


    display:none;


    border:none;


    background:none;


    color:#ff75a8;


    font-size:32px;


    cursor:pointer;


    padding:5px;


    z-index:1100;


}







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


@media(max-width:850px){


    .navbar {


        width:92%;


        top:20px;


        padding:15px 20px;


    }





    .logo {


        font-size:24px;


    }



    .logo img {


        width:30px;


    }



    .menu-button {


        display:block;


    }







    .nav-links {


        position:absolute;


        top:75px;


        left:0;


        width:100%;


        background:white;


        border-radius:30px;


        padding:30px 20px;


        display:flex;


        flex-direction:column;


        align-items:center;


        gap:20px;


        box-shadow:


        0 15px 40px rgba(255,120,180,.2);


        max-height:70vh;


        overflow-y:auto;


        overflow-x:hidden;



        opacity:0;


        visibility:hidden;


        pointer-events:none;


        transform:translateY(-20px);


        transition:.3s ease;


        z-index:1050;


    }







    .nav-links.active {


        opacity:1;


        visibility:visible;


        pointer-events:auto;


        transform:translateY(0);


    }







    .nav-links a {


        font-size:18px;


        padding:8px;


    }


}







/* =========================
   SMALL PHONES
========================= */


@media(max-width:400px){


    .navbar {


        width:94%;


        padding:12px 15px;


    }



    .logo {


        font-size:22px;


    }



    .menu-button {


        font-size:28px;


    }


}







/* =========================
   TOUCH FIX
========================= */


a,
button {


    -webkit-tap-highlight-color:transparent;


}



.menu-button {


    -webkit-touch-callout:none;


    user-select:none;


}







/* =========================
   IPHONE SAFETY
========================= */


@media(max-width:850px){


    .navbar {


        transform:translateX(-50%);


        overflow:visible;


    }



    .nav-links {


        -webkit-overflow-scrolling:touch;


    }


}