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

# Reset

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

*{

  margin:0;

  padding:0;

  scroll-behavior:smooth;

  box-sizing: border-box;

}

ol, ul {

  list-style: none;

}

a{

  text-decoration: none;

}



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

# General

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

body {

  font-family: "Open Sans", sans-serif;

  color: #444444;

}



:root{

  --primary-green: #799c1f;

  --second-green: #90b828;

  --primary-orange: #ff7403;

}



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

# Backgrounds

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

#backgroundTop{

  background-image: url("../img/home/shapeLogo.png");

  background-repeat: no-repeat;

  background-color: var(--primary-green);

  height: 900px;

  z-index: -11;

  position: absolute;

}



#backgroundBottom{

  height: 500px;

  background-color: #f6f6f5;

  margin-top: -400px;

}



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

# Mobile Navigation

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

#mobile-btn{

  display: none;

  width: 40px;

  height: 40px;

}



.mobile-nav-toggle {

  position: fixed;

  right: 15px;

  top: 15px;

  z-index: 9998;

  border: 0;

  background: none;

  font-size: 24px;

  transition: all 0.4s;

  outline: none !important;

  line-height: 1;

  cursor: pointer;

  text-align: right;

}



.mobile-nav-toggle i{

  color: var(--primary-orange);

}



.mobile-nav-overly{

  width: 100vw;

  height: 100vh;

  position: fixed;

  background-color: rgba(0, 0, 0, .7);

  top: 0px;

}



.mobile-nav {

  position: fixed;

  top: 55px;

  right: 15px;

  bottom: 15px;

  left: 15px;

  z-index: 9999;

  overflow-y: auto;

  background: #fff;

  transition: ease-in-out 0.2s;

  opacity: 0;

  visibility: hidden;

  border-radius: 10px;

  padding: 10px 0;

}



.mobile-nav * {

  margin: 0;

  padding: 0;

  list-style: none;

}



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



  #mobile-btn{

    display: flex;

  }



}

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

# Header

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

#headerTop{

  padding-top: 50px;

}



#headerNav ul{

  border-bottom: 1px solid white;

  padding-left: unset;

  padding-bottom: 10px;

}



#headerNav ul li a{

  color: white;

  margin-right: 25px;

  font-size: 20px;

  font-weight: 300;

}



#headerNav ul li:last-child a{

  margin-right: unset;

}



#headerNav .dropdown ul.left, #headerNav .dropdown ul.right {

  display: block;

  position: absolute;

  right: 20px;

  top: calc(100% + 30px);

  margin: 0;

  padding: 25px 0;

  z-index: 99;

  opacity: 1;

  visibility: hidden;

  background: #fff;

  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);

  transition: 0.3s;

  width: 300px;

  text-align: center;

}



#headerNav .dropdown ul.right{

  right: 30px;

}



#headerNav .dropdown ul.more{

  right: 0px !important;

} 



#headerNav .dropdown ul.left{

  right: -30px;

}



#headerNav .dropdown ul.left li, #headerNav .dropdown ul.right li{

  margin-bottom: 15px;

}



#headerNav .dropdown:hover > ul {

  opacity: 1;

  top: 120%;

  visibility: visible;

}



#headerNav .dropdown ul.right a, #headerNav .dropdown ul.left a{

  font-size: 15.5px;

  color: var(--primary-green);

  margin-right: unset;

}



#headerNav .dropdown ul.right a:hover, #headerNav .dropdown ul.left a:hover{

  color: var(--primary-orange);

  transition: 0.2s;

  margin-right: unset;

}



#loginButtonHeader{

  background-color: var(--primary-orange);

  color: white;

  font-size: 15px;

  font-weight: 600;

  transition: .3s;

}



#loginButtonHeader:hover{

  background-color: white;

  color: var(--primary-orange);

  transition: .3s;

}



