#menu-nav {
    position: fixed;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
    z-index: 99;
    background-color: var(--white);

    .content .links li {
        a {
            font-size: 15px;
            font-weight: 400;
            padding: .5rem .9rem;
            transition: all .2s;
            border-radius: 6px;
            display: block;

            &:not(.btn-cta):hover {
                background-color: rgba(0, 0, 0, .1);
            }
        }

        &:last-child { 
            padding-left: .5rem; 
            
            a { font-weight: 500; }
        }
    }
}

#btn-wpp-float {
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99;
    
    .icon {
        border-radius: 50%;
        padding: 1rem;
        background-color: var(--clr-whatsapp);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 5px 3px rgba(0, 0, 0, .1);
        animation: grow 2.5s infinite;

        svg {
            width: 32px;
            height: 32px;
            display: flex;
            fill: var(--white);
        }
    }
}

@keyframes grow {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@media (max-width: 1024px) {
    #menu-nav .content {
        .logo {
            img { width: 64px; }
            .text { font-size: 20px; }
        }

        .menu-trigger { display: flex; }

        .links {
            position: absolute;
            left: 0;
            top: 67px;
            width: 100%;
            backdrop-filter: blur(4px);
            background-color: rgba(255, 255, 255, .8);
            border-radius: 0 0 16px 16px;
            flex-direction: column;
            align-items: center;
            gap: .4rem;
            padding: 1rem;
            transform: rotateX(90deg);
            transform-origin: top;
            transition: all .3s;

            li {
                width: 100%;
                display: flex;
                justify-content: center;   

                a {
                    width: 100%;
                    text-align: center;
                }
            }

            &.active { transform: rotateX(0); }
        }
    }
}