---
# System prepended metadata

title: 'Session Three: It''s always time to restart | Ling. Programação'

---

# Session Three: It's always time to restart | Ling. Programação
>[color=red]**Autor:** Letícia Rodrigues da Silva
**Turma:** IndoD 
**Número:** 25

[toc]


>Site: https://shxcn.csb.app/src/pages/home/index.html
>Link CodeSandbox: https://codesandbox.io/s/investimentos-shxcn?file=/src/pages/home/responsivo.css:0-5100

## Códigos do site:

### index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css" />
    <title>Educação financeira</title>
  </head>
  <body>
    <div class="container">
      <div class="faixa1">
        <div class="cabecalho">
          <div class="img-logo">
            <img src="../../assets/images/logof1.png"/></div>
         </div>
        <div class="titulof1">Educação Financeira para seus colaboradores</div>
        <div class="botaof1"><button>AGENDE UMA CONVERSA</button></div>
       </div>

      <div class="faixa2">
        <div class="box1">
            <div class="quem">QUEM SOMOS</div>
            <div class="texto1">Levamos educação financeira para os mais diversos momentos de vida do colaborador e da empresa</div>
         </div>

        <div class="box2">
            <div class="text2">Somos uma empresa do Mercado Financeiro com profissionais capacitados e certificados para trazer conteúdos para todos os momentos financeiros das pessoas.</div>
            <div class="text2">Além disso, nossa equipe conta com profissionais da área de educação, com uma didática fácil e empática, trazendo a leveza necessária para abordar esse assunto.</div>
            <div class="text2">Acreditamos que a educação e a construção de um ambiente seguro para nossas finanças pessoais é o melhor investimento para o seu colaborador e consequentemente para a empresa.</div>
         </div>
       </div>

        <div class="faixa3">
            <div class="boxf3">
                <div class="oque">O QUE FAZEMOS</div>
                <div class="titulof3">Nossos serviços</div>
                <ul class="lista">
                  <li>Webinars Personalizados</li>
                  <li>Cursos Online para Plataformas Corporativas</li>
                  <li>Consultoria de Planejamento Financeiro</li>
                  <li>Programas de Educação Financeira</li>
                  <li>Campanhas Personalizadas (online e offline)</li>
                </ul>
              </div>
              <div class="imgf3"><img src="../../assets/images/pessoas.png"/></div>
           </div>

          <div class="faixa4">
              <div class="box4">
                  <div class="textof4">
                    <div class="quem2">PARA QUEM</div>
                    <div class="titulo4"><font color="#ee2d5d">Empresas que já  compreenderam:</font><font color= "white">o bem-estar do colaborador é investimento</font></div>
                   </div>
               </div>
              <div class="boxf4">
                  <div class="text1">Entendemos que problemas financeiros podem impactar profundamente na vida do colaborador.</div>
                  <div class="text1">Afinal, isso é um grande motivo de estresse e ansiedade, coisas que não combinam com uma mente saudável, criativa e engajada.</div>
                </div>
             </div>

           <div class="faixa5">
               <div class="back-img"><img src="../../assets/images/aspass.png"/></div>
               <div class="ds-texto">83% dos profissionais de RH afirmam que o estresse financeiro prejudica o desempenho dos colaboradores.</div>
              <div class="ds">Society for Human Resources Management</div>
             </div>

          <div class="faixa6">
              
              <div class="t-box1">
                  <div class="mat-back"><img src="../../assets/images/mat.png"/></div>
                  <div class="t1">Organização Financeira</div>
                  <div class="t-box2">
                    <div class="moeda-back"><img src="../../assets/images/moeda.png"/></div>
                    <div class="t2">Investimentos</div>
                   </div>
                 </div>
              
              <div class="t-box3">
                  <div class="planejamento-back"><img src="../../assets/images/planejamento.png"/></div>
                  <div class="t1">Planejamento Financeiro</div>
                  <div class="cenario"><img src="../../assets/images/cenario.png"/></div>
                  <div class="t2">Cenário Macroeconômico</div>
                </div>
             </div>

           <div class="faixa7">
             <div class="boxf7">
                <div class="quem3">QUEM FAZ PARTE DESTE MOVIMENTO</div>
                <div class="titulof7">Mais de<font color="#ee2d5d">100 empresas e 20 mil colaboradores</font> impactados</div>
               </div>
              <div class="box-logo">
                <div class="logo-l1">
                    <div class="hospital"><img src="../../assets/images/hospital.png"></div>
                    <div class="vivo"><img src="../../assets/images/vivo.png"></div>
                    <div class="piccadilly"><img src="../../assets/images/piccadilly.png"></div>
                    <div class="loreal"><img src="../../assets/images/loreal.png"></div>
                  </div>

                <div class="logo-l2">
                    <div class="mrv"><img src="../../assets/images/mrv.png"></div>
                    <div class="leroy"><img src="../../assets/images/leroy.png"></div>
                    <div class="sap"><img src="../../assets/images/sap.png"></div>
                  </div>
                </div>
              </div>

              <div class="faixa8">
                <div class="botaof8"><button>AGENDE UMA CONVERSA</button></div>
              </div>

              <div class="faixa9">
                <div class="textf9">
                    <div class="depoimentos">DEPOIMENTOS</div>
                    <div class="titulof9">O que dizem sobre nós</div>
                   </div>
                  <div class="box9">
                      <div class="b1">
                          <div class="b-text9">
                          <div class="aspasf9"><img src="../../assets/images/aspas.png"></div>
                          <div class="ds-f9">O momento que tivemos com o Papo de Grana foi essencial para entendermos a importância de ter uma vida financia controlada e que sim, é possível se divertir quando o assunto é finanças.</div>
                          <div class="nome">Stephany Lopes</div>
                          <div class="logo-f9"><img src="../../assets/images/neo.png"></div>
                       </div>
                     </div>

                    <div class="b1">
                        <div class="b-text9">
                          <div class="aspasf9"><img src="../../assets/images/aspas.png"></div>
                          <div class="ds-f9">Consegui ver a transparência e integridade da empresa, eu não tinha conhecimento nenhum na área de investimento e muito menos onde investir sem ter medo de levar a “ré” e acabar perdendo tudo. Foi uma palestra rápida, focada e ágil, não ficaram enrolando ou até mesmo forçando algo.</div>
                          <div class="nome">Emily</div>
                          <div class="logo-f9"><img src="../../assets/images/asaas.png"></div>
                         </div>
                      </div>

                  <div class="b1">
                      <div class="b-text9">
                          <div class="aspasf9"><img src="../../assets/images/aspas.png"></div>
                          <div class="ds-f9">O Papo de Grana levantou assuntos antes considerados muito complicados e muitas vezes restritos a uma pequena parcela da população, de uma forma didática que traz conhecimento ao alcance de todos e principalmente na palma da mão.</div>
                          <div class="nome">Cícero</div>
                          <div class="logo-f9"><img src="../../assets/images/azul.png"></div>
                       </div>
                    </div>
               </div>

               <div class="faixa10">
                  <div class="boxf10">
                      <div class="quem4">QUEM SOMOS</div>
                      <div class="titulof10">Sobre a Warren</div>
                      <div class="ds-f10">Somos uma plataforma completa de investimentos com sede em Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes e 250 colaboradores.</div>
                      <div class="ds-f10">Na Warren você investe nos melhores produtos com eficiência, simplicidade e transparência. Somos responsáveis por criar uma experiência alinhada e transparente, que oferece realmente os melhores produtos, com muita tecnologia, mas com atendimento humano e competente.</div>
                   </div>
                  <div class="imgf10"><img src="../../assets/images/celular.png"></div>
                 </div>

              <div class="faixa11">
                  <div class="textf11">
                      <div class="titulo-f11">Agende uma conversa</div>
                      <div class="ds-f11">Quer saber mais sobre o Warren Educação in Company e levar educação financeira para a sua empresa? Preencha o formulário abaixo para entrarmos em contato com você.</div>
                    </div>
                    <div class="inputs">
                        <label for="nome">Nome*
                          <div class="nome-i"><input id="firstname" class="hs-input" type="text"/></div>
                         </label>
                        <div class="input-l">
                            <label for="email">Email*
                              <div class="email"><input id="email" class="hs-input" type="email"/></div>
                             </label>
                             <div class="l-tel">
                                <label id="telefonee">Telefone*
                                  <div class="telefone"><input id="mobilephone" class="hs-input" type="tel"/></div>
                                 </label>
                               </div>
                          </div>
                        <div class="input-l1">
                            <label for="cargo">Cargo*
                                 <div class="cargo"><input id="cargo" class="hs-input" type="text"/></div>
                               </label>
                             <div class="l-emp">
                                <label for="cargo">Empresa*
                                  <div class="cargo"><input id="empresa" class="hs-input" type="text"/></div>
                                  </label>
                               </div>
                             <div class="quantidade">
                                  <div class="l-qntd">
                                      <label for="quant">Quantidade de funcionários*
                                          <select>
                                            <option value="Selecione">Selecione</option>
                                            <option value="1 a 50">1 a 50</option>
                                            <option value="51 a 100">51 a 100</option>
                                            <option value="100 a 500">100 a 500</option>
                                            <option value="500 a 1000">500 a 1000</option>
                                            <option value="500 a 1000">1000 a 5000</option>
                                          </select>
                                       </label>
                                   </div>
                               </div>
                           </div>
                            <div class="box-input">
                                  <label for="msg">Deixe sua mensagem
                                    <div class="t-f11">
                                    <textarea id="mensagem" class="hs-input"></textarea> </div>
                                   </label>
                             </div>
                      </div>
                            <div class="botaof11"><button>ENVIAR</button></div>
                           
                </div>

              <div class="faixa12">
                
                <div class="logof12"><img src="../../assets/images/logo-img.png"/></div>
                <div class="logosf12">
                  <div class="logof"><img src="../../assets/images/icon-youtube.png"/></div>
                  <div class="logof"><img src="../../assets/images/icon-instagram.png"/></div>
                  <div class="logof"><img src="../../assets/images/icon-facebook.png"/></div>
                  <div class="logof"><img src="../../assets/images/icon-twitter.png"/></div>
                </div>

                <div class="boxf12">
                  <div class="texto-f12">Tem alguma dúvida? Mande um email para meajuda@warrenbrasil.com.br</div>
                  <div class="cnpj">CNPJ: 24.176.946/0001-71</div>
                 </div>
               </div>
     </div>
  </body>
