:root {
      --bg-color: #0a0a0a;
      --card-bg: #1a1a1a;
      --primary: #00b050;
      --text-color: #fff;
      --secondary: #888;
      --accent: #ffcc00;
    }

    body {
      margin: 0;
      font-family: "Poppins", sans-serif;
      background: var(--bg-color);
      color: var(--text-color);
      overflow-x: hidden;
    }

    /* HEADER */
    header {
      position: sticky;
      top: 20;
      background: #111;
      padding: 2px; 
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1000;
    }

    header .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--secondary);
    }

    nav {
      display: flex;
      gap: 60px;
    }

    nav a {
      color: var(--text-color);
      text-decoration: none;
      font-weight: 500;
    }

    nav a:hover {
      color: var(--primary);
    }

    #toggleMenu {
      display: none;
      background: none;
      border: none;
      color: #fff;
      font-size: 1.8rem;
      cursor: pointer;
    }
	
	.hideFromDesktop{
		display:none;
	}
	
	

    @media (max-width: 768px) {
      nav {
        display: none;
        flex-direction: column;
        background: #000;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        text-align: center;
        /* padding: 10px 0; */
      }

      nav.active {
        display: flex;
      }

      #toggleMenu {
        display: block;
      }
	  
	  .hideFromMobile{
		display:none;
		}
	   .hideFromDesktop{
		display:block;
	}
	
    }

    /* ===== HERO SECTION ===== */
    .hero {
      position: relative;
      height: 50vh;
      overflow: hidden;
      color: #fff;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .slide.active {
      opacity: 1;
      z-index: 2;
    }

    .hero-content {
      position: absolute;
      z-index: 3;
      bottom: 20%;
      left: 10%;
      max-width: 500px;
      transition: opacity 1s, transform 1s;
      opacity: 0;
      transform: translateY(20px);
    }

    .slide.active .hero-content {
      opacity: 1;
      transform: translateY(0);
    }

    .cta-btn {
      display: inline-block;
      background: #ffcc00;
      color: #000;
      padding: 10px 20px;
      margin-top: 10px;
      border-radius: 6px;
      font-weight: bold;
      text-decoration: none;
      transition: background 0.3s;
    }

    .cta-btn:hover {
      background: #ffc107;
    }

    .nav-arrows {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      z-index: 4;
    }

    .arrow {
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      border: none;
      font-size: 2rem;
      padding: 8px 16px;
      cursor: pointer;
      border-radius: 50%;
      margin: 0 10px;
      transition: background 0.3s;
    }

    .arrow:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    /* ===== GAME CARDS ===== */
    .games {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 4px 2px;
      background: #111;
    }

    .game-card {
        background: #1c1c1c;
        border-radius: 5px;
        padding: 2px;
        width: 140px;
        text-align: center;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        transition: transform 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;  /* ✅ centers horizontally */
        justify-content: center;  /* ✅ centers vertically if you want */
    }

    .game-card:hover {
      transform: translateY(-5px);
    }

    .game-card img {
	    width: 80px;
	    height: 80px;
		border-radius: 30px;
	    object-fit: contain;
	    margin-bottom: 5px;
	    display: block;     /* ✅ ensures proper centering in flex parent */
	}

    .game-card h4 {
      font-size: 1rem;
      margin-bottom: 2px;
    }

    .game-card p {
      font-size: 0.85rem;
	  font-weight:bold;
      color: #ccc;
    }

    @media (max-width: 600px) {
      .game-card {
        width: 35%;
      }
    }
	
	/* MAIN CONTENT */
    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px;
    }

    .matches {
      flex: 1;
      min-width: 300px;
      margin-right: 20px;
    }

    .match-card {
      background: var(--card-bg);
      margin-bottom: 15px;
      padding: 15px;
      border-radius: 10px;
    }

    .match-card h3 {
      margin: 0 0 10px 0;
      font-size: 1.1rem;
    }

    .odds {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
    }

    .odds button {
      background: #222;
      border: 1px solid var(--secondary);
      color: var(--text-color);
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
    }

    .odds button:hover {
      background: var(--primary);
      border-color: var(--primary);
    }

    .bet-slip {
      background: var(--card-bg);
      width: 250px;
      padding: 2px;
      border-radius: 5px;
      position: sticky;
      top: 5px;
      height: fit-content;
    }

    .bet-slip h3 {
      margin-bottom: 5px;
      border-bottom: 1px solid var(--secondary);
      padding-bottom: 1px;
    }

    .bet-slip p {
      color: var(--secondary);
    }
	
	/* === Tabs Section === */
    .tabs {
      max-width: 1000px;
      margin: 60px auto;
      text-align: center;
    }

    .tab-buttons {
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
    }

    .tab-buttons button {
      background: #1c1c1c;
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .tab-buttons button.active,
    .tab-buttons button:hover {
      background: #ffcc00;
      color: #000;
    }

    .tab-content {
      display: none;
      margin-top: 30px;
    }

    .tab-content.active {
      display: block;
    }
	
	
	/* ===== TABLE STYLE ===== */
	/* TABLE SCROLL CONTAINER */
	.table-container {
	  width: 100%;
	  overflow-x: auto;
	  margin: 10px 0;
	  -ms-overflow-style: none;
	  scrollbar-width: none;
	  ::-webkit-scrollbar { display: none; }
	}
	.table-container2 {
	  width: 100%;
	  overflow-x: auto;
	  margin: 0;
	}
    .bet-table {
      width: 100%;
      margin: 5px 5px;
      border-collapse: collapse;
      background: #1c1c1c;
      color: #fff;
      border-radius: 5px;
      overflow: hidden;
	  font-size:12px;
    }

    .bet-table th, .bet-table td {
      /* padding: 3px 4px; */
      text-align: center;
    }

    .bet-table th {
      background: #ffcc00;
      color: #000;
      font-weight: bold;
    }

    .bet-table tr:nth-child(even) {
      background: #222;
    }

    .bet-table tr:hover {
      background: #333;
    }

    .bet-table td {
      border-bottom: 1px solid #333;
    }
	
	/* === Chart Container === */
    .chart-container {
      width: 90%;
      max-width: 800px;
      margin: 30px auto;
      background: #1c1c1c;
      padding: 20px;
      border-radius: 10px;
    }

/* === Full Style === */	
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #ffcc00;
}

