body {
  font-family: Arial, Helvetica, sans-serif;
}

html {
  scroll-behavior: smooth;
}

.container-conteudo {
  display: flex;
  width: 1108px;
  height: 605px;
  gap: 57px;
}



 .imagem {
 width: 100%;
 height: auto; 
 border-radius: 0px; 
 margin-bottom: 60px; 
 }

 .texto-deslocado {
 font-size: 38px;
 font-family: Arial, Helvetica, sans-serif;
 }

 .texto-alinhado {
 margin: 10px 0; 
 font-size: 25px;
 color: #F39500;
 font-family: Arial, Helvetica, sans-serif;
 }

 .texto-final {
   color: #F39500;
   font-size: 25px;
   font-family: Arial, Helvetica, sans-serif;
   position: relative;
   left: -4px;
 }

 .botao-novo {
   background-color: #F39500;
   color: #FFFFFF;
   border: none;
   padding: 10px 20px;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   top: -4px;
   font-weight: bold;
   width: 250px;
   margin-left: 46px;
}

.botao-um {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 150px;
}


.botao-novo:hover {
 background-color: #e28c01;
 color: #FFFFFF;
 border: none;
}

.botao-novo:focus {
border: none;
outline: none;
}

 .container {
 display: flex;
 align-items: flex-start;
 flex-direction: column;
 }

 
 .foto {
 width: 100px;
 height: 50px;
 padding-bottom: 20px;
 margin-right: 20px;
 }
 
 .texto {
 font-size: 18pxpx;
 text-align: right;
 color: #F39500;
 margin-bottom: 10px;
 top: -20px; 
 padding-left: 20px;
 }

 .texto-acima h3 {
 text-align: left;
 color: #F39500;
 padding-left: 20px;
 font-size: 20px;
 width: 300px;
 }


 .texto-abaixo {
 font-size: 14px;
 text-align: left !important;
 color: black;
 width: 317px;
 padding-left: 20px;
 }

 .container {
 display: flex;
 align-items: flex-start;
 height: 189px;
 }
 

 .foto {
 width: 100px;
 height: 50px;
 padding-bottom: 20px;
 margin-right: 20px;
 }
 
 .texto {
 font-size: 18px;
 text-align: right;
 color: #F39500;
 margin-bottom: 10px;
 top: -20px; 
 padding-left: 20px;
 }
 

 .texto-acima {
 width: 60%;
 height: 300px !important;
 }

 .texto-canto {
 color: #F39500;
 font-size: 16px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 }

 .texto-alinhado-direita {
 color: black;
 font-size: 14px;
 font-family: Arial, Helvetica, sans-serif;
 }
 
 .texto-alinhado-esquerda {
 color: black;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 width: 90vw;
 }
 
 .texto-alinhado-texto {
 color: #F39500;
 font-size: 16px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 margin-bottom: 5px;
 }

 .texto-alinhado-lado {
 font-size: 14px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 color: black;
 }

 .imagem-container {
 width: 60px;
 height: 60px;
 }
 
 .col {
 display: flex !important;
 -ms-flex-preferred-size: 0;
 flex-basis: 0;
 -ms-flex-positive: 1;
 flex-grow: 1;
 max-width: 100%;
 margin: 30px 0 !important;
}

.container-novo {
 width: 500px; /* largura */
 height: 569px; /* altura */
 background-color: #ffebcd;
 padding: 47px;
 border: 1px solid #ddd;
 display: flex;
 flex-direction: column;
 padding-left: 45px;
 margin-top: 20px;
 font-family: Arial, Helvetica, sans-serif;
}

.titulo-container {
 margin: 0 0 25px 0;
}


.container-link {
 display: grid;
 gap: 14px;
 color: #F39500;
}

.container-link a {
 text-decoration: none;
 color: #F39500 !important;  
 font-size: 14px;
}

.container-anterior {
  padding-bottom: 15px;
  margin: 20px 0 0px 0px !important;
  width: 550px;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-left: 7px;
  position: relative;
}


.col {
 -ms-flex-preferred-size: 0;
 flex-basis: 0;
 -ms-flex-positive: 1;
 flex-grow: 1;
 max-width: 100%;
 height: 140px !important;
 padding: 0 !important;
}

.imagem-container {
 width: 14%;
 height: 38%;
 border: 1px solid #000;
} 

.btn-forms {
 scroll-behavior: smooth;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: 0px !important;
}

.botao-forms {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 150px;
}


.botao-laranja {
   background-color: #F39500;
   color: #FFFFFF;
   border: none;
   padding: 10px 20px;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   top: -53px;
   font-weight: bold;
   width: 250px;
   margin-left: 46px;
}

.botao-laranja:hover {
 background-color: #e28c01;
 color: #FFFFFF;
 border: none;
}

.botao-laranja:focus {
border: none;
outline: none;
}

@media (min-width: 1200px) {
 .container {
     max-width: 1167px;
 }
}

/* ---------------------------------------- FOOTER ---------------------------------------- */

footer {
 margin: 0px auto 0px auto; 
 width: 100%;
 height: auto;
 background-color: #e1e2e4;
 color: #fff;
 text-align: center;
 display: flex;
 justify-content: space-between;
 padding: 20px 0px;
 margin-top: 20px;
}

.contato {
 flex-direction: column;
 display: flex;
 justify-content: center;
 background-color: #F39500;
 padding: 10px 25px 10px 144px;
 margin: 30px 0px 30px 0px;
 height: 60px;
}