#headerNav.active{

  background-color: white;

  position: fixed;

  z-index: 111111;

  padding: 20px;

  border-radius: 5px;

}



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



  #headerNav ul li{

    margin-bottom: 35px;

    text-align: center;

  }



  #headerNav .dropdown ul.more{

    right: -111px !important;

  } 



  #headerNav ul li a{

    color: var(--primary-orange);

    margin-right: unset;

  }



  #loginButtonHeader{

    align-self: center;

    padding: .4rem 1rem;

    height: 42.5px;

  }



  #loginButtonHeader:hover{

    border: 2px solid var(--primary-orange);

  }



  #headerNav .dropdown ul.right {

    right: -20px;

  }



  #headerNav .dropdown ul.left {

    right: -45px;

  }



}



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

# Hero

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

#hero{

  margin-top: 90px;

  height: 930px;

}



#hero h1, h2{

  color: white;

  text-align: center;

}



#hero h1{

  font-weight: 700;

}



#hero h2{

  width: 90%;

  font-style: italic;

  font-weight: 300;

  font-size: 22px;

}



#heroBigBox{

  height: 750px;

  width: 100%;

  position: relative;

}



#horizontalScrool, .teste{

  width: 100%;

  height: 100%;

}



#heroTheBox, #heroTheBox2, #heroTheBox3{

  width: 311px;

  position: relative;

  padding-top: 10px;

}



#heroTheBox img, #heroTheBox2 img, #heroTheBox3 img{

  border-radius: 5px;

}



#heroTheBox:nth-of-type(2), #heroTheBox2:nth-of-type(2), #heroTheBox3:nth-of-type(2){

  margin: 0px 20px 0px 20px;

}



#hthbox{

  height: 100%;

  pointer-events: none;

}



#theBoxInfo{

  width: 90%;

  border-radius: 5px;

  text-align: center;

  padding: 15px;

  background-color: rgba(255, 255, 255, .95);

  margin-top: -100px;

}



#theBoxInfo span, h3{
  font-size: 1.65rem;
  color: var(--primary-orange);

}



#theBoxInfo span{

  font-weight: 600;

}



#theBoxInfo h3{

  font-weight: 700;

  padding-bottom: 20px;

  margin-bottom: 20px;

  border-bottom: 1px solid var(--primary-orange);

  font-size: 23px;

}



#theBoxInfo a{

  padding: 13px 36px;

  color: white;

  background-color: var(--primary-orange);

  border-radius: 5px;

  font-weight: 700;

  font-size: 22px;

  margin-bottom: -43px;

  transition: .3s;

}



#theBoxInfo a:hover{

  margin-bottom: -33px;

  color: var(--primary-orange);

  background-color: white;

  transition: .3s;

  border: 2px solid var(--primary-orange);
  cursor: pointer;

}



.dots{

  position: absolute;

  width: 100%;

  display: none;

  justify-content: center;

  align-items: center;

  bottom: 25px;

}



.imgAtual{

  width: 55px !important;

  background-color: white;

  transition: all 1s;

}



.dots a{

  border-radius: 10px;

  transition: all 1.5s;

  border: 3px solid var(--primary-orange);

  padding: 6px;

  width: 3px;

  height: 2px;

  margin-right: 15px;

  cursor: pointer;

  background-color: var(--primary-orange);

}



.dots a:hover{

  background-color: white;

}





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



  #theBoxInfo a{

    font-size: 18px;

  }



  #theBoxInfo p{

    font-size: 13px;

  }



  #theBoxInfo h3 {

    font-size: 15px;

  }



  #theBoxInfo span {

    font-size: 14px;

  }



  #horizontalScrool, .teste{

    position: absolute;

  }



}



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



  #hthbox{

    width: 973px;

    position: absolute;

    transition: all 1.5s;

    left: 0px;

  }



  #heroBigBox{

    overflow-x: scroll;

  }



}



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



  .dots{

    display: flex;

  }



  #heroBigBox{

    overflow: hidden;

  }



}

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

# quemSomos

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

