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

header{

    position: sticky;
    top: 0;
    z-index: 1000;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

}

.navbar{

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo{

    text-decoration: none;

    font-size: 30px;

    font-weight: 800;

    color: #111827;

}

.logo span{

    color: #22c55e;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:20px;

}

.nav-links a{

    text-decoration:none;

    color:#374151;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.nav-links a:hover{

    color:#22c55e;

}

/* BOTÃO LOGIN */

.login-btn{

    background:#22c55e;

    color:#fff !important;

    padding:12px 26px;

    border-radius:999px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

    box-shadow:0 8px 20px rgba(34,197,94,.25);

}

.login-btn:hover{

    background:#16a34a;

    transform:translateY(-2px);

}

/* MENU MOBILE */

.menu-toggle{

    width:45px;

    height:45px;

    border:none;

    background:none;

    display:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:26px;

    height:3px;

    background:#111827;

    margin:5px auto;

    border-radius:10px;

}

/* RESPONSIVO */

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

@media(max-width:768px){

    .menu-toggle{

        display:flex;

        width:45px;
        height:45px;

        border:none;
        background:none;

        flex-direction:column;
        justify-content:center;
        align-items:center;

        cursor:pointer;

        z-index:1001;

    }


    .menu-toggle span{

        display:block;

        width:26px;

        height:3px;

        background:#111827;

        margin:4px 0;

        border-radius:10px;

    }


    .nav-links{

        position:fixed;

        top:0;

        right:-320px;

        width:320px;

        height:100vh;

        background:#fff;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        padding:30px;

        padding-top:90px;

        gap:15px;

        transition:.35s ease;

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

        z-index:1000;

    }


    .nav-links.active{

        right:0;

    }


    .menu-header{

        position:absolute;

        top:30px;

        left:30px;

    }


    .menu-logo{

        font-size:24px;

        font-weight:800;

        color:#111827;

    }


    .menu-logo span{

        color:#22c55e;

    }


    .nav-links a{

        width:100%;

        padding:14px;

        border-radius:12px;

    }


    .login-btn{

        text-align:center;

    }

}