/* Artigos */
.artigos {
    background-color: #fff;
    padding: 40px 20px;
    width: 980px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.artigos .foto-perfil {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 3px solid #333;
}

.artigos h2 {
    font-size: 30px;
    margin-bottom: 5px;
}

.artigosTituloIndice {
  font-size: 30px;
  margin-bottom: 5px;
  text-align: left;
  margin-left: 20%;
}

.artigos h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.artigos h4 {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: left;
  margin-left: 60px;
}

.artigos p {
    font-size: 19px; /* tamanho da fonte */
    text-align: center; /* Alinhamento justificado */
    text-indent: 0px; /* Recuo na primeira linha */
    line-height: 1.6; /* Espaçamento entre linhas */
    margin-bottom: 15px; /* Espaçamento entre parágrafos */
    margin-left: 60px;
    margin-right: 60px;
}

.p2 {
    font-size: 18px; /* tamanho da fonte */
    text-align: right; /* Alinhamento justificado */
    line-height: 1.6; /* Espaçamento entre linhas */
    margin-bottom: 15px; /* Espaçamento entre parágrafos */
}

.imgArtigo {
    width: 620px;
    height: 620px;
    object-fit: cover;
    margin-bottom: 40px;
    border: 3px solid #fff;
}

.imgArtigo01 {
    width: 750px;
    height: auto;
    object-fit: cover;
    margin-bottom: 40px;
    border: 3px solid #fff;
}

.imgArtigo02 {
    width: 500px;
    height: auto;
    object-fit: cover;
    margin-bottom: 40px;
    border: 3px solid #fff;
}

/* Imagens flutuantes */
.img-left {
    width: 350px;
    height: auto;
    object-fit: cover;
    float: left; /* Faz a imagem flutuar à esquerda */
    margin-right: 20px; /* Espaço entre a imagem e o texto */
    margin-bottom: 0px; /* Espaço embaixo da imagem */
    border: 3px solid #fff;
}

.img-right {
    width: 350px;
    height: auto;
    object-fit: cover;
    float: right; /* Faz a imagem flutuar à direita */
    margin-left: 20px; /* Espaço entre a imagem e o texto */
    margin-bottom: 0px;
    border: 3px solid #fff;
}

.img-left {
  width: 350px;
  height: auto;
  object-fit: cover;
  float: left; /* Faz a imagem flutuar à esquerda */
  margin-right: 20px; /* Espaço entre a imagem e o texto */
  margin-bottom: 0px; /* Espaço embaixo da imagem */
  border: 3px solid #fff;
}
.img-center {
  width: 350px;
  height: auto;
  object-fit: cover;
  float: center; /* Faz a imagem flutuar à esquerda */
  margin-right: 20px; /* Espaço entre a imagem e o texto */
  margin-bottom: 0px; /* Espaço embaixo da imagem */
  border: 3px solid #fff;
}

/* Limpar flutuações após os parágrafos que contêm imagens */
.artigos:after {
    content: "";
    display: block;
    clear: both;
}

/* Header do artigo */
.header-artigo {
    text-align: center;
    margin-bottom: 20px;
}

.header-artigo h2 {
    font-size: 30px;
    margin-bottom: 5px;
    text-align: center;
    margin-left: 60px;
    margin-right: 60px;
}

.header-artigo h1 {
  font-size: 40px;
  margin-bottom: 5px;
  text-align: center;
  margin-left: 60px;
  margin-right: 60px;
}

.header-artigo h3 {
    font-size: 20px;
    margin-bottom: 0px;
    color: #665;
    text-align: center;
    margin-left: 60px;
    margin-right: 60px;
}

/* Sinopse do artigo */
.sinopse {
    font-size: 18px;
    font-style: italic;
    color: #333;
    max-width: 900px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
    text-align: left;
}

/* INDICE ORACOES*/

.indiceOracoes{
  text-align: left;
  margin-left: 25%;
  overflow: hidden;
}


.indiceOracoes .href-preto {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}


/* CLONUAS INDICE*/

.columns {
  display: flex;
  justify-content: space-between;
}

.left-column, .right-column {
  width: 45%; /* Largura ajustável para as colunas */
}

.indiceOracoes {
  list-style-type: none; /* Remove os marcadores das listas */
  padding: 0;
}

.indiceOracoes li {
  margin-bottom: 10px; /* Espaço entre os itens da lista */
}

.special-link {
  text-decoration: underline;
  color: #000; /* Cor do link, pode ser ajustada conforme a necessidade */
}

.special-link:hover {
  color: #007bff; /* Cor ao passar o mouse */
}

/* Linha separadora */
.divider {
    width: 100%;
    border: 0;
    height: 1px; /* Linha mais fina */
    background-color: #ccc;
}

/* Botão de download do PDF */
.download-button {
    display: inline-block;
    background-color: #d9534f;
    color: white;
    padding: 5px 10px; /* Botão de download mais compacto */
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px; /* Texto menor */
    margin-right: 40px;
}

/* Container para o botão de download */
.download-container {
    display: flex;
    justify-content: flex-end; /* Centraliza o botão à direita */
    margin: 10px 0; /* Espaço em cima e embaixo */
}

/* RECOMENAÇÕES */
  
.recommended-articles {
    background-color: #ffffff;
    padding: 20px;
    margin-top: 40px;
    width: 980px;
  }
  
  .recommended-articles h2 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .article-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .article-card {
    display: flex;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
  }
  
  .article-card:hover {
    transform: scale(1.02);
  }
  
  .article-card img {
    width: 550px; /* Largura fixa da imagem */
    height: 150px;
    border-radius: 5px;
    margin-right: 15px;
    object-fit: cover;
  }
  
  .article-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .article-card h3 {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
  }
  
  .article-card p {
    font-size: 1rem;
    color: #555;
    margin: 0;
  }
  
  .article-card a {
    color: #333;
    text-decoration: none;
  }
  
  .article-card a:hover {
    text-decoration: underline;
  }

@media (max-width: 420px) {

  .artigos h4 {
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: 0%;
  }
  
  .artigos p {
      font-size: 19px; /* tamanho da fonte */
      text-align: justify; /* Alinhamento justificado */
      text-indent: 0px; /* Recuo na primeira linha */
      line-height: 1.6; /* Espaçamento entre linhas */
      margin-bottom: 15px; /* Espaçamento entre parágrafos */
      margin-left: 15%;
      margin-right: 15%;
  }
    
    .artigos h2 {
        font-size: 30px;
        margin-bottom: 5px;
    }

    .artigosTituloIndice {
      font-size: 30px;
      margin-bottom: 5px;
      text-align: center;
      margin-left: 0%;
    }
    
    .artigos h3 {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    .artigos p {
        font-size: 17px; /* tamanho da fonte */
        text-align: justify; /* Alinhamento justificado */
        text-indent: 0px; /* Recuo na primeira linha */
        line-height: 1.6; /* Espaçamento entre linhas */
        margin-bottom: 15px; /* Espaçamento entre parágrafos */
        margin: 0%;
    }
    
    .p2 {
        font-size: 10px; /* tamanho da fonte */
        text-align: right; /* Alinhamento justificado */
        line-height: 1; /* Espaçamento entre linhas */
        margin-bottom: 15px; /* Espaçamento entre parágrafos */
    }
    
    .imgArtigo {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-bottom: 20px;
        border: 3px solid #fff;
    }
    
    .imgArtigo01 {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-bottom: 20px;
        border: 3px solid #fff;
    }
    
    .imgArtigo02 {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-bottom: 20px;
        border: 3px solid #fff;
    }

    .artigos {
        width: 100%;
        padding: 20px;
    }
    
    .img-left, .img-right {
        float: none;
        margin: 0 auto 20px auto;
        display: block;
        width: 100%;
    }

    .img-left {
        width: 100%;
        height: auto;
        object-fit: cover;
        float: none; /* Remova a flutuação */
        margin-right: 0px; /* Espaço entre a imagem e o texto */
        margin-bottom: 20px; /* Espaço embaixo da imagem */
        border: 3px solid #fff;
    }
    
    .img-right {
        width: 100%;
        height: auto;
        object-fit: cover;
        float: none; /* Remova a flutuação */
        margin-left: 0px; /* Espaço entre a imagem e o texto */
        margin-bottom: 20px;
        border: 3px solid #fff;
    }

    /* Header do artigo */
.header-artigo {
  text-align: center;
  margin-bottom: 20px;
}

.header-artigo h2 {
  font-size: 35px;
  margin-bottom: 5px;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
}

.header-artigo h1 {
font-size: 32px;
margin-bottom: 5px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}

.header-artigo h3 {
  font-size: 20px;
  margin-bottom: 0px;
  color: #665;
  text-align: left;
  margin-left: 60px;
  margin-right: 60px;
}

.indiceOracoes{
  text-align: left;
  margin-left: 10%;
  overflow: hidden;
}


.indiceOracoes .href-preto {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

    /* RECOMENAÇÕES */
  
.recommended-articles {
    background-color: #ffffff;
    padding: 20px;
    margin-top: 40px;
    width: 99%;
  }
  
  .recommended-articles h2 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .article-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .article-card {
    flex-direction: column; /* Faz a imagem e o conteúdo ficarem empilhados */
    text-align: center; /* Centraliza o texto no mobile */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
  }
  
  .article-card:hover {
    transform: scale(1.02);
  }
  
  .article-card img {
    width: 100%; /* Largura fixa da imagem */
    height: 150px;
    border-radius: 5px;
    margin-right: 15px;
    object-fit: cover;
    margin-bottom: 10px;
    
  }
  
  .article-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .article-card h3 {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
  }
  
  .article-card p {
    font-size: 1rem;
    color: #555;
    margin: 0;
  }
  
  .article-card a {
    color: #333;
    text-decoration: none;
  }
  
  .article-card a:hover {
    text-decoration: underline;
  }

}