/*
Theme Name: Circular-ESG
Theme URI: http://exemplo.com/circular-esg
Author: Seu Nome
Author URI: http://seuwebsite.com
Description: Tema baseado no design Circular-ESG, com foco em sustentabilidade e práticas ESG.
Version: 1.0
License: GPL2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: circular-esg
Tags: responsive, bootstrap, sustainability, esg
*/

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');

body {
    background-color: #397662;
    color: #fff;
    font-family: 'Arial', sans-serif;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	background-image: url('https://sustentay.com.br/wp-content/uploads/2025/03/circle-img.png');
	background-size: cover;
    background-position: center 33%;
	background-repeat: no-repeat;
}

@media (max-width: 768px) {
    body {
        height: auto; /* Remove o height fixo */
        width: auto;  /* Remove o width fixo */
		overflow: visible;
    }
}
/*
.semi-circle {
	position: absolute;
	width: 135vw;
	height: 150vw;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}
*/
.header-logo img {
    max-width: 150px;
}

.main-content {
    padding: 40px;
    text-align: center;
}

footer {
    background-color: #34495E;
    padding: 20px;
    text-align: center;
    color: #ecf0f1;
}

/* Estilo para os links do menu */
#navbar .nav-link {
    color: white; /* Cor branca para os itens do menu */
    font-weight: bold;
    margin-right: 20px; /* Espaçamento entre os links */
    text-transform: uppercase; /* Letras maiúsculas */
}

#navbar .nav-link:hover {
    color: #F39C12; /* Cor de hover */
}

/* Ajustando o layout do menu para ficar lado a lado */
#navbarNav {
    display: flex;
    align-items: center;
	color: white!important;
	text-transform: uppercase;
}

#navbarNav a {
    color: white !important; /* Remover a cor azul do link */
    text-decoration: none !important; /* Remover o sublinhado do link */
}

#navbarNav .current-menu-item a {
    font-weight: bold !important; /* Deixa o texto em negrito */
}

#navbarNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#navbarNav li {
    margin-right: 20px; /* Espaço entre os itens */
}

#navbarNav li:last-child {
    margin-right: 0; /* Remove o último espaçamento */
}

#navbarNav .current_page_item {
    font-weight: bold !important; /* Deixa o texto em negrito */
}

#navbar {
    background-color: transparent !important; /* Remover o fundo */
}

#navbarNav, .bg-success {
    background-color: transparent !important; /* Garantir que o menu também tenha fundo transparente */
	/*margin-top: 1%;*/
}


