/* header 
//////////////////////////////////////////////////*/
.home header,
.inner.empresa header { 
  z-index: 5;
  position: absolute;
  width: 100%  }

.inner header { background: var(--flex-secondary) }
.inner.servicos header { background: var(--flex-dark) }
.inner.empresa header { background: none }

.navbar-toggler { border: 0 }

.navbar {
  --flex-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
header .nav-link { 
  color: #FFF;
  opacity: 1 !important }

@media(min-width:768px){
  header .nav-link:hover,
  header .nav-link.active { color: var(--flex-primary) !important }
}

@media(max-width:1199.98px){
  header .navbar-brand img {
    max-width: 60vw;
    max-height: calc(2.5rem + 1.75vw) }
}
  
@media(max-width:991.98px){
    header [class*="container"] { padding-right: 1rem  !important }
  
    header .navbar-collapse { 
      background: var(--flex-secondary);
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      color: #FFF;
      opacity:.5;
      padding: .75rem 3rem !important; 
      width: 100%;
      font-size: 120% }
  
    header .nav-link.active,
    header .nav-link:hover,
    header .nav-link:active,
    header .nav-link:focus { 
      opacity:1;
      color: var(--flex-primary) !important }
  
    header .btn { 
      margin: 0 3rem;
      font-size: 120% }
}

#hero:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: rgb(34,34,34);
  background: linear-gradient(180deg, rgba(34,34,34,0) 0%, rgba(34,34,34,1) 50%) }

#hero video { 
  /* filter: grayscale(1) ; */
  opacity: .5;
  /* mix-blend-mode: overlay; */
  object-fit: cover }

@media(max-width:767.98px){
  .home #about{ margin-top: -40vh }
}

@media(min-width:576px){ .home #about{ margin-top: -30vh } }
@media(min-width:768px){ .home #about{ margin-top: -30vh } }
@media(min-width:992px){ .home #about{ margin-top: -30vh } }
@media(min-width:1200px){ .home #about{ margin-top: -30vh } }
@media(min-width:1366px){ .home #about{ margin-top: -65vh } }
@media(min-width:1400px){ .home #about{ margin-top: -45vh } }

@media(min-width:768px){
  .inner #about-intro {
    background: var(--flex-dark) url(img/about-inner.webp);
    background-size: cover
  }
}

h2 span,
h3 span { color: var(--flex-primary) }

#about-differentials > *{
  padding: 2rem;
}

#about-differentials > *:not(:first-child,:last-child) {
  transition: all 300ms;
  transform: scale(1);
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.025)
}

#about-differentials > *:not(:first-child,:last-child):hover {
  transform: scale(1.125);
  background: var(--flex-dark);
  z-index: 1;
}

#about-differentials > div h3 {
  font-size: 140% !important;
  color: var(--flex-primary) }

#about-differentials p {
  font-size: 87.5%;
  opacity: .75
}

@media(min-width:992px){
  #about-differentials {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 1fr); 
    gap: 1rem; }
    
  #about-differentials > *:not(:first-child,:last-child)  { height: 100% }
}

@media(max-width:991.98px){ #about-differentials > * { margin-bottom: 1rem } }


#services ul { 
  padding-left: .5rem;
  list-style: none }

#services ul li { 
  position: relative;
  padding-left: 1rem;
  margin-bottom: .5rem }

#services ul li:before { 
  position: absolute;
  top: 50%;
  left: 0;
  transform:translate(0,-50%);
  content: "";
  width: .25rem;
  height: .25rem;
  border-radius: 100%;
  background: var(--flex-primary)
 }

.home #services .service-description { display:none }

.inner #services .bg-white p:first-child { 
  font-weight: bold;
  max-width: 30% }

#cases .ratio { 
  transition: all 300ms;
  transform: scale(1);
  opacity: .325 }

#cases .ratio:hover { 
  transform: scale(1.25);
  opacity: 1 }

#cases .ratio img { 
  max-height: 4rem;
  object-fit: contain !important }

@media(min-width:1200px){
  #cases .row > div { width: 14.28571428571429% }
}


#blog .col > div { 
  top: 0;
  transition: all 300ms }

#blog .col > div:hover {
  top: -.5rem;
  box-shadow: 0 0 0 1.5rem rgba(255,255,255,1), 0 .5rem 2rem 1.5rem rgba(var(--flex-secondary-rgb),0.075)
}


#contact a { 
  text-decoration: none;
  color: #FFF !important }

#contact  a.fs-4 { transition: all 300ms }
#contact a.fs-4:hover { color: var(--flex-primary) !important }


@media(max-width:767.98px){
  #contact .fs-4 { font-size: 100% !important }
}

.ti { font-weight: normal }
.ti.icon-24 { font-size: 1.5rem }
.ti.icon-32 { font-size: 2rem }
.ti.icon-48 { font-size: 3rem }

.text-whatsapp { color: #03B35B  }

.text-black-75 { color: rgba(0,0,0,.75) !important }
footer .text-white { transition: all 300ms }

footer .text-white:hover { 
  fill: var(--flex-primary) !important;
  color: var(--flex-primary) !important }


.text-bordered-white {
  color: transparent !important;
  -webkit-text-stroke: 1px white
}