* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.fa-solid, .fa-brands, .fa, .fas, .far, .fal, .fab {
  font-size: 1.25rem;
  vertical-align: middle;
  color: inherit;
  margin: 0 0.5rem 0 0.5rem;
}

body {
  font-family: Zain, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  background-color: #252525;
  color: #ececec;
}

h1, h2, h3 {
  font-family: 'Tektur', Roboto Condensed, Arial, sans-serif;
}

h3 {
  font-size: 8vh;
}

a {
  color: #ff3535;
  text-decoration: none;
}

a:hover {
  color: #ff7070;
}

img {
  max-width: 100%;
  height: auto;
}

header{
  font-size: 15px;
  position: fixed;
  display: inline-flex;
  justify-content: space-around;
  width: 100%;
  background-color: #00000015;
  z-index: 1000;
  align-items: center;
  padding: 10px 0;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease-in-out;
  font-weight: bold;
}

header.activeh{
  transition: all 0.4s ease-in-out;
  background-color: #0a0a0a;
}

header.activecolapseh{
  display: block;
}

.toggle-menu{
  position: absolute;
  top: 25px;
  right: 25px;
  display: none;
  background: none;
  border: none;
  color: #fff;
  transition: all 0.4s ease-in-out;
}

.toggle-menu i{
  font-size: 40px;
}

.toggle-menu.activecolapseh{
  transform: rotate(90deg);
  transition: transform 0.4s ease-in-out;
}

header h1 a{
  align-items: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

header h1 img{
  max-width: 250px;
  height: auto;
  filter: contrast(1.0) brightness(1.0);
  transition: all 0.2s ease-in-out;
}

header h1 img:hover{
  filter: contrast(1.0) brightness(1.2);
}

header h1 img.activelogo{
  filter: contrast(0.0) brightness(10.0);
  transition: all 0.2s ease-in-out;
}

header h1 img.activelogo:hover{
  filter: contrast(1.0) brightness(1.2);
}

.menu{
  display: flex;
  justify-content: center;
}

.menu ul{
  display: flex;
  align-items: center;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

.menu li a{
  color: #fff;
  padding: 10px 15px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  white-space: nowrap;
  align-items: center;
  display: flex;
  justify-content: center;
}

.menu li a:hover{
  color: #ec2d2d;
  transition: color 0.2s ease-in-out;
  text-shadow: 5px 5px 20px rgba(255, 52, 52, 0.5);
}

.btn-hire{
  outline: 2px solid #ff3434;
  color: #ff3434!important;
  margin: 0 10px;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(255, 52, 52, 0.5);
  transition: all 0.2s ease-in-out;
}

.btn-hire:hover{
  color: #fff!important;
  background-color: #ff343450;
  transition: all 0.2s ease-in-out;
}

#whatsapp{
  position: fixed;
  display: inline-flex;
  padding: 8px;
  border-radius: 50px;
  background-color: #00a800;
  outline: 2px solid #00a800;
  color: #fff;
  justify-content: right;
  z-index: 1000;
  bottom: 0;
  right: 0;
  margin: 20px;
  font-size: 20px;
  align-items: center;
  transition: all 0.2s ease-in-out;
}

#whatsapp:hover{
  outline: 2px solid #00a800;
  background-color: #00a80025;
  transition: all 0.2s ease-in-out;
}

section {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: #1a1a1a;
  padding: 40px 0;
}

.container{
  opacity: 0;
  font-size: 19px;
  transition: all 0.6s ease-in-out;  
}

.container.visible{
  opacity: 1;
  font-size: inherit;
  transition: all 0.6s ease-in-out;
}

.sect-img{
  max-width: 70%;
}

.content-semi{
  width: 70%;
  font-size: 10vh;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: right;
  display: flex;
  font-size: 50px;
}

#servicos {
  min-height: 60vh;
  align-items: start;
  background-color: #0f0f0f;
  background-size: cover;
  background-position: 0 -45vh;
  background-blend-mode: overlay;
  backdrop-filter: blur(5px);
}

