/*
Theme Name: Diniz
Author: XProud
Version: 1.0
*/

  @import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Montserrat:wght@400;700;900&display=swap');

  a {
      text-decoration: none
  }

  a:hover {
      text-decoration: none;
  }

  ol,
  ul {
      list-style: none
  }

  a,
  article,
  blockquote,
  body,
  dd,
  div,
  dl,
  dt,
  em,
  fieldset,
  footer,
  form,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  header,
  html,
  video,
  img,
  label,
  legend,
  li,
  main,
  nav,
  ol,
  p,
  section,
  span,
  ul {
      margin: 0;
      padding: 0;
      border: 0
  }

  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul {
      font-size: 1em;
      font-weight: 400
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Montserrat', sans-serif;
      font-size: 16px;
      font-weight: 400;
      color: #013D53;
      box-sizing: border-box;
      overflow-x: hidden;
  }

  body h1,
  body h2,
  body h3,
  body h4 {
      font-family: 'Montserrat', sans-serif;
  }

  .container {
      max-width: 1440px;
      margin: 0 auto;
  }

  .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
  }

  .center {
      justify-content: center;
  }

  .gap {
      gap: 30px;
  }

  .wrap {
      flex-wrap: wrap;
  }

  .between {
      justify-content: space-between;
  }

  .between {
      justify-content: space-between;
  }

  header .barra-topo {
      background: #59310e;
      padding: 15px 0;
      color: #fff;
  }


  header .barra-topo .container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 30px;
  }

  header .barra-topo .container p {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
  }

  header .barra-topo .container a {
      color: #fff;
      transition: all 0.3s;
  }

  header .barra-topo .container a:hover {
      color: #f5f5d2;
  }

  header .flex {
      gap: 20px;
  }

  .uk-offcanvas-bar img {
      margin-bottom: 20px;
  }

  header {
      background: #f5f5d2;
  }

  header .menu {
      padding: 15px 0;
  }

  nav a {
      color: #000000;
      font-weight: 600;
  }

  nav a:hover {
      color: #59310e;
  }


  .uk-offcanvas-bar .uk-navbar-dropdown {
      width: fit-content;
      padding: 0;
      background: none;
      color: #898989;
      box-shadow: none;
  }

  .vendedores {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
  }

  .vendedores a {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      background: #2e8069;
      padding: 10px 30px;
      color: #fff;
      border-radius: 10px;
      transition: all 0.3s;
  }

  .vendedores a:hover {
      background: #fff;
      color: #2e8069;
  }

  main {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(images/foto-topo.jpeg);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 100px 0 0;
      text-align: center;
  }

  h1 {
      color: #fff;
      font-size: 3.4rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  main h2 {
      color: #fff;
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  main ul {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      max-width: 1200px;
      margin: 100px auto 0;
      padding: 20px 50px;
      color: #fff;
  }

  main li {
      min-width: 250px;
  }

  main .divisor {
      height: 80px;
      width: 2px;
      background: #5a7131;
      flex-shrink: 0;
  }

  #quemsomos {
      padding: 50px 0;
  }

  #quemsomos .foto {
      position: relative;
  }

  #quemsomos .foto img {
      aspect-ratio: 1;
      max-width: 500px;
      border-radius: 10px;
  }


  #quemsomos h2 {
      color: #5a7131;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
  }

  #quemsomos h3 {
      color: #161616;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  #quemsomos .vendedores {
      margin-top: 30px;
      justify-content: flex-start;
  }

  #quemsomos .vendedores a:hover {
      background: #f5f5d2;
  }

  .experiencia {
      background: #5a310e;
      position: absolute;
      top: -20px;
      right: -20px;
      border-radius: 50%;
      width: 150px;
      aspect-ratio: 1;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      line-height: 1;
      padding: 0 10px;
  }

  .experiencia p strong {
      display: block;
      font-size: 3rem;

  }

  #produtos {
      background-image: linear-gradient(180deg, rgba(89, 49, 12, 0.95) 0%, rgba(89, 49, 12, 0.95) 100%), url(images/bg-produtos.webp);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 50px 0;
      text-align: center;
  }

  #produtos h2 {
      color: #fff;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  #produtos p {
      color: #fff;
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 30px;

  }


  #servicos {
      padding: 50px 0;
  }


  #servicos h2 {
      color: #5a7131;
      font-size: 1.2rem;
      font-weight: 600;
  }

  #servicos h3 {
      color: #161616;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  #servicos .vendedores {
      margin-top: 30px;
  }

  #servicos .vendedores a:hover {
      background: #f5f5d2;
  }

  .boxservicos {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 50px;
      flex-wrap: wrap;
  }

  .servico {
      max-width: 320px;
      box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      position: relative;
      overflow: hidden;
  }

  .servico img {
      aspect-ratio: 2 / 1.3;
      object-fit: cover;
      margin-bottom: 30px;

  }

  .servico::after {
      content: url(images/ico-eucalipto.png);
      display: block;
      position: absolute;
      right: 5px;
      top: 5px;
  }

  #servicos .servico h3 {
      color: #5a7131;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
      padding: 0 30px;
  }

  .servico p {
      padding: 0 30px 30px;
      font-size: 0.9rem;
  }

  #bignumbers {
      background: #59310e;
      padding: 50px 0;
      text-align: center;
      color: #fff;
  }

  #bignumbers .container {
      display: flex;
      justify-content: space-evenly;
      align-items: stretch;
      gap: 50px;
  }

  #bignumbers strong {
      font-size: 3rem;
      display: block;
  }

  #vantagens {
      padding: 50px 0;
  }

  #vantagens .foto {
      position: relative;
  }

  #vantagens .foto img {
      aspect-ratio: 1;
      max-width: 500px;
      border-radius: 10px;
  }


  #vantagens h2 {
      color: #5a7131;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
  }

  #vantagens h3 {
      color: #161616;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  #vantagens h4 {
      color: #5a7131;
      font-size: 1.2rem;
      margin-bottom: 10px;
      font-weight: 600;
  }

  #vantagens p {
      margin-bottom: 20px;
  }

  #vantagens .vendedores {
      margin-top: 30px;
      justify-content: flex-start;
  }

  #vantagens .vendedores a:hover {
      background: #f5f5d2;
  }

  .vantagem {
      margin-bottom: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 15px;
  }

  .vantagem .icone {
      flex-shrink: 0;
  }

  hr {
      border: solid 1px #5a7131;
      padding: 0;
      margin: 0 0 20px;
  }

  #faleconosco {
      background-image: linear-gradient(180deg, rgba(89, 49, 12, 0.95) 0%, rgba(89, 49, 12, 0.95) 100%), url(images/bg-fale-conosco.webp);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 50px 0;
      text-align: center;
  }

  #faleconosco h2 {
      color: #fff;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  #faleconosco p {
      color: #fff;
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 30px;

  }

  #motivos {
      padding: 50px 0;
  }

  #motivos .foto {
      position: relative;
  }

  #motivos .foto img {
      aspect-ratio: 1;
      max-width: 500px;
      border-radius: 10px;
  }


  #motivos h2 {
      color: #5a7131;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
  }

  #motivos h3 {
      color: #161616;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  #motivos h4 {
      color: #5a7131;
      font-size: 1.2rem;
      margin-bottom: 10px;
      font-weight: 600;
  }

  #motivos p {
      margin-bottom: 20px;
  }

  #motivos .vendedores {
      margin-top: 30px;
      justify-content: flex-start;
  }

  #motivos .vendedores a:hover {
      background: #f5f5d2;
  }


  #depoimentos {
      padding: 50px 0;
      text-align: center;
      background: #f1f1ff;
  }

  #depoimentos img {
      margin-bottom: 30px;
  }

  #depoimentos h2 {
      color: #5a7131;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
  }

  #depoimentos h3 {
      color: #161616;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  .depoimento {
      padding: 10px
  }

  .depoimento div {
      background: #59310e;
      padding: 30px;
      color: #fff;
      border-radius: 10px;
  }

  .depoimento .nome {
      font-weight: 600;
      margin-top: 10px;
  }

  .uk-slider-nav {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  #contato {
      padding: 50px 0;
  }

  #contato .texto {
      width: 600px;
      padding: 30px;
      background: #59310e;
      color: #fff;
      border-radius: 10px;
  }

  #contato iframe {
      border-radius: 10px;
  }

  #contato h2 {
      color: #fff;
      font-size: 1.2rem;
  }

  #contato h3 {
      color: #fff;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 30px;
  }

  #contato hr {
      border: solid 1px #fff;
  }

  footer {
      background: #f5f5d2;
      padding: 50px 0;
  }

  footer .sobre img {
      margin-bottom: 20px;
  }

  footer .sobre p {
      font-size: 0.9rem;
  }

  footer .contato {
      flex-shrink: 0;
  }

  footer .vendedores {
      justify-content: flex-start;
      margin-bottom: 10px;
  }

  footer h3 {
      color: #161616;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
  }

  footer .contato p {
      margin-bottom: 10px;
  }

  footer .contato p a {
      color: #161616;
  }

  footer .contato .social a {
      background: #59310e;
      color: #fff;
      padding: 8px 15px;
      border-radius: 10px;
      display: inline-block;
      transition: all 0.3s;
  }

  footer .contato .social a:hover {
      color: #59310e;
      background: #fff;
  }

  footer .assinatura {
      margin-top: 30px;
      text-align: center;
  }

  footer .assinatura p {
      font-size: 0.8rem;
  }

  footer .assinatura a {
      color: #161616;
      font-weight: 600;
  }

  .uk-offcanvas-bar {
      background: #5a310e;
  }

  input, textarea{
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
  }

  input[type="submit"]{
    cursor: pointer;
    font-weight: 600;
  }

  input[type="submit"]:hover{
    background: #f5f5d2;
  }


  /* Container geral das mensagens */
