:root {
   --banner-altura: 100vh
}

#bannerPrincipal {
   width: 100%;
   height: var(--banner-altura);
   padding: 0;
   margin: 0;
   position: relative;
}

#bannerPrincipal .carousel-container {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   z-index: 3;
}

#bannerPrincipal .carousel-inner,
#bannerPrincipal .carousel-item {
   height: 100%;
}

#bannerPrincipal img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
}

/* Infos para Mudar */
#bannerPrincipal .frase01 {
   line-height: 74px;
}
#bannerPrincipal .frase01 span {
   color: #fff;
   padding: 10px 0px;
   border-radius: 20px;
   display: inline-block;
   font-weight: bolder;
   font-size: 60px;
}
#bannerPrincipal .frase02 {
   font-size: 16px;
   color: #fff;
   position: relative;
}
#bannerPrincipal .frase02 .box {
   background-color: rgba(0,0,0,.8);
   border-radius: 30px;
   padding: 20px
}
#bannerPrincipal .frase02 .box01 {
   font-size: 33px;
   line-height: 47px;
}
#bannerPrincipal .frase02 .box span {
    font-size: 60px;
    font-weight: 700;
}
#bannerPrincipal .btn-banner {
   background: #1B4D41;
   background: linear-gradient(90deg, rgba(27, 77, 65, 1) 0%, rgba(87, 158, 128, 1) 100%);
   border-radius: 200px;
   font-size: 16px;
   text-align: center;
   color: #FFF;
   padding: 4px 15px;
   border: 0px none;
}
#bannerPrincipal .btn-banner:hover {
   color: #FFF;
   box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, .5);
   animation: pulse 1s infinite; /* ativa a animação */
}

#bannerPrincipal .btn-whatsapp {
    background: url(/assets/img/bgwhatsapp.png) no-repeat;
    color: #FFF;
    padding: 4px 10px 4px 4px;
    position: absolute;
    z-index: 2;
    right: 0px;
    top: -150px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    width: 102px;
    height: 92px;
}
#bannerPrincipal .btn-whatsapp i {
    color: #FFF;
    font-size: 44px;
}

#bannerPrincipal .btn-whatsapp:hover {
   animation: pulse 1s infinite; /* ativa a animação */
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.05);
   }
   100% {
      transform: scale(1);
   }
}

#bannerPrincipal .logo img {
   max-width: 350px
}

#bannerPrincipal .carousel-overlay {
   right: 0px;
   top: 0px;
   left: 0px;
   bottom: 0px;
   z-index: 2;
}

#bannerPrincipal .carousel-caption {
    right: 10%;
    top: 60px;
    left: 10%;
    color: #fff;
    bottom: 0%;
    z-index: 3;
    text-align: left;
}

#bannerPrincipal .carousel-indicators {
   margin-bottom: 40px;
   z-index: 4;
}

#bannerPrincipal .carousel-overlay {
   right: 0px;
   top: 0px;
   left: 0px;
   bottom: 0px;
   z-index: 2;
}

.flutuar_esq {
    z-index: 2;
    position: absolute;
    left: 0px;
    top: -50px;
    width: 373px;
}
.flutuar_dir {
   z-index: 2;
   position: absolute;
   right: 0px;
   top: 50px;
   width: 200px;
}

/* Intro */
.sobrenosContainer {
   background: #5ba485;
   color: #FFF;
   overflow: visible;
}

.sobrenosContainer>.container {
   z-index: 2;
}

.sobrenosContainer .titulo {
   font-size: 34px;
   font-weight: 500;
   line-height: 38px;
}
.sobrenosContainer .item {
   background-color: #161616;
   border-radius: 30px;
   text-align: center;
   padding: 20px
}
.sobrenosContainer h1 {
   font-weight: 700;
   text-transform: uppercase;
   margin: 20px 0px 15px;
   font-size: 28px;
}
.sobrenosContainer .item img {
    width: 110px;
    height: 110px;
}

.sobrenosContainer .texto {
   font-size: 14px;
}

