/* Ajustando o bxslider */
.bxslider {
    position: relative;
    width: 100%;
}

/* Ajuste do li (slide) para ocupar 100% da largura e altura automática */
.bxslider li {
    width: 100%;  /* Cada slide ocupa 100% da largura do container */
    height: auto; /* A altura é ajustada proporcionalmente */
    display: block;
}

/* Ajustando a imagem dentro do slide para ocupar 100% da largura, mantendo a altura proporcional */
.bxslider img {
    width: 100%;
    height: auto; /* Mantém a altura proporcional */
    object-fit: cover; /* Preenche o contêiner sem distorcer */
    display: block;
}

/* Personalização do pager */
.bx-wrapper .bx-pager {
    display: flex;
    justify-content: center;  /* Centraliza os bullets */
    align-items: center;
    gap: 10px;
/*     margin-top: 10px; */
    z-index: 99999;
    position: absolute;
    margin-bottom: 50px;
    width: 100%;
}

/* Personalizando o estilo do bullet (retângulos) */
.bx-wrapper .bx-pager-item a {
    display: block;
    width: 60px;  /* Largura do retângulo */
    height: 8px;   /* Altura do retângulo */
    background-color: rgba(255, 255, 255, 0.5);  /* Cor do bullet padrão */
    border-radius: 0px;  /* Formato retangular */
    transition: background-color 0.3s ease, width 0.3s ease;
    text-indent: -9999px; /* Esconde os números 1, 2, 3 */
}

/* Estilo de hover (quando o mouse passa sobre o bullet) */
.bx-wrapper .bx-pager-item a:hover {
    background-color: rgba(255, 255, 255, 1);  /* Aumenta a visibilidade ao passar o mouse */
}

/* Bullet ativo (aparece maior quando o slide está ativo) */
.bx-wrapper .bx-pager-item.active a {
    background-color: rgba(255, 255, 255, 1);  /* Cor do bullet ativo */
    width: 80px;  /* Largura maior para o bullet ativo */
}

/* Remover Prev / Next */
.bx-wrapper .bx-controls-direction {
    display: none !important; /* Esconde os botões de navegação */
}

/* Remover Start / Stop */
.bx-wrapper .bx-controls-auto {
    display: none !important;  /* Esconde os botões de "Start" e "Stop" */
}

/* Remover borda e sombra da bx-wrapper */
.bx-wrapper {
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remover o texto de numeração 1, 2, 3... na paginação */
.bx-wrapper .bx-pager-item a {
    text-indent: -9999px; /* Esconde o texto de numeração */
}