/* Estilo geral do corpo */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
}

/* Cor de fundo do navbar (header) - Pantone 142C (RGB: 235, 184, 85) */
#main-navbar {
    background-color: rgb(235, 184, 85) !important; /* Pantone 142C */
}

/* Logotipo - Ajuste do tamanho */
#logo {
    width: 13vw !important; /* Ajustado para 13% da largura da tela */
    height: auto !important; /* Mantém a proporção da imagem */
    margin-right: 15px !important; /* Aumenta o espaço à direita do logotipo */
}

/* Título do site */
#moviestar-title {
    color: rgb(35, 62, 91) !important; /* Pantone 534C (RGB: 35, 62, 91) */
}

/* Links do Menu */
.nav-link {
    color: rgb(35, 62, 91) !important; /* Pantone 534C (RGB: 35, 62, 91) */
    padding: 12px 20px !important; /* Aumenta o padding para evitar toques acidentais */
}

/* Efeito hover nos links */
.nav-link:hover {
    background-color: rgb(35, 62, 91) !important; /* Pantone 77-3-9C (RGB: 97, 156, 79) */
    color: white !important; /* Muda a cor do texto para branco no hover */
}

/* Estilização do logout */
.logout-link {
    color: rgb(35, 62, 91) !important; /* Pantone 77-3-9C (RGB: 97, 156, 79) */
}

/* Hover do logout */
.logout-link:hover {
    background-color: rgb(35, 62, 91) !important; /* Pantone 77-3-9C (RGB: 97, 156, 79) */
    color: white !important; /* Muda a cor do texto para branco no hover */
}

/* Estilos para os itens do menu dropdown */
.dropdown-menu .dropdown-item {
    color: rgb(35, 62, 91) !important; /* Pantone 534C (RGB: 35, 62, 91) */
    padding: 12px 20px !important; /* Aumenta o padding nos itens do dropdown */
}

/* Efeito hover nos itens do dropdown */
.dropdown-menu .dropdown-item:hover {
    background-color: rgb(35, 62, 91) !important; /* Pantone 77-3-9C (RGB: 97, 156, 79) */
    color: white !important; /* Muda a cor do texto para branco no hover */
}

/* Cor do fundo do dropdown */
.dropdown-menu {
    background-color: rgb(235, 184, 85) !important; /* Pantone 142C (RGB: 235, 184, 85) */
}


/* Ajuste de espaçamento para evitar toques acidentais */
.nav-item {
    padding: 10px 0 !important; /* Adiciona um pouco de espaçamento ao redor de cada item */
}

/* Ajuste do logotipo para dispositivos móveis */
#logo {
    width: 13vw !important; /* Valor para desktop e dispositivos maiores */
    height: auto !important; /* Mantém a proporção */
    margin-right: 15px !important;
}

/* Ajuste do logotipo para tablets (telas médias) */
@media (max-width: 1024px) {
    #logo {
        width: 18vw !important; /* Aumenta o tamanho para tablets */
    }
}

/* Ajuste do logotipo para telas pequenas (celulares) */
@media (max-width: 768px) {
    #logo {
        width: 25vw !important; /* Aumenta o tamanho para celular */
    }
}

/* Ajuste do logotipo para telas extra pequenas (celulares muito pequenos) */
@media (max-width: 480px) {
    #logo {
        width: 30vw !important; /* Aumenta ainda mais o tamanho em telas muito pequenas */
    }
}

/* Mensagens de sistema */
.msg-container {
    background-color: #f4f9f433 !important; /* Fundo mais suave para as mensagens */
    padding: 10px;
    border-radius: 5px;
}

/* Mensagens de sucesso */
.msg.success {
    color: #4CAF50 !important; /* Cor para sucesso */
}

/* Mensagens de erro */
.msg.error {
    color: #F44336 !important; /* Cor para erro */
}

/* Ajustes para os botões */
.flexBtn-Itens {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flexBtn-Itens:hover {
    transform: scale(1.05);
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.15);
}

.flexBtn-Itens a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #333;
    text-align: center;
}

.flexBtn-Itens i {
    font-size: 2rem;
    color: rgb(97, 156, 79);
    margin-bottom: 10px;
}

.flexBtn-Itens p {
    color: rgb(35, 62, 91);
    font-size: 1.1rem;
}

/* Responsividade para os botões */
@media (max-width: 1024px) {
    .flexBtn-Itens {
        padding: 15px;
    }

    .flexBtn-Itens p {
        font-size: 1rem;
    }

    .flexBtn-Itens i {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .flexBtn-Itens {
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .flexBtn-Itens {
        margin-bottom: 10px;
    }
}

/* Layout da página principal (Home Content) */
/* Layout geral */
.homeContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Estilo dos botões flexíveis */
.flexBtn-Itens {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    width: 100%;
}

.flexBtn-Itens:hover {
    transform: scale(1.05);
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.15);
}

.flexBtn-Itens a {
    display: block;
    text-decoration: none;
    color: #333;
    text-align: center;
}

.flexBtn-Itens i {
    font-size: 3rem;
    color: rgb(97, 156, 79);
    margin-bottom: 10px;
}

.flexBtn-Itens p {
    color: rgb(35, 62, 91);
    font-size: 1.1rem;
}

/* Responsividade */
@media (max-width: 1024px) {
    .flexBtn-Itens {
        width: 48%; /* Dois itens por linha */
    }
}

@media (max-width: 768px) {
    .flexBtn-Itens {
        width: 100%; /* Um item por linha em telas pequenas */
    }

    .flexBtn-Itens p {
        font-size: 1rem;
    }

    .flexBtn-Itens i {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .flexBtn-Itens {
        width: 100%;
    }

    .flexBtn-Itens i {
        font-size: 2rem;
    }

    .flexBtn-Itens p {
        font-size: 0.9rem;
    }
}