* {
  margin: 0;
  padding: 0;

}

body{
   overflow-x: hidden;
   background-color: 	#FFFAFA;
}


/* ESTILO DO MENU MOBILE */

a {
  color: #23232e;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #b8860b;
}

.logo {
  width: 250px;
  height: 7vh;
    
}

.logo_abed {
    width: 110%;
    height: 30%;
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
}


nav {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
  height: 8vh ;
  font-weight: bold; /* Adiciona peso à fonte, tornando-a mais grossa */
}

main {
  background: url("bg.jpg") no-repeat center center;
  background-size: cover;

}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center; /* Alinha verticalmente ao centro */
}

.nav-list li {
  margin-left: 32px;
  display: flex;
  align-items: center; /* Alinha verticalmente ao centro */
}

.mobile-menu {
  display: none;
  cursor: pointer;
}

.mobile-menu div {
  width: 32px;
  height: 2px;
  background: #000000;
  margin: 8px;
  transition: 0.3s;
}

@media (max-width: 999px) {
  body {
    overflow-x: hidden;
  }
  .nav-list {
    position: fixed;
    top: 8vh;
    right: 0;
    width: 100vw;
    height: 85vh;
    background: #23232e;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform: translateX(100%);
    transition: transform 0.3s ease-in;
    z-index: 999;

    
  }
  .nav-list li {
    margin-left: 0;
    opacity: 0;
  }
  .mobile-menu {
    display: block;
  }
  
  a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}
}