img, video, canvas {
  max-width: 100%;
  display: block;
}

/* button { */
  /* cursor: pointer; */
  /* border: none; */
  /* outline: none; */
  /* background: #222; */
  /* color: #fff; */
  /* padding: 10px 20px; */
  /* border-radius: 6px; */
  /* font-weight: 500; */
  /* transition: background 0.3s, color 0.3s; */
/* } */

/* button:hover { */
  /* background: #ffcc00; */
  /* color: #000; */
/* } */

.custom_button {
  cursor: pointer;
  /* border: none; */
  /* outline: none; */
  font-weight:bold;
  width:100%;
  background: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  /* font-weight: 500; */
  transition: background 0.3s, color 0.3s;
}

custom_button:hover {
  background: #ffcc00;
  color: #000;
}

.custom_button2 {
  display: inline-block;       /* allows padding & width */
  cursor: pointer;
  font-weight: bold;
  width: 95%;
  background: #222;
  color: #fff;
  padding: 2px 4px;
  border-radius: 6px;
  text-align: center;          /* centers text inside */
  text-decoration: none;       /* removes underline for <a> */
  transition: background 0.3s, color 0.3s;
}

.custom_button2:hover {
  background: #ffcc00;
  color: #000;
}

.custom_button3 {
  display: inline-block;       /* allows padding & width */
  cursor: pointer;
  font-weight: bold;
  width: 50%;
  background: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-align: center;          /* centers text inside */
  text-decoration: none;       /* removes underline for <a> */
  transition: background 0.3s, color 0.3s;
}

.custom_button3:hover {
  background: #ffcc00;
  color: #000;
}



/* input, select, textarea { */
  /* background: #222; */
  /* color: #fff; */
  /* border: 1px solid #333; */
  /* padding: 8px 12px; */
  /* border-radius: 6px; */
  /* font-size: 1rem; */
  /* width: 100%; */
/* } */

/* input:focus, select:focus, textarea:focus { */
  /* border-color: #ffcc00; */
  /* outline: none; */
/* } */

/* /* HEADINGS */ */
/* h1, h2, h3, h4, h5, h6 { */
  /* font-weight: bold; */
  /* margin-bottom: 10px; */
  /* color: #ffcc00; */
/* } */

/* h1 { font-size: 1.5rem; } */
/* h2 { font-size: 1rem; } */
/* h3 { font-size: 1.5rem; } */
/* h4 { font-size: 1.25rem; } */
/* h5 { font-size: 1.00rem; } */
/* h6 { font-size: 0.5rem; } */

/* /* PARAGRAPHS */ */
/* p { */
  /* margin-bottom: 15px; */
  /* font-size: 1rem; */
  /* color: #ccc; */
/* } */

/* /* LISTS */ */
/* ul, ol { */
  /* list-style-position: inside; */
  /* margin-bottom: 15px; */
/* } */

/* li { */
  /* margin-bottom: 8px; */
/* }	 */

/* /* MISC */ */
/* hr { */
  /* border: 0; */
  /* border-top: 1px solid #333; */
  /* margin: 1px 0; */
/* } */

/* FOOTER */
footer {
  background: #1c1c1c;
  color: #ccc;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}



small {
  font-size: 0.8rem;
  color: #888;
}


.auth-buttons button {
      margin-left: 10px;
      background: var(--primary);
      border: none;
      color: white;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
    }

    .auth-buttons button:hover {
      background: #00c560;
    }
	
	
	/* === MODAL BASE === */
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .modal.active { display: flex; }

  .modal-content {
    background: #1a1a1a;
    padding: 25px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    position: relative;
  }

  .modal-content h2 {
    margin-bottom: 15px;
    color: #ffcc00;
  }

  .modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
  }

  .modal-content input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #222;
    color: #fff;
  }

  .modal-content input:focus {
    border-color: #ffcc00;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
  }

  .switch-link {
    color: #ffcc00;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
  }
	
	/* scrolling ticker */
	

  .ticker-container {
    width: 100%;
    overflow: hidden;
    background: #222;
    border-top:2px solid #ffcc00;
    border-bottom:2px solid #ffcc00;
    padding:2px 0;
    position: relative;
  }
  .ticker-track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
  }
  .ticker-item {
    display: inline-block;
    margin:0 50px; 
	font-size:10px;
    font-weight:bold;
    color:#ffcc00;
    flex-shrink:0;
  }
  
  .center-item {
        text-align: center;
    }
	.centered{
		display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;    /* Centers vertically */
	}
	
	.horizontal-container {
	  display: flex;             /* Enables horizontal alignment */
	  justify-content: center;   /* Center all divs horizontally */
	  align-items: center;       /* Vertically center the divs if they have different heights */
	  gap: 30px;                 /* Space between divs */
	  flex-wrap: wrap;           /* Optional: wrap to next line if too many items */
	}

	
	/* === Footer === */
    footer {
      background: #111;
      color: var(--secondary);
      text-align: center;
      padding: 15px 10px;
      margin-top: 30px;
    }