/* feather icons */
.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* menu */
.burger div {
  width: 18px;
  height: 1px;
  margin: 4px;
  transition: all 0.4s;
  background-color: #fff;
}

.burger.active .first-line {
  margin: 0;
  transform: rotate(-45deg) translateX(-1px);
}
.burger.active .second-line {
  margin: 0;
  transform: rotate(45deg);
}
.burger.active ~ #navbar {
  transform: translateX(0%);
}

#navbar {
  top: 96px;
  height: calc(100vh - 96px);
  transform: translateX(100%);
  transition: all 0.4s;
}

@media (min-width: 1024px) {
  #navbar {
    top: 0;
    height: auto;
    transform: translateX(0%);
  }
}

* {
  outline: none;
  font-family: 'Poppins', sans-serif;
}
::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}
::-webkit-scrollbar-track {
  background: #141414;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.8);
}
::-webkit-scrollbar-track-piece {
  background: transparent;
}

#tabs .tab-links button {
  position: relative;
}

#tabs .tab-links button::after {
  position: absolute;
  bottom: 0;
  left: 0;

  content: '';
  height: 2px;
  width: 0%;

  background-color: #fafafa;

  transition: 0.4s;
}

#tabs .tab-links button:hover::after,
#tabs .tab-links button.active::after {
  width: 100%;
}

#tabs .tab-content-item {
  animation: up 1s;
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
  }
}

.whatsapp-icon {
  width: 24px;
  height: 24px;
}

.whatsapp-icon--white {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.rotating {
  -webkit-animation: rotating 1.4s linear infinite;
  -moz-animation: rotating 1.4s linear infinite;
  -ms-animation: rotating 1.4s linear infinite;
  -o-animation: rotating 1.4s linear infinite;
  animation: rotating 1.4s linear infinite;
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
