:root {
  --primary-blue: #E3F2FD;
  --secondary-blue: #BBDEFB;
  --accent-blue: #90CAF9;
  --text-color: #2C3E50;
  --break-color: #FFF3CD;
  }

  body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #F8FBFF;
  color: var(--text-color);
  }

  /* Header Styles */
  header {
  /* background-color: var(--accent-blue); */
  /* background-color: #01123e; */
  background: linear-gradient(150deg, #01123e, purple, purple, #01123e, purple);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .header-content {
  display: flex;
  align-items: center;
  gap: 20px;
  }

  .header-logo {
  height: 60px; /* Adjust based on your logo size */
  width: auto;
  }

  .header-title {
  font-size: clamp(16px, 2vw, 24px); /* Min:16px, Preferred:2vw, Max:24px */
  font-weight: bold;
  /* color: var(--text-color); */
  color: white;
  /* text-transform: uppercase;*/
  letter-spacing: 1.5px;
  }

  /* Footer Styles */
  footer {
  /* background-color: var(--accent-blue); */
  background-color:  #01123e;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  /* color: var(--text-color); */
  color: white;
  margin-top: 20px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  }

  footer a {
  /* color: var(--text-color); */
  color: white;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s;
  }

  footer a:hover {
  color: #1A5276;
  }

    #searchBox {
        margin: 10px;
        width: 96%;
        padding: 12px;
        margin-bottom: 20px;
        border: 2px solid var(--accent-blue);
        border-radius: 5px;
        font-size: 16px;
    }

    .tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .tab {
        padding: 10px 20px;
        background-color: var(--secondary-blue);
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        flex-shrink: 0;
    }

    .tab.active {
        background-color: var(--primary-blue);
        font-weight: bold;
    }

    .hall-filter {
        margin-bottom: 20px;
    }

    .hall-filter button {
        padding: 10px 20px;
        margin: 5px;
        background-color: var(--secondary-blue);
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .hall-filter button.active {
        background-color: var(--accent-blue);
        font-weight: bold;
    }

    .schedule-day {
        display: none;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        overflow-x: auto;
    }

    .schedule-day.active {
        display: block;
    }

    table {
        width: 96%;
        border-collapse: collapse;
        min-width: 1200px;
    }
    tr {
      padding: 10px;
    }
    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
        vertical-align: top;
        min-width: 200px;
    }

    th {
        background-color: var(--accent-blue);
        font-weight: bold;
        position: sticky;
        left: 0;
    }

    .time-slot {
        font-weight: bold;
        background-color: var(--secondary-blue);
        position: sticky;
        left: 0;
    }

    .session-title {
        color: #1A5276;
        font-weight: bold;
        margin-bottom: 4px;
        font-size: 0.95em;
    }

    .presenters {
        font-size: 0.85em;
        color: #566573;
    }

    .break {
        background-color: var(--break-color);
        font-weight: bold;
    }

    @media (max-width: 768px) {
      #searchBox {
          margin: 10px;
          width: 88%;
          padding: 12px;
          margin-bottom: 20px;
          border: 2px solid var(--accent-blue);
          border-radius: 5px;
          font-size: 16px;
      }

        .mobile1 {
          display: none;
        }

        table {
            min-width: 95%;
            display: block;
        }

        th {
            position: static;
        }

        .time-slot {
            position: static;
            background-color: var(--primary-blue);
        }

        td {
            display: block;
            width: 95%!important;
            min-width: 95%!important;
            padding-right: 10px;
        }

        td::before {
            content: attr(data-hall);
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--accent-blue);
        }
    }