/* Paleta de Cores Sugerida:
   Verde Principal: #28a745
   Cinza Escuro (Texto): #343a40
   Branco: #FFFFFF
   Fundo Claro: #f8f9fa
*/

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa; 
}

header {
    background-color: #28a745; 
    padding: 20px 0;
    border-radius: 8px;
    color: #FFFFFF;
}

header .nav-link {
    color: #FFFFFF;
    font-weight: bold;
}

.btn-primary, .btn-success {
    background-color: #28a745;
    border-color: #228b3a; 
}

.btn-primary:hover, .btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    border: none; 
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transform: translateY(-5px);
}

footer {
    background-color: #343a40; 
    color: #FFFFFF;
    padding: 30px 0;
    margin-top: 40px;
    border-radius: 8px;
}

footer a {
    color: #a9c5b2; 
    text-decoration: none;
}

footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Centralizando o texto dos cards de produto */
#produtos .card-body {
    text-align: center;
}

/* Melhorando a legibilidade das legendas do carrossel */
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.6); 
    border-radius: 10px; 
    padding: 1rem; 
}

/* ================================================== */
/* INÍCIO DA NOVA MODIFICAÇÃO                         */
/* ================================================== */

/* MELHORIA 3: Visibilidade das setas do carrossel */
.carousel-control-prev,
.carousel-control-next {
    width: 50px; /* Aumenta a largura da área clicável */
    height: 50px; /* Aumenta a altura da área clicável */
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%); /* Ajuste fino para o centro */
    background-color: rgba(0, 0, 0, 0.4); /* Fundo preto semitransparente */
    border-radius: 50%; /* Transforma o fundo em um círculo */
    opacity: 0.8; /* Deixa um pouco transparente */
    transition: opacity 0.2s ease-in-out; /* Transição suave para o hover */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1; /* Fica totalmente opaco ao passar o mouse */
    background-color: rgba(0, 0, 0, 0.6); /* Fundo um pouco mais escuro no hover */
}

/* Garante que os ícones dentro das setas sejam brancos e visíveis */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: brightness(0) invert(1); /* Deixa o ícone branco */
}