/*======== RAIZ VARIÁVEIS ===============*/
* {
  font-family: 'Inter';
  color: var(--main-fontColor);
  
}
:root {
  --h1-size: 3.125em;
  --h1-font-weight: 800;
  --h2-fontWeight: 700;
  --h2-fontSize: 40px;
  --h3-fontSize: 1.9em;
  --rights-fontSize: 30px;
  --btn-fontWeight: 600;
  --p-fontWeight: 400;
  --p-fontSize: 20px;
  --main-fontColor: #596aac;
  --btn-fontColor: #ffffff; 
  --btn-bgColor: #ff832a;
  --btn-bgColor2: #596aac;
}

body {
  margin: 0;
  
}

body#form-body {
  background-image: url(../assets/background/bg-form.png);
  background: url(../assets/background/bg-form.png);
}
main, footer {
  overflow-x: hidden; 
  width: 100vw;
}

/*====== HEADER LOGOTIPO ============== */
header.index-page {
  background-color: #D3DBDC;
  width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden
}

header.form-page {
  background-color: transparent;
  width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden
}

.logo-eisen-header {
  margin-top: 50px;
  background-color: #D3DBDC;
}

.logo-eisen-header-form {
  margin-top: 50px;
  background-color: transparent;
}

/*=========== SECTION ONE ========== 1 == */

section.section-one {
  background-color: #D3DBDC;
  width: 100vw;
}

section.section-one-form {
  background-color: transparent;
  width: 100vw;
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-font-weight);
  line-height: 102%;
  
  margin-bottom: 50px;
}

p.section-one {
  margin-bottom: 75px;
  font-weight: var(--p-fontWeight);
  font-size: var(--p-fontSize);
  width: 25.75em;
}




/*=========== SECTION TWO ========== 2 == */

section.section-two.with-background {
  
  background-image: url(../assets/background/bg-sec2.png);
}





/* -------------
      Código Adicionado para Opacidade da Background na Secao 2 

------------------*/


.section-two {
  background-color: #D3DBDC;
  background-position: left;
  background-repeat: no-repeat;
  background-size: 800px 960px;

  padding: 100px;
  width: 100vw;
}

table {
  max-width: 600px;
  display: flex;
  justify-content: end;
}

table tr {
  display: flex;
  gap: 2em;
}

.td-icon1 {
  margin-bottom: 46px;
}

.td-icon2 {
  margin-bottom: 70px;
}

table tr td {
  font-weight: var(--p-fontWeight);
  font-size: var(--p-fontSize);
}

/* ========== SECTION THERE 3 ==============  */

section.three-section {
  background-color: #D3DBDC;
  background: #D3DBDC;
  width: 100vw;
  overflow-x: hidden;
}

.three-section .container {
  display: flex;
  justify-content: center;
}

h2 { 
  font-weight: var(--h2-fontWeight);
  font-size: var(--h2-fontSize);
  margin-bottom: 100px;
  line-height: 36px;
}

          /*            >>> CARDS <<<<                 */
          div img.card-img-top {
            height: 14em;
            width: 14em;
          }

          div img.card-line-base {
            display: flex;
            margin-top: 1.25em;
          }

          .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            border: none;

            background-color: #D3DBDC;
            background: #D3DBDC;
          }

          .card-body h3 {
            font-weight: var(--btn-fontWeight);
            text-align: left;
            font-size: var(--p-fontSize);
            padding-left: 1.2em;
          }

          .card-body p {
            font-weight: var(--p-fontWeight);
            text-align: left;
            font-size: var(--p-fontSize);
            padding-left: 1.2em;
            line-height: 110%;
          }


/* ============= FOUR SECTION  ============== */

section#four-section {
  background-color: #D3DBDC;
  background: #D3DBDC;
  width: 100vw;
}

.four-section .container {
  display: flex;
  justify-content: center;
}

div#photo-align {
  display: flex;
  flex-direction: row;
  align-items: center;
}
  #photo-align img {
    width: 75px;
    height: 75px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); 
    margin-left: 33px;
    margin-top: 48px;
  }
 
  #photo-align h3 { 
    color: #dce6e7;
    font-weight: 600;
    font-size: 20px;

    margin-left: 25px;
    margin-top: 48px;
  }

  #card-test p.my-4 {
    margin-left: 133px;
    color: #D3DBDC;
    font-weight: 400;
    font-size: 20px;
    max-width: 410px;
    padding-bottom: 48px;
  }

  #card-test div.author div.name {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-right: 35px;
  }
/*============ FOOTER ===================*/

footer {
  width: 100vw;
}
        /* Lista */
        ul.footer-ul-list  li h5 {
          font-weight: 600;
          font-size: var(--p-fontSize);
          color: #D3DBDC;
        }
        ul.footer-ul-list  li a:hover {
          font-size: var(calc(--p-fonsizSize + 0.2em));
          color: var(--btn-bgColor);
        }

        ul.footer-ul-list li a {
          text-decoration: none;
          color: white;
        }

        ul.footer-ul-list li{
          margin-bottom: 3.125em;
        }

#footer-rights-text p {
  font-size: var(--rights-fontSize);
  color: #D3DBDC;
  font-weight: 400; 
}

/* ==> ELEMENTOS GERAIS DA PAGINA <== */

body {
  overflow-x: hidden;
}

button {
  width: 280px;
  height: 85px;
  padding: 30px 25px;
  align-items: center;
  background: var(--btn-bgColor);
  box-shadow: -6.65882px 9.32235px 14.6494px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  color: var(--btn-fontColor);
  border: none;
  font-weight: var(--btn-fontWeight);
  cursor: pointer;
  position: relative;
}

button:hover {
  background-color: var(--btn-bgColor2);
}


#card-test {
    background: rgba(89, 106, 172, 0.6);
    border-radius: 20px;
    padding: 20px;
    position: sticky;
    top: 0;
}

h3.text-dark { 
  font-weight: var(--btn-fontWeight);
  font-size: var(--h3-fontSize);
  color: #383D4C;
}

.my-4 i {
  font-weight: var(--p-fontWeight);
  font-size: var(--p-fontSize);
  line-height: 24px;
  color: #D3DBDC;
}

.name.ps-2 span {
  color: #D3DBDC;
}

.name.ps-2 small {
  color: #D3DBDC;
}