/* Global/general components */
.formulario-search {
  width: 100%;
  max-width: 600px;
  position: relative;
  z-index: 111;
}
.formulario-search .boxLoading {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 11px;
  top: 9px;
}
.formulario-search .boxLoading svg {
  width: 100%;
  height: auto;
}

.formulario-search input[name="search"] {
  background: #f7f7f7;
  border: 1px solid #c4c4c4;
  box-shadow: none;
  color: #787878;
  transition: all 0.5s;
  padding: 8px 12px;
  height: 50px;
  border-radius: 4px;
  width: 100%;
}

.formulario-search #result {
  position: absolute;
  border-radius: 6px;
  box-shadow: 0px 1px 4px -2px black;
  padding-bottom: 0.34rem !important;
  overflow-y: scroll;
  max-height: 300px;
  width: 100%;
  padding: 7px 7px 0 !important;
  background: white;
}

.formulario-search #result a.post-item-search {
  position: relative;
  display: grid;
  align-items: center;
  color: black;
  text-decoration: none !important;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 3px;
  margin-bottom: 7px;
}

.formulario-search #result a.post-item-search .thumbnail img {
  width: 100%;
  border-radius: 3px;
}

.formulario-search #result a.post-item-search .content {
  padding: 2px 7px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.formulario-search #result a.post-item-search .content h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.formulario-search #result a.post-item-search .content .categories-search span {
  font-size: 10px;
  padding: 2px 5px 4px;
  margin: 2px;
}

.d-none {
  display: none;
}

/* Others */
.w-layout-grid {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

.nf-form-content input.ninja-forms-field {
  height: 45px;
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #e8e8e8;
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff !important;
  border: 2px solid #e8e8e8 !important;
}

.nf-form-content textarea.ninja-forms-field,
.nf-form-content input.ninja-forms-field {
  border-style: solid;
  border-width: 2px;
  border-color: #e8e8e8;
  display: block;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff !important;
  border: 2px solid #e8e8e8 !important;
}
.nf-form-content textarea.ninja-forms-field::-webkit-input-placeholder,
.nf-form-content input.ninja-forms-field::-webkit-input-placeholder {
  /* Edge */
  text-transform: uppercase;
}

.nf-form-content textarea.ninja-forms-field:-ms-input-placeholder,
.nf-form-content input.ninja-forms-field:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  text-transform: uppercase;
}

.nf-form-content textarea.ninja-forms-field::placeholder,
.nf-form-content input.ninja-forms-field::placeholder {
  text-transform: uppercase;
}

.nf-form-content,
.nf-multi-cell .nf-cell {
  padding: 0 !important;
}

.nf-form-cont form button,
.nf-form-cont form input[type="button"],
.nf-form-cont form input[type="submit"] {
  padding: 12px 60px;
  border-style: solid;
  border-width: 2px;
  border-color: #e8472c !important;
  border-radius: 5px;
  background-color: #e8472c !important;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 auto;
}
.nf-form-cont form input[type="button"]:hover {
  border-width: 2px solid #e8472c !important;
  background-color: transparent !important;
  color: #e8472c;
}

.nf-form-cont form .label-above .nf-field-label,
.nf-form-cont form .label-below .nf-field-label,
.nf-form-cont form .label-hidden .nf-field-label {
  display: none;
}

#ninja_forms_required_items,
.nf-field-container {
  line-height: 0 !important;
  margin: 0 !important;
}
.label-above .field-wrap,
.label-below .field-wrap {
  padding: 0 !important;
}

div#nf-field-4-container {
  margin-bottom: 0;
}

.nf-error-msg,
.ninja-forms-req-symbol {
  font-size: 14px;
  text-align: center;
}

.nf-error .nf-error-msg {
  display: none !important;
}

.nf-form-fields-required {
  display: none;
}

.nf-form-cont form label {
  display: none;
}

div#nf-field-5-container {
  width: 96%;
}

.alignright {
  float: right;
}
.alignleft {
  float: left;
}

.pagination {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin-top: 30px;
}
.btn-voltar {
  background: #e8e8e8 !important;
  padding: 3px 15px 2px 15px !important;
  border-radius: 5px !important;
  color: #333333 !important;
  font-weight: 600;
  margin-top: 3px;
}

.pager .page {
  background: #e8e8e8 !important;
  padding: 4px 10px 4px 10px !important;
  border-radius: 5px !important;
  color: #333333 !important;
  font-weight: 400;
  margin: 3px 2px 0;
}
span.page.current {
  color: darkgrey !important;
}
a.prev.page,
a.next.page {
  border-color: #e8472c !important;
  border-radius: 5px;
  background-color: #e8472c !important;
  color: white !important;
}

span.page-numbers.dots {
  display: none;
}
span.page-numbers.current,
a.page-numbers {
  display: none;
}
a.prev.page-numbers {
  display: block;
}
a.next.page-numbers {
  display: block;
}

.item-portfolio.grande {
  width: 60%;
  margin: 6px 0.5%;
  float: left;
  height: 350px;
}

a.item-portfolio.pequeno {
  width: 38%;
  margin: 6px 0.5%;
  float: left;
  height: 350px;
}

