#sobre {
  padding: 60px 0;

  img {
    border-radius: var(--radius-xl);
  }

  .sobre-title {
    color: var(--color-primary);
  }

  .sobre-text {
    color: var(--color-text);
  }
}

#vantagens {
  padding: 80px 0;
  background-color: var(--color-bg-dark);
  color: var(--color-white);

  .vantagens-title {
    margin-bottom: 20px;
  }

  .vantagem-card {
    padding: 20px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: center;
    gap: 15px;
    border: 2px solid transparent;
    background:
      linear-gradient(var(--color-bg-dark), var(--color-bg-dark)) padding-box,
      var(--gradient-brand) border-box;
    height: 100%;
  }
}

#estrategia {
  padding: clamp(60px, 8vw, 80px) 0;

  .estrategia-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: clamp(320px, 40vw, 520px);
  }

  .estrategia-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
  }

  .estrategia-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: clamp(30px, 5vw, 60px);
  }

  .estrategia-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--color-white);

    .estrategia-text {
      max-width: 80%;
    }

    .btn {
      max-width: 250px;
    }
  }
}

@media (width <= 992px) {
  #sobre {
    overflow: hidden;
    .sobre-title {
      text-align: center;
    }
  }
  #estrategia {
    .estrategia-overlay {
      background: rgba(0, 0, 0, 0.55);
      text-align: center;
    }

    .estrategia-content {
      max-width: 100%;
      align-items: center;
    }
  }
}

@media (width <= 768px) {
  #vantagens {
    .vantagem-card {
      justify-content: normal;
      .vantagem-text {
        margin-bottom: 0;
      }
    }
  }
}