/* CSS (style.css) */

/* Estilos gerais para os botões de navegação do Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.5rem !important;
}

/* Cor e estilo dos botões de navegação */
.swiper-button-next,
.swiper-button-prev {
    color: #0d9488; 
    transition: all 0.3s;
    padding: 1.5rem; 
    background-color: rgba(255, 255, 255, 0.7); 
    border-radius: 50%;
    width: 3rem !important;
    height: 3rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #0f766e; 
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* Posicionamento dos botões para fora do slider em telas maiores */
@media (min-width: 768px) {
    .project-button-prev {
        left: -1.5rem;
    }
    .project-button-next {
        right: -1.5rem;
    }
}


/* Paginação */
.swiper-pagination-bullet-active {
    background: #14b8a6;
}

/* Sombra no Header ao rolar */
#header.scrolled {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
}

/* Rotação do ícone de chevron no FAQ */
.faq-question .feather-chevron-down.rotate-180 {
    transform: rotate(180deg);
}

/* Estilos para o Modal (Lightbox) */
.modal-open {
    overflow: hidden;
}

#image-modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#image-modal.show {
    opacity: 1;
    visibility: visible;
}

/* Animação das Estrelas */
.review-stars .feather-star {
    transform: scale(0); 
}

.review-stars.animate .feather-star {
    /* Animação de preenchimento */
    animation: fill-star 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes fill-star {
    from {
        transform: scale(0);
        color: #d1d5db; 
    }
    to {
        transform: scale(1);
        color: #facc15; 
    }
}

/* Animação de "pop" para a última estrela */
.review-stars.animate .feather-star.pop {
    
    animation: fill-star 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards,
               pop-effect 0.5s 0.5s forwards; 
}

@keyframes pop-effect {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
}