a.item-portfolio.col-3 {
  width: 32.333%;
  margin: 6px 0.5%;
  float: left;
  height: 250px;
}

.item-portfolio .grid-content-overlay {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.item-portfolio .grid-content-overlay:hover {
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media screen and (max-width: 767px) {
  a.item-portfolio {
    width: 100% !important;
    margin: 6px 0 !important;
    height: 200px !important;
  }
}

.latest-posts {
  margin-bottom: 4rem;
}

.latest-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media screen and (max-width: 767px) {
  .latest-posts-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }
}

.post-preview {
  text-align: start;
}

.post-preview a {
  color: inherit;
}

.post-preview__img {
  max-width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.post-preview__title {
  font-size: 22px;
  margin: 0;
  margin-bottom: 1rem;
}

.post-preview .post-preview__img-container {
  position: relative;
}

.post-preview .post-preview__category {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 20px;
  margin-left: 20px;
  background: #e8472c;
  padding: 4px 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  line-height: normal;
}

.post-preview__date {
  font-size: 12px;
  margin-top: 1rem;
}

.two-columns-posts {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 3rem;
}

.two-columns-posts .categories {
  display: flex;
  flex-direction: column;
  text-align: start;
}

.two-columns-posts .categories .categories-list {
  display: flex;
  flex-direction: column;
  text-align: start;
  gap: 0.5rem;
}

.two-columns-posts .categories .categories-list .categories-list__item {
  padding: 12px 20px;
  border: solid #e6e6e6 1px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-preview--horizontal {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem;
}

.post-preview__excerpt {
  font-size: 14px;
}

.two-columns-posts-title {
  font-size: 24px;
}

.latest-posts-title {
  font-size: 24px;
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
}

.posts-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (max-width: 767px) {
  .two-columns-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .post-preview--horizontal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.categories-list__item-decor {
  display: inline-block;
  width: 16px;
  border: solid 1px #e8472c;
  transition: all ease-in-out 200ms;
}

.two-columns-posts .categories .categories-list .categories-list__item:hover .categories-list__item-decor {
  width: 28px;
}

/* Estilos gerais para o formulário com a classe .iagente-form */
.iagente-form {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 30px auto; /* Centraliza o formulário na página */
}

/* Estilos para rótulos (labels) dentro de .iagente-form */
.iagente-form label {
    display: block; /* Garante que cada label ocupe sua própria linha */
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

/* Estilos para campos de texto, email, senha e outros inputs dentro de .iagente-form */
.iagente-form input[type="text"],
.iagente-form input[type="email"],
.iagente-form input[type="password"],
.iagente-form input[type="number"],
.iagente-form textarea,
.iagente-form select {
    width: 100%; /* Ocupa a largura total menos o padding */
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Garante que o padding não aumente a largura total */
    font-size: 16px;
    color: #333333;
}

/* Estilo para textareas (caixas de texto multi-linha) dentro de .iagente-form */
.iagente-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    min-height: 100px;
}

/* Estilos para o botão de envio dentro de .iagente-form */
.iagente-form button[type="submit"],
.iagente-form input[type="submit"] {
    background-color: #4CAF50; /* Cor de fundo verde */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%; /* Ocupa a largura total */
    transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
}

.iagente-form button[type="submit"]:hover,
.iagente-form input[type="submit"]:hover {
    background-color: #45a049; /* Cor mais escura ao passar o mouse */
}

/* Estilos para campos de seleção (dropdowns) dentro de .iagente-form */
.iagente-form select {
    appearance: none; /* Remove o estilo padrão do navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.2c-5%200-9.3%203.3-11.4%207.7-2.1%204.3-1.6%209.5%201.5%2013.7l132.8%20132.8c3.2%203.2%207.1%204.8%2011.1%204.8s7.9-1.6%2011.1-4.8l132.8-132.8c3.1-4.2%203.6-9.4%201.5-13.7z%22%2F%3E%3C%2Fsvg%3E'); /* Ícone de seta */
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 12px;
}

/* Estilos para caixas de seleção (checkboxes) e botões de rádio dentro de .iagente-form */
.iagente-form input[type="checkbox"],
.iagente-form input[type="radio"] {
    margin-right: 8px;
}

/* Agrupamento de elementos (por exemplo, para checkboxes/radio buttons) dentro de .iagente-form */
.iagente-form .form-group {
    margin-bottom: 15px;
}

.iagente-form .form-group label {
    display: inline-block; /* Mantém o label na mesma linha para checkboxes/radio */
    margin-bottom: 0;
}

/* Estilos para mensagens de erro (opcional) dentro de .iagente-form */
.iagente-form .error-message {
    color: #d9534f; /* Vermelho */
    font-size: 14px;
    margin-top: -10px; /* Ajuste para ficar próximo ao campo */
    margin-bottom: 10px;
}

/* Estilos para campos em foco (quando o usuário clica) dentro de .iagente-form */
.iagente-form input:focus,
.iagente-form textarea:focus,
.iagente-form select:focus {
    border-color: #007bff; /* Borda azul mais clara */
    outline: none; /* Remove o contorno padrão do navegador */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra suave */
}