/* Estilo para os itens do menu */
.navbar-nav {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-link {
    color: white !important; /* Cor branca para o texto */
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 15px;
}

.nav-link:hover {
    color: #F39C12; /* Cor de hover */
}

.conexao-item {
    margin-top: 10px; /* Recuo acima do botão */
}

/* Estilo específico para o botão Conexão */
.btn-conexao {
    background: linear-gradient(135deg, #7419f7 0%, #65ff67 100%); /* Gradiente de verde e azul */
    color: white;
    padding: 8px 16px;
    border-radius: 25px; /* Borda arredondada */
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
	margin-top: 15px;
    margin-left: 50px;
}

/* Efeito de hover no botão */
.btn-conexao:hover {
    background: linear-gradient(135deg, #65ff67 0%, #7419f7 100%);
}


/* Page-Teste*/
/* Personalizando o Carrossel */
.carousel-indicators button {
    background-color: #fff; /* Cor branca para os pontinhos */
    border-radius: 50%; /* Torna os pontinhos redondos */
    width: 12px; /* Tamanho dos pontinhos */
    height: 12px; /* Tamanho dos pontinhos */
    opacity: 0.7;
}

.carousel-indicators .active {
    background-color: #397662; /* Cor do ponto ativo (quando o slide está visível) */
}

.carousel-inner img {
    width: 100%;
    height: auto;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: black;
}

.text-center img {
    margin-bottom: 20px;
}

.container {
    padding: 0 0;
}
/* fim - Page-Teste*/


/* inicio - Page-Proposito */
/* Estilo do título principal */
.main-title {
    font-size: 33px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-align: right; /* Alinha o título mais à direita */
}

/* Estilo para a primeira coluna (Texto e Linha Lateral) */
.title {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.description {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
}

.col-md-8 .description {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
    position: relative; /* Necessário para o posicionamento do círculo */
    padding-left: 30px; /* Espaçamento para garantir que o texto não sobreponha o círculo */
    z-index: 1; /* Coloca o texto acima do círculo */
}

/* Criando o círculo atrás do texto */
.col-md-8 .description::before {
    content: '';
    position: absolute;
    top: 58%;
    left: 0;
    transform: translateY(-50%);
    width: 104%;
    height: 112%;
    background-color: #397662;
    border-radius: 50%;
    z-index: -1;
}

/* Estilo para as imagens com nome sobreposto na parte inferior */
.image-container {
    position: relative;
    margin-bottom: 20px;
}

.image-container img.image {
    width: 100%; /* A imagem ocupa 100% da largura da coluna */
    height: 300px; /* A altura da imagem é fixa para garantir que todas as imagens fiquem do mesmo tamanho */
    object-fit: cover; /* Ajusta a imagem para cobrir a área da coluna sem distorcer */
    border-radius: 5px;
}

.image-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro para melhorar a visibilidade do texto */
    padding: 5px 15px;
    border-radius: 5px;
    top: 235px;
}

.image-overlay h3 {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
}

.image-container p.description {
    text-align: justify;
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
}

/* Responsividade */
@media (max-width: 768px) {
    .title {
        text-align: center;
    }

    .image-container {
        margin-bottom: 15px;
    }

    .image-overlay {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 10px;
    }

    .image-container img.image {
        width: 80%; /* Reduzir o tamanho da imagem em dispositivos móveis */
        height: auto; /* Ajustar a altura das imagens para telas menores */
    }
	
	.side-line {
		display: none;
	}
	
	.image-overlay {
		position: absolute;
		left: 42%;
		background-color: transparent;
		text-align: center;
		color: #fff;
		top: 63%;
	}
	
	.col-md-8 .description {
		font-size: 16px;
		color: #fff;
		line-height: 1.6;
	}

	.col-md-8 .description::before {
        content: none;
    }
	
}
/* fim - Page-Proposito */

/* inicio - Page-trilhas */
/* Estilo para o título das trilhas */
.title-trilhas {
	text-align: left;
    font-size: 60px;
    font-weight: bold;
    text-transform: uppercase;
    color: white; /* Cor do texto geral */
    margin-bottom: 30px; /* Espaçamento inferior */
}

.sustent-trilhas {
    color: #9fcfbb; /* Cor verde clara para "SUSTEN" */
    margin-right: 5px; /* Ajuste de espaçamento entre as palavras */
}

.tay-trilhas {
    color: #9fcfbb; /* Cor mais escura para "TAY" */
}


/* Estilo para o texto à direita do título */
.text-trilhas {
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    text-align: justify;
}

/* Estilo para as colunas de 3 itens por linha */
.row {
    margin-top: 30px;
}

/* Estilo para o item-trilhas-trilhas com a imagem de fundo */
.item-trilhas-trilhas {
    display: flex;
    align-items: center;
    background-image: url('https://sustentay.com.br/wp-content/uploads/2025/03/fundo-circle-retangle.png');
    background-position: center;
    padding: 15px;
    border-radius: 10px; 
    margin-bottom: 30px;
    color: #fff;
}

/* Estilo para a imagem retangular à esquerda */
.circle-img-trilhas {
    width: 100px; /* Largura da imagem retangular */
    height: 70px; /* Altura da imagem retangular */
    object-fit: cover; /* Ajusta a imagem para cobrir a área sem distorcer */
    margin-right: 66px; /* Espaço entre a imagem e o texto */
}

/* Estilo para o texto dentro do container */
.text-trilhas-trilhas {
    font-size: 18px;
	font-weight: bold;
    color: #164938;
    text-align: left;
    margin: 0; /* Remove o margin padrão dos parágrafos */
}


@media (max-width: 768px) {
    .col-md-4 {
        width: 100%; /* Faz com que as colunas ocupem 100% da largura em telas pequenas */
    }
	.circle-img-trilhas {
		margin-right: 99px;
	}
}

/* fim - Page-trilhas */

/* inicio - Page-parceiro */
/* Estilo geral para a página Parceiro */
.page-parceiro {
    background-color: #397662; /* Cor de fundo padrão */
    color: #fff;
    font-family: 'Arial', sans-serif;
    padding: 30px;
}

/* Coluna 1 - Imagem, Subtítulo e Lista */
.subtitle-parceiro {
    color: #e7ffea; /* Cor para o subtítulo */
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
}

.list-parceiro {
    margin-top: 20px;
    padding-left: 20px;
    list-style-type: disc;
}

.list-parceiro li {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

/* Coluna 2 - Título, Parágrafo e Imagens */
.title-parceiro {
    color: #e7ffea; /* Cor para o título */
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.text-parceiro {
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Estilo para as imagens na coluna direita */
.row-parceiro img {
    border-radius: 5px;
}

/* Adicionando fundo retangular para as imagens */
.image-container-parceiro {
    background-color: #e7ffea; /* Cor do fundo retangular */
    padding: 5px; /* Espaçamento em torno das imagens */
    border-radius: 10px; /* Bordas arredondadas */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsividade */
@media (max-width: 768px) {
    .col-md-6 {
        margin-bottom: 20px;
    }

    .subtitle-parceiro {
        text-align: center;
    }

    .title-parceiro {
        font-size: 28px;
        text-align: center;
    }

    .text-parceiro {
        font-size: 14px;
    }
}

/* fim - Page-parceiro */


/* inicio - Page-conexao */
/* Estilo do formulário */
.form-group label {
    color: #fff;
    font-weight: bold;
}

.form-control-conexao {
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.page-btn-conexao {
    background-color: #e7ffea; /* Cor do botão */
    color: #397662;
    border: none;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 25px;
    width: auto;
    cursor: pointer;
    transition: background 0.3s ease;
}

.page-btn-conexao:hover {
    background-color: #397662;
    color: #fff;
}

/* Estilo geral para a página Conexão */
.page-conexao {
    background-color: #397662; /* Cor de fundo padrão */
    color: #fff;
    font-family: 'Arial', sans-serif;
    padding: 30px;
}

/* Títulos da página */
.title-conexao {
    color: #e7ffea; /* Cor para os títulos */
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Texto explicativo abaixo do título */
.text-conexao {
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Estilo das redes sociais */
.social-links-conexao {
    margin-top: 20px;
}

.social-links-conexao .row {
    margin-bottom: 15px;
}

.social-img-conexao {
    width: 85px; 
    margin-right: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.social-title-conexao {
    font-weight: bold;
    color: #e7ffea; 
    font-size: 18px;
	margin-bottom: 1px;
}

.social-url-conexao {
    color: #fff;
    font-size: 14px;
}

/* Responsividade */
@media (max-width: 768px) {
    .col-md-6 {
        margin-bottom: 20px;
    }

    .title-conexao {
        font-size: 28px;
        text-align: center;
    }

    .text-conexao {
        font-size: 14px;
    }

    .social-img-conexao {
        width: 30px;
        height: 30px;
    }

    .social-title-conexao {
        font-size: 16px;
    }

    .social-url-conexao {
        font-size: 12px;
    }
}

/* fim - Page-conexao */


/* inicio - Page-Blog */
/* Estilo geral da página do Blog */
.page-blog {
    background-color: #397662; /* Cor de fundo */
    color: #fff;
    font-family: 'Arial', sans-serif;
}

/* Banner do Blog */
.banner-blog {
    position: relative;
    margin-bottom: 30px;
}

.banner-blog img {
    width: 100%;
    height: auto;
}

.banner-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.banner-subtitle {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: white;
    text-align: center;
}

/* Estilo das postagens */
.post-item {
    background-color: #e7ffea;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.post-link {
    text-decoration: none;
    color: #333;
}

.post-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

.post-title {
    font-size: 18px;
    font-weight: bold;
    color: #397662;
    margin-top: 15px;
}

.post-date {
    font-size: 14px;
    color: #6c757d;
    margin-top: 5px;
}

/* Estilo para o conteúdo da postagem */
.post-content-single {
    background-color: #fff;
    color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

/* Estilo para o título da postagem */
.post-title-single {
    font-size: 36px;
    font-weight: bold;
    color: #397662;
    margin-bottom: 15px;
}

/* Estilo para a data da postagem */
.post-date-single {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 20px;
}

/* Estilo para a imagem destacada */
.post-thumbnail-single img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Estilo para o corpo do conteúdo da postagem */
.post-body-single {
    font-size: 16px;
    line-height: 1.8;
}

/* Estilo para a navegação de postagens */
.post-navigation-single {
    margin-top: 20px;
    text-align: center;
}

.post-navigation-single a {
    margin: 0 10px;
    font-weight: bold;
    color: #397662;
    text-decoration: none;
}

.post-navigation-single a:hover {
    text-decoration: underline;
}


/* Estilo para a sidebar */
.widget {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.widget-title-single {
    font-size: 24px;
    font-weight: bold;
    color: #397662;
    margin-bottom: 20px;
}

/* Estilo para a lista de categorias */
.widget-categories ul {
    list-style: none;
    padding-left: 0;
}

.widget-categories ul li {
    font-size: 16px;
    color: #397662;
}

.widget-categories ul li a {
    text-decoration: none;
    color: #397662;
}

.widget-categories ul li a:hover {
    text-decoration: underline;
}

/* Estilo para as últimas postagens */
.widget-recent-posts ul {
    list-style: none;
    padding-left: 0;
}

.widget-recent-posts ul li {
    font-size: 16px;
    margin-bottom: 10px;
}

.widget-recent-posts ul li a {
    text-decoration: none;
    color: #397662;
}

.widget-recent-posts ul li a:hover {
    text-decoration: underline;
}

.recent-post-date {
    font-size: 14px;
    color: #6c757d;
}


/* Responsividade */
@media (max-width: 768px) {
    .post-item {
        margin-bottom: 15px;
    }

    .post-title {
        font-size: 16px;
    }

    .post-date {
        font-size: 12px;
    }
}

/* Estilo para a página de categoria */
.category-title-single {
    font-size: 36px;
    font-weight: bold;
    color: #397662;
    margin-bottom: 20px;
}

/* Estilo para a descrição da categoria */
.category-description {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 30px;
}

/* Estilo para cada postagem na categoria */
.category-posts .post-item {
    margin-bottom: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.category-posts .post-item h2 {
    font-size: 24px;
    color: #397662;
}

.category-posts .post-item .post-date-single {
    font-size: 14px;
    color: #6c757d;
}

.category-posts .post-item .post-thumbnail-single img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.category-posts .post-item .post-excerpt-single {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a {
    margin: 0 5px;
    padding: 10px 15px;
    background-color: #397662;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #65ff67;
}


/* fim - Page-blog */


/* Estilo para os links nas páginas */
.text-trilhas-trilhas {
    text-decoration: none; 
    color: #397662; 
    font-size: 16px;
    font-weight: bold;
    display: block; 
    padding: 5px 0;
	text-transform: uppercase;
}

/* Adiciona underline ao passar o mouse */
.text-trilhas-trilhas:hover {
    text-decoration: underline;
    color: #7419f7; /* Cor ao passar o mouse */
}