body {
    min-width: 372px;
}

.wrapper {
    min-height: 100vh;
}

p.truncar-3l {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 469px) {
    .mt-xs-3 {
        margin-top: 1rem;
    }
}

label:hover .text-dark {
    transition: color 0.2s ease;
    color: white !important;
}

label .text-dark {
    transition: color 0.2s ease;
}

/* complementado para compatibilizar com Bootstrap >5.3.x mantendo o mesmo efeito de hover */
.btn-check:checked+.btn-outline-danger h3,
.btn-check:active+.btn-outline-danger h3,
.btn-check:hover+.btn-outline-danger h3,
.btn-check:checked+.btn-outline-danger hr,
.btn-check:active+.btn-outline-danger hr,
.btn-check:hover+.btn-outline-danger hr,
.btn-check:checked+.btn-outline-danger h4,
.btn-check:active+.btn-outline-danger h4,
.btn-check:hover+.btn-outline-danger h4,
.btn-check:checked+.btn-outline-danger p,
.btn-check:active+.btn-outline-danger p,
.btn-check:hover+.btn-outline-danger p,
.btn-check:checked+.btn-outline-danger .text-dark,
.btn-check:active+.btn-outline-danger .text-dark,
.btn-check:hover+.btn-outline-danger .text-dark {
    transition: color 0.2s ease;
    color: white !important;
}

/* adicionado para compatibilizar com Bootstrap >5.3.x mantendo o mesmo efeito de hover */
.btn-check:checked+.btn-outline-danger,
.btn-check:active+.btn-outline-danger,
.btn-check:hover+.btn-outline-danger {
    transition: background-color 0.2s ease;
    background-color: var(--bs-danger) !important;
}

.flex-even {
    flex: 1;
    min-width: 300px;
}

.accordion-button:not(.collapsed) {
    color: white;
    background-color: #dc3545;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

fieldset.row .form-floating>label {
    margin-left: calc(var(--bs-gutter-x) * 0.5);
}

/* adicionado para deixar links de paginação em vermelho */
.page-link {
    color: var(--bs-danger);
}
.img-responsive {
    width: 100%;  /* Ajuste para tela de celular */
    max-width: 600px; /* Limite máximo de largura para telas menores */
    height: auto;  /* Mantém a proporção da altura */
}

@media (min-width: 768px) {
    .img-responsive {
        max-width: 100%;  /* Mantém a responsividade para telas maiores */
    }
}

/* Ajusta o dropdown para manter a mesma formatação do navbar */
.navbar-nav .dropdown-menu {
    background-color: transparent !important;  /* Cor de fundo transparente */
    /*border: none !important; /* Remove a borda */
    box-shadow: none !important; /* Remove a sombra */
}

/* Estilo para os itens dentro do dropdown */
.navbar-nav .dropdown-item {
    color: rgb(248, 248, 248)  !important; /* Cor do texto */
    padding: 10px 20px !important; /* Ajusta o padding dos itens */
    background-color:#fb44c0 !important; /* Fundo transparente */
    border: #e6079f !important; /* Remove bordas */
}

/* Estilo de hover para os itens do dropdown */
.navbar-nav .dropdown-item:hover {
    background-color: #e6079f !important; /* Cor do hover */
    color: rgb(255, 255, 255) !important; /* Garante que o texto seja branco */
}
/*deixa o icone hamburguer na cor da fonte*/

.navbar-toggler i {
    color: rgb(255, 255, 255) !important; /* Ou outra cor que você deseja */
    font-size: 1.5rem; /* Ajuste o tamanho se necessário */
}

/* Ajuste para o texto do dropdown */
.navbar-nav .nav-link.dropdown-toggle {
    color: rgb(251, 251, 252) !important; /* Cor do link do dropdown */
    /*font-weight: bold; Deixa o texto em negrito */
}

.navbar .nav-link {
    color: white !important;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #ffe6f5 !important; /* branco mais claro ou como preferir */
}

.navbar .navbar-brand {
    color: white !important;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: #ffe6f5 !important; /* ou a cor que quiser no hover */
}

/* Estilo para o contêiner das imagens */
.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espaço entre as imagens */
    justify-content: center; /* Alinha as imagens ao centro */
    margin-top: 30px; /* Adiciona um pouco de espaço acima das imagens */
}
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Define 4 colunas */
    gap: 5px; /* Espaçamento entre as imagens */
    justify-items: center; /* Alinha as imagens ao centro */
}

.photo-gallery img {
    max-width: 100%;
    /*height: auto;*/
}

/* Estilo para as imagens */
.photo-gallery img {
    width: 150px; /* Largura das imagens */
    height: 150px; /* Altura das imagens, garantindo que fiquem quadradas */
    object-fit: cover; /* Faz com que a imagem se ajuste ao tamanho do quadrado sem distorcer */
    border-radius: 8px; /* Cantos arredondados para um visual mais suave */
}