.contato h1 {
 margin: 0;
 font-size: 1.7em;
}

.informacoes {
 flex-direction: row;
 display: flex;
 justify-content: space-between;
 width: 100%;
 gap: 20px;
}

.vendedor {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}

.textovendedor h2 {
 color: #F39500;
 text-decoration: underline;
}

.textovendedor {
 text-align: left;
 display: flex;
 flex-direction: column;
 max-width: none;
 min-width: min-content;
}

.nome-vendedor {
 font-size: 20px;
 color: black;
 padding-bottom: -10px;
 font-weight: bold;
 margin: 0px;
}

/* .numero-vendedor {
 color: #F39500 !important;
 margin-top: 1.5px;
 font-size: 17px;
 text-decoration: none;
} */

.email-vendedor{
 color: #F39500 !important;
}

/* .imagemvendedor {
 /* display: flex;
 align-items: center;
 width: 100%;
 height: 100%; */
 /* border: solid red 1px; */
/* }  */

.imagemvendedor img {
 display: block;
 border-radius: 150px;
 width: 130px;
 margin: auto;
}

.shopbasf {
 color: black;
 display: flex;
 flex-direction: column;
 /* border: solid red 1px; */
 background-color: #c5c5c5;
 text-align: left;
 padding: 18px 20px 15px 20px;
}

.shopbasf h3 {
 margin: 0;
 font-size: 25px;
 font-weight: normal;
}

.shopbasf a {
 text-decoration: none;
 margin-top: 10px;
 font-weight: bold;
 color: #F39500 !important;
 font-size: 20px;
}

.texto-footer {
 margin: 0;
}

.basf {
 color: #F39500;
 font-weight: bold;
}

.btn-flutuante{
 height: 60px;
 width: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background-color: #F39500;
 position: fixed;
 right: 20px;
 bottom: 20px;
 animation: wppBtnHover 2s ease forwards;
}
.btn-flutuante:hover{
 background-color: #00793a;
}
@keyframes wppBtnHover {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}

}

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

    
  .informacoes{ 
    position: relative;
    width: 100vw;
    height: 305px;
  }
  
  .ft {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .contato {
    top: 0;
    left: 0;
    transform: translate(-0%, -66%);
  }

  .vendedor{
    top: 50%;
    left: 50%;
    transform: translate(-56%, -62%);
  }

  .imagemvendedor {
    transform: translate(-106%, -4%);
  }

  .textovendedor{ 
    top: 50%;
    left: 106%;
    transform: translate(-50%, -50%);
    justify-content: left;
  }

  .shopbasf {
    bottom: 0;
    right: 0;
    transform: translate(-0%, 9%);
  }
}

@media screen and (max-width:530px){
  /* tinha a medida de 720px */

  
  .informacoes{ 
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 420px;
  }
  
  .ft {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .vendedor{
    transform: translate(-55%, -55%);
  }

  .imagemvendedor img{
    width: 115px;
  }

  .imagemvendedor {
    transform: translate(0%, -80%);
  }

  .textovendedor{ 
    transform: translate(-71%, -20%);
  }

  .shopbasf {
    transform: translate(-0%, -4%);
  }
}

@media  screen and (max-width:450px){
  
  .informacoes{ 
    display: flex;
    flex-direction: column;
    width: 92vw;
    height: 420px;
  }
  
  
  .informacoes{ 
    display: flex;
    flex-direction: column;
    width: 92vw;
    height: 420px;
  }

  .container-conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1393px;
}

.container-anterior {
  padding-bottom: 50px;
  margin: 31px 0 0px 0px !important;
  width: 390px;
  height: 910px;
  display: flex;
  flex-direction: column;
  padding-left: 7px;
  position: relative;
}

.container-novo {
  width: 369px;
  height: 569px;
  background-color: #ffebcd;
  padding: 47px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding-left: 45px;
  margin-top: 93px;
  font-family: Arial, Helvetica, sans-serif;
}


  .ft {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .contato {
    
  }
  
  .vendedor{
    transform: translate(-45%, -53%);
  }
  
  .imagemvendedor img{
    width: 120px;
  }
  
  .imagemvendedor {
    transform: translate(-3%, -70%);
  }
  
  .textovendedor {
    transform: translate(-41%, -87%);
}
  
  .email-vendedor{
    font-size: 14px;
  }

  .shopbasf {
    transform: translate(-0%, 5%);
  }

  #wpp-icon{
    width: 18px;
    height: 18px;
  }
  
  .ft {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .vendedor{
    transform: translate(-45%, -53%);
  }
  
  .imagemvendedor img{
    width: 120px;
  }
  
  .imagemvendedor {
    transform: translate(-3%, -70%);
  }
  
  .textovendedor {
    transform: translate(-41%, -87%);
}
  
  .email-vendedor{
    font-size: 14px;
  }

  .shopbasf {
    transform: translate(-0%, 5%);
  }

  #wpp-icon{
    width: 18px;
    height: 18px;
  }

  .btn-flutuante{
    height: 40px;
    width: 40px;
    right: 10px;
    bottom: 10px; 
  }
}

/* ---------------------------------------- footer politicas ---------------------------------------- */
.copy {
 background-color: #F39500;
 height: 80px;
 width: 100%;
 margin: 30px 0 0 0;
 display: grid;
 grid-template-columns: auto auto;
 place-items: center;
}

.copy p,
.copy p a {
 color: #fff;
}