/* Slider para Desktop */
.slideshowContainer {
    position: relative;
    overflow: hidden;
    margin: 0px 0 25px;
    width: 100%;
    height: 250px; /* Reduzido de 500px para 250px (50% do tamanho original) */
    display: block; /* Garante visibilidade no desktop */
}

.imageSlides {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

/* Ajuste para telas com largura superior a 1024px */
@media (min-width: 1025px) {
    .imageSlides {
        max-width: 1680px; /* Limita a largura das imagens para alinhar com o header-content */
    }
}

/* Classe adicionada via JavaScript para mostrar a imagem atual */
.visible {
    opacity: 1;
}

.slideshowArrow {
    font-size: 3.5em; /* Reduzido de 7em para 3.5em (50% do tamanho original) */
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    z-index: 2;
}

.slideshowArrow:hover {
    opacity: 0.75;
}

#leftArrow {
    position: absolute;
    left: 4%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#rightArrow {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translate(50%, -50%);
}

.slideshowCircles {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.circle {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    width: 7.5px; /* Reduzido de 15px para 7.5px (50% do tamanho original) */
    height: 7.5px; /* Reduzido de 15px para 7.5px (50% do tamanho original) */
    border-radius: 50%;
    border: solid 2px rgba(255, 255, 255, 0.5);
    transition: 1s ease-in-out;
}

.dot {
    background-color: rgba(255, 255, 255, 0.7);
    border: solid 2px rgba(255, 255, 255, 0.5);
}


@media (max-width: 768px) {
    .slideshowContainer {
        display: block;
        margin: 1px 0 40px;
        height: 80px; /* Ajustado para mobile (50% de 300px) */
    }

.imageSlides {
        width: auto; /* Permite que a imagem use sua largura natural */
        height: auto; /* Permite que a imagem use sua altura natural */
        max-width: 100%; /* Garante que a imagem não ultrapasse o contêiner */
        max-height: 100%; /* Garante que a imagem caiba no contêiner */
        object-fit: contain; /* Mostra a imagem inteira, sem corte */
    }

    .slideshowArrow {
        font-size: 2em; /* Ajustado para mobile (50% de 4em) */
    }

    #leftArrow {
        left: 2%;
    }

    #rightArrow {
        right: 2%;
    }

    .circle {
        width: 5px; /* Ajustado para mobile (50% de 10px) */
        height: 5px;
    }
}