</html>
```


### index.css
```css=
body {
  margin: 0px;
  font-family: "Montserrat-bold", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
}

.faixa1 {
  display: flex;
  flex-direction: column;
  background-image: url("../../assets/images/background.png");
  background-attachment: fixed;
  background-size: 100% auto;
}

.cabecalho {
  display: flex;
  flex-direction: row;
  margin: 1em 0em 0em 2em;
}

.img-logo img {
  max-width: 12.5em;
  max-height: 5em;
}

.titulof1 {
  color: white;
  font-size: 3.5em;
  font-weight: 700;
  max-width: 9.5em;
  max-height: 2em;
  line-height: 1em;

  margin: 2.5em 0em 0em 3.5em;
}

.botaof1 button {
  width: 19.5em;
  height: 5.5em;
  font-weight: 800;
  border-radius: 5em;
  border: 0em;
  margin: 6.5em 0em 23em 15em;
  color: white;
  background-color: #ee2e5d;
  cursor: pointer;
}

.faixa2 {
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-top: 5em;
  justify-content: space-evenly;
}

.box1 {
  margin-left: 15em;
}

.quem {
  font-weight: 700;
  color: #666666;
}

.texto1 {
  max-width: 11.5em;
  max-height: 5em;
  font-size: 2.5em;
  line-height: 1em;
  font-weight: 700;
}

