.contato{
  /**Hero**/
  .hero{
    background: url(../img/sobre/sobre.jpg) no-repeat right center;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    flex-direction: column;
    padding: 140px 10%;
    h1{
      margin: 0;
      line-height: 1;
      font-size: 3rem;
      color: #fff;
      font-weight: 700;
      span.verde{
        color: var(--verdelight);
      }
    }
    p{
      color: #fff;
      font-size: 1.2rem;
      width: 600px;
      margin: 0;
    }
  }
  .conteudo{
    background: var(--bgcinza);
    padding: 80px 10%;
    .formulario{
      padding: 40px;
      border-radius: 15px;
      width: 95%;
      background: #fff;
      p{
        margin: 0;
      }
      label{
        font-size: 1rem;
        width: 100%;
        color: var(--cinza);
        margin: 10px 0;    
        .obrigatorio{
          color: red;
        }
      }
      input{
        width: 100%;
        border: solid 1px #CBD5E1;
        border-radius: 4px;
        padding: 10px;
        outline: none;
        margin: 5px 0 0;
        transition: .3s;
        &:focus{
          border-color: var(--verde);
        }
      }
      select{
        width: 100%;
        border: solid 1px #CBD5E1;
        border-radius: 4px;
        padding: 10px 15px;
        outline: none;
        margin: 5px 0 0;
        appearance: none;
        transition: .3s;
        &:focus{
          border-color: var(--verde);
        }
      }  
      textarea{
        width: 100%;
        height: 115px;
        border: solid 1px #CBD5E1;
        border-radius: 4px;
        padding: 10px;
        outline: none;
        margin: 5px 0 0;
        transition: .3s;
        &:focus{
          border-color: var(--verde);
        }
      }   
      input[type="submit"]{
        background: var(--verde);
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
        padding: 20px;
        border-radius: 10px;
        transition: .3s;
        &:hover{
          background: var(--verdeescuro);
        }
      }   
      .selecao{
        position: relative;
          &::after{
          font-weight: 900;
          font-family: "Font Awesome 6 Free";
          content: "\f078";
          color: var(--verde);
          display: inline-block;
          font-size: 1rem;
          right: 20px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }
        
      }      
  
    }
    p{
      font-size: 1.1rem;
      line-height: 1.5;
      margin: 10px 0;
    }
    .wp-block-buttons .wp-block-button__link{
      background: var(--verde);
      width: 100%;
      display: block;
      margin: 15px 0;
      border-radius: 15px;
      transition: .3s;
      &:hover{
        background: var(--verdeescuro);
      }
    }
    .wp-block-buttons>.wp-block-button{
      width: 100%;
    }
    .redes{
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 10px;
      a{
        width: 45px;
        height: 45px;
        border-radius: 50%;
        font-size: 1.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--verde);
        color: #fff;
        transition: .3s;
        &:hover{
          background: var(--verdeescuro);
        }
      }
    }  
    ul.contatos{
      list-style: none;
      padding: 0;
      & li{
        margin: 10px 0;
        font-weight: 300;
        color: var(--cinza);
        i{
          color: var(--verde);
          width: 1.2rem;
        }
        a{
          color: var(--cinza);
          text-decoration: none;
          transition: .3s;
          &:hover{
            color: var(--verdeescuro);
          }

        }
      }
    }      
  }
  .mapa{
    padding: 80px 10%;
    iframe{
      border-radius: 10px;
    }    
  }
  @media (max-width: 1600px) {
    .hero {
      padding: 140px 10%;      
    } 
    .conteudo{
      padding: 80px 10%;
    }             
  } 
  @media (max-width: 1024px) {
    .hero {
      padding: 100px 60px;
      background-position: center;
      p{
        width: 100%;
      }
    }   
    .conteudo{
      padding: 60px;
      .formulario{
        width: 100%;
        margin-bottom: 40px;
      }
    } 
    .mapa{
      padding: 60px;
    }  
  }   
  @media (max-width: 560px) {
    .hero {
      padding: 60px 30px;
      h1{
        font-size: 2.5rem;
      }
      p{
        font-size: 1rem;
      }
    }     
    .conteudo{
      padding: 40px 30px;
      .formulario{
        padding: 25px;
        border-radius: 10px;
        margin-bottom: 20px;
      }
    }   
    .mapa{
      padding: 0;
      iframe{
        border-radius: 0;
        height: 400PX;
      }
    }
  }  
}