/* Global Safe Reset to prevent overflow issues */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f6f6f6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Fixed Layout Containers for Perfect Centering without Side Bleeding */
.counter,
.teer-custom-layout {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 15px;
  background: #fff;
  word-wrap: break-word;
}

.counter {
  text-align: center;
  padding-top: 25px;
}

.counter h2 {
  font: 400 clamp(24px, 5vw, 42px) Georgia, serif;
  margin-bottom: 15px;
  color: #111;
}

/* Mobile-Safe Table Styling */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}

.counter table {
  width: 100%;
  border-collapse: collapse;
  min-width: 280px;
}

.counter th,
.counter td {
  border: 1px solid #ff6a00;
  padding: 12px 10px;
  font-size: clamp(14px, 2.5vw, 18px);
}

.counter th {
  font-weight: 700;
  background-color: #fff6f0;
  color: #d35400;
}

/* Inner Sections Typography & Space Alignment */
.teer-section {
  margin-bottom: 25px;
  width: 100%;
}

.teer-heading {
  font-size: 1.25rem;
  color: #111;
  margin-top: 15px;
  margin-bottom: 12px;
  border-bottom: 3px solid #ff6a00;
  padding-bottom: 6px;
  text-align: left;
}

.teer-text-box {
  width: 100%;
  text-align: left;
}

.teer-text-box p {
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Target Specific Device Adjustments */
@media (max-width: 480px) {
  .counter, .teer-custom-layout {
    padding: 12px;
  }
  .counter h2 {
    margin-bottom: 12px;
  }
  .teer-heading {
    font-size: 1.1rem;
  }
  .teer-text-box p {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
  .counter th, .counter td {
    padding: 10px 6px;
  }
}
</style>