.box2 {
  width: 400px;
  height: 230px;
  margin: 5em 20em 0em 0em;
}

.text2 {
  width: 500px;
  height: 90px;
  line-height: 1.5em;
  color: black;
  font-size: 1em;
}

.faixa3 {
  display: flex;
  flex-direction: row;
  background-color: #f5f6fa;
  width: 100%;
  height: 700px;
  margin-top: 8em;
  justify-content: center;
  align-items: center;
}

.oque {
  color: #666666;
  font-weight: 700;
}

.titulof3 {
  font-size: 2.5em;
  font-weight: 700;
  margin-bottom: 0.5em;
}

ul {
  padding-left: 20px;
}

.lista li {
  padding-bottom: 20px;
}

.imgf3 img {
  width: 530px;
  height: 340px;
  margin-left: 10em;
}

.faixa4 {
  background-color: rgb(28, 27, 31);
  width: 100%;
  height: 38em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.box4 {
  margin-right: 150px;
  width: 340px;
}

.quem2 {
  color: #666666;
  font-weight: 700;
}

.boxf4 {
  width: 350px;
}

.text1 {
  color: white;
  height: 58px;
}

.titulo4 {
  font-size: 2.3em;
  font-weight: 700;
}

.faixa5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: white;
  background-color: black;

  width: 100%;
  height: 340px;
}

