:root{
    --verde:#00c8c8;
    --roxo:#991c7a;
}

header{
    background:  url('../img/BG.jpg')  ;
    background-position:  center top;
    background-size: cover;
    min-height: 600px;
    height: 100vh;
      box-shadow: inset 0 -2rem 0 var(--roxo);
}

.triangulo-verde,
.triangulo-rosa,
.setapracima {
  position: absolute;
}

.triangulo-verde {
  bottom: 7rem;
  width: 120px;
}

.triangulo-rosa {
  right: 0;
  top: 0;
}

.setapracima {
  bottom: 0;
}


.boxconteudo{
    
   min-height: 600px;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}

form{

    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    background-color: #000000a8;
    padding: 1rem;
    border-radius: 26px;

z-index: 99;

}

form .form-group{
    width: 100% !important;
}

#logocomocnteudo{
    position: relative;
    top: -5rem;
}

.img-texto{
    max-width: 300px;
}

input {

border-radius: 0px !important;

}

button.btn.btn-warning.btn-block.mt-3.text-uppercase.envia {
    width: 100%;
    border-radius: 18px;
    background: #44ff00;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
}





@media (max-width: 800px){


header{
    background:  
    url('../img/triangulo-verde.png'),
    url('../img/triangulo-rosa.png'),
    url('../img/setapra\ cima.png'),
    linear-gradient(#00000034,#00000034) , 
    url('../img/BG.jpg')  ;
    background-position:  
    left center,
    right top,
    center bottom,
    center,
    center top;
    background-size: 
    50px,
    120px,
    200px,
    cover,
    cover;
    background-repeat: no-repeat;
    min-height: 600px;
    height:  unset;
  
}


form{

    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    background-color: #000000a8;
    padding: 1rem;
    border-radius: 26px;

    margin-top: 2rem;
    margin-bottom: 5rem;

}

.triangulo-verde,
.triangulo-rosa,
.setapracima {
 display: none;
}
 



.boxconteudo{
    
   min-height:unset;
    height: unset;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}

#logocomocnteudo{
    position: relative;
    top: unset;
}

.olaria{
    width: 300px;
}

}

#formularioColuna{
    position: relative;
    min-height: 600px;
}