:root {
    /* Color */
    --white-color: rgb(255,255,255);
    --dark-color: rgb(0,0,0);
    --pri-color: rgb(249, 206, 7);
    --sec-color: rgb(252, 16, 104);
    --ter-color: #1f0441;
    --qua-color: #fcab10;
    --qui-color: #0ce3e8;

    /* font */
    --font-size-s: .45rem;
    --font-size-n: .9rem;
    --font-size-m: 1.12rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.3rem;

    /* font-weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /*border radius */
    --border-radius-s: 8px;
    --border-radius-m: 30px;
    --border-radius-circle: 50%;

    /* site max */
    --site-max-width: 100%;
}

@font-face {
    font-family: 'False';
    src: url(../font/False.ttf);
}

header {
    background-color: transparent;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

header .navbar {
    position: fixed;
    top: 0;  
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* --dark-color com transparência */
    backdrop-filter: blur(5px);             /* Adiciona efeito desfocado */
    -webkit-backdrop-filter: blur(5px);            
}

.menu img {
    margin-right: 30px;
    width: 50px;
    height: 50px;
}

.navbar .nav-menu {
    display: flex;
    gap: 10px;
}

.second-bar {
    padding: 0 20px;
}

.navbar .second-bar {
    position: fixed;            /* Trava a navbar no topo */
    top: 0;                     /* Alinha ao topo da página */
    display: flex;              /* Flex para alinhar logo e menu */
    justify-content: space-between;
    align-items: center;        /* Centraliza verticalmente */
    background-color: black;  /* Cor de fundo para visibilidade */
    z-index: 1000;
}

.navbar .nav-logo .logo-text {
    font-family: 'False';
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    font-style: normal;
    color: var(--white-color);
}

.nav-logo {
    display: flex;              /* Alinha os itens horizontalmente */
    align-items: center;       
    text-decoration: none;      /* Remove sublinhado do link */
    /* margin: 10px; */
}

.navbar .nav-menu{
    margin-right: 25px;
    justify-content: flex-end;
}

.navbar .nav-menu .nav-link {
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    padding: 10px;
    color: var(--white-color);
    font-size: var(--font-size-m);
    border-radius: var(--border-radius-m);
    transition: 0.3s ease;
}

.navbar .nav-menu .nav-link:hover {
    color: var(--dark-color);
    background-color: var(--white-color);
}

.nav-logo img {
    height: 35px;               
    width: auto;                /* Mantém proporção */
    margin-right: 10px;         
}

/* Celular */
@media (max-width: 1100px) and (orientation: portrait) {    
    .navbar {
        display: flex;
        flex-direction: column;
    }

    .navbar.second-bar {
        width: 100%;              /* Garante largura total */
        padding: 10px;
    }
  
    .navbar .nav-menu {
        gap: 5px;                 /* Reduz espaçamento entre links */
        justify-content: flex-end;
        flex-wrap: wrap;          /* Permite quebra */
        padding: 10px;
    }
  
    .navbar .nav-menu .nav-link {
        padding: 15px;       
        margin: 20px;
        align-items: center;
        font-size: var(--font-size-xxl); /* Ajusta tamanho da fonte */
    }

    .nav-menu {
        align-items: center;
        justify-content: center;
    }
  
    .nav-logo img {
        display: none;
    }
  
    .navbar .nav-logo .logo-text {
        padding: 10px 0 0 0;
        font-size: 4rem;
        margin: auto 0;
    }
}

@media (max-width: 1100px) and (orientation: landscape) {
    .nav-logo img {
        display: none;
    }

    .navbar .nav-logo .logo-text {
        padding: 10px;
        font-size: 2rem;
        margin: auto 0;
    }

    .navbar .nav-menu .nav-link {
        align-items: center;
        font-size: 1rem;
    }

    .navbar .second-bar {
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10px;
    }
}