.back-img img {
  position: relative;
  top: 30px;
  right: 14.3em;
}

.ds-texto {
  text-align: center;
  width: 500px;
  font-size: 20px;
  line-height: 1.4em;
}

.ds {
  margin-top: 30px;
}

.faixa6 {
  background-image: url("../../assets/images/background-pessoas.webp");
  background-attachment: fixed;
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.t-box1 {
  font-size: 1.7em;
  font-weight: 700;
  color: white;
  margin-right: 8em;
}

.mat-back img {
  width: 165px;
  position: relative;
  right: 95px;
  top: 130px;
}

.t1 {
  width: 100px;
  line-height: 1em;
  margin-top: 2em;
}

.t-box2 {
  font-size: 1em;
  font-weight: 700;
  color: white;
}

.moeda-back img {
  width: 165px;
  position: relative;
  top: 80px;
  right: 90px;
}

.t2 {
  width: 100px;
  line-height: 1em;
  margin-bottom: 3em;
}

.t-box3 {
  font-size: 1.7em;
  font-weight: 700;
  color: white;
}

.planejamento-back img {
  width: 165px;
  position: relative;
  top: 135px;
  right: 100px;
}

.cenario img {
  width: 165px;
  position: relative;
  top: 3em;
  right: 3.5em;
}

.faixa7 {
  background-color: #f5f6fa;
  width: 100%;
  height: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.boxf7 {
  display: flex;
  flex-direction: column;
  margin: 20em 0em 10em 0em;
  padding-right: 30em;
}

.quem3 {
  color: #666666;
  font-weight: 700;
}

.titulof7 {
  font-size: 40px;
  font-weight: 700;
  width: 650px;
  text-align: left;
}

.box-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20em;
}

.logo-l1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  width: 1080px;
  margin-bottom: 8em;
}

.hodspital img {
  width: 180px;
}

.vivo img {
  width: 103px;
}

.piccadilly img {
  width: 150px;
}

.loreal img {
  width: 103px;
}

.logo-l2 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

  width: 1000px;
}

.mrv img {
  width: 130px;
}

.leroy img {
  width: 103px;
}

.sap img {
  width: 103px;
}

.faixa8 {
  background-color: #1c1b1f;
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.botaof8 button {
  background-color: #ee2e5d;
  color: white;
  width: 270px;
  height: 69px;
  border-radius: 3em;
  border: 0px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1em;
}

.faixa9 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.textf9 {
  margin: 15em 40em 2em 0em;
}

.depoimentos {
  color: #666666;
  font-weight: 700;
}

.titulof9 {
  font-size: 2.5em;
  font-weight: 700;
}

.box9 {
  display: flex;
  flex-direction: row;
  margin: 50px 0px 200px 0px;
}

.b1 {
  background: #f5f6fa;
  width: 350px;
  height: 380px;
  border-radius: 1em;
  margin-left: 30px;
}

.b-text9 {
  display: flex;
  flex-direction: column;
  width: 320px;
  padding: 40px 10px 30px 40px;
}

.aspasf9 img {
  margin-bottom: 20px;
}

.ds-f9 {
  color: #2e2d33;
  line-height: 20px;
  margin-bottom: 20px;
}

.nome {
  color: #2e2d33;
  font-weight: 700;
}

.logo-f9 img {
  width: 70px;
  height: 42px;
  margin-top: 20px;
}

.faixa10 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ee2e5d;
  width: 100%;
  height: 800px;
}

.boxf10 {
  display: flex;
  flex-direction: column;
  color: white;
}

.quem4 {
  font-weight: 700;
  margin-bottom: 15px;
}

.titulof10 {
  font-size: 2.5em;
  font-weight: 700;
  margin-bottom: 25px;
}