.sobrenosContainer .btn-garanta {
   background: #1B4D41;
   background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(87, 158, 128, 1) 100%);
   border-radius: 200px;
   font-size: 16px;
   text-align: center;
   color: #FFF;
   padding: 4px 15px;
   border: 0px none;
}
.sobrenosContainer .btn-garanta:hover {
   color: #FFF;
   box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, .5);
   animation: pulse 1s infinite; /* ativa a animação */
}

.flutuar_servicos_esq {
    z-index: 2;
    position: absolute;
    left: 0px;
    top: 25%;
    width: 160px;
}
.flutuar_servicos_dir {
   z-index: 2;
   position: absolute;
   right: 0px;
   bottom: 25%;
   width: 160px;
}

.servicosContainer {
   background: url(/assets/img/bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   color: #FFF;
}
.servicosContainer .head {
   font-size: 30px;
   font-weight: 700;
   line-height: 32px;
}
.servicosContainer .item {
   position: relative;
}
.servicosContainer .item h1 {
   position: absolute;
   bottom: 10px;
   left: 40px;
   right: 40px;
   color: #FFF;
   font-weight: 400;
   font-size: 24px
}
.servicoContainer {
   background: url(/assets/img/bgservico.jpg);
   background-color: #161616;
   background-size: auto 100%;
   background-repeat: no-repeat;
   background-position: center;
   position: relative;
}
.servicoContainer .item {
   color: #FFF;
}
.servicoContainer .item h1 {
   font-size: 70px
}
.servicoContainer .item h1 span {
   position: relative;
   display: inline-block;
}
.servicoContainer .item h1 span:after {
   display: block;
   background-color: #FFF;
   height: 5px;
   width: 100%;
   content: '';
}
.servicoContainer .btn-garanta {
   background: #1B4D41;
   background: linear-gradient(90deg, rgba(27, 77, 65, 1) 0%, rgba(87, 158, 128, 1) 100%);
   border-radius: 200px;
   font-size: 14px;
   text-align: center;
   color: #FFF;
   padding: 4px 15px;
   border: 0px none;
   width: 100%;
}
.servicoContainer.servico03 .btn-garanta {
   width: 200px;
   height: 40px
}
.servicoContainer .btn-garanta:hover {
   color: #FFF;
   box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, .5);
   animation: pulse 1s infinite; /* ativa a animação */
}
.servicoContainer.servico03 .btn-garanta .position-absolute {
   right: 80px !important;
   bottom: -9px !important
}
.servicoContainer.servico03 .btn-garanta i {
   margin-top: 3px;
}
.servicoContainer.servico01 .item .position-absolute {
   bottom: -20px;
   right: -20px
}
.servicoContainer.servico02 .item .position-absolute {
   bottom: -20px;
   left: -20px
}
.servicoContainer.servico03 .item .position-absolute {
   bottom: -20px;
   right: -20px
}

@media(max-width: 1199px) {

}

@media(max-width: 991px) {

   #bannerPrincipal {
      height: calc(var(--banner-altura) - var(--header-altura)) !important
   }
   #bannerPrincipal .carousel-caption {
      /*padding-top: 120px*/
   }
}
@media(max-width: 767px) {
   #bannerPrincipal .carousel-caption {
      padding-top: 0px
   }
   #bannerPrincipal .frase01 span {
      font-size: 40px;
      line-height: 48px;
   }
   #bannerPrincipal .frase02 .box {
      font-size: 16px;
   }
   .servicosContainer .item {
      overflow: hidden;
      border-radius: 20px
   }
   .servicosContainer .item img {
      border-radius: 20px;
      width: 100%;
      height: 300px;
      object-fit: cover;
      object-position: top center;
   }
   .servicoContainer .item .image {
      border-radius: 20px;
      width: 100%;
      height: 250px;
      object-fit: cover;
      object-position: top center;
      margin: 0px auto
   }
   .servicoContainer .item h1 {
      font-size: 50px;
   }
   .servicoContainer.servico02 .item .position-absolute {
      right: -20px;
      left: auto
   }
   .flutuar_servicos_esq {
      display: none;
   }
   .flutuar_servicos_dir {
      display: none;
   }
}