/* ======================================================
   NAVBAR V2
   Produzza Landing
====================================================== */

.pz-navbar{

    position:fixed;
    top:24px;
    left:0;

    width:100%;
    height:var(--pz-navbar-height);

    z-index:var(--pz-z-navbar);

    background:transparent;

    transition:
        top .35s ease,
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease;

}

/* ======================================================
   BORDER EFFECT
====================================================== */

.pz-navbar::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    transform:translateX(-50%);

    width:92%;
    height:1px;

    opacity:0;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

    transition:opacity .35s ease;

}

/* ======================================================
   SCROLLED
====================================================== */

.pz-navbar.is-scrolled{

    top:0;

    height:72px;

    background:rgba(17,19,21,.74);

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

    box-shadow:

        0 16px 50px rgba(0,0,0,.18);

}

.pz-navbar.is-scrolled::after{

    opacity:1;

}

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

.pz-navbar .pz-container{

    width:min(calc(100% - 80px),1400px);

    margin:auto;

}

/* ======================================================
   CONTENT
====================================================== */

.pz-navbar-content{

    height:var(--pz-navbar-height);

    display:grid;

    grid-template-columns:220px 1fr 240px;

    align-items:center;

    transition:height .35s ease;

}

.pz-navbar.is-scrolled .pz-navbar-content{

    height:72px;

}

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

.pz-navbar-logo{

    display:flex;

    align-items:center;

}

.pz-navbar-logo img{

    height:56px;

    width:auto;

    transition:height .35s ease,
               transform .35s ease;

}

.pz-navbar.is-scrolled .pz-navbar-logo img{

    height:52px;

}

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

.pz-navbar-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:54px;

    list-style:none;

    margin:0;
    padding:0;

}

.pz-navbar-menu a{

    position:relative;

    color:var(--pz-white);

    font-size:16px;

    font-weight:700;

    letter-spacing:.01em;

    text-decoration:none;

    transition:

        color .30s ease;

}

.pz-navbar-menu a:hover{

    color:var(--pz-primary);

}

.pz-navbar-menu a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    transform:translateX(-50%);

    width:0;

    height:3px;

    border-radius:999px;

    background:var(--pz-primary);

    transition:width .30s ease;

}

.pz-navbar-menu a:hover::after{

    width:100%;

}

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

.pz-navbar .pz-btn{

    justify-self:end;

    padding:15px 28px;

    font-size:15px;

    font-weight:700;

    border-radius:999px;

    background:var(--pz-gradient-primary);

    box-shadow:

        0 16px 36px rgba(255,122,26,.18);

    transition:

        transform .30s ease,

        box-shadow .30s ease;

}

.pz-navbar .pz-btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 22px 46px rgba(255,122,26,.26);

}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:992px){

    .pz-navbar{

        top:0;

    }

    .pz-navbar .pz-container{

        width:calc(100% - 48px);

    }

    .pz-navbar-content{

        grid-template-columns:1fr auto;

    }

    .pz-navbar-menu{

        display:none;

    }

    .pz-navbar .pz-btn{

        display:none;

    }

}

@media(max-width:768px){

    .pz-navbar .pz-container{

        width:calc(100% - 32px);

    }

    .pz-navbar-logo img{

        height:50px;

    }

    .pz-navbar.is-scrolled .pz-navbar-logo img{

        height:46px;

    }

}