.ds-f10 {
  width: 440px;
  height: 90px;
}

.imgf10 img {
  width: 380px;
  height: 540px;
  margin: 60em 0em 50em 5em;
}

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

.textf11 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5em;
}

.titulo-f11 {
  font-size: 2.5em;
  font-weight: 700;
  margin-bottom: 1em;
}

.ds-f11 {
  color: #2e2d33;
  width: 680px;
  text-align: center;
  line-height: 1.8em;
}

.inputs {
  margin-top: 1em;
  font-size: 14px;
  color: #2e2d33;
}

.nome-i input {
  width: 684px;
  height: 40px;
  background-color: #f5f6fa;
  border: 0px;
  cursor: pointer;
}

.input-l {
  display: flex;
  flex-direction: row;
  margin: 1em 0em 1em 0em;
}

.input-l1 {
  display: flex;
  flex-direction: row;
  max-width: 715px;
  height: 60px;
}

.cargo input {
  width: 210px;
  height: 40px;
  background-color: #f5f6fa;
  border: 0px;
  cursor: pointer;
}

.quantidade select {
  width: 210px;
  height: 40px;
  background-color: #f5f6fa;
  border: 0px;
  cursor: pointer;
}

.box-input {
  margin-top: 20px;
}

textarea {
  width: 684px;
  height: 100px;
  background-color: #f5f6fa;
  border: 0px;
  cursor: pointer;
}

.botaof11 button {
  background-color: #ee2e5d;
  color: white;
  width: 160px;
  height: 69px;
  border-radius: 3em;
  border: 0px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1em;
  margin-top: 1.5em;
}

.email input {
  width: 330px;
  height: 40px;
  background-color: #f5f6fa;
  border: 0px;
  cursor: pointer;
}

.l-tel,
.l-emp,
.l-qntd {
  margin-left: 25px;
}

.telefone input {
  width: 330px;
  height: 40px;
  background-color: #f5f6fa;
  border: 0px;
  cursor: pointer;
}

.faixa12 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 230px;
  background-color: #2e2d33;
  align-items: center;
  color: white;
  justify-content: center;
}

.logof12 img {
  width: 120px;
  margin-right: 15em;
}

.logosf12 {
  display: flex;
  flex-direction: row;
  width: 200px;
  margin-right: 15em;
}

.logof img {
margin-left: 1em;
}

.texto-f12 {
  text-align: center;
  line-height: 28px;
  width: 160px;
  cursor: pointer
}

