:root {
  --bs-verde: #239242;
  --bs-amarelo: #ffff7b;
}

/**************
    Hero
**************/

.hero-container {
  background-image: url("../imagens/home/hero.webp");
  background-size: cover;
  background-position: center;
  height: 105vh;
}

.hero-box {
  width: 75%;
}

.hero-box h1 {
  text-shadow: #fff 2px 0 5px;
}

.hero-box p {
  text-shadow: #000 10px 0 10px;
}

.botao-fale-conosco {
  background-color: var(--bs-verde);
  color: #ffffff;
}

.botao-fale-conosco:hover {
  background-color: #15702f;
  color: #ffffff;
}

/**************
    Serviços
**************/

.servicos-container {
  padding: 80px 0px;
  background-color: var(--bs-verde);
  color: #f7f7f5;
}

.card-servicos {
  padding: 4%;
  margin-top: 45px;
  border-radius: 12px;
}

.card-servicos-icone {
  background-color: var(--bs-verde);
  height: 44px;
  padding: 10px;
  border-radius: 8px;
}

.lista-texto {
  line-height: 26px;
}

.botao-servicos {
  background-color: #c4ff46;
  color: var(--bs-dark);
}

.botao-servicos:hover {
  background-color: #9ace2b;
  color: var(--bs-dark);
}

/**************
    Detalhes
**************/

.detalhes-container {
  padding: 65px 0px 150px 0;
}

.detalhes-info b {
  color: #262626;
  font-weight: 700;
}

.detalhes-info p {
  color: #606060;
  font-weight: 600;
}

.detalhes-box-decoracao::after {
  content: "";
  width: 1px;
  height: 40px;
  position: absolute;
  background-color: #b9b9b9;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/**************
    Beneficios
**************/

.beneficios-container {
  padding: 80px 0px;
  background-color: #fdfdfd;
}

.beneficios-icone {
  background-color: var(--bs-verde);
  height: 44px;
  padding: 10px;
  border-radius: 50%;
}

.beneficios-texto {
  line-height: 26px;
}

/**************
    Clientes
**************/

.clientes-container {
  padding: 90px 0px;
}

#logoCarousel {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logoCarousel img {
  opacity: 0.6;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

#logoCarousel img:hover {
  opacity: 1;
  scale: 1.1;
}

/**************
    Blog
**************/

.card-artigo-noticias-home {
  background-color: #efefef;
}

.blog-home-container {
  background-color: #fdfdfd;
  padding: 25px 0 150px;
}

.botao-ver-artigo {
  border: none;
  gap: 10px;
  padding: 8px 14px;
  display: flex;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
  width: fit-content;
  transition: all 0.3s ease-in-out;
  background-color: #1b622f;
  color: #ffffff;
}

/**************
    Carousel
**************/

#CarouselHome {
  position: relative;
}

#CarouselHome .carousel-imagem-box {
  width: 49%;
  object-fit: cover;
  height: 650px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
}

#CarouselHome .carousel-imagem-box img {
  width: auto;
  height: 100%;
}

#CarouselHome .carousel-control-prev,
#CarouselHome .carousel-control-next {
  position: absolute;
  bottom: -120%;
  width: 35px;
}

#CarouselHome .carousel-control-prev {
  left: 45%;
}

#CarouselHome .carousel-control-next {
  right: 45%;
}

#CarouselHome .carousel-control-prev-icon {
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  .hero-box {
    width: 100%;
  }

  .detalhes-box-decoracao::after {
    width: 40px;
    height: 1px;
    left: 50%;
    top: 120%;
    transform: translateX(-50%);
  }

  .call-to-action-box {
    transform: translateX(0);
    background-color: #239242;
    padding: 25px 50px;
    border-radius: 5px;
    color: #fff;
    position: absolute;
    top: -155px;
    min-width: 105vw;
    left: 0;
  }

  .footer-info {
    text-align: center;
    margin-top: 120px;
  }

  #CarouselHome .carousel-imagem-box {
    width: 100%;
  }

  #CarouselHome .carousel-box {
    flex-direction: column;
  }

  #CarouselHome .carousel-imagem-box {
    margin: 20px 0;
    height: 350px;
  }

  #CarouselHome .carousel-control-prev {
    left: 35%;
  }

  #CarouselHome .carousel-control-next {
    right: 35%;
  }
}