.nav-list.active {
  transform: translateX(0);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mobile-menu.active .line1 {
  transform: rotate(-45deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
  opacity: 0;
}

.mobile-menu.active .line3 {
  transform: rotate(45deg) translate(-5px, -7px);
}

/* FIM DO MENU MOBILE */

.buttonclick {
  padding: 8px 15px; /* Ajustado para um padding mais razoável */
  background-color: #4682B4; /* Fundo do botão */
  color: #ffffff; /* Cor do texto */
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-weight: bold; /* Adiciona peso à fonte, tornando-a mais grossa */
  border-radius: 10px ;
  
}

.buttonclick:hover {
  background-color: #b8860b; /* Cor de fundo ao passar o mouse */
}

.aviso {
  background-color: #4682B4; /* Mesma cor de fundo do menu */
  color: #fff; /* Cor do texto */
  padding: 10px 20px; /* Espaçamento interno para o conteúdo da barra */
  text-align: center; /* Centraliza o conteúdo dentro da barra */
  font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif; /* Fonte similar à do menu */
  margin-bottom: 20px; /* Espaçamento abaixo da barra */
}

.wrapper{
    width: 420px;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    color: #f000000;;
    border-radius: 10px;
    padding: 95px 40px;
    font-weight: 600;
}

.wrapper h1{
    color: black;
    font-size: 36px;
    text-align: center;

}

.wrapper .input-box{
    position: relative;
    width: 100%;
    height: 50px;
    margin: 30px 0;
    z-index: 10;
}

.input-box input{
    width: 98%;
    height: 100%;
    background: #fff;
    border: none;
    outline: none ;
    border: 1px solid rgba(255,255,255,0.2);
    border-color: #4682B4;
    border-radius: 40px;
    font-size: 16px;
    color: black;
    padding: 0 0 0 10px;

    
}

.input-box input::placeholder{
    color: black;

}

.input-box i{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px ;
    color: black;
    
}

.wrapper .remember-forget {
    justify-content: space-between;
    font-size: 14.5px;
    margin: 15px 10px 20px; /* Alterado de -15px para 15px */
    display: flex;
}

.remember-forget label input{
    margin-right: 3px ;
}

.remember-forget label input{
    margin-right: 3px ;
}

.remember-forget a{
    color: #b8860b;


}

.remember-forget a:hover{
    text-decoration: underline;

}

.wrapper .btn  {
    width: 100%;
    height: 45px;
    background: #4682B4;
    border: none;
    outline: none;
    border-radius: 40px ;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.wrapper .btn:hover{
    background: #b8860b;
    color: #fff;
    border-color: #b8860b;
}

.wrapper .register-link {
    font-size: 14.5px;
    text-align: center;
    margin: 20px 0 15px ;
}

.register-link p a {
    color:#b8860b;
    text-decoration: none;
    font-weight: 600;
}

.register-link p a:hover{
    text-decoration: underline;
}

.sec{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5vh;
    background-size: cover;
    background-position: center;
    z-index: 10; /* Adicione esta linha */
}

.destaque-link{
    color: #fff;
    font-weight: 400;
    text-decoration: underline;
}
.destaque-link:hover{
    text-decoration: underline;

}


.wrapper-cadastro{
    width: 420px;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    color: #f000000;;
    border-radius: 10px;
    padding: 0px 40px;
    font-weight: 600;
}

.wrapper-cadastro h1{
    color: black;
    font-size: 36px;
    text-align: center;

}

.wrapper-cadastro .input-box{
    position: relative;
    width: 100%;
    height: 50px;
    margin: 30px 0;
    z-index: 10;
}
.wrapper-cadastro .remember-forget {
    justify-content: space-between;
    font-size: 14.5px;
    margin: 15px 10px 20px; /* Alterado de -15px para 15px */
    display: flex;
}
.wrapper-cadastro .btn  {
    width: 100%;
    height: 45px;
    background: #4682B4;
    border: none;
    outline: none;
    border-radius: 40px ;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.wrapper-cadastro .btn:hover{
    background: #b8860b;
    color: #fff;
    border-color: #b8860b;
}
.wrapper-cadastro .register-link {
    font-size: 14.5px;
    text-align: center;
    margin: 20px 0 15px ;
}

/* Estiliza o formulário específico */
#form_perfil {
    width: 100%; /* Ocupa toda a largura disponível */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

/* Estiliza a imagem de pré-visualização */
#foto_preview {
    border-radius: 50%; /* Faz a imagem ficar redonda */
    display: block;
    margin-top: 20px;
    border: 3px solid #4682B4; /* Borda azul para destacar a imagem */
    width: 150px;
    height: 150px;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}

/* Estiliza o contêiner dos campos de input e labels */
.input-group {
    display: flex;
    align-items: center; /* Alinha verticalmente os itens no centro */
    width: 100%;
    margin-bottom: 20px; /* Margem maior entre os campos */
}

.for-cert{
    align-items: center; /* Alinha verticalmente os itens no centro */
    width: 260px;
    font-size: 14px; /* Tamanho da fonte ajustado */
    border: 1px solid #4682B4; /* Borda azul para destacar a imagem */
    border-radius: 40px;
    padding: 4px; /* Padding aumentado para mais conforto */
}

/* Estiliza os labels */
.input-group label {
    font-weight: 600; /* Mais grosso para melhor destaque */
    margin-right: 5px; /* Margem à direita do label */
    margin-left: 7px; /* Margem à direita do label */
    font-size: 14px; /* Tamanho da fonte ajustado */
    width: 130px; /* Largura fixa para o label */
    text-align: center; /* Alinha o texto do label à direita */
}

/* Estiliza o texto do placeholder */
.input-group input::placeholder {
    color: #000000; /* Cor do texto do placeholder */
}

/* Estiliza os campos de input */
.input-group input[type="text"], 
.input-group input[type="file"] {
    width: 100%; /* Usa a largura total do contêiner */
    padding: 12px; /* Padding aumentado para mais conforto */
    border: 1px solid #4682B4;
    outline: none;
    border-radius: 40px;
    box-sizing: border-box;
    background-color: #fff; /* Fundo branco para os campos */
    align-items: center;
}

/* Estiliza o campo de input para CPF e RG */
#nome, #cpf, #rg, #data_nascimento {
    width: calc(100% - 160px); /* Ajusta a largura para acomodar o label */
}

/* Estiliza os botões */
#alterar_perfil,
#salvar_perfil,
#cancelar_edicao {
    background-color: #4682B4;
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin: 10px 0; /* Espaçamento entre o botão e os campos */
    width: 210px;
    font-size: 14.5px;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif; /* Fonte similar à do menu */
}

/* Efeitos de hover para os botões */
#alterar_perfil:hover,
#salvar_perfil:hover,
#cancelar_edicao:hover {
    background-color: #b8860b; /* Escurece a cor ao passar o mouse */
}

/* Estiliza o botão de cancelar edição com cor diferenciada */
#cancelar_edicao {
    background-color: #FF0000;
}

#cancelar_edicao:hover {
    background-color: #b8860b;
}

/* Estiliza o campo de input quando estiver escondido */
#form_perfil input[type="file"] {
    display: none;
}

/* INICIO FOOTER*/
.rodape{
    max-width: 1170px;
	margin:auto;
    align-items: center;
}


ul{
	list-style: none;
}
.footer{
	background-color: #24262b;
    padding-top: 35px;
    padding-bottom: 15px;
    margin-top: 30px;
    min-height: 10vh; /* Ajusta a altura do footer */ 
}
.footer-col{
   width: 18%;
   margin-left: 65px;
   
}
.footer-col h4{
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #4682B4;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	color: #bbbbbb;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #b8860b;
}
.footer-col .social-links a{
	display: inline-flex;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.5s ease;
	align-items: center; /* Centraliza os ícones verticalmente */
    justify-content: center; /* Centraliza o conteúdo interno dos ícones */
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #b8860b;
}

