/* Nav bar */
    .logo{
        width: 30%;
    }

    .logo img{
        width: 200px;
        object-fit: cover;
    }
    
    nav ul {
        display: flex;
        list-style: none;
    }
    
    nav ul li {
        margin-left: var(--spacing-xs);
        margin-right: 30px;
    }
    
    nav ul li a {
        color: var(--text-primary);
        font-size: var(--font-size-sm);
        text-decoration: none;
        font-weight: var(--font-weight-medium);
        transition: color 0.3s;
    }
    
    nav ul li a:hover {
        border-bottom: 1px solid var(--color-primary);
    }
    
    .mobile-menu {
        display: none;
        font-size: var(--font-size-2xl);
        cursor: pointer;
        margin-right: 30px;
    }

/* Responsividade */        
    @media (max-width: 768px) {
        .logo{
            width: 100%;
        }

        .mobile-menu {
            display: block;
        }
        
        nav ul {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            padding: var(--spacing-lg);
        }
        
        nav ul.show {
            display: flex;
            background-color: var(--bg-footer);
        }
        
        nav ul li {
            margin: var(--spacing-xs) 0;
            position: relative;
        }

        nav ul li:hover {
            width: 100%;
            border-bottom: 1px solid var(--color-primary) ;
        }

        nav ul li a:hover {
            border-bottom: none;
        }
    }