.cnpj {
  font-size: 0.7em;
  margin-top: 10px;
  text-align: center;
}
```


## Códigos site responsivo:

### responsivo.css
```css=
@media (max-width: 400px) {
  .img-logo,
  .titulof1,
  .botaof1,
  .faixa2,
  .faixa3,
  .faixa4,
  .faixa6,
  .faixa7,
  .logo-l1,
  .logo-l2,
  .faixa9,
  .textf9,
  .box9,
  .faixa10,
  .faixa11,
  .faixa12 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .container {
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  .faixa1:nth-child(2) img {
    content: url("../../assets/images/back-responsive.png");
  }

  .faixa1 {
    background-image: url("../../assets/images/back-responsive.png");
    height: 30em;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  .img-logo img {
    margin-left: 1em;
    width: 199px;
    height: 27px;
  }

  .titulof1 {
    font-size: 24px;
    width: 320px;
    margin: 4em 0em 0em 2em;
    line-height: 25px;
  }

  .botaof1 button {
    margin: 3em 6em 0em 1.5em;
    width: 255px;
    height: 65px;
  }

  .box1 {
    width: 275px;
    height: 130px;
  }

  .quem {
    align-items: left;
    font-size: 14px;
  }

  .texto1 {
    font-size: 24px;
  }

  .box2 {
    margin: 4em 0em 0em 7em;
  }

  .text2 {
    width: 300px;
    height: 7em;
    font-size: 14px;
    color: #171717;
  }

  .boxf3 {
    width: 290px;
    font-size: 14px;
  }

  .oque {
    font-size: 14px;
    margin-bottom: 7px;
  }

  .titulof3 {
    font-size: 1.5em;
  }

  .imgf3 img {
    width: 300px;
    height: 188px;
    margin-right: 80px;
  }

  .faixa4 {
    height: 400px;
  }

  .box4 {
    margin: 0px 30px 0px 0px;
  }

  .boxf4 {
    margin: 2em 0em 0em 4.5em;
  }

  .text1 {
    width: 290px;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 1em;
  }

  .textof4 {
    margin-left: 3em;
  }

  .quem2 {
    margin-bottom: 10px;
  }

  .titulo4 {
    width: 320px;
    height: 120px;
    font-size: 24px;
  }

  .t-box1 {
    font-size: 24px;
  }

  .faixa5 {
    width: 100%;
    height: 240px;
  }

  .back-img img {
    width: 60px;
    height: 40px;
    margin: 2em 0em 0.3em 15em;
  }

  .ds-texto {
    font-size: 18px;
    width: 300px;
    height: 140px;
    font-weight: 500;
  }

  .ds {
    margin-bottom: 2em;
    font-size: 14px;
  }

  .boxes {
    display: flex;
    flex-direction: column;
    margin-bottom: 10em;
  }

  .mat-back img,
  .moeda-back img,
  .planejamento-back img,
  .cenario img {
    width: 130px;
  }

  .faixa7 {
    height: 1130px;
  }

  .boxf7 {
    margin: 1em 0em 0em 35em;
  }

  .quem3 {
    font-size: 14px;
    width: 332px;
    height: 28px;
  }

  .titulof7 {
    font-size: 24px;
    width: 290px;
  }

  .logo-l1 {
    width: 332px;
    height: 450px;
    justify-content: space-evenly;
    position: relative;
    top: 60px;
  }

  .logo-l2 {
    width: 332px;
    height: 450px;
    justify-content: space-evenly;
    margin: 5px auto 0px;
  }

  .faixa8 {
    justify-content: left;
    align-items: left;
    height: 110px;
  }

  .botaof8 button {
    margin-left: 40px;
  }

  .faixa9 {
    max-height: 2600px;
  }

  .textf9 {
    width: 332px;
    height: 82px;
    margin: 55em 0em 0em 0em;
  }

  .depoimentos {
    font-size: 14px;
    padding: 0em 11em 0.5em 0em;
  }

  .titulof9 {
    font-size: 24px;
  }

  .b1 {
    margin-bottom: 15px;
    max-width: 310px;
    height: 380px;
    position: relative;
  }

  .b-text9 {
    width: 300px;
    height: 409px;
  }

  .ds-f9 {
    font-size: 16px;
  }

  .faixa10 {
    width: 100%;
    height: 1000px;
  }

  .f-10 {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    height: 785px;
    margin-top: 50px;
  }

  .quem4 {
    font-size: 14px;
  }

  .titulof10 {
    font-size: 24px;
  }

  .ds-f10 {
    font-size: 14px;
    width: 280px;
    height: 90px;
  }

  .imgf10 img {
    width: 290px;
    height: 410px;
    margin-top: 4em;
  }

  .titulo-f11 {
    font-size: 24px;
  }

  .ds-f11 {
    color: #2e2d33;
    font-size: 14px;
    width: 240px;
    height: 170px;
  }

  .inputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
  }

  .nome-i input {
    width: 272px;
    height: 38px;
  }

  .input-l {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .email input,
  .telefone input,
  .cargo input {
    width: 272px;
  }

  .l-tel {
    margin: 7px 0px 0px 0px;
  }

  .input-l1 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .l-emp {
    margin: 1em 0em 0em 0em;
  }

  .l-qntd {
    margin: 1em 0em 0em 5.3em;
  }

  .l-qntd select {
    width: 272px;
  }

  .box-input {
    margin-top: 11.5em;
  }

  textarea {
    width: 272px;
    height: 100px;
  }

  .botaof11 button {
    margin-bottom: 4em;
  }

  .faixa12 {
    height: 285px;
  }

  .logof12 img {
    margin: 2em 0em 2.5em 0em;
  }

  .logosf12 {
    width: 100px;
    height: 70px;
    margin: 0em 0em 0em 0em;
    justify-content: center;
  }

  .logof img {
    width: 30px;
    height: 30px;
    margin-left: 0.5em;
  }

  .texto-f12 {
    font-size: 14px;
    margin-top: 1em;
  }

  .cnpj {
    font-size: 11px;
  }
}
```