.ultimo{
    margin-top: 40px;
    text-align: center;
	font-size: 16px;
	color: #bbbbbb;
	word-wrap: break-word; /* Faz o texto quebrar para a linha seguinte */

}

hr{
    height: 1px; /* Altura da linha */
    border: none;
    background-color: #696969;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
    margin-left: 120px;
}
}
@media(max-width: 384px){
  .footer-col{
    width: 100%;
    margin-left: 90px;
}
.wrapper{
    width: 420px;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    color: #f000000;;
    border-radius: 10px;
    padding: 95px 10px;
    font-weight: 600;
}
}

/* FIM FOOTER */

.erro{ /* Mensagem de erro ao tentar logar*/
    font-size: 14.5px;
    text-align: center;
    margin: 20px 0 15px ;
    color: 	#FF0000;
}

.validado{ /* Mensagem ao inverso de erro, em vez de vermelho aparece verde */
    font-size: 14.5px;
    text-align: center;
    margin: 20px 0 15px ;
    color: 	#008000;
}


		
/* Estilo para o carrossel e as imagens */
.carousel-item {
    display: none; /* Oculta todas as imagens por padrão */
}

.carousel-item.active {
    display: block; /* Exibe apenas a imagem ativa */
}

/* Estilo para as imagens */
.carousel-item img {
    width: 100%;
    height: 35rem;
    
}



/* Estilo para os indicadores do carrossel */
.carousel-indicators li {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    cursor: pointer;
}

/* Estilo para o indicador ativo do carrossel */
.carousel-indicators .active {
    background-color: black;
}

/* INICIO CSS CURSOS E PALESTRAS */



.centro{
    display: flex; /* Configura o container para usar flexbox */

    gap: 20px; /* Espaço entre os itens */
}








/* Estilo para o container principal */
.container {
    width: 100%;
    max-width: 1200px; /* Largura máxima da container */
    min-height: 500px;
    margin: 10px auto; /* Espaço externo ao redor da container e centralização horizontal */
    padding: 10px; /* Espaço interno dentro da container */
    box-sizing: border-box; /* Inclui o padding e border no cálculo da largura e altura */
}

/* Contêiner para tabela e blocos lado a lado */
.content-wrapper {
    display: flex; /* Configura o container para usar flexbox */
    flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas */
    gap: 20px; /* Espaço entre a tabela e os blocos */
}



/* Estilo para a tabela */
.table {
    flex: 0 0 auto; /* Tamanho fixo para a tabela */
    width: 19%; /* Largura total para o container */
    height: 10px;
    max-width: 500px; /* Largura máxima fixa para a tabela */
    margin-bottom: 20px; /* Espaço abaixo da tabela */
    border-collapse: collapse; /* Remove o espaçamento entre bordas das células */
    font-size: 15px;
    background: #f9f9f9;
}

.table th,
.table td {
    padding: 8px; /* Espaço interno das células */
    border-bottom: 1px solid #ddd; /* Cor e estilo da borda das células */
    text-align: center; /* Alinha o texto ao centro */
}


.table a{
    color: black;
}

.table a:hover{
    color: #b8860b;
}


/* Estilo para a seção de blocos */
.blocks-container {
    flex: 1; /* Permite que a seção de blocos ocupe o restante do espaço disponível */
}

/* Estilo para o carrossel de imagens */
.carousel {
    position: relative;
    width: 100%;
    height: 18rem; /* Altura definida para o carrossel */
    margin-top: -20px;
    margin-bottom: 30px;
    overflow: hidden;
}

.carousel .carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.carousel .carousel-indicators li {
    background-color: #333;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    cursor: pointer;
}

.carousel .carousel-indicators .active {
    background-color: #777;
}

.carousel .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%; /* Garante que o contêiner ocupe toda a altura do carrossel */
}

.carousel .carousel-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%; /* Garante que o item ocupe toda a altura do carrossel */
    display: none; /* Esconde todas as imagens por padrão */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
}

.carousel .carousel-item.active {
    display: flex; /* Usa flex para centralizar a imagem */
}

.carousel .carousel-item img {
    max-width: 100%;
    max-height: 100%;

    display: block;
    margin: auto; /* Centraliza a imagem dentro do item */
}

.carousel .carousel-item a {
    display: block; /* Garante que o link ocupe toda a área do item */
    width: 100%;
    height: 100%;
}

/* Controles do carrossel */
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: white;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

/* Estilo para o formulário de pesquisa */
.form-inline {
    display: flex;
    align-items: center;
    width: 100%; /* Garante que o formulário ocupe toda a largura do contêiner */
    margin-bottom: 20px;
}

/* Estilo para o grupo de formulários */
.form-inline .form-group {
    flex: 1; /* Faz o grupo de formulários ocupar o máximo de largura disponível */
    position: relative; /* Permite que o ícone seja posicionado absolutamente dentro do grupo */
    margin-right: 10px;
}