/* Para telas menores, ajusta o tamanho das imagens */
@media (max-width: 767px) {
    .photo-gallery img {
        width: 120px; /* Ajuste do tamanho para telas pequenas */
        height: 120px; /* Mantém a proporção quadrada */
    }
}


/* Para telas muito pequenas, como celulares, as imagens ocupam 100% da largura */
@media (max-width: 480px) {
    .photo-gallery img {
        width: 100px; /* Tamanho ainda menor para telas pequenas */
        height: 100px;
    }
}


/* Estilo para o contêiner das imagens */
.photo-gallery1 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espaço entre as imagens */
    justify-content: center; /* Alinha as imagens ao centro */
    margin-top: 30px; /* Adiciona um pouco de espaço acima das imagens */
}
.photo-gallery1 {
    display: grid;
    gap: 5px; /* Espaçamento entre as imagens */
    justify-items: center; /* Alinha as imagens ao centro */
}

.photo-gallery1 img {
    max-width: 100%;
    /*height: auto;*/
}

/* Estilo para as imagens */
.photo-gallery1 img {
    width: 800px; /* Largura das imagens */
    height: 300px; /* Altura das imagens, garantindo que fiquem quadradas */
    object-fit: cover; /* Faz com que a imagem se ajuste ao tamanho do quadrado sem distorcer */
    border-radius: 8px; /* Cantos arredondados para um visual mais suave */
}

main {
    background: url('img/Fundobranco.png') no-repeat center center fixed;
    background-size: cover;
    padding: 50px; /* Ajusta o espaço interno para não sobrepor o conteúdo */
}


.container h1,
.container h2,
.container h3,
.container h4,
.container li,
.container p,
.container ul {
    color: #4B0082; /* Roxo escuro */
}

.image-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espaço entre as imagens */
    margin-top: 20px;
}

.image-container img {
    width: 150px; /* Tamanho pequeno */
    height: auto;
    border-radius: 10px; /* Bordas arredondadas (opcional) */
}

/* Estilo para os ícones das redes sociais */
.social-icons {
    margin-top: 30px;
}

.social-icons a {
    margin: 0 10px;
    font-size: 36px;
    color: #b646e2; /* Cor padrão dos ícones */
    text-decoration: none;
}

.social-icons a:hover {
    color: #ec30b4; /* Cor ao passar o mouse */
}

/* Ajuste do tamanho dos ícones para dispositivos móveis */
@media (max-width: 767px) {
    .social-icons a {
        font-size: 30px;
    }
}
.bi-whatsapp {
    font-size: 40px; /* Aumenta o tamanho do ícone */
    color: #25D366; /* Cor verde típica do WhatsApp, você pode ajustar a cor se necessário */
    transition: transform 0.3s ease; /* Para um efeito suave ao passar o mouse */
}

.bi-whatsapp:hover {
    transform: scale(1.2); /* Aumenta um pouco o ícone quando o mouse passa por cima */
}
/* Remove o sublinhado e a bolinha do link */
.menu-link {
    text-decoration: none;  /* Remove o sublinhado */
    position: relative;  /* Necessário para o submenu aparecer abaixo */
}

.menu-link:hover {
    color: inherit;  /* Evita alteração de cor do link ao passar o mouse */
}

.submenu {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #f9f9f9;
    position: absolute;  /* Faz com que o submenu fique posicionado abaixo do item */
    top: 100%;  /* Coloca o submenu logo abaixo do botão */
    left: 0;
    width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

.submenu li {
    padding: 8px 16px;
}

.menu-item:hover .submenu {
    display: block;  /* Exibe o submenu ao passar o mouse */
}

.submenu-arrow {
    font-size: 10px;
    margin-left: 5px;
}

/* Corrige a bolinha que aparece na borda e o estilo de hover do link */
.menu-item a:focus,
.menu-item a:hover {
    outline: none; /* Remove a bolinha de foco */
}
.social-icon {
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .social-icon:hover {
    transform: scale(1.2);
    color: #830178 !important;
  }
  
  .impacto-gerado {
    padding: 2rem;
    text-align: center;
  }
  
  .impacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
  
  .impacto-item {
    background: #f9f1f7;
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s;
  }
  
  .impacto-item:hover {
    transform: scale(1.03);
  }
  
  .impacto-item i {
    font-size: 2rem;
    color: #57024b;
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .impacto-item strong {
    font-size: 1.1rem;
    color: #333;
  }
  
  .destaques-midia {
    padding: 3rem 1rem;
    text-align: center;
    background-color: #fff0f7;
  }
  
  .destaques-midia h1 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    color: #57024b;
  }
  
  .midia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    justify-items: center;
  }
  
  .midia-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    padding: 1.5rem;
    max-width: 350px;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .midia-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  
  .midia-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 1rem;
  }
  
  .midia-card p {
    font-size: 1rem;
    color: #333;
    line-height: 1.4;
  }