/*===================================================
CONFIG
====================================================*/
.debug {outline: 2px solid red}

:root {
	
	/* Definições de cores */
	--primary-color: #ea771a;
	--secondary-color: #111;
	--verde: #3cc13f;
	
	--background-color: #f5f5f5;
	--text-color: #888;
	--accent-color: #e74c3c;

	/* Definições de fontes */
	--font-primary: 'Red Hat Display', Arial, sans-serif;
	--base-font-size: 15px;
	--heading-font-size: 1.7rem;
	--paragraph-font-size: 1rem;
}

/*===================================================
	BODY
====================================================*/
body{
	font-family:var(--font-primary);
}

.btn-primary {
	background:var(--primary-color);
	border:1px solid var(--primary-color);
}

.btn-primary:hover {
	background: var(--secondary-color);
	border:1px solid var(--secondary-color);
}


.btn-outline-primary {
	color:var(--primary-color);
	--bs-btn-border-color:var(--primary-color);
}

.btn-outline-primary:hover {
	background:var(--primary-color);
	border-color: var(--primary-color);
}

/*===================================================
	HEADER SITE
====================================================*/
.header-site {
	background: #FFF;
	padding:0 20px;	
	border-radius:100px;
	box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.2);
	z-index: 99;
	width:1000px;
	position: absolute;
	top:100px;
	left: 50%;
	transform: translate(-50%, -50%);
}
.logo {width: 100%; margin:13px 0 0 20px; padding:10px}


/*===================================================
	NAV SITE
====================================================*/
.nav-site a {
	color:var(--primary-color); 
	border-radius:20px; 
	font-weight: bold; 
	text-transform: uppercase;
	font-size:14px; 
	text-decoration: none; 
	padding:10px 15px; 
	transition: color .15s ease-in-out,
	background-color .15s ease-in-out,
	border-color .15s ease-in-out,
	box-shadow .15s ease-in-out;
}

.nav-site a:hover { color:#FFF;  background:var(--primary-color); }


/*===================================================
	SLIDE SITE
====================================================*/
.slide-site .owl-theme .owl-dots {  margin-top: -70px !important; position: relative; z-index: 9999; }
.slide-site  .owl-carousel .owl-stage-outer {padding:0;}

.slider {position: relative; top: 0; z-index: 20;}
.slider .item::before {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%);
	z-index: 1;
	pointer-events: none;
}

/*===================================================
	HOME PAGE
====================================================*/
.secao { padding:50px 0; }

