.container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 0.2fr 1fr 0.2fr;
  grid-template-rows: 0.05fr 0.5fr 0.5fr 0.1fr;
  grid-template-areas:
    "nav nav nav"
    "sidebar main sidebar2" /* Adjusted grid template areas for sidebar and sidebar2 */
    "sidebar section sidebar2"
    "footer footer footer";
  grid-gap: 0.0rem;
  font-weight: 800;
  text-transform: none;
  font-size: 12px;
  color: #000000;
  text-align: center;
}
  
  .nav {
    grid-area: nav;
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
  }
  
  .navbar-content {
    display: flex;
    align-items: center;
    flex: 1; /* Use flex property to make it take remaining space */
  }
  
  .navbar-content img[alt="BBlogo"] {
    width: 150px; /* Adjust the width as needed */
    height: 50px; /* Maintain aspect ratio */
    margin-top: 10px; /* Remove default margin */
    margin-left: 10px;
}

  
  .logos {
    display: flex;
    margin-left: auto;
    justify-self: end;
    margin-top: 10px;
  }
  
  
  .logos a,
  .logos #statsLogo {
    margin-left: 20px; /* Add margin between logos */
    justify-self: end;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
  }

  .logos a:hover,
.logos #statsLogo:hover {
    transform: scale(1.2); /* Adjust the scaling factor as needed */
  }


  
  #sidebar {
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    grid-area: sidebar;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  #sidebar2 {
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    grid-area: sidebar2; /* Corrected the grid-area to sidebar2 */
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  footer {
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    grid-area: footer;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
    text-align: center; /* Center the content horizontally */
    align-items: center
  }
  
  footer p {
    margin: 0; /* Remove default margin to prevent extra spacing */
  }
  
  footer a {
    display: inline-block; /* Display links in a line */
    margin: 0 10px; /* Add some spacing between links, adjust as needed */
    text-decoration: none;
    color: #000000; /* Set the link color */
    font-weight: bold;
  }
  
  footer a:hover {
    text-decoration: underline; /* Add underline on hover */
  }
  
  





  
  
.main-title {
  font-size: 15px;
  font-weight: bold;
  text-transform: capitalize;
  color: #f4ead3;
  margin-bottom: 1px;
  }
  
  main {
      background: rgba(255, 0, 208, var(--tw-bg-opacity));
      grid-area: main;
      border-radius: var(--main-radius);
      padding-top: var(--main-padding);
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto;
      width: 100%;
      min-width: 0;
    }

  .table-container {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }

  @media screen and (max-width: 600px) {
    .table-container {
      flex-direction: column;
      align-items: center;
    }
    .search-buttons {
      order: 2;
      margin-top: 16px;
      width: 100%;
    }
  }


  #customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  text-transform: capitalize;
  text-align: center;
  font-weight: bold;
  margin-top: 1px;
  }
  
  #customers td, #customers th {
  border: 1px solid #1e3448;
  padding: 10px;
  text-align: center;
  text-transform: capitalize;
  margin-top: 1px;
  color: #e9efe8;
  }

  #customers td {
  background-color: #17293a;
  }

  #customers tr:nth-child(even) td {
  background-color: #17293a;
  }

  #customers tr:hover td {
  background-color: #2b4a66;
  }

  #customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  background-color: #11202d;
  color: #f6b233;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.15em;
  font-size: 11px;
  margin-top: 1px;

  }
  
  .search-buttons {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  
  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .team-dropdown {
    width: 200px;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
    background: #11202d;
    color: #e9efe8;
    min-width: 0;
  }
  
  
  
  input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
    flex: 1;
  }
  
  .search-button-cta {
    padding: 10px 15px;
    background-color: #f6b233;
    color: #0b1620;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s ease;
  }

  .search-button-cta:hover {
    background-color: #f4ead3;
  }
  
  
  
  .cta-button {
    background-color: #f6b233;
    color: #0b1620;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    margin-top: 20px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
  }

  .cta-button:hover {
    background-color: #f4ead3;
  }

  .next-in {
    margin-bottom: 10px;
  }

#countdownAnchorage {
  color: #f6b233;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  letter-spacing: 0.1em;
}

@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "sidebar2"
      "footer";
  }
}

/* ── Small screens 480px ── */
@media screen and (max-width: 480px) {
  .main-title {
    font-size: 13px;
    padding: 0 12px;
  }

  #customers td, #customers th {
    padding: 8px 6px;
    font-size: 11px;
  }

  .search-buttons {
    margin-left: 0;
    width: 100%;
    padding: 0 4px;
  }

  .search-bar {
    width: 100%;
  }

  .team-dropdown {
    flex: 1;
    width: 100%;
  }
}

/* ── 320px floor ── */
@media screen and (max-width: 360px) {
  #customers td, #customers th {
    padding: 6px 4px;
    font-size: 10px;
  }

  .search-button-cta {
    padding: 10px 10px;
    font-size: 11px;
  }

  .main-title {
    font-size: 12px;
  }
}