:root {
  --bg-grafico: #00bfb7;
  --bg-box: #e53935;
  --bg-arquivo: #0066cc;
  --bg-dinheiro: #8cc63f;
}

.seta-transparente {
  transform: rotate(99deg);
}
.seta-laranja {
  transform: rotate(74deg);
}

.banner-azul {
  background-color: #1a404d;
}

.banner-experimente {
  background-image: none !important;
}

.banner-experimente-custom {
  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  .arrows {
    position: absolute;

    &:nth-child(1) {
      top: 2rem;
      right: 5rem;
    }

    &:nth-child(2) {
      bottom: 2rem;
      left: 5rem;
    }
  }

  .overlay {
    top: -10rem;
    right: -10rem;
    width: 20%;
    height: 40%;
  }
}

nav.nav-desktop a.cta {
  display: block !important;
}

.justify-items-end {
  justify-items: flex-end;
}

.bg-gray {
  background-color: #f6f7f9;
}

.badge {
  width: fit-content;
  border-radius: var(--bs-border-radius-pill);
  background-color: #00e4f533;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  span {
    font-size: small !important;
  }
}

.text-cinza {
  color: #676f7e;
}

.text-cinza--light {
  color: #ffffff66;
}

.text-petroleo {
  color: #1a404d;
}

.steps-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;

  &::before {
    content: "";
    position: absolute;
    height: 0.2rem;
    width: 100%;
    background-color: #00e4f5;
    right: -50%;
    top: 25%;
    z-index: -1;
  }

  &:last-child::before {
    display: none;
  }
}

.art-pass {
  position: relative;

  .num {
    position: absolute;
    bottom: 1rem;
    right: -1rem;
  }

  &::before {
    display: none;
    content: "";
    position: absolute;
    height: 0.2rem;
    width: 100%;
    background-color: #00e4f5;
    right: -50%;
    top: 25%;
    z-index: -1;
  }

  &:last-child::before {
    display: none;
  }
}

.carousel--container {
  text-align: center;

  .text--brands {
    color: #676f7e66;
    font-weight: 700;
    font-size: 24px;
    text-wrap-mode: nowrap;
  }
}

.depoiments--card {
  position: relative;
  max-width: 346px;

  &::before {
    content: "";
    display: block;
    width: auto;
    height: 36px;
    background: url("/assets/images/experimente/quote.webp") no-repeat top left;
    margin-top: -30px;
  }

  p {
    margin-top: 1rem;
    min-height: 160px;
  }

  .avatar-container {
    align-items: center;

    .avatar {
      background-color: #00e4f533;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.overlay {
  top: 0;
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 9999px;
  background: rgba(0, 228, 245, 0.2);
  filter: blur(100px);
}

.section-footer {
  min-height: 650px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .card {
    display: flex;
    padding: 56px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
  }

  img {
    position: absolute;
  }

  img:nth-child(1) {
    top: 2rem;
    left: 5rem;
  }

  img:nth-child(2) {
    bottom: 2rem;
    right: 5rem;
  }
}

form #wp-submit {
  background-color: #00e2f4;
  border: 3px solid #00e2f4;
  color: #001e27;

  &.green-cta:hover {
    box-shadow: 0px 6px 0px 0px rgba(0, 226, 244, 0.6);
  }
}

.flex-1 {
  flex: 1;
}

.sec-cards-tab .cards-tab .nav-item:has(.nav-link.active) {
  border-color: #00e4f54d !important;
  display: flex;

  &::after {
    content: "";
    display: block;
    width: 1rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--color);
    margin: auto 1rem auto 0;
  }
}

.sec-cards-tab .cards-tab .nav-item .nav-link.active {
  background-color: transparent !important;
}

.icones-tab {
  border-radius: 12px;
  background: #f0f2f5;
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
}

.icone-grafico,
.icone-box,
.icone-arquivo,
.icone-dinheiro {
  position: relative;
}

.icone-grafico.active,
.icone-box.active,
.icone-arquivo.active,
.icone-dinheiro.active {
  &::before {
    content: "";
    position: absolute;
    left: -0.8rem;
    width: 0.3rem;
    height: 100%;
    border-radius: 9999px;
    background: var(--color);
  }
}

.icone-grafico.active {
  background: #edfafa;

  svg path {
    stroke: #00bfb7;
  }
}

.icone-box.active {
  background: #fdf1f1;

  svg path {
    stroke: #e53b37;
  }
}

.icone-arquivo.active {
  background: #edf4fb;

  svg path {
    stroke: #0066cc;
  }
}

.icone-dinheiro.active {
  background: #f7fbf1;

  svg path {
    stroke: #8cc63f;
  }
}

.nav-link.active {
  .icone-grafico {
    background: #edfafa;

    svg path {
      stroke: #00bfb7;
    }
  }

  .icone-box {
    background: #fdf1f1;

    svg path {
      stroke: #e53b37;
    }
  }

  .icone-arquivo {
    background: #edf4fb;

    svg path {
      stroke: #0066cc;
    }
  }

  .icone-dinheiro {
    background: #f7fbf1;

    svg path {
      stroke: #8cc63f;
    }
  }
}

.tab-menu {
  .header-navegador {
    justify-content: flex-start;
    background: #f6f7f9;
    border: 1px solid #e0e6eb;
  }

  .tab-menu-sidebar {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 1px solid #e0e6eb;
    display: inline-flex;
    border-radius: 0 0 1rem 1rem;
    border-top: none;
  }

  .tab-menu-sidebar-items {
    background: #f6f7f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 5rem;
  }

  .tab-menu-content {
    padding: 2rem;
  }
}

@media (min-width: 992px) {
  .tab-menu {
    .tab-menu-sidebar {
      width: 96%;
    }
  }

  .art-pass {
    .num {
      bottom: 0;
    }

    &::before {
      display: block;
    }
  }
}

@media (max-width: 992px) {
  .nav-tabs {
    gap: 1rem;
    margin-bottom: 3rem;

    .nav-item {
      border: 1px solid #dbdfde;
      border-radius: 8px;
      margin: 0 0;
      padding: 1rem;
    }

    .nav-item a {
      border: none;
      background: transparent;
    }
  }
}