/* DESKTOP */

nav{

    display:flex;

    align-items:center;

    justify-self:center;

    gap:20px;

}

nav a{

    position:relative;

    display:inline-block;

    text-decoration:none;

    color:#8E7A6D;

    white-space:nowrap;

    padding-bottom:6px;

    transition:.3s;

}

nav a:hover{

    color:#C89B7B;

}

nav a.active{

    color:#D7A37D;

    font-weight:500;

}

nav a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    height:2px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        rgba(215,163,125,.15) 0%,
        rgba(215,163,125,1) 15%,
        rgba(215,163,125,1) 85%,
        rgba(215,163,125,.15) 100%
    );

}


/* MOBILE + TABLET */

@media(max-width:1000px){

    nav{

        position:absolute;

        top:100%;
        left:0;

        z-index:10000;

        width:100%;

        margin-top:50px;

        background:#fff;

        flex-direction:column;

        align-items:stretch;

        gap:18px;

        padding:25px;

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

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:translateY(-15px);

        transition:
            opacity .35s ease,
            transform .35s ease,
            visibility .35s ease;

    }

    #menu-toggle:checked ~ nav{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:translateY(0);

    }

    nav a{

        width:100%;

        padding:14px 18px;

        border-radius:12px;

    }

    nav a:hover{

        color:#C89B7B;

    }

    nav a.active{

        color:#D7A37D;

        border-left:3px solid #D7A37D;

        background:linear-gradient(
            90deg,
            rgba(215,163,125,.16) 0%,
            rgba(215,163,125,.10) 40%,
            rgba(215,163,125,.04) 75%,
            rgba(248,241,236,0) 100%
        );

    }

    nav a.active::after{

        display:none;

    }

}