.support-section {
  margin-top: 100px !important;
  min-height: 100vh;
  margin-top: 80px !important;
  padding-top: 7rem;
  padding-bottom: 7rem;
  background-color: var(--color-primary-dark);
  color: white;
}

.icon {
  width: 20px;
  color: white !important;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* default: one column */
.faq-item {
  grid-column: span 1;
}

/* when active: take full row */
.faq-item.active {
  grid-column: span 2;
}

/* your pill styles stay */
.faq-pill {
  padding: 20px;
  border: 1px solid white;
  border-radius: 11px;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-family: var(--font-fam);
  font-size: 12px !important;
}

.faq-pill p {
  font-size: 14px;
}

/* hide answer by default */
.faq-answer {
  display: none;
}

/* when active */
.faq-item.active .faq-answer {
  display: block !important;
}

.faq-item.active .faq-pill > .d-inline-flex {
  display: none; /* hide question row */
}

.email-support {
  background: transparent;
  border: none;
  border-bottom: 1px solid #fffcfc;
  box-shadow: none;
  outline: none;
  padding: 0.5rem 0;
}

.cancel-btn {
  background: transparent;
  color: white;
  border: 1px solid #fffcfc;
  border-radius: 25px;
  box-shadow: none;
  outline: none;
  padding: 0.5rem 0;
}

.cancel-btn:hover {
  color: var(--color-primary-dark) !important;
  background-color: white !important;
}

.email-support::placeholder {
  color: white !important;
  opacity: 0.8;
  padding-bottom: 10px !important;
  font-family: var(--font-fam);
}

.support-container {
  padding: 50px;
}

.support-content {
  background-color: rgba(217, 217, 217, 0.2);
  padding: 20px;
  padding-top: 50px;
  padding-bottom: 50px;
  border-radius: 15px;
}
/* Table wrapper to allow horizontal scrolling */
.table-responsive {
  width: 100%;
  overflow-x: auto; /* allows scrolling on mobile */
  -webkit-overflow-scrolling: touch; /* smooth scrolling for iOS */
}

/* table */
.simple-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 50px;
  margin-bottom: 75px;
  table-layout: fixed;
  min-width: 300px; /* ensures scroll on very small screens */
}

.simple-table th,
.simple-table td {
  border: 1px solid var(--color-primary-dark);
  padding: 10px;
  text-align: left;
}

.simple-table th {
  background-color: var(--color-primary-dark);
  font-weight: 600;
}


.simple-table td {
  font-size: 14px !important;
}

/* Optional: adjust padding and font-size for small screens */
@media (max-width: 576px) {
  .simple-table th,
  .simple-table td {
    padding: 8px;
    white-space: normal; /* allow text to wrap */
    word-break: break-word; /* break long words instead of overflowing */
  }

  .table-responsive {
    overflow-x: auto; /* keep horizontal scroll if table is still wide */
  }
  .support-container {
    padding: 20px;
  }
}

@media (max-width: 980px) {
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .simple-table {
    min-width: auto;
  }

  .faq-item.active {
    grid-column: span 1;
  }
}