.bg-01 {background:#EEE; }
.bg-02 {background:var(--primary-color); }
.bg-03 {background:url(../img/bgs/bg-03.png) repeat-x center top; }
.bg-04 {background:url(../img/bgs/bg-04.png) repeat-x center top; }

.bg-08 {background:#17345a; }



/*===================================================
	SECAO - Confira nossos destaques
====================================================*/
#destaques {padding:100px 0 50px}
/* #destaques .owl-stage-outer {padding:20px 15px; background: red;} */

#destaques .owl-theme .owl-nav { text-align: left; margin:0; padding:0}
#destaques .owl-theme .owl-nav [class*='owl-'] { color:var(--primary-color); }

#destaques .owl-theme .owl-nav [class*='owl-']:hover {background: transparent; color:var(--secondary-color);}

#destaques .owl-theme .owl-nav .owl-prev { font-size: 35px !important}
#destaques .owl-theme .owl-nav .owl-next { font-size: 35px !important}

#destaques .owl-carousel .item {transition: opacity 0.3s ease;}

#destaques .owl-carousel:hover .item { opacity: 0.5; }
#destaques .owl-carousel .item:hover { opacity: 1; }

/*===================================================
	SECAO NOVIDADES
====================================================*/
#novidades {background:#EEE}

.novidades-img-blog { position: relative; display: inline-block; width: 100%; max-width: 600px; margin:0 !important; padding:0 !important; }
.novidades-img-blog img { display: block; width: 100%; height: auto; object-fit: cover; z-index: 1;}

.novidades-img-blog::before {
	content: '';
	position: absolute;
	bottom:-15px;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(2,0,36);
	background: linear-gradient(0deg, rgba(234, 119, 26, 1) 0%, rgba(234, 119, 26, 0) 70%);
	z-index: 1;
	pointer-events: none;
}

.novidades-img-blog h4 { width:100%; font-size:20px; padding:25px; font-weight: bold; position: absolute; bottom: 0; z-index: 2; }
.novidades-img-blog h4 a { color:#FFF; text-decoration: none;}


/*===================================================
	SECAO NOSSA EQUIPE
====================================================*/
#equipe h2 {color:#FFF; margin:20px 0}
.avatar-vendedores { width:100%; height:230px; border-radius:230px; overflow: hidden; outline:3px solid red; }
.avatar-vendedores img {width:100%; height: auto; object-fit: cover;}



/*===================================================
	BANNER MEIO
====================================================*/
.banner-meio {
	text-align: center;
	padding:50px 0;
}



/*===================================================
	FOOTER
====================================================*/
footer[role="contentinfo"]{
	border-top:10px solid var(--primary-color);
	border-bottom:3px solid var(--primary-color);
	background:#FFF;
	padding:30px 0;
	margin-top:40px;
}

footer[role="contentinfo"] h5 {
	color:var(--secondary-color);
	text-transform: uppercase;
	font-size: 18px;
	font-weight: bold;
}

footer[role="contentinfo"] ul li {padding:5px 0}

footer[role="contentinfo"] ul li a {
	color:var(--secondary-color);
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
}
footer[role="contentinfo"] ul li a:hover { color:#FFF; background:var(--primary-color); }

/* COPY */
.copy {background:#FFF; color:#444; font-size:13px; padding:30px 0;}
.copy  strong {display: block;}



/*===================================================
	SIDEBAR
====================================================*/
.sidebar .widget {
	margin-bottom: 30px;
	background-color: #FFF;
	padding: 15px;
	border-radius: 5px;
/*	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
}
.sidebar .widget-title {
	font-size: 18px;
	font-weight: bold;
	color:var(--primary-color);
	margin-bottom: 15px;
	border-bottom: 2px solid var(--secondary-color);
	padding-bottom: 5px;
}
.sidebar .widget img {width: 100%; height: auto;}

.sidebar .widget a { color:var(--primary-color); text-decoration: none; font-size: 14px;}
.sidebar .widget a:hover {color: #005177; text-decoration: underline; }

.sidebar .widget ul {list-style-type: none; padding: 0; }
.sidebar .widget ul li { margin-bottom: 5px; }

.sidebar .widget .button {
	display: inline-block;
	background-color: #0073aa;
	color: #fff;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	border-radius: 3px;
	font-size: 16px;
}
.sidebar .widget .button:hover { background-color: #005177; }



/*===================================================
	OWL CAROUSEL
====================================================*/
.owl-carousel .owl-stage-outer { padding:25px 0; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: var(--secondary-color); }
.owl-theme .owl-dots .owl-dot span { background:#999; }
















/*===================================================
	PAGES AND SINGLES
====================================================*/
.page, .category { background: var(--background-color); }
.page, .single { background: var(--background-color); }

.boxes-entry {	
	background-color: #FFF;
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.info {
	border-top:2px solid #EEE;
	border-bottom:2px solid #EEE;
	padding:5px 0;
	margin-block:10px;
}
.info a {color:#222; font-size:14px; background: none !important; text-transform: uppercase;}

/*===================================================
	ARCHIVES AND CATEGORIES
====================================================*/

.title-for-page {
	text-align: center;
	padding:10px 0 30px 0;
	font-size:var(--heading-font-size);
	color:var(--primary-color);
	font-weight: bold;
	line-height: 1.5;
}

.title-for-page h1 {font-size:50px}

.title-for-page span{
	background:var(--secondary-color);
	width:13%;
	height: 5px;
	display:block;
	border-radius:200px;
}

.category-description {color:#666; font-weight: normal; width:680px; margin: 0 auto; font-size:17px; }

/* Header For Page */
.header-for-page { width:100%; height:350px; margin-bottom:20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.header-for-page::before { content: ''; position: absolute; left: 0; width: 100%; height: 100%; background: rgb(0,0,36); background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%); z-index: 1; pointer-events: none; }

body.page .header-for-page { background:url(../img/bgs-for-pages/01.jpg) repeat-x center top; }
body.single .header-for-page { background:url(../img/bgs-for-pages/02.jpg) repeat-x center center; background-size:cover;}
body.category .header-for-page { background:url(../img/bgs-for-pages/03.jpg) repeat-x center center; background-size:cover; }
body.page-id-2 .header-for-page { background:url(../img/bgs-for-pages/04.jpg) repeat-x center center; }

body.category-cases .header-for-page { background:url(../img/bgs-for-pages/bg_piscina_05.png) repeat-x center top; }

/*===================================================
	ENTRY CONTENT - Estilos para os conteúdos
====================================================*/
.entry-content {
	color: #333;	
	font-family: Arial, sans-serif;
	font-size: 18px;
	line-height: 1.7;
}

.entry-content h1 { 
	color: var(--primary-color);
	font-weight: bold;
	font-size: 35px; 
}

.entry-content h2, 
.entry-content h3, 
.entry-content h4, 
.entry-content h5, 
.entry-content h6 {
	color:var(--secondary-color);
	margin-top: 30px;
	margin-bottom: 15px;
	line-height: 1.2;
	border-bottom:1px solid #EEE;
}

.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 24px; }
.entry-content h4 { font-size: 20px; }
.entry-content h5 { font-size: 18px; }
.entry-content h6 { font-size: 16px; }

.entry-content p { margin-bottom: 20px; }

.entry-content a {
	background:#EEE;
	padding:0 10px;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.entry-content a:hover { color: #005177; border-color: #005177;}

.entry-content ul, .entry-content ol {padding-left: 40px; margin-bottom: 20px; }
.entry-content ul li, .entry-content ol li {margin-bottom: 5px; line-height: 1.5; }

.entry-content ul {list-style-type: disc; } 
.entry-content ol {list-style-type: decimal; }

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.entry-content .alignleft {float: left; margin-right: 20px; margin-bottom: 20px; }
.entry-content .alignright {float: right; margin-left: 20px; margin-bottom: 20px; }

.entry-content blockquote {background:#EEE; font-style: italic; color: #555; border-left: 5px solid var(--secondary-color); padding:10px 20px; margin: 30px 0; }

.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.entry-content table th,
.entry-content table td {padding: 12px; border: 1px solid #ddd; text-align: left;}
.entry-content table th { background-color: #f8f8f8; font-weight: bold; }

.entry-content pre { background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; margin-bottom: 20px; }
.entry-content code { background-color: #f4f4f4; padding: 2px 5px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; }
.entry-content iframe, .entry-content embed, .entry-content video { max-width: 100%; height: auto; margin-bottom: 20px; border-radius: 5px; }

.entry-content .btn {
	display: inline-block;
	background-color: #0073aa;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 5px;
	transition: background-color 0.3s ease;
}
.entry-content .btn:hover { background-color: #005177; }

.entry-content .aligncenter { text-align: center; margin-bottom: 20px; }
.entry-content .alignright { text-align: right; }
.entry-content .alignleft { text-align: left; }

@media (max-width: 768px) {
	.entry-content { padding: 15px; }

	.entry-content h1 { font-size: 28px; }
	.entry-content h2 { font-size: 24px; }
	.entry-content h3 { font-size: 20px; }
}


















/*===================================================
	ARRUMAR
====================================================*/

.logo-parceiros {border:1px solid #eee; padding:20px; background: #FFF; border-radius:10px}
.logo-parceiros img {width: 100%;height: auto;}


.border-color {padding:20px}
.border-color img {
	width: 100%;
	height: auto;
	border-radius:30px;
	box-shadow:9px 8px 0 var(--secondary-color);
	overflow: hidden;
	border-left:8px solid #FFF;
	border-top:8px solid #FFF;
}

.paragrafo-branco {
	color:#FFF;
	font-size:18px;
	line-height:26px;
}

.btn-whats-vendas {
	color:#FFF;
	font-size:15px;
	padding:10px 40px;
	background:var(--secondary-color);
	border-radius:100px;
}

.btn-whats-vendas:hover {
	color:#FFF;
	background:var(--verde);
}

.btn-outline-tema {
	color: var(--primary-color);
	border:1px solid var(--primary-color);
}
.btn-outline-tema:hover {
	color: #FFF;
	background:var(--secondary-color);
	border:1px solid #FFF;
}

.btn-outline-black { color: #111; border:3px solid #111; }
.btn-outline-black:hover { color: #FFF; border:3px solid #FFF; background:#111; }





.hds-boxes {
	background-color: #f5f5f5;
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.boxes {
	background:#FFF;
	border-radius:30px;
	overflow: hidden;
	box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.2);
}
.boxes h3 {
	font-size:20px;
	text-align: center;
	padding:25px;
	font-weight: bold;
}
.boxes h3 a {
	color:var(--primary-color);
	text-decoration: none
}
.titulo-secao {
	font-size:var(--heading-font-size);
	color:var(--primary-color);
	font-weight: bold;
	line-height: 1.5;
}
.titulo-secao span{
	background:var(--secondary-color);
	width:13%;
	height: 5px;
	display:block;
	border-radius:200px;
}
.titulo-branco {color:#FFF;}











/*===================================================
	Comentários
====================================================*/
.comments-area {
	/*margin-top: 40px;
	padding: 20px;
	background-color: #f8f9fa;
	border-radius: .25rem;
	border: 1px solid #dee2e6;*/
}

/* Título dos Comentários */
.comments-title {
	color:var(--primary-color);
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 20px;
}

/* Lista de Comentários */
.comment-list {
	list-style: none;
	padding: 0;
}

.comment {
	background:#f8f9fa;
	padding: 20px;
	border-bottom: 1px solid #dee2e6;
	display: flex;
	gap: 15px;
	margin-bottom:15px;
}

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

.comment-body { flex-grow: 1; }

.comment-author .rounded-circle {
	width: 50px;
	height: 50px;
}

/* Nome do Autor e Metadados */
.comment-author b.fn {
	color:#777;
	font-size: 1.4rem;
}

.comment-meta {
	font-size: 0.875rem;
	color: #777;
}

/* Conteúdo do Comentário */
.comment-content {
	margin-top: 10px;
	font-size: 1rem;
	line-height: 1.6;
}

/* Botão de Responder */
.reply .btn-outline-primary {
	font-size: 0.875rem;
	margin-top: 10px;
}

/* Formulário de Resposta */
.comment-respond {
	margin-top: 40px;
	padding: 20px;
	background-color: #f1f3f5;
	border-radius: .25rem;
	border: 1px solid #ced4da;
}

/* Título do Formulário de Resposta */
.comment-reply-title {
	font-size: 1.25rem;
	font-weight: bold;
	color: #343a40;
	margin-bottom: 20px;
}

/* Campos do Formulário */
.comment-form .form-group {
	margin-bottom: 1rem;
}

.comment-form label {
	font-weight: 500;
}

.comment-form .form-control {
	border-radius: .25rem;
}

/* Botão de Envio */
.comment-form .btn-primary {
	background-color: #007bff;
	border-color: #007bff;
	font-weight: bold;
}