/* FEATURES - ÍCONE DO PRIMEIRO CARD IDÊNTICO AOS DEMAIS */

/* ===========================
   ÍCONE COM MESMO ESTILO DOS OUTROS CARDS
   =========================== */

/* Desktop e Mobile - Ícone do primeiro card */
.feature-highlight .feature-content .feature-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: 1rem !important;
  opacity: 1 !important;
}

.feature-highlight .feature-content .feature-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: white !important; /* Branco por causa do fundo azul */
  stroke-width: 2 !important;
  fill: none !important;
}

/* Mobile específico */
@media (max-width: 768px) {
  .feature-highlight .feature-content .feature-icon {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Garantir que o segundo ícone (o grande) fique oculto no mobile */
  .feature-highlight > .feature-icon {
    display: none !important;
  }
}

/* Desktop - manter o ícone grande decorativo */
@media (min-width: 769px) {
  .feature-highlight > .feature-icon {
    width: 120px !important;
    height: 120px !important;
    opacity: 0.15 !important;
    display: flex !important;
  }

  /* No desktop, esconder o ícone pequeno dentro do content */
  .feature-highlight .feature-content .feature-icon {
    display: none !important;
  }
}

/* Garantir que os ícones dos cards normais não sejam afetados */
.feature-card:not(.feature-highlight) .feature-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1rem !important;
}

.feature-card:not(.feature-highlight) .feature-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: var(--orange) !important;
  stroke-width: 2 !important;
  fill: none !important;
}