.wpcf7-response-output {
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 15px 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Sucesso (mensagem enviada) */
.wpcf7-mail-sent-ok {
  background-color: #e6f9ed;
  color: #2e7d32;
  border-left: 4px solid #2e7d32;
}

/* Erros de validação */
.wpcf7-validation-errors,
.wpcf7-aborted {
  background-color: #fff8e6;
  color: #b26a00;
  border-left: 4px solid #b26a00;
}

/* Spam bloqueado */
.wpcf7-spam-blocked {
  background-color: #fdecea;
  color: #c62828;
  border-left: 4px solid #c62828;
}




  @media screen and (max-width: 1480px) {
      .container {
          margin: 0 30px;
      }
  }

  @media screen and (max-width: 1260px) {
      header .vendedores {
          display: none;
      }
  }

   @media screen and (max-width: 1050px) {
      .divisor{
        display: none;
      }

      main{
        padding: 50px 0;
      }

      main ul{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: none;
        gap: 10px;
        padding: 0;
        margin: 50px auto 0
      }

      main li{
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
        width: 100%;
        min-width: none;
        padding: 10px;
        border-radius: 10px;

      }

      #quemsomos .container{
        flex-direction: column;
        text-align: center;
      }

      #vantagens .container{
        flex-direction: column-reverse;
        text-align: center;
      }

      #motivos .container{
        flex-direction: column;
        text-align: center;
      }

      #quemsomos .vendedores, #vantagens .vendedores{
        justify-content: center;
      }

      .vantagem{
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
      }

      footer .sobre{
        display: none;
      }

      footer .contato{
        text-align: center;
        margin: 0 auto;
        flex-shrink: 1;
      }
  }

    @media screen and (max-width: 860px) {

        #bignumbers{
            padding: 20px 0;
        }
        #bignumbers .container{
            flex-direction: column;
            gap: 20px
        }

        #bignumbers p{
            border: solid 1px #fff;
            padding: 20px;
            border-radius: 10px;
        }

        #bignumbers strong{
            font-size: 2rem;
        }
    }

  @media screen and (max-width: 660px) {
      h1 {
          font-size: 1.6rem;
      }

      main h2 {
          font-size: 1.2rem;
      }

      body .vendedores {
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }

      .vendedores a{
        width: 100%;
        justify-content: center;
      }
  }

  @media screen and (max-width: 500px) {
      .barra-topo {
          display: none;
      }

      #quemsomos .foto img{
        min-width: none;
        width: 100%;
      }

      #produtos h2, #faleconosco h2, #depoimentos h3, #contato h3{
        font-size: 1.6rem;
      }

      #servicos{
        text-align: center;
      }

      .servico{
        width: 100%;
        max-width: none;
      }
  }