*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --orange:        #24c7f2;
  --orange-dark:   #0796c7;
  --orange-light:  #55e2c0;
  --cream:         #102b43;
  --cream-border:  rgba(111, 226, 220, 0.24);
  --white:         rgba(255, 255, 255, 0.1);
  --text-dark:     #f3fbff;
  --text-mid:      #b9d8e3;
  --radius:        12px;
  --gap:           10px;
  --font:          'Poppins', sans-serif;
}






.hf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--gap);
  table-layout: fixed;
  filter: drop-shadow(0 18px 28px rgba(0, 10, 28, 0.24));
}


.hf-table col.col-who  { width: 220px; }
.hf-table col.col-what { width: auto; }


.header-row th {
  padding: 0;
  vertical-align: stretch;
}

.th-who {
  
  width: 400px;
}

.th-who span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(36, 199, 242, 0.2), rgba(16, 43, 67, 0.92));
  border: 1px solid rgba(36, 199, 242, 0.35);
  border-radius: var(--radius);
  height: 100%;
  min-height: 72px;
  font-size: 32px;
  font-weight: 900;
  color: #dffbff;
  letter-spacing: 0;
  padding: 16px 24px;
  margin-right: var(--gap);
}

.th-what {
  background: rgba(7, 24, 45, 0.86);
  border: 1px solid rgba(111, 226, 220, 0.24);
  border-radius: var(--radius);
  font-size: 28px;
  font-weight: 900;
  color: #dffbff;
  padding: 18px 28px;
  letter-spacing: -0.3px;
  text-align: center;
  vertical-align: middle;
}


tbody tr {
  transition: transform 0.18s ease;
}

tbody tr:hover {
  transform: translateY(-2px);
}


.cell-who {
  
   width: 400px;
  background: linear-gradient(135deg, rgba(23, 67, 91, 0.9), rgba(8, 30, 53, 0.96));
  border: 1px solid rgba(36, 199, 242, 0.2);
  border-radius: var(--radius);
  padding: 18px 20px;
font-size: 20px;
  font-weight: 700;
  color: #f3fbff;
  vertical-align: middle;
  line-height: 1.4;
  padding-right: var(--gap);
  
  padding-right: 10px;
}

.cell-who .ti {
  
  display: block;
  font-size: 34px;
  color: var(--orange-light);
  margin-bottom: 6px;
  padding-right: 10px;
}


.cell-what {
background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(111, 226, 220, 0.22);
  border-radius: var(--radius);
padding: 18px 24px;
  font-size: 18px;
  font-weight: 300;
  color: #c5e0e8;
  vertical-align: middle;
  line-height: 1.65;
}


.cell-who {
  padding-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}



.hf-table {
  border-collapse: separate;
  border-spacing: var(--gap) var(--gap);
}

.cell-who {
  border-radius: var(--radius);
  padding: 18px 20px;
}

.cell-what {
  border-radius: var(--radius);
}




@media (min-width: 768px) {
.cell-who {
max-height: 120px;
    min-height: 120px;
}
}
@media (max-width: 768px) {
  

  .hf-table {
    border-spacing: 6px 8px;
  }

  .th-who span {
    font-size: 24px;
    min-height: 56px;
    padding: 12px 16px;
  }

  .th-what {
    font-size: 20px;
    padding: 14px 18px;
  }

  .cell-who {
    width: 150px;
    font-size: 13px;
    padding: 14px 14px;
  }

  .cell-who .ti {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .cell-what {
    font-size: 13px;
    padding: 14px 16px;
    line-height: 1.6;
  }
}


@media (max-width: 520px) {
  

  .hf-table,
  .hf-table thead,
  .hf-table tbody,
  .hf-table tr,
  .hf-table th,
  .hf-table td {
    display: block;
    width: 100%;
  }

  .hf-table {
    border-spacing: 0;
  }

  
  .header-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }

  .th-who,
  .th-what {
    display: block;
  }

  .th-who {
    width: 30%;
    flex-shrink: 0;
  }

  .th-who span {
    min-height: 52px;
    font-size: 20px;
    padding: 10px;
    margin-right: 0;
  }

  .th-what {
    flex: 1;
    font-size: 16px;
    padding: 12px 14px;
    text-align: left;
  }

  
  tbody tr {
    
    gap: 0;
    margin-bottom: 10px;
    border-radius: var(--radius);
    overflow: hidden;
    transform: none;
  }

  tbody tr:hover { transform: none; }

  .cell-who {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 12px 16px;
  font-size: 18px;
    background: var(--white);
    border-bottom: 2px solid var(--orange);
  }

  .cell-who .ti {
    display: inline-block;
    margin-bottom: 0;
    font-size: 20px;
    flex-shrink: 0;
  }

  .cell-what {
    width: 100%;
    border-radius: 0 0 var(--radius) var(--radius);
  font-size: 18px;
    padding: 14px 16px;
  }
 
}
@media (max-width: 499px) {
 .th-what{
    display: none !important;
  }
}