/* ============================================================
   WHY US PAGE — why-us.css
   Styles specific to why-us.php only.
   ============================================================
   TABLE OF CONTENTS
   01. Page Hero
   02. Comparison Table
   03. CTA Section
   ============================================================ */


/* ============================================================
   01. WHY US HERO
   ============================================================ */



/* ============================================================
   02. COMPARISON TABLE
   ============================================================ */
.comparison-section {
  padding: var(--space-24) 0 var(--space-12);
  background: #ffffff;
}

.table-wrapper {
  background: #ffffff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(10, 22, 40, 0.08);
  border: 1px solid rgba(10, 22, 40, 0.05);
  margin: 0 auto;
  max-width: 1000px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.compare-table th {
  background: var(--color-bg-primary); /* Dark navy */
  padding: var(--space-5) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
}

.compare-table th:first-child {
  color: var(--color-text-primary); /* White text on dark navy */
  width: 50%;
}

.compare-table th:nth-child(2) {
  color: var(--color-accent);
  text-align: center;
  width: 25%;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-table th:last-child {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  width: 25%;
}

.compare-table td {
  padding: var(--space-5) var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-inverse); /* Dark text on light background */
  border-bottom: 1px solid rgba(10, 22, 40, 0.05);
}

.compare-table tr:last-child td {
  border-bottom: none;
}

/* Alternating row colors */
.compare-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
.compare-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

/* Icons styling in table */
.compare-table td:nth-child(2),
.compare-table td:nth-child(3) {
  text-align: center;
}

.icon-check {
  display: inline-flex;
  color: var(--color-accent);
  width: 20px;
  height: 20px;
}

.icon-cross {
  display: inline-flex;
  color: #6B7F96;
  width: 20px;
  height: 20px;
}


/* ============================================================
   03. CTA SECTION
   ============================================================ */
.whyus-cta {
  text-align: center;
  padding-bottom: var(--space-24);
  background: #ffffff;
}

.whyus-cta .btn {
  padding: 1rem 2.5rem;
  border-radius: var(--radius-full);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .table-wrapper {
    border-radius: 0;
    margin: 0 calc(var(--space-4) * -1); /* Break out of container padding */
    border-left: none;
    border-right: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .compare-table th,
  .compare-table td {
    padding: var(--space-4);
    font-size: var(--font-size-xs);
  }
}