#quemSomos{

  margin-top: 80px;

  background-image: url("../img/home/black-logo.jpg");

  background-repeat: no-repeat;

  background-position: center;

}



#quemSomos span{

  margin-top: 70px;

  color: var(--primary-orange);

  font-size: 32px;

  font-weight: 700;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--primary-orange);

  margin-bottom: 70px;

}



#quemSomos p{

  text-align: center;

  color: var(--primary-orange);

  font-weight: 300;

  font-size: 20px;

}



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

# conquistas

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

#conquistas{

  margin-top: 100px;

  padding-top: 100px;

  padding-bottom: 100px;

  background-color: #f6f6f5;

}



#conquitasTop{

  margin-bottom: 50px;

}



#counterUp1, #counterUp2, #counterUp3, #counterUp4{

  color: var(--primary-orange);

  font-weight: 800;

  font-size: 35px;

  margin-bottom: 10px;

}



#numberDescription{

  font-weight: 300;

  font-style: italic;

  font-size: 20px;

}



#ctLeft, #ctbLeft{

  margin-bottom: 30px;

}



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

# depoimentos

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

#depoimentos{

  background-image: url("../img/home/depoimentos-clientes-satisfeitos.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  height: 610px;

  color: white;

}



#depoimentos .container, #carrousel{

  height: 100%;

}



#depoimentos .container{

  position: relative;

}



#carrousel{

  width: 100%;

  position: relative;

  overflow: hidden;

}



#carrousel img:first-child{

  border-radius: 50px;

  border: 17px solid grey;

  margin-bottom: 15px;

}



#carrousel span{

  margin-bottom: 15px;

  font-weight: 700;

}



#slides{

  display: flex;

  width: 800%;

  position: absolute;

  height: 100%;

}



.theTestmonial{

  height: 100%;

  width: 14.2857142857%;

}



#ratingStars{

  margin-bottom: 50px;

}



#carrousel p{

  font-size: 33px;

  height: 180px;

  text-align: center;

  font-weight: 300;

  font-style: italic;

}



.navigation{

  display: flex;

  justify-content: center;

  width: 100%;

  height: 30px;

  position: absolute;

  bottom: 50px;

}



.navigation a{

  margin-right: 10px;

  width: 13px;

  height: 13px;

  border-radius: 50px;

  background-color: var(--primary-orange);

}



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



  #carrousel p{

    font-size: 25px;

  }



}



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



  #carrousel p{

    font-size: 18px;

  }



}



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

# avaliacaoMl

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

#avaliacaoMl{

  margin-top: 150px;

  margin-bottom: 150px;

}



#avlMlAdjusment{

  margin-bottom: 150px;

}



#avlMlBoxInfo img{

  align-self: baseline;

  margin-bottom: 15px;

  width: 120px;

}



#avlMlBoxInfo h3{

  font-weight: 700;

  padding-bottom: 15px;

  margin-bottom: 25px;

  border-bottom: 1px solid var(--primary-orange);

}



#avlMlBoxInfo p, #avlMlBoxInfo span{

  font-style: italic;

}



#avlMlBoxInfo p{

  font-weight: 700;

  font-size: 19px;

}



#avlMlBoxInfo span{

  font-weight: 400;

  font-size: 14px;

}



#avaliacaoMl .container a{

  height: 70px;

  text-align: center;

  font-size: 25px;

  font-weight: 700;

  max-width: 350px;

  padding: 11px 90px;

  color: white;

  background-color: var(--primary-orange);

  border-radius: 5px;

  border: 3px solid var(--primary-orange);

  transition: .3s;

}



#avaliacaoMl .container a:hover{

  color: var(--primary-orange);

  background-color: white;

  transition: .3s;

}



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



  #avlMlAdjusment img{

    margin-top: 20px;

  }



}



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

# blog

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

#blog{

  padding-bottom: 150px;

}



#blog #container #title{

  color: var(--primary-orange);

  font-size: 27px;

  font-weight: 700;

  padding-bottom: 30px;

}



