/* Estilo para o contêiner de imagem com efeito de sobreposição */
.image-hover {
    width: 100%;
    height: 237px;
    /*height: 277px;*/
    overflow: hidden;
    position: relative;
}

.image-hover img {
    width: 100%;
    height: 237px;
    /*height: 277px;*/
    object-fit: cover;
    display: block;
}

/* Estilo para o contêiner da imagem central */
.image-center {
    height: 200px;
    /* Define a altura do contêiner da imagem */
    overflow: hidden;
    /* Garante que qualquer parte da imagem que ultrapasse o contêiner seja escondida */
    position: relative;
    /* Necessário para ajustar o posicionamento interno, se necessário */
}

.image-center img {
    width: 100%;
    height: 100%;
    /* Faz com que a altura da imagem se ajuste ao contêiner */
    object-fit: cover;
    /* Garante que a imagem cubra completamente o contêiner sem distorção */
}

/* Estilo para o contêiner de classificações */
.classificacoes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Espaço entre os itens */
}

.classificacao-item {
    display: flex;
    align-items: center;
}

/* Estilo para ícones */
.hicon-120 {
    font-size: 1.5rem;
    /* Ajuste o tamanho do ícone conforme necessário */
}

/* Adicione responsividade se necessário */
@media (max-width: 576px) {
    .classificacoes-container {
        justify-content: center;
        /* Centraliza os itens em telas menores */
    }

    .classificacao-item {
        margin: 5px;
        /* Ajusta a margem em telas menores se necessário */
    }
}

/* Estilos personalizados para botões */
.btn-custom {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0a3e59;
    --bs-btn-border-color: #0a3e59;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #11499e;
    --bs-btn-hover-border-color: #11499e;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #11499e;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0a3e59;
    --bs-btn-disabled-border-color: #f24405;
}

/* Estilos personalizados para texto */
.text-custon {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}


/* WhatsApp */
.app-fab {
    position: fixed;
    bottom: 0;
    z-index: 1000
}

.app-fab--left {
    left: 0
}

.app-fab--right {
    right: 0;
}

.app-fab__container {
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    padding: 10px
}

.app-fab__container--vertical {
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column
}

.app-fab__container--horizontal {
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row
}

.app-fab__item {
    width: 50px;
    margin: 5px;
    cursor: pointer
}

.app-fab__item .link {
    display: block
}

.app-fab__item .img {
    max-width: 100%
}



/* NAV LUA DE MEL*/

.lua-item {
  position: relative;
  font-size: 1.25rem;
  font-weight: 492;
  padding: 1.7rem 0;
  margin-right: -0.5rem;
}

.lua-link {
    padding: 10px 15px; /* Ajuste o padding conforme necessário */
    background-color: #f24405; /* Cor de fundo padrão */
    border-radius: 5px; /* Borda arredondada */
    transition: background-color 0.3s ease; /* Efeito de transição */
    color: white; /* Cor do texto padrão */
    text-decoration: none; /* Remove sublinhado */
}

.lua-item.active .lua-link {
    background-color: #f24405; /* Cor de fundo quando ativo */
    color: white; /* Cor do texto quando ativo */
}

.lua-link:hover {
    background-color: #ff581b; /* Cor de fundo ao passar o mouse */
    color: white; /* Cor do texto ao passar o mouse */
}