.reservar-mesa-btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #ff6f61; /* Cor de fundo destacada */
    border: 2px solid #ff6f61; /* Cor da borda */
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease; /* Efeito de transição suave */
}

.reservar-mesa-btn:hover {
    background-color: #fff;
    color: #ff6f61; /* Muda a cor do texto */
    border-color: #ff6f61; /* Muda a cor da borda */
    transform: translateY(-2px); /* Dá um pequeno efeito de elevação */
}

.reservar-mesa-btn:active {
    transform: translateY(0); /* Volta à posição normal ao clicar */
}


/* Container do botão */
.form-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    margin-top: 20px;        /* Espaço acima */
}

.lounge-card-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}


/* Estilo geral para os cards das mesas */
.lounge-card {
    background-color: #f8f9fa; /* Cor de fundo suave */
    border-radius: 8px;        /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    padding: 20px;
    display: flex;
    flex-direction: column; /* Faz o conteúdo ficar em coluna */
    justify-content: space-between; /* Espaçamento entre os itens */
    height: 100%; /* Faz o card ter uma altura completa */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
    cursor: pointer; /* Cursor de mão para indicar interatividade */
    text-align: center; /* Centralizar o conteúdo */
}

.lounge-card:hover {
    transform: translateY(-5px); /* Eleva o card ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta a sombra para destaque */
}