/* Estilo para o contêiner do input e ícone */
.input-box-pesquisar {
    position: relative;
    width: 101%; /* Faz o contêiner ocupar toda a largura do grupo de formulários */
}

/* Estilo para o campo de entrada */
.input-box-pesquisar input[type="text"] {
    width: 100%; /* Ajusta a largura do campo de entrada para 100% do contêiner pai */
    padding: 10px;
    padding-right: 40px; /* Espaço à direita para acomodar o ícone */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif; 
    font-size: 14px;
}

/* Estilo para o ícone dentro do campo de entrada */
.input-box-pesquisar i {
    position: absolute;
    top: 58%;
    right: 10px; /* Ajuste a posição horizontal do ícone */
    transform: translateY(-50%); /* Centraliza verticalmente o ícone */
    color: #C0C0C0; /* Cor do ícone */
    font-size: 18px; /* Tamanho do ícone */
}



/* Estilo para a página de cursos disponíveis */
.page-header h1 {
    font-size: 22px;
    margin-bottom: 20px;
    background: #4682B4;
    color: #fff;
    padding: 10px 20px; /* Espaçamento interno para o conteúdo da barra */
  text-align: center; /* Centraliza o conteúdo dentro da barra */
  font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif; /* Fonte similar à do menu */
}



/* Estilo para os cursos */
/* Estilo para o container de thumbnails */
.row {
    display: flex; /* Configura o container para usar flexbox */
    flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas */
    gap: 15px; /* Espaço entre os thumbnails */

      

}

/* Estilos gerais para colunas */
.col-sm-6,
.col-md-4 {
    flex: 1 1 calc(33.333% - 15px); /* Permite que os itens ocupem 1/3 do espaço disponível, com ajuste de espaço entre eles */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    display: flex; /* Configura o flexbox para o container da coluna */
    flex-direction: column; /* Alinha o conteúdo na vertical */
    height: 25rem; /* Altura fixa para os thumbnails */
    max-width: 33%;
    min-width: 300px;
    justify-content: flex-start; /* Espaça os itens igualmente ao longo do eixo principal */
}

/* Estilos para telas menores que 1200px */
@media (max-width: 1200px) {
    .col-md-4 {
        flex: 1 1 calc(50% - 15px); /* Ajusta a largura para metade em telas menores */
        max-width: calc(50%); /* Ajusta a largura máxima para metade do espaço disponível */
    }
    table {
        display: none; /* Oculta a tabela em telas menores que 768px */
    }
}

/* Estilos para telas menores que 768px */
@media (max-width: 768px) {
    .col-md-4,
    .col-sm-6 {
        flex: 1 1 calc(100% - 15px); /* Ajusta a largura para 100% em telas muito pequenas */
        max-width: calc(100%); /* Ajusta a largura máxima para 100% do espaço disponível */
    }
    table {
        display: none; /* Oculta a tabela em telas menores que 768px */
    }
}

/* Estilos para telas menores que 576px */
@media (max-width: 576px) {
    .row {
        gap: 10px; /* Reduz o espaço entre os thumbnails em telas muito pequenas */
    }
    .col-sm-6 {
        flex: 1 1 calc(100% - 10px); /* Ajusta a largura para ocupar 100% em telas muito pequenas */
        max-width: calc(100%); /* Ajusta a largura máxima para 100% do espaço disponível */
    }
    table {
        display: none; /* Oculta a tabela em telas menores que 768px */
    }
}

.nome{
    height: 4rem;
    display: flex; /* Ativa o Flexbox */
    align-items: center; /* Alinha o texto verticalmente no centro */
    justify-content: center; /* Alinha o texto horizontalmente no centro */
    text-align: center; /* Garante que o texto esteja centralizado dentro do contêiner */
    font-size: 20px;

}
.carga-horaria{
    height: 2rem;
    display: flex; /* Ativa o Flexbox */
    align-items: center; /* Alinha o texto verticalmente no centro */
    justify-content: center; /* Alinha o texto horizontalmente no centro */
    text-align: center; /* Garante que o texto esteja centralizado dentro do contêiner */
    font-size: 15px;
}

.visitas {
    font-size: 14px;
    color: #ccc; /* Ajuste a cor conforme necessário */
    display: flex;
    align-items: center; /* Alinha o ícone e o texto verticalmente */
    justify-content:center; 
    position: relative; /* Posiciona o bloco de visitas de forma absoluta dentro do contêiner .caption */
    right: 10px; /* Ajuste a distância da borda direita conforme necessário */
    top: 15px;
}

.visitas i {
    margin-right: 5px; /* Espaçamento entre o ícone e o texto */
    color: #888; /* Cor do ícone, ajuste conforme necessário */
}