.mini-items{
  font-family: 'Tektur', Roboto Condensed, Arial, sans-serif;
  font-weight: bolder;
  display: inline-flex;
  width: 100%;
  font-size: 20px;
  justify-content: center;
}

.mini-item{
  color: white;
  margin: 5px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(#292929, #aa17176e);
  transition: all 0.2s ease-in-out;
  /*outline: solid 1px #ffffff44;*/
}

.mini-items a.active .mini-item{
  padding: 22px;
  margin: 3px;
  background: linear-gradient(#aa17176e, #aa17176e);
  box-shadow: 10px 10px 50px 0px #ff3b3b49;
  transition: all 0.2s ease-in-out;
}

.mini-items a i{
  font-size: 80px;
  display: block;
}

.mini-item-lm{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: lighter;
  font-family: Zain, Arial, sans-serif;
}

.mini-item-lm i{
  font-size: 20px!important;
  margin-right: 5px;
  transition: all 0.2s ease-in-out;
}

.mini-item:hover .mini-item-lm i{
  margin-right: 12px;
  transition: all 0.2s ease-in-out;
}

#contato .container{
  display: flex;
}

footer {
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  display: flex;
  flex-direction: row-reverse;
}

.footer-blocks{
  justify-content: center;
  width: 50%;
  text-align: left;
  margin: 10vh;
}

.footer-links{
  font-size: 15px;
  list-style: none;
  text-decoration: none;
}

.footer-links li{
  border-bottom: solid 1px;
  margin: 5px;
}

.footer-links li:hover{
  background-color: #94949463;
}

.footer-links a{
  color: white;
  display: flex;
  padding: 2px 4px;
}

.networks{
  display: flex;
}

.networks a{
  background-color: white;
  color: black;
  border-radius: 50px;
  margin: 5px;
}

#bg-video {
  position: fixed;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll 30s linear infinite;
}

.client-logo {
  height: 120px;
  margin: 20px 40px;
  flex-shrink: 0;
  filter: grayscale(0%);
  transition: filter 0.3s;
}

.client-logo:hover {
  filter: brightness(120%);
  transition: filter 0.3s;
}

.items-desc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.item-desc {
  flex: 1 1 150px;
  background-color: #1a1a1a;
  max-width: 50%;
  margin: 10px;
  transition: all 0.3s;
}

.item-desc:hover {
  box-shadow: 5px 5px 20px #00000080;
}

.item-desc img {
  max-width: 100%;
  padding: 0;
  margin: 0;
  transition: filter 0.3s;
  filter: brightness(80%);
}

.item-desc img:hover {
  filter: brightness(120%);
}

.item-desc p {
  margin: 0;
  padding: 0 10px 10px 10px;
  text-align: center;
  font-weight: bold;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 800px) {
  header{
    display: block;
    justify-content: center;
  }
  .menu ul {
    display: none;
  }
  .menu.activecolapseh ul{
    display: block;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin: 0;
    text-decoration: none;
    list-style: none;
  }
  .toggle-menu{
    display: block;
  }
  section{
    display: block;
  }
  #whatsapp{
    background-color: #00a800a1;
    backdrop-filter: blur(5px);
  }
  #whatsapp p{
    font-size: 0px;
    padding: 15px 0px;
  }
  .content-semi{
    width: 100%;
    min-height: 80px;
    font-size: 20px;
    text-align: center;
  }
  .mini-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .mini-items a {
    width: auto;
    flex: none;
    font-size: 15px;
  }
  .mini-items a i{
    font-size: 50px;
  }
  .mini-item-lm {
    font-size: 12px;
    margin-top: 4px;
  }
  #contato .container{
    display: flex;
    flex-direction: column-reverse;
  }
  footer{
    display: block;
  }
  .footer-blocks{
    width: 100%;
    margin: 10vh 0;
  }
}