.lounge-card p {
    color: #333; /* Cor do texto */
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.lounge-card .price-count {
    color: #007bff; /* Cor azul para o preço */
    font-size: 14px;
    margin-top: 10px;
}



.lounge-card .select-lounge:hover {
    background-color: #218838; /* Cor do botão ao passar o mouse */
}

.lounge-card .select-lounge:active {
    background-color: #1e7e34; /* Cor do botão quando pressionado */
}

.lounge-card .price-count p {
    font-size: 14px;
    margin-bottom: 0;
}

/* Efeito de foco no card */
.lounge-card:focus {
    outline: none;
    border: 2px solid #007bff; /* Borda azul ao focar */
}

/* Estilo para os títulos */
.lounge-card h6 {
    font-size: 18px;
    color: #007bff;
    font-weight: bold;
    margin-bottom: 10px;
}



   .client-logo-wrap {
        display: flex;
        overflow: hidden;
        align-items: center;
    }

    .client-logo-track {
        display: flex;
        animation: scroll 20s linear infinite;
    }

    .client-logo-item {
        flex: 0 0 auto; /* Evita que os itens encolham */
        margin-right: 30px;
    }

    .client-logo-item img {
        max-width: 150px; /* Defina a largura desejada do logo */
        height: auto;
        border: none; /* Remove qualquer borda */
    }
/* Efeito hover nas imagens */
.client-logo-item img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.client-logo-item img:hover {
  transform: scale(1.1); /* Aumenta a imagem */
  opacity: 0.8; /* Diminui a opacidade para efeito de destaque */
}
.carousel-item img {
  transition: opacity 0.5s ease-in-out;
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
  opacity: 1 !important; /* Garante que o item ativo sempre seja visível */
}

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    @media (max-width: 768px) {
        .client-logo-wrap {
            width: 200%; /* Ajusta a largura para permitir dois logotipos visíveis */
        }

        .client-logo-item {
            margin-right: 0; /* Remove a margem entre os itens */
        }

        .client-logo-item img {
            max-width: 50%; /* Ajusta a largura para ocupar metade da tela */
        }
    }


    .event-item {
    display: flex;
    flex-direction: column; /* Organiza os elementos verticalmente */
    height: 400px; /* Define uma altura fixa para o card */
    border: 1px solid #ddd; /* Apenas para visualização */
    border-radius: 5px; /* Borda arredondada */
    overflow: hidden; /* Garante que nada ultrapasse o limite do card */
}

.event-image {
    flex: 1; /* A imagem ocupa 50% da altura */
    width: 100%; /* Ocupa toda a largura */
    overflow: hidden; /* Corta conteúdo excedente */
}

.event-image img {
    width: 100%; /* Garante que a imagem preencha horizontalmente */
    height: 100%; /* Garante que a imagem preencha verticalmente */
    object-fit: cover; /* Ajusta a imagem sem distorcer */
}   



/* Estilo geral para a seção */
.event-details-section {
    background-color: #f9f9f9; /* Cor de fundo clara */
    border-radius: 10px;
    border: 1px solid #e0e0e0; /* Borda suave ao redor da caixa */
}

/* Estilo para o contêiner da seção */
.event-details-section .container {
    max-width: 1300px;
    margin: 0 auto;
}

/* Estilo para a caixa de conteúdo */
.event-details-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Estilo para o título do evento */


/* Estilo para os badges de disponibilidade de ingressos */
.event-details-top .badge-info {
    background-color: #22B06D; /* Cor principal */
    color: white;
    font-weight: 600;
    padding: 5px 15px;
    border-radius: 30px;
}

/* Estilo para os itens de informações (data, hora, etc.) */
.event-details-header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

.event-details-header ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.event-details-header ul li i {
    margin-right: 10px;
    color: #22B06D; /* Cor principal */
}

/* Estilo para as imagens do evento */
.event-details-image img {
    max-width: 100%;
    height: auto;

}



/* Efeito de hover nos botões de quantidade */
.quantity-input button:hover {
    background-color: #22B06D; /* Cor um pouco mais escura */
}



/* Hover effect nos botões de selecionar mesa */
.lounge-card button:hover {
    background-color: #138f96; /* Cor mais escura */
}

/* Estilo para a descrição do evento */
.summernote-content {
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
}

/* Estilo para o mapa do evento */
.map-container iframe {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Estilo para a seção de eventos relacionados */
.releted-event-header h3 {
    color: #333;
    margin-bottom: 20px;
}

.events-active .event-item {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.events-active .event-item:hover {
    transform: translateY(-5px);
}


/* Estilos gerais da box */

.tickets-container {
    padding: 40px;
    background: white;
    box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.1);
}

.tickets-container b {
    display: block;
    color: #030A15;
    font-weight: 500;
    margin-bottom: 5px;
}

.tickets-container .link {
    font-weight: 500;
    align-items: center;
    margin-bottom: 20px;
    display: inline-flex;
    color: var(--primary-color);
}

.tickets-container .link:hover {
    text-decoration: underline;
}

.tickets-container .link i {
    float: left;
    margin-right: 10px;
}

.tickets-container .price-count .quantity-input input,
.tickets-container .price-count .quantity-input button {
    width: 34px;
    height: 34px;
}

.tickets-container .price-count {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed #e1e1e1;
}

.tickets-container .price-count h6 {
    margin-bottom: 15px;
}

.tickets-container .price-count h6 del {
    margin-inline-start: 5px;
    color: var(--base-color);
    font-size: 14px;
}

  .ticket-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
/* Caixa que envolve toda a página */
.page-container {
    width: 98%; /* Define a largura da caixa */
        margin: 0 auto; /* Centraliza a caixa na tela */
    background-color: #fff; /* Fundo branco para a caixa */
    border-radius: 12px; /* Bordas arredondadas */
    padding: 30px; /* Espaçamento interno */
    overflow: hidden; /* Evita transbordar conteúdo */
}

/* Cabeçalho (opcional) */
.page-container header {
    text-align: center; /* Centraliza o texto */
    margin-bottom: 40px; /* Espaçamento inferior */
}

.page-container header h1 {
    font-size: 36px;
    color: #333;
}



.event-item {
    display: flex;
    flex-direction: column; /* Organiza os elementos verticalmente */
    height: 400px; /* Define uma altura fixa para o card */
    border: 1px solid #ddd; /* Apenas para visualização */
    border-radius: 5px; /* Borda arredondada */
}

.event-image {
    flex: 1; /* A imagem ocupa 50% da altura */
    width: 100%; /* Ocupa toda a largura */
    overflow: hidden; /* Corta conteúdo excedente */
}

.event-image img {
    width: 100%; /* Garante que a imagem preencha horizontalmente */
    height: 100%; /* Garante que a imagem preencha verticalmente */
    object-fit: cover; /* Ajusta a imagem sem distorcer */
}


/* Estilo geral para o botão Selecionar */
.select-lounge {
  background-color: var(--primary-color); /* Cor de fundo */
  color: white; /* Cor do texto */
  font-size: 12px; /* Tamanho pequeno do texto */
  padding: 5px 10px; /* Espaçamento interno */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease; /* Para transição suave */
  text-transform: uppercase;
  align-self: flex-end; /* Garante que o botão fique no final */
}

/* Posicionar o botão à direita dentro da div */
.lounge-card .price-count {
  display: flex;
  justify-content: space-between; /* Espaço entre o conteúdo */
  align-items: center; /* Alinha o conteúdo verticalmente */
  width: 100%; /* Garantir que o conteúdo ocupe todo o espaço disponível */
}

/* Mudança de cor no hover */
.select-lounge:hover {
     background: transparent;
    color: var(--primary-color);
}

.select-lounge {
  margin-left: 120px; /* Afasta o botão para a direita */
    display: inline-block; /* Garante que o botão mantenha o tamanho fixo */
}