.table-container{
  max-width:900px;
  margin:auto;
  padding:40px 20px;
}

.table-title{
  text-align:center;
  margin-bottom:25px;
  font-size:26px;
}

.spec-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.spec-table thead{
  background:#111;
  color:#fff;
}

.spec-table th,
.spec-table td{
  padding:8px 16px;
  text-align:left;
}

.spec-table tbody tr{
  border-bottom:1px solid #eee;
}

.spec-table tbody tr:hover{
  background:#f9f9f9;
}

body{
  font-family: Arial, sans-serif;
  background:#f5f7fa;
}

.table-container{
  max-width:900px;
  margin:auto;
  padding:40px 20px;
}

.table-title{
  text-align:center;
  margin-bottom:25px;
  font-size:26px;
}

.spec-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.spec-table thead{
  background-color: var(--tanspot-base);
  color:#fff;
}

.spec-table th,
.spec-table td{
  padding:14px 16px;
  text-align:left;
}

.spec-table tbody tr{
  border-bottom:1px solid #eee;
}

.spec-table tbody tr:hover{
  background:#f9f9f9;
}

.sub-head{
    font-size: 18px;
    margin-bottom: 15px;
}

/* MOBILE DESIGN */

@media (max-width:768px){

  .spec-table thead{
    display:none;
  }

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

  .spec-table tr{
    background:#fff;
    margin-bottom:15px;
    border-radius:10px;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
    padding:10px;
  }

  .spec-table td{
    padding:10px 12px;
    text-align:right;
    position:relative;
    font-size: 14px;
  }

  .spec-table td::before{
    content:attr(data-label);
    position:absolute;
    left:12px;
    font-weight:bold;
    text-align:left;
  }

  .spec-table{
    box-shadow: none;
  }
}