@media (max-width: 600px) {
  .results {
    flex-direction: column;
  }
}

@media (max-width: 992px) {
  header h1 {
    font-size: 2rem;
  }
  header p {
    font-size: 1rem;
  }
  .hero-banner {
    padding: 30px 15px;
  }
  .welcome-messages h1 {
    font-size: 1.8rem;
  }
  .welcome-messages p {
    font-size: 18px;
    line-height: 30px;
  }
  .results {
    grid-template-columns: repeat(2, 1fr);
  }
  .bhaav-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .weekly-line-body p {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 20px;
  }
  .section h2 {
    font-size: 1.5rem;
  }
  .result-card h3 {
    font-size: 1.1rem;
  }
  .result-card p {
    font-size: 0.95rem;
  }
  .booking-alert p {
    font-size: 18px;
  }
  .bhaav-item {
    padding: 30px 10px 10px;
  }
  .bhaav-item p {
    font-size: 18px;
  }
  .refresh-button {
    padding: 10px 20px;
    font-size: 14px;
  }
  .weekly-line-header {
    font-size: 16px;
    padding: 15px;
  }
  .weekly-line-body p {
    font-size: 16px;
  }
  .result-card h3 {
    text-align: center;
  }
  .result-card span {
    justify-content: center;
  }
  .table-responsive {
    width: 100% !important;
  }

  .jodi_table thead th {
    padding: 5px 0px;
    font-size: 12px;
  }
  .jodi_table td div {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .hero-banner {
    padding: 25px 10px;
  }
  .welcome-messages h1 {
    font-size: 1.6rem;
  }
  .welcome-messages p {
    font-size: 16px;
    line-height: 26px;
  }
  .results {
    grid-template-columns: 1fr;
  }
  .bhaav-container {
    grid-template-columns: 1fr;
  }
  .refresh-button-wrapper {
    right: 10px;
    transform: none;
  }
  .refresh-button {
    width: 100%;
    max-width: 280px;
    padding: 12px;
  }
  .footer {
    font-size: 13px;
    padding: 15px 5px;
  }
  .result-buttons {
    justify-content: center;
  }
  .result-card {
    text-align: center;
  }
  .number-grid {
    grid-template-columns: 0px;
    gap: 8px;
    padding: 2px;
  }
  .jodi_table td div{
    font-size: 15px;
  }
}

/* Responsive style (optional) */
@media (max-width: 768px) {
  .custom-cell {
    flex-direction: column;
    align-items: center;
  }
  .row-mobile {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
}
@media (max-width: 576px) {
  .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.3em;
  }
}
@media (max-width: 480px) {
  .table td:first-child {
    width: 40px;
    font-size: 10px;
  }
}
@media (max-width: 768px) {
  .jodi_table {
    min-width: 600px;
    font-size: 14px;
  }
  /* .jodi_table th,
  .jodi_table td {
    padding: 10px 8px;
    white-space: nowrap;
  } */
  .number-grid {
    grid-template-columns: 2px 2px 2px 2px;
    gap: 8px;
    padding: 2px;
  }
  .number-grid div {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .jodi_table {
    min-width: 300px; /* narrower for small screens */
    font-size: 12px;
  }
  /* .jodi_table th,
  .jodi_table td {
    padding: 8px 6px;
    white-space: nowrap;
  } */

  .number-grid {
    grid-template-columns: 0px 0px 0px 0px;
    gap: 8px;
    padding: 2px;
  }
}
@media only screen and (max-width: 770px) {
  .chart-p-faq {
    width: 100%;
  }
}
@media screen and (max-width: 400px) {
  .logo img {
    height: 60px;
    width: auto;
    max-width: 100%;
  }
}

@media screen and (max-width: 300px) {
  .logo img {
    height: 40px;
    width: auto;
    max-width: 100%;
  }
}
@media only screen and (max-width: 770px) {
  .panel.panel-info {
    width: 99%;
  }
}

@media only screen and (max-width: 500px) {
  .chart-list {
    width: 95%;
  }
}
@media only screen and (max-width: 770px) {
  .panel-chart tr td:nth-child(1) {
    font-size: 9px;
  }
  .panel-chart tbody tr td:nth-child(3),
  .panel-chart tbody tr td:nth-child(6),
  .panel-chart tbody tr td:nth-child(9),
  .panel-chart tbody tr td:nth-child(12),
  .panel-chart tbody tr td:nth-child(15),
  .panel-chart tbody tr td:nth-child(18),
  .panel-charttbody tr td:nth-child(21),
  .panel-chart tbody tr td:nth-child(24),
  .panel-chart tbody tr td:nth-child(27) {
    border-left-width: 0;
    border-right-width: 0;
    font-size: 18px;
    font-style: italic;
  }
  .panel-chart tbody tr td:nth-child(4),
  .panel-chart tbody tr td:nth-child(7),
  .panel-charttbody tr td:nth-child(10),
  .panel-chart tbody tr td:nth-child(13),
  .panel-chart tbody tr td:nth-child(16),
  .panel-chart tbody tr td:nth-child(19),
  .panel-chart tbody tr td:nth-child(22),
  .panel-chart tbody tr td:nth-child(25),
  .panel-chart tbody tr td:nth-child(28) {
    border-left-width: 0;
    font-size: 11px;
  }
  .panel-chart tbody tr td:nth-child(2),
  .panel-chart tbody tr td:nth-child(5),
  .panel-chart tbody tr td:nth-child(8),
  .panel-chart tbody tr td:nth-child(11),
  .panel-chart tbody tr td:nth-child(14),
  .panel-chart tbody tr td:nth-child(17),
  .panel-chart tbody tr td:nth-child(20),
  .panel-chart tbody tr td:nth-child(23) {
    border-right-width: 0;
    font-size: 11px;
  }
  .panel-chart thead tr th:nth-child(1) {
    width: 55px;
  }
  .panel.panel-info {
    width: 99%;
  }
}
@media only screen and (max-width: 500px) {
  .panel.panel-info {
    width: 99%;
  }
  .panel-chart tbody tr td:nth-child(3),
  .panel-chart tbody tr td:nth-child(6),
  .panel-chart tbody tr td:nth-child(9),
  .panel-chart tbody tr td:nth-child(12),
  .panel-chart tbody tr td:nth-child(15),
  .panel-chart tbody tr td:nth-child(18),
  .panel-chart tbody tr td:nth-child(21),
  .panel-chart tbody tr td:nth-child(24),
  .panel-chart tbody tr td:nth-child(27) {
    font-size: 14px;
  }
  .panel-chart tr td:nth-child(1),
  .panel-chart tbody tr td:nth-child(2),
  .panel-chart tbody tr td:nth-child(5),
  .panel-chart tbody tr td:nth-child(8),
  .panel-chart tbody tr td:nth-child(11),
  .panel-chart tbody tr td:nth-child(14),
  .panel-chart tbody tr td:nth-child(17),
  .panel-chart tbody tr td:nth-child(20),
  .panel-chart tbody tr td:nth-child(23),
  .panel-chart tbody tr td:nth-child(4),
  .panel-chart tbody tr td:nth-child(7),
  .panel-chart tbody tr td:nth-child(10),
  .panel-chart tbody tr td:nth-child(13),
  .panel-chart tbody tr td:nth-child(16),
  .panel-chart tbody tr td:nth-child(19),
  .panel-chart tbody tr td:nth-child(22),
  .panel-chart tbody tr td:nth-child(25),
  .panel-chart tbody tr td:nth-child(28) {
    font-size: 9px;
  }
  th {
    font-size: 11px;
  }
}
@media only screen and (max-width: 770px) {
  .panel.panel-info {
    width: 95%;
  }
}
@media only screen and (max-width: 500px) {
  .chart-list {
    width: 95%;
  }
}
@media only screen and (max-width: 770px) {
  .panel.panel-info {
    width: 95%;
  }
}
@media only screen and (max-width: 480px) {
  .panel.panel-info {
    width: 99%;
  }
  .panel-chart tbody tr td:nth-child(3),
  .panel-chart tbody tr td:nth-child(6),
  .panel-chart tbody tr td:nth-child(9),
  .panel-chart tbody tr td:nth-child(12),
  .panel-chart tbody tr td:nth-child(15),
  .panel-chart tbody tr td:nth-child(18),
  .panel-chart tbody tr td:nth-child(21),
  .panel-chart tbody tr td:nth-child(24),
  .panel-chart tbody tr td:nth-child(27) {
    font-size: 14px;
    font-weight: 600;
  }
  .panel-chart tr td:nth-child(1),
  .panel-chart tbody tr td:nth-child(2),
  .panel-chart tbody tr td:nth-child(5),
  .panel-chart tbody tr td:nth-child(8),
  .panel-chart tbody tr td:nth-child(11),
  .panel-chart tbody tr td:nth-child(14),
  .panel-chart tbody tr td:nth-child(17),
  .panel-chart tbody tr td:nth-child(20),
  .panel-chart tbody tr td:nth-child(23),
  .panel-chart tbody tr td:nth-child(4),
  .panel-chart tbody tr td:nth-child(7),
  .panel-chart tbody tr td:nth-child(10),
  .panel-chart tbody tr td:nth-child(13),
  .panel-chart tbody tr td:nth-child(16),
  .panel-chart tbody tr td:nth-child(19),
  .panel-chart tbody tr td:nth-child(22),
  .panel-chart tbody tr td:nth-child(25),
  .panel-chart tbody tr td:nth-child(28) {
    font-size: 9px;
    font-weight: 600;
  }
  th {
    font-size: 11px;
  }
  footer {
    display: none; /* REMOVE */
  }
}
@media only screen and (max-width: 770px) {
  .panel-chart tr td:nth-child(1) {
    font-size: 9px;
    font-weight: 600;
  }
  .panel-chart tbody tr td:nth-child(3),
  .panel-chart tbody tr td:nth-child(6),
  .panel-chart tbody tr td:nth-child(9),
  .panel-chart tbody tr td:nth-child(12),
  .panel-chart tbody tr td:nth-child(15),
  .panel-chart tbody tr td:nth-child(18),
  .panel-chart tbody tr td:nth-child(21),
  .panel-chart tbody tr td:nth-child(24),
  .panel-chart tbody tr td:nth-child(27) {
    border-left-width: 0;
    border-right-width: 0;
    font-size: 18px;
    font-weight: 600;
  }
  .panel-chart tbody tr td:nth-child(4),
  .panel-chart tbody tr td:nth-child(7),
  .panel-chart tbody tr td:nth-child(10),
  .panel-chart tbody tr td:nth-child(13),
  .panel-chart tbody tr td:nth-child(16),
  .panel-chart tbody tr td:nth-child(19),
  .panel-chart tbody tr td:nth-child(22),
  .panel-chart tbody tr td:nth-child(25),
  .panel-chart tbody tr td:nth-child(28) {
    border-left-width: 0;
    font-size: 10px;
    font-weight: 600;
  }
  .panel-chart tbody tr td:nth-child(2),
  .panel-chart tbody tr td:nth-child(5),
  .panel-chart tbody tr td:nth-child(8),
  .panel-chart tbody tr td:nth-child(11),
  .panel-chart tbody tr td:nth-child(14),
  .panel-chart tbody tr td:nth-child(17),
  .panel-chart tbody tr td:nth-child(20),
  .panel-chart tbody tr td:nth-child(23) {
    border-right-width: 0;
    font-size: 10px;
    font-weight: 600;
  }
  thead tr th:nth-child(1) {
    width: 55px;
  }
  .panel.panel-info {
    width: 99%;
  }
}
@media only screen and (max-width: 770px) {
  .panel.panel-info {
    width: 99%;
  }
  footer {
    display: none; /* REMOVE  */
  }
}

@media only screen and (max-width: 500px) {
  .chart-list {
    width: 95%;
  }
}