/* image-slider */
.image-slider {
    padding-top: 160px;
    margin: auto;
    position: relative;
    width: 100%; /* Ajustar para largura total */
    max-width: 800px;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* Garantir que as imagens ocupem toda a área disponível */
}

.slides img {
    width: 100%; /* Imagens ocupam 100% da largura do slider */
    height: auto; /* Mantém a proporção das imagens */
    flex-shrink: 0; /* Evita que as imagens encolham */
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 50%;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .image-slider {
        padding-top: 100px; /* Reduz o padding superior */
    }

    button {
        padding: 8px; /* Reduz o tamanho dos botões */
    }
}

@media (max-width: 480px) {
    .image-slider {
        padding-top: 80px;
    }

    button {
        padding: 6px; /* Botões menores */
    }
}



/* main */
main {
    color: #000;
    margin-top: 20px;
    padding: 30px;
    text-align: left;
}


 h2{
    color: #561780;
    font-size: 2em;
}


.descricao span{
    color: #A01A63;
 }


.descricao{
    margin-top: 20px;
    padding: 20px;
}
.descricao h2{
    text-align: left;
    margin-bottom: 10px;
}

.texto-animado {
    opacity: 0;
    transform: translateY(20px); /* Inicia deslocado */
    transition: opacity 1s ease, transform 1s ease; /* Animação suave */
}

.texto-visivel {
    opacity: 1;
    transform: translateY(0); /* Move para a posição original */
}








.cta .btn {
    padding: 10px 20px;
    margin: 10px;
    background: #561780;
    color: white;
    border-radius: 15px;
    text-decoration: none;
    display: inline-block; /* Garante que o botão respeita o fluxo */
    position: relative; /* Remove qualquer sobreposição */
    z-index: 1; /* Evita que o botão sobreponha outros elementos */
}

.cta {
    position: relative;
    margin-top: 40px; /* Adiciona espaço extra para evitar sobreposição */
}


.service-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* Permite que as cartas se reorganizem */
}

.service-card {
    flex: 1 1 calc(33.333% - 20px); /* Três cartas por linha com margem */
    max-width: calc(33.333% - 20px);
    border: 1px solid #ddd;
    padding: 20px;
    border: none;
    border-radius: 8px;
    background: #f9f9f9;
    text-align: left; /* Alinha o texto dentro das cartas */
}

@media (max-width: 768px) {
    .service-card {
        flex: 1 1 calc(50% - 20px); /* Duas cartas por linha */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .service-card {
        flex: 1 1 100%; /* Uma carta por linha */
        max-width: 100%;
    }
}