/* Resetando margens, bordas e padding */
body {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
    box-sizing: border-box; /* Para garantir que padding e bordas não afetem o tamanho */
}

/* Estilos da navegação */
.Navegacao {
    background-color: #7729F5;
    width: 100%;
    height: 55px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center; /* Centraliza o conteúdo */
    align-items: center;
    padding: 0%;
}

/* Menu de navegação */
.menu-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 0 20px; /* Adicionando um padding lateral */
}

/* Container dos itens de menu */
.conj-menu-nav {
    list-style: none;
    display: flex;
    gap: 20px; /* Aumentando o espaço entre os itens */
}

/* Estilos dos itens do menu */
.itens-menu-nav a {
    color: rgb(0, 0, 0);
    font-size: 18px; /* Aumentando o tamanho da fonte */
    text-decoration: none;
    transition: all 0.3s ease; /* Suaviza a transição */
}

/* Efeito ao passar o mouse */
.itens-menu-nav a:hover {
    font-size: 22px; /* Aumenta o tamanho da fonte no hover */
    color: wheat; /* Alteração na cor */
    transform: scale(1.1); /* Leve aumento de tamanho ao passar o mouse */
}

/* Media Queries para Responsividade */

/* Telas pequenas (celulares - até 767px) */
@media (max-width: 767px) {
    .Navegacao {
        height: 50px; /* Reduz a altura da barra de navegação */
    }

    .menu-nav {
        justify-content: center; /* Centraliza o menu em telas pequenas */
        padding: 0 10px; /* Reduz o padding lateral */
    }

    .conj-menu-nav {
        gap: 10px; /* Reduz o espaço entre os itens */
    }

    .itens-menu-nav a {
        font-size: 16px; /* Reduz o tamanho da fonte */
    }

    .itens-menu-nav a:hover {
        font-size: 18px; /* Ajusta o tamanho da fonte no hover */
    }
}

/* Telas médias (tablets - 768px a 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .Navegacao {
        height: 60px; /* Ajusta a altura da barra de navegação */
    }

    .menu-nav {
        justify-content: flex-end; /* Alinha o menu à direita */
        padding: 0 15px; /* Ajusta o padding lateral */
    }

    .conj-menu-nav {
        gap: 15px; /* Ajusta o espaço entre os itens */
    }

    .itens-menu-nav a {
        font-size: 17px; /* Ajusta o tamanho da fonte */
    }

    .itens-menu-nav a:hover {
        font-size: 20px; /* Ajusta o tamanho da fonte no hover */
    }
}

/* Telas grandes (desktops - a partir de 1024px) */
@media (min-width: 1024px) {
    .Navegacao {
        height: 70px; /* Aumenta a altura da barra de navegação */
    }

    .menu-nav {
        justify-content: flex-end; /* Alinha o menu à direita */
        padding: 0 20px; /* Mantém o padding lateral */
    }

    .conj-menu-nav {
        gap: 20px; /* Mantém o espaço entre os itens */
    }

    .itens-menu-nav a {
        font-size: 18px; /* Mantém o tamanho da fonte */
    }

    .itens-menu-nav a:hover {
        font-size: 22px; /* Mantém o tamanho da fonte no hover */
    }
}