/* Estilo para cada thumbnail */
.thumbnail {
    display: flex; /* Configura o flexbox para o thumbnail */
    flex-direction: column; /* Alinha o conteúdo na vertical */
    height: 100%; /* Faz com que o thumbnail ocupe toda a altura disponível da coluna */
    border: 1px solid #ddd; /* Borda do thumbnail */
    border-radius: 4px; /* Bordas arredondadas */
    padding: 0px; /* Espaço interno */
    text-align: center; /* Centraliza o texto */
    background-color: #f9f9f9; /* Cor de fundo */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura e altura */
    
}

/* Estilo para a imagem dentro do thumbnail */
.thumbnail img {
    width: 100%; /* Largura da imagem ajustada ao tamanho do container */
    height: 10rem;
    padding-bottom: 5px; /* Espaço abaixo da imagem */
    
}




/* Estilo para o botão do thumbnail */
.thumbnail .btn {
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: #4682B4; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
    margin-top: 10px; /* Espaço abaixo do texto */
    margin-bottom: 10px; /* Espaço abaixo do texto */
}

.matricule-se{
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: #4682B4; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
    margin-top: 10px; /* Espaço abaixo do texto */
    margin-bottom: 10px; /* Espaço abaixo do texto */
}
.matricule-se:hover{
    background: #b8860b;
}

.matriculado {
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: green; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.saber-mais {
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: #4682B4; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
}

.saber-mais:hover{
     background-color: #b8860b;
}


/* Estilo para o botão do thumbnail quando passa o mouse */
.thumbnail .btn:hover {
    background-color: #b8860b; /* Cor de fundo ao passar o mouse */
}


/* Estilo para o bloco de matrícula */
.blocoMatricula {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    max-width: 90%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif;
    
}

.blocoMatricula .fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 40px;
    color: #000;
    
}



.blocoMatricula .form-group {
    margin-bottom: 10px;
    margin-top: 10px;
    
    
}

.blocoMatricula select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 7px;
    
    
}

/* Estilo para o contêiner dos botões */
.blocoMatricula .botoes {
    display: flex;
    gap: 10px; /* Espaço entre os botões */
    align-items: center; /* Centraliza os botões horizontalmente */
}



.blocoMatricula .btn {
    padding: 10px 15px;
    background-color: #008000;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    width: 50%;
    height: 100%;
    
 
    
}

.blocoMatricula .btn-secondary {
    background-color: #FF0000;
}

.blocoMatricula .btn:hover {
    background-color:#b8860b;
}

.blocoMatricula .btn-secondary:hover {
    background-color: #b8860b;
}

/* Estilo para a paginação */
.pagination {
    display: flex;
    justify-content: center;
    padding: 0;
    list-style: none;
    margin-top: 20px;
    
}

.pagination li {
    margin: 0 2px;
}

.pagination li a {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #007bff;
    text-decoration: none;        
}

.pagination li a:hover {
    background-color: #4682B4;
    color: #fff;
}

.pagination .active a {
    background-color: #4682B4;
    color: white;
}

/* Estilo geral para as abas */
.nav-tabs {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    display: flex;          /* Alinha as abas horizontalmente */
    flex-wrap: wrap;        /* Permite que as abas quebrem para uma nova linha */

}

.nav-tabs > li {
    flex: 1; /* Faz com que as abas ocupem igualmente o espaço horizontal */

    
}

.nav-tabs > li > a {
    border: 1px solid;
    background-color: #4682B4;
    border-radius: 10px 10px 0 0;
    color: #fff;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: block;
    text-decoration: none; /* Remove o sublinhado do link */
    min-width: 200px;
}

.nav-tabs > li > a:hover {
    background-color: #b8860b;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
    color: #fff;
    background-color: #b8860b;


}

/* Estilo para o conteúdo das abas */
.tab-content {
    background: #F5F5F5;
    border-radius: 0 0 10px 10px;
    min-height: 500px;
    padding: 10px;
}

/* Esconde o conteúdo das abas inativas */
.tab-pane {
    display: none;
}

