.test_btn {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 32px;
  right: 32px;
  width: 110px;
  height: 104px;
  transform: rotate(8deg);
  scale: 1;
  background-image: url('../assets/images/teste.svg');
  filter: drop-shadow(8px 8px 4px rgba(0, 0, 0, 0.25));
  transition: scale 0.08s, transform 0.12s;
  padding: 16px;
  line-height: 19.5px !important;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  gap: 2px;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background-color 0.2s;
}
.test_btn img{
  filter: invert(1);
}
.test_btn:hover{
  scale: 1.10;
  transform: rotate(5deg);
  transition: scale 0.08s, transform 0.12s, filter 0.08s;
  filter: drop-shadow(12px 12px 6px rgba(0, 0, 0, 0.25));
}
.test_btn:active{
  scale: 0.96;
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.25));
}
.title{
  flex-direction: column !important;
}
internal{
  flex-direction: column;
}
banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0px;
  height: 314px;
  width: 100%;
  padding: 0!important;
}
banner .background{
  position: absolute;
  background-image: linear-gradient(rgba(36, 61, 101, 0),rgba(36, 61, 101, 0)), url('../assets/images/about.png'); 
  background-size: cover;
  background-position: center;
  height: inherit;
  width: 100%;
}
body.darkmode banner .background{
  background-image: linear-gradient(rgba(36, 61, 101, 0.32),rgba(36, 61, 101, 0.32)), url('../assets/images/about.png'); 
}
hr{
  width: 100%;
  max-width: 512px;
}
banner .filter{
  position: absolute;
  content: '';
  height: inherit;
  width: 100%;
  background: linear-gradient(90deg,rgba(45, 66, 103, 0.88) 0%, rgba(45, 66, 103, 0.88) 50%, rgba(45, 66, 103, 0.88) 100%);
}
banner .content{
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
  max-width: 1318px;
  position: relative;
  z-index: 2;
  gap:18px;
}
banner .text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: 32px;
  gap: 18px;
}
banner .text p{
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  font-size: 18px;
  font-weight: 700;
  max-width: 694px;
  line-height: 32px;
}
h2{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  max-width: 740px;
  line-height: 36px;
  text-shadow: 0px 0px 2.5px rgba(255, 255, 255, 1);
}

@media only all and (min-width: 1380px){
  banner .content{
    padding: 64px 0!important;
  }
}

@media only all and (max-width: 820px){
  .test_btn{
    width: 100px;
    height: 95px;
    font-size: 18px;
    background-size: contain;
    right: 15px;
    bottom: 15px;
    }
  banner .content{
    align-items: center!important;
    justify-content: center!important;
  }
  banner .text p{
    align-items: center!important;
    text-align: center!important;
  }
  h2{
    align-items: center!important;
    text-align: center!important;
  }
}

@media only all and (max-width: 480px){
  banner{
    height: 366px;
  }
}

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

Intro{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 64px;
}
.introContainer{
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  gap: 32px;
  justify-content: space-between;
  max-width: 1312px!important;
}
.introImg{
  background-image: url(../assets/images/about.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  width: 564px;
  height: 376px;
  margin-top: -302px;
}
intro .introText{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  gap: 18px;
}
.introText .lineImg{
  background-image: url(../assets/images/line.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 12px;
  max-width: 320px;
}
intro p{
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
  width: 100%;
  max-width: 713px;
}
.introText p1{
  color: rgba(54, 83, 130, 1);
  font-size: 14px;
  line-height: 26px;
  font-weight: bold;
  width: 100%;
  max-width: 713px;
}
.introText p2{
  color: rgba(54, 83, 130, 1);
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
  width: 100%;
  max-width: 713px;
}
body.darkmode p1,
body.darkmode p2{
  color: rgba(255, 255, 255, 1);
}
body.darkmode h2{
  color: rgba(255, 255, 255, 1)!important;
}
body.darkmode p{
  color: rgba(255, 255, 255, 1)!important;
}

@media only all and (max-width: 1430px){
  .introImg{
    height: 306px;
    margin-top: -226px;
  }
  intro{
    padding: 0!important;
  }
}

@media only all and (max-width: 1080px){
  .introImg{
    width: 466px;
    margin-top: -204px;
  }
}

@media only all and (max-width: 820px){
  .introContainer{
    flex-direction: column;
    gap: 42px;
  }
  .introImg{
    margin-top: 0!important;
    width: 100%;
  }
  intro p{
    text-align: center;
  }
}

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

vision{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
vision .container{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
  width: 100%;
  max-width: 1312px;
  padding-top: 64px!important;
}
.left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(50% - 32px);
  gap: 42px;
}
.right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(50% - 32px);
  gap: 42px;
}
vision .container h2{
  color: rgba(54, 83, 130, 1);
  font-size: 44px;
}
vision .container p{
  color: rgba(79, 79, 79, 0.95);
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
}

@media only all and (max-width: 820px){
  vision .container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 56px!important;
    gap: 56px;
  }
  vision .left{
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  vision .right{
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

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

values{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 64px 0;
}
.background{
  position: absolute;
  content: '';
  height: 398px;
  width: 100%;
  background-color: rgba(222, 234, 243, 1);
}
body.darkmode .background{
  background-color: #2c3e58;
}
.valuesContainer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1002px;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.valueBox{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(33.33% - 21.33px);
  height: 230px;
  border-radius: 6px;
  background-color: rgba(54, 83, 130, 1);
  text-align: start;
  padding: 24px;
  gap: 32px;
  position: relative;
}
.valueBox .iconBox{
  flex-shrink: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.valueBox .icon{
  width: 54px;
  height: 54px;
  filter: invert(1);
}
.valueTexts{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 20px;
}
.valueTexts p{
  color: #FFF;
}

@media only all and (max-width: 970px){
  .valueBox{
    width: calc(50% - 16px);
  }
  .background{
    height: 668px;
  }
}

@media only all and (max-width: 630px){
  .valueBox{
    width: 100%;
  }
  .background{
    height: 1446px;
  }
}

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

last{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 56px 0;
  margin-bottom: -48px;
}
.lastContainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 982px;
  gap: 44px;
}
.lastTexts{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  width: calc(70% - 22px);
  gap: 24px;
}
.lastTexts h2{
  display: inline;
  color: rgba(54, 83, 130, 1);
  font-size: 24px;
  line-height: 36px;
}
.lastTexts p{
  color: rgba(79, 79, 79, 1);
  font-size: 14px;
  line-height: 26px
}
.lastButtons{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc(30% - 22px);
  gap: 16px;
}
.lastButtons a{
  width: 100%;
}

@media only all and (max-width: 820px){
  banner{
    height: 512px;
  }
  last{
    margin-bottom: 0;
  }
  .lastContainer{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .lastTexts{
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .lastButtons{
    width: 100%;
  }
}