.contato{
  position: fixed;
  top: -100vh; left: 0;

  width: 100vw; height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2px);

  transition: 0.2s;
}

.contato-ativo{
  top:0;
}

  .contato__form{
    background-color: var(--branco);
    border-radius: 0.75rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
  }

    .contato__campo{
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

      .contato__legenda{
        font-size: 1.15rem;
        color: var(--preto-claro);
      }

      .contato__input{
        width: 100%;
        height: 1.5rem;
        padding: 0.25rem;
        font-size: 1rem;
        
        background-color: var(--branco);
        border: none; outline: none;

        color: var(--preto-claro);
        border: 1px solid var(--preto-claro);
        transition: 0.2s;
      }

      .contato__input:focus{
        background-color: var(--cinza-claro);
      }

      .contato__textarea{
        height: 20vh;
        resize: none;
      }

    .contato__botoes{
      display: flex;
      justify-content: space-between;
    }

      .contato__botoes-efetivar{
        display: flex;
      }

        .contato__botao{
          border: none; 
        }

        #contatoViaEmail{
          background-color: var(--amarelo);
        }

        #contatoViaWhatsapp{
          background-color: #34AF23;
          color: var(--branco);
        }

/* MOBILE */
@media screen and (min-width:0){
  .contato__form{
    width: 100%; height: 100%;
    padding: 0.5rem;
    gap: 0.25rem;
  }

  .contato__botoes{
    flex-direction: column-reverse;
  }

  .contato__botoes-efetivar{
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .contato__botao{
    width: 100%; 
  }
}/* MOBILE - FIM */


/* TABLET */
@media screen and (min-width: 768px){
  
}/* TABLET - FIM */


/* 1024 */
@media screen and (min-width: 1024px){
  .contato__form{
    width: 100%; max-height: 100%;
    padding: 2rem;
    gap: 1rem;
  }

  .contato__botoes{
    flex-direction: row;
  }

  .contato__botoes-efetivar{
    margin-top: unset;
    flex-direction: row;
    gap: 1rem;
  }

  .contato__botao{
    width: 13rem; 
  }
}/* 1024 - FIM */


/* 1200 */
@media screen and (min-width: 1200px){
  
}/* 1200 - FIM */