/* Mostra o conteúdo da aba ativa */
.tab-pane.active {
    display: block;
}
.modal-overlay {
    display: none; /* Ocultar o overlay por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo preto semi-transparente */
    z-index: 999; /* Posiciona o overlay abaixo do modal */
}
/* Estilo para o modal */
.modal {
    display: none; /* Ocultar o modal por padrão */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    max-width: 90%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

/* Estilo para o conteúdo do modal */
.modal-content {
    position: relative;
    height: 100%;
    text-align: center;
}

/* Estilo para o cabeçalho do modal */
.modal-header {
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

/* Estilo para o botão de fechar */
.close {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    font-size: 40px; /* Tamanho ajustado */
    color: #000; /* Cor preta */
    background: none; /* Remover fundo */
    border: none; /* Remover borda */
    padding: 0px;

}

.fechar2 {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 40px; /* Tamanho ajustado */
    color: #000; /* Cor preta */
    background: none; /* Remover fundo */
    border: none; /* Remover borda */
    padding: 0px;
}

/* Estilo para o corpo do modal */
.modal-body {
    padding-top: 20px;
    text-align: justify;
}

/* Estilo para o rodapé do modal */
.modal-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.modal-title{
    text-align: center;
      font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

/* Botão Confirmar estilizado como vermelho */
.btn-danger {
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: #4682B4; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
    margin-top: 10px; /* Espaço abaixo do texto */
    margin-bottom: 10px; /* Espaço abaixo do texto */
}

.btn-confirmar-cancelar {
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: #FF0000;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
    margin-top: 10px; /* Espaço abaixo do texto */
    margin-bottom: 10px; /* Espaço abaixo do texto */
}

.btn-danger:hover {
    background: #b8860b;
}

.btn-confirmar-cancelar:hover {
    background: #b8860b;
}

.btn-primary {
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: green; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
    margin-top: 10px; /* Espaço abaixo do texto */
    margin-bottom: 10px; /* Espaço abaixo do texto */
}

.btn-primary:hover {
    background: #b8860b;
}

.btn-pdf{
    padding: 15px 40px; /* Espaço interno do botão */
    background-color: #4682B4;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%;
    margin-top: 5px; /* Espaço abaixo do texto */
    margin-bottom: 5px; /* Espaço abaixo do texto */  
}

.btn-pdf:hover {
    background: #b8860b;
}

.btn-prova{
    padding: 15px 40px; /* Espaço interno do botão */
    background-color: #4682B4;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%;
    margin-top: 5px; /* Espaço abaixo do texto */
    margin-bottom: 5px; /* Espaço abaixo do texto */  
}

.btn-prova:hover {
    background: #b8860b;
}

.btn-desfazer{
    padding: 15px 40px; /* Espaço interno do botão */
    background-color: #ff0000;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%;
    margin-top: 5px; /* Espaço abaixo do texto */
    margin-bottom: 5px; /* Espaço abaixo do texto */  
}

.btn-desfazer:hover {
    background: #b8860b;
}

.btn-taxa{
    padding: 15px 40px; /* Espaço interno do botão */
    background-color: green;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%;
    margin-top: 5px; /* Espaço abaixo do texto */
    margin-bottom: 5px; /* Espaço abaixo do texto */  
}

.btn-taxa:hover {
    background: #b8860b;
}

.btn-refazer{
    padding: 15px 40px; /* Espaço interno do botão */
    background-color: #FF8C00;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%;
    margin-top: 5px; /* Espaço abaixo do texto */
    margin-bottom: 5px; /* Espaço abaixo do texto */  
}

.btn-refazer:hover {
    background: #b8860b;
}

.btn-matricula-detalhes {
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: green; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 210px;
    margin-top: 5px; /* Espaço abaixo do texto */
    margin-bottom: 5px; /* Espaço abaixo do texto */
}

.btn-matricula-detalhes:hover {
    background: #b8860b;
}

.btn-emissao-diploma {
    padding: 15px 0; /* Espaço interno do botão */
    background-color: green; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%; /* Faz o botão usar toda a largura disponível */
    margin: 5px auto; /* Centraliza o botão horizontalmente e adiciona espaço acima e abaixo */
    box-sizing: border-box; /* Inclui padding e border na largura total do botão */
}

.btn-emissao-diploma:hover {
    background: #b8860b;
}

.btn-emissao-gerar {
    padding: 15px 0; /* Espaço interno do botão */
    background-color: #4682B4;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%; /* Faz o botão usar toda a largura disponível */
    margin: 5px auto; /* Centraliza o botão horizontalmente e adiciona espaço acima e abaixo */
    box-sizing: border-box; /* Inclui padding e border na largura total do botão */
}

.btn-emissao-gerar:hover {
    background: #b8860b;
}

.btn-emissao-carteirinha-vencida {
    padding: 15px 0; /* Espaço interno do botão */
    background-color: #ff0000;
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    width: 100%; /* Faz o botão usar toda a largura disponível */
    margin: 5px auto; /* Centraliza o botão horizontalmente e adiciona espaço acima e abaixo */
    box-sizing: border-box; /* Inclui padding e border na largura total do botão */
}

.btn-emissao-carteirinha-vencida:hover {
    background: #b8860b;
}

.btn-success { /* usado no botao de pagamento da carterinha*/
    padding: 15px 5px; /* Espaço interno do botão */
    width: 200px;
    background-color: green; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    margin: 5px auto; /* Centraliza o botão horizontalmente e adiciona espaço acima e abaixo */
    box-sizing: border-box; /* Inclui padding e border na largura total do botão */
}

.btn-success:hover {
    background: #b8860b;
}

.icon-spacing {
    margin-right: 2px; /* Ajuste o valor conforme necessário */
}

.welcome-message {
  text-align: center;
  font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
  font-weight: bold; /* Adiciona peso à fonte, tornando-a mais grossa */
}

.texto-liso{
  text-align: justify;
  font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
}

.resultado_deferido{
    color: green;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.resultado_indeferido{
    color: red;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* TESTAR ENTRE A ABA CURSOS E DETALHES */
.form-control {
    width: 100%; 
    padding: 5px; /* Espaçamento interno */
    border: 1px solid #4682B4; 
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura total */
    font-size: 14.5px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
    margin-top: 20px;
    margin-bottom: 10px;
}

.form-autic {
    width: 100%; 
    padding: 15px; /* Espaçamento interno */
    border: 1px solid #4682B4; 
    border-radius: 40px;
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura total */
    font-size: 16px; /* Tamanho da fonte */
    color: black;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Placeholder do campo de entrada */
.form-group input.form-control::placeholder {
    color: #888; /* Cor do texto do placeholder */
}

.centralizado{
    align-items: center;
    text-align: center;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
}

.imagem_detalhes{
    width: 100%;
    height: 30vh;
    margin-bottom: 20px;
}

.texto-detalhes{
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
    text-align: justify;
}

/* Estilos para dispositivos móveis */
@media (max-width: 767px) { /* Ajuste o valor conforme necessário */
    .texto-detalhes {
        text-align: left; /* Alinhamento à esquerda */
    }
}

.emergencia{
    margin-top: -20px;
    margin-bottom: 20px;
    color: #fff;
    background-color: red;
    text-align: center;
    align-items: center;
    font-size: 12px;
}

.nome-curso{
    background-color: #4682B4;
    color: #fff;
    text-align: center;
    padding: 13px 20px; /* Espaçamento interno para o conteúdo da barra */
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif; /* Fonte similar à do menu */  
}

.extra{
    background-color: #F0E68C;
    padding: 5px;
}

.extra2{
    width: 99%;
    height: auto;
    background-image: url('/imagens/outros/certificado_liso.png');
    padding: 5px;
    background-size: 100% 100%; /* Força a imagem a preencher toda a div, mesmo que distorcida */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita a repetição da imagem */
}

/* Responsividade para telas menores */
/* Responsividade para telas menores */
@media (max-width: 576px) {
    .extra2 {
        background-image: url('/imagens/outros/certificado_liso_mobile.png');
        width: 100%; /* Ajusta a largura para dispositivos móveis */
        background-size: cover; /* Cobre toda a área da div, pode distorcer um pouco, mas garante visualização */
    }
}


.bolinha{
    list-style-type: disc;
    margin-left: 70px;
    max-width: 70%;
    text-align: left;
}

.t-cert{
    padding-top: 180px;
    padding-bottom: 40px;
    text-align: center;
}

        .accordion {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 10px 0;
        }

        .accordion button {
            background-color: #24262b;
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;

        }

        .accordion button.active, .accordion button:hover {
            background-color: #b8860b;
        }

        .accordion button:after {
            content: '\002B'; /* Plus symbol */
            float: right;
        }

        .accordion button.active:after {
            content: "\2212"; /* Minus symbol */
        }

        .accordion .panel {
            padding: 10px 18px;
            display: none;
            overflow: hidden;
        }
        
.btn-contato{
    padding: 12px 40px; /* Espaço interno do botão */
    background-color: #4682B4; /* Cor de fundo do botão */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 4px; /* Bordas arredondadas do botão */
    color: white; /* Cor do texto */
    cursor: pointer; /* Muda o cursor ao passar sobre o botão */
    text-decoration: none; /* Remove o sublinhado do link */
    align-items: center; /* Alinhamento centralizado (necessário em flex ou grid) */
    margin-top: 10px; /* Espaço acima do botão */
    margin-bottom: 10px; /* Espaço abaixo do botão */
}

.btn-contato:hover {
    background: #b8860b;
}

.texto-liso a {
  /* Estilos iniciais dos links */
  color: #b8860b; /* Cor do texto do link */
  text-decoration: none; /* Remove o sublinhado */
}

.texto-liso a:hover {
  /* Estilos aplicados quando o mouse está sobre o link */
  color: #b8860b; /* Nova cor do texto do link */
  text-decoration: underline; /* Adiciona o sublinhado ao passar o mouse */
}

.accordion .panel a:hover {
    color: #b8860b; /* Cor do texto no hover */
    text-decoration: underline; /* Adiciona o sublinhado no hover */
}

.questoes{
    word-wrap: break-word; 
    text-align: left;
}

/* CSS para destacar a resposta selecionada */
.resposta-destaque {
    background-color: #b8860b; /* Cor de fundo quando a resposta é clicada */
    border-radius: 5px; /* Arredonda os cantos */

}


.modelo-certificado {
    width: 80%;
    height: 50vh;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    margin: 0 auto;          /* Centraliza a div no meio da página */
}

/* Estilos para o container principal */
.informacoes-ex {
    display: flex;
    flex-wrap: wrap; /* Para garantir que os blocos se ajustem em telas menores */
    justify-content: space-between;
    gap: 20px;
}

/* Bloco de informações principais */
.bloco-info {
    flex: 3; /* O bloco de informações ocupa o maior espaço possível */


}

/* Bloco adicional com a div .extra */
.bloco-extra, .bloco-extra-2{
    flex: 2; /* O bloco .extra também ocupará o mesmo espaço */
    background: #F0E68C;
    padding: 5px;
     box-sizing: border-box;
}


/* Responsividade para telas menores */
@media (max-width: 768px) {
    .informacoes-ex {
        flex-direction: column; /* Em telas pequenas, os blocos ficam um embaixo do outro */
    }

    .bloco-info, .bloco-extra, .bloco-extra-2 {
        width: 100%; /* Cada bloco ocupa a largura total da tela */
    }

}

/* blog */
.c-blog {
    display: flex;
    justify-content: space-between;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
}

.sidebar {
    padding-left: 20px;
}

.post-container {
    display: flex; /* Usar flexbox para layout */
    margin-bottom: 20px; /* Espaçamento entre os posts */
    text-align: justify;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
}

.post-image {
    flex: 1; /* Imagem ocupa 1 parte do espaço */
    max-width: 200px; /* Largura máxima da imagem */
}

.post-content {
    flex: 2; /* Conteúdo ocupa 2 partes do espaço */
    padding-left: 20px; /* Espaçamento entre imagem e texto */
}



.post-content h2 {
    margin: 0; /* Remove margem padrão do título */
}

.conteudo-principal {
    width: 100%;
}

.conteudo-post{
    padding-bottom: 5px;
}

.c-blog a {
    color: black; /* cor do link no estado normal */
}

.c-blog a:hover {
    color: #b8860b; /* cor do link ao passar o mouse */
}

.min{
    font-size: 14px;
}




@media (max-width: 999px) {
    .sidebar {
        display: none;
    }
    .conteudo-principal {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .post-container {
         display: block;
    }
    
    .post-image {
    display:none;
    }
    
    .post-content {
    padding-left: 0px; /* Espaçamento entre imagem e texto */
    }
}

/* Post */

.post-completo{
    text-align: justify;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif ;
}

.img-post {
    float: left; /* Faz a imagem flutuar à direita */
    margin-right: 15px; /* Espaçamento à esquerda da imagem */
    margin-bottom: 5px; /* Espaçamento abaixo da imagem */
}

/* O 'clear' pode ser removido se não quiser quebrar o fluxo do texto */
.post-content-p p {
    /* clear: both; */
}

.data-publicacao {
    display: block; /* Faz o elemento ocupar uma linha inteira */
    text-align: right; /* Alinha o texto à direita */
    margin-top: 10px; /* Opcional: Adiciona um espaço acima do texto */
}


/* Portal Freelancer */
.financeiro {
    display: flex;
    flex-direction: column;

    margin-top: 20px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 2px;
}

.item:last-child {
    border-bottom: none;
}

.label {
    color: #333;
}


.item.valor-pago {
    background-color: #d4edda; /* Fundo verde claro */
    border-radius: 5px; /* Arredondar os cantos */
}

.item.valor-pago .label,
.item.valor-pago .value {
    color: #155724; /* Texto verde escuro */
    font-weight: bold; /* Destaque */
}


/* Imagens carteirinha.php*/

.passos {
    max-width: 800px;
    margin: 20px auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.passo {
    margin-bottom: 30px;
}

.passo h2 {
    font-size: 1.4em;
    text-align: center;
    color: #444;
    margin-bottom: 15px;
}

.passo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Responsividade */
@media (max-width: 600px) {
    .passos {
        padding: 10px;
    }

    .passo h2 {
        font-size: 1.2em;
        text-align: left;
    }

    .passo {
        margin-bottom: 20px;
    }
}

.owl-nav,
.owl-dots {
    display: none !important;
}

    /* Garantir que o contêiner ocupe 100% da largura */
    #carrosselCursos {
        width: 100%;
        margin: 0 auto;
    }

    /* Garantir que os itens (cards) ocupem a largura adequada */
    .owl-carousel .item {
        width: 100%;
    }

    /* Opcional: se necessário, você pode ajustar a largura dos itens dependendo da tela */
    .owl-carousel .item img {
        width: 100%;
        height: auto;
    }