#blog #container #lineTitle{

  width: 70px;

  height: 2px;

  background-color: var(--primary-orange);

  margin-bottom: 75px;

}



#thePost{

  width: 360px;

}



#thePost img, #postInfo{

  margin-bottom: 13px;
  width: 360px;

}

#thePost img{
  height: 224px;
}

#thePost span{
    font-size: 11.7px;
    display: flex;
    align-items: center;
    font-weight: 700;
}

#thePost span a{
  color: var(--primary-orange);
  display: flex;
  justify-content: center;
  align-items: center;
}



#thePost:first-child, #thePost:nth-of-type(2){

  margin-right: 20px;

}



#thePost span:first-child, #thePost span:nth-of-type(2){

  padding-right: 6px;

}



#thePost span:nth-of-type(2), #thePost span:nth-of-type(3){
  padding-left: 6px;
}



#thePost h3 a{

  color: var(--primary-orange);

  font-weight: 700;

}



#thePost p{

  font-size: 15px;

}



#thePost #readMoreButton{

  background-color: var(--primary-orange);

  padding: 8px 35px;

  align-self: baseline;

  color: white;

  font-weight: 700;

  border: 2px solid var(--primary-orange);

  border-radius: 5px;

  transition: .3s;

}



#thePost #readMoreButton:hover{

  background-color: white;

  color: var(--primary-orange);

  transition: .3s;

}



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



  #thePost{

    margin-bottom: 45px;

  }



  #thePost:first-child, #thePost:nth-of-type(2){

    margin-right: unset;

  }



}



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



  #thePost{

    padding: 0px 20px 0px 20px;

  }



}



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

# footer

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

footer{

  padding: 100px 0px 0px 0px !important;

  background-color: var(--primary-green);

  background-image: url("../img/home/footer-shape.png");

  background-repeat: no-repeat;

  height: 500px;

}



#footerBoxes div ul{

  height: 100%;

}



#footerBoxes div:first-child, #footerBoxes div:nth-of-type(2){

  border-right: 1px solid white;

}



#footerBoxes div:nth-of-type(2) ul li{

  font-weight: 700;

  margin-bottom: 20px;

  font-size: 18px;

}



#footerBoxes div:nth-of-type(3) ul{

  margin-bottom: unset;

}



#footerBoxes div:nth-of-type(3) ul li{

  font-weight: 300;
  font-size: 14px;
  font-style: italic;

}



#footerBoxes div:nth-of-type(3) ul li.ftTitle{

  font-style: unset;

  font-weight: 700;

  font-size: 18px;

}



#footerBox, #footerBox a{

  color: white;

}



#footerBox span{

  font-weight: 700;

  font-size: 20px;

}



#footerLogo{

  width: 150px;

}



#redesSociais{

  width: 150px;

  margin-top: 20px;

  margin-bottom: 20px;

}



#redesSociais a{

  width: 45px;

  height: 45px;

  border-radius: 5px;

  display: flex;

  justify-content: center;

  align-items: center;

}

#redesSociais a img{
  border-radius: 5px;
}



#footerCopyright{

  margin-top: 100px;

  width: 100%;

  height: 100px;

  background-color: white;

  font-size: 15px;

}



#todos{

  float: right;

}



#footerCopyright a{

  color: var(--primary-orange);

}



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



  footer{

    height: 1100px;

  }



  #footerBoxes ul{

    padding-left: unset;

  }



  #footerBoxes div:first-child, #footerBoxes div:nth-of-type(2){

    border-right: unset;

  }



  #footerBoxes div:nth-of-type(2){

    margin-top: 70px;

  }



}



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



  #footerCopyright{

    font-size: 13px;

    height: 140px;

    padding-top: 15px;

    padding-bottom: 15px;

  }



  #footerCopyright span{

    text-align: center;

    margin-top: 15px;

  }



  #todos{

    float: unset;

  }



}