/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

/* Header Styles (UNIFIED) */
.header {
  width: 100%;
  background-color: #012699;
  height: 55px; /* Fixed header height */
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.8px solid #ffea00;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-logo-container {
  flex-grow: 1; /* Allows the logo to take available space and center */
  text-align: center;
  position: absolute; /* Position absolute to truly center */
  left: 50%;
  transform: translateX(-50%);
  width: fit-content; /* Only take width of content */
}

.header-logo {
  width: 150px; /* Adjust size as needed */
  height: auto;
  max-height: 45px; /* Adjust max height for 55px header */
  object-fit: contain;
  cursor: pointer; /* Added cursor pointer for consistency */
}

/* NEW: Header Left Section for Image Button (Promotion Button) */
.header-promo-btn {
  width: 45px; /* Size of the button image */
  height: 45px; /* Size of the button image */
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  z-index: 1001; /* Ensure it's above the logo */
  border: none;
  background: none;
  padding: 0;
}

.header-promo-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

.header-promo-btn:hover {
  transform: scale(1.05);
}

/* Marquee Styles */
.marquee-container {
  width: 100%;
  overflow: hidden;
  position: fixed; /* Changed from relative to fixed */
  top: 55px; /* Adjust this value to sit right below your fixed header */
  left: 0;
  background-color: #00116d;
  color: #ffffff;
  padding: 0;
  height: 21px;
  display: flex;
  align-items: center;
  border-bottom: 1.8px solid #ffea00;
  z-index: 999;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 30s linear infinite;
  line-height: 21px; /* Match marquee height for vertical centering */
}

.marquee-content span {
  font-size: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Side Navigation Menu Button - Moved to header */
.sidenav-menu-btn {
  width: 46px; /* Edited width */
  height: 38px; /* Edited height */
  border-radius: 8px;
  background: linear-gradient(to right, #00116d, #00116d);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1001; /* Ensure button is above header */
  border: none;
  color: #ffffff;
  font-size: 1.2rem; /* Adjusted font size */
  flex-shrink: 0; /* Prevent button from shrinking */
  margin-left: auto; /* Push button to the far right */
  border-bottom: 3px solid;
}

.sidenav-menu-btn:hover {
  transform: translateY(-2px);
}

.sidenav-menu-btn:active {
  transform: translateY(0);
}

/* Side Navigation Menu */
.sidenav-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: linear-gradient(to right, #012699, #00116d);
  backdrop-filter: blur(10px);
  transition: right 0.4s ease;
  z-index: 1002; /* Ensure menu is above everything else */
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidenav-menu.active {
  right: 0;
}

.sidenav-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidenav-logo {
  width: 120px;
  height: auto;
  margin-bottom: 15px;
}

.sidenav-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.sidenav-title {
  color: #ffea00;
  font-size: 1.2rem;
  font-weight: bold;
}

.sidenav-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.sidenav-close:hover {
  color: #ffea00;
}

.sidenav-flags {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidenav-flag-item {
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  border: 1px solid #ffffff;
}

.sidenav-flag-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidenav-flag-icon {
  width: 30px;
  height: 20px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sidenav-flag-name {
  color: #fff;
  font-size: 1rem;
}

/* New Sidenav Actions Section */
.sidenav-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.sidenav-actions-title {
  color: #ffea00;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.sidenav-actions-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Modified Sidenav Button Styles */
.sidenav-btn {
  width: 100%;
  height: 50px;
  padding: 0;
  font-size: 1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  padding-left: 15px;
  background: linear-gradient(
    to right,
    #012699,
    #0a1b4d
  ); /* Darker blue background */
  color: #ffffff; /* White text */
  border: 1px solid #ffffff;
}

.sidenav-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  ); /* Subtle hover highlight */
  transition: all 0.4s ease;
}

.sidenav-btn:hover::before {
  left: 100%;
}

.sidenav-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    to right,
    #1a3a8a,
    #142d6f
  ); /* Slightly lighter on hover */
}

.sidenav-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Specific button styles (primary, secondary, tertiary) are removed/simplified
   as the new design uses a unified look with a yellow border.
   If distinct colors are still needed, re-introduce these classes
   and apply different background/border.
*/
/*
.sidenav-btn-primary {
  background: linear-gradient(to right, rgb(37 99 235), rgb(37 99 235));
  color: white;
}

.sidenav-btn-secondary {
  background: linear-gradient(to right, rgb(55 65 81), rgb(55 65 81));
  color: white;
}

.sidenav-btn-tertiary {
  background: linear-gradient(to right, rgb(202 138 4), rgb(202 138 4));
  color: white;
}
*/
.sidenav-btn-social {
  color: white;
}

.sidenav-social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.sidenav-social-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.sidenav-social-icon:hover {
  background: #ffea00;
  color: #0e1635;
  transform: translateY(-3px);
}

/* New: Sidenav Payment Image */
.sidenav-payment-image-container {
  margin-top: 20px;
  text-align: center;
}

.sidenav-payment-image {
  width: 100%;
  max-width: 200px; /* Adjust as needed */
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Overlay for when menu is open */
.sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001; /* Above main content, below sidenav menu */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidenav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* NEW BACKGROUND IMAGE - Replace the URL with your new image */
body {
  /* background: url("src//www.bet369.netlify.app.png") no-repeat center center
    fixed; */
  background-size: cover;
  color: #0e1635;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0; /* Remove padding from body as header is sticky */
}

/* IMPORTANT: The `body` styles from the provided snippet conflict
   with your existing `body` styles. I've placed the new rules
   that *don't* conflict (like Game-slider, game-title, etc.)
   below. If you want the `Game-slider` to replace the main `body`
   content as per the original small snippet, you'll need to
   restructure your HTML and CSS significantly. For now, I'm
   assuming you want the game slider as an *additional* section.

   The `body` styles from the snippet are commented out below to avoid
    overwriting your main page's background and layout.
*/

/*
.body-from-snippet {
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f2f5;
  font-family: 'Arial', sans-serif;
  margin: 0;
}
*/

.container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* Add padding here for main content */
  flex-grow: 1; /* Allow container to grow and push footer down */
}

.title {
  color: #012699;
  font-size: 2rem;
  text-align: center;
  margin: 20px 0;
  font-weight: bold;
}

.banners-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 15px auto;
  flex-wrap: wrap;
  width: 100%;
}

.banner-container {
  width: 100%;
  max-width: 824px;
  height: 331px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  touch-action: pan-y;
  border-bottom: 3px solid;
  color: #012699;
}

/* Find this section in 369.style.css */
.banner-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;

  /* NEW: Staggered Pop-In Transition */
  transition: opacity 0.4s ease-in, transform 0.4s ease-out,
    filter 0.4s ease-out; /* Faster transition for a "pop" */
  transform: scale(1.1); /* Start slightly larger */
  filter: blur(3px); /* Start slightly blurred */
  transform-origin: center center; /* Ensure transformations are from the center */

  background-size: cover;
  background-position: center;
  border: none;
  border-radius: 6px;
}

/* Add or modify this new rule for the active slide */
/* If you had previous transform rules, replace them with this */
.banner-slide[style*="opacity: 1"] {
  opacity: 1; /* Explicitly set opacity here as well, if your JS doesn't animate it */
  transform: scale(1); /* Pop to original size */
  filter: blur(0); /* Pop to sharp */
  /* You might need to adjust the JS 'showSlide' function to remove the 'opacity = 1' line
     or ensure it's not overriding the CSS transition's start state if you want a true pop.
     For now, this will work with current JS. */
}

/* Center banner slides */
.banner-center .banner-slide:nth-child(1) {
  background-image: url("banner slide image/226.png");
}

.banner-center .banner-slide:nth-child(2) {
  background-image: url("banner slide image/s2.png");
}

.banner-center .banner-slide:nth-child(3) {
  background-image: url("banner slide image/s3.jpg");
}

.banner-center .banner-slide:nth-child(4) {
  background-image: url("banner slide image/s4.png");
}

.banner-center .banner-slide:nth-child(5) {
  background-image: url("banner slide image/s5.png");
}

.banner-center .banner-slide:nth-child(6) {
  background-image: url("banner slide image/s6.png");
}

/* Banner navigation dots */
.banner-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}

.banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-dot.active {
  background-color: #fff;
  transform: scale(1.2);
}

.logo-container {
  margin: 25px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  display: none; /* Hide this logo as it's now in the header */
}

.logo-image {
  width: 300px;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

.buttons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 40px;
}

/* Updated button styles to exact 280x54px size */
.btn {
  width: 280px;
  height: 52px;
  padding: 0;
  font-size: 1.2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.4s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(to right, rgb(1 38 153), rgb(0 17 109));
  color: white;
}

.btn-secondary {
  background: linear-gradient(to right, rgb(1 38 153), rgb(0 17 109));
  color: white;
}

.btn-tertiary {
  background: linear-gradient(to right, rgb(1 38 153), rgb(0 17 109));
  color: white;
}

.btn-social {
  background: linear-gradient(to right, #000000, #000000);
  color: white;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.footer {
  margin-top: auto;
  padding: 20px;
  text-align: center;
  color: #ccc;
  font-size: 0.9rem;
  border-top: 1px solid #444;
  width: 100%;
  background-color: #00116d;
}

.tagline {
  text-align: center;
  margin: 15px 0 30px;
  font-size: 1.4rem;
  max-width: 800px;
  line-height: 1.6;
  color: #ffea00;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Popup Banner Styles */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay.active {
  opacity: 1;
  visibility: visible;
  z-index: 1001;
}

.popup-banner {
  width: 775px;
  height: 450px;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

.popup-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.close-popup:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

/* Game Slider Styles */
.Game-slider {
  width: 90%;
  max-width: 1200px; /* Limit width to align with container */
  overflow: hidden;
  position: relative;
  margin-top: 0px; /* Add some space above the slider */
  margin-bottom: 40px; /* Add space below */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.game-title {
  text-align: center;
  font-size: 2rem; /* Adjusted to match existing title size */
  font-weight: bold; /* Adjusted to match existing title weight */
  margin-bottom: 25px;
  color: #ffea00; /* Adjusted to match existing title color */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Added shadow for visibility */
}

.game-track {
  display: flex;
  width: max-content;
  animation: scroll 18s linear infinite;
}

.game-group {
  display: flex;
  align-items: center;
  justify-content: center; /* Center images within the group if space allows */
}

.game-group img {
  height: 55px;
  margin: 0 35px;
  transition: transform 0.3s ease, filter 0.3s ease;
  /* The initial filter is what makes them grayscale. */
  /* filter: grayscale(100%) brightness(1); */
  -webkit-user-drag: none; /* Prevent dragging images */
  user-select: none; /* Prevent selecting image text */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
  .banners-row {
    flex-direction: column;
    align-items: center;
  }

  /* Responsive banner on mobile */
  .banner-container {
    width: 100%;
    height: 0;
    padding-bottom: 40%; /* Adjust this percentage to control the aspect ratio */
    max-width: 100%;
  }

  .banner-slide {
    background-size: cover;
    background-position: center;
    background-color: #000; /* Add background color for better appearance */
  }

  .Game-slider {
    width: 95%; /* Adjust width for smaller screens */
  }

  .game-group img {
    height: 50px; /* Slightly smaller images on smaller screens */
    margin: 0 25px;
  }
}

@media (max-width: 850px) {
  .popup-banner {
    width: 90%;
    height: auto;
    aspect-ratio: 775/450;
    max-width: 775px;
  }

  .marquee-content span {
    font-size: 16px;
  }

  .game-title {
    font-size: 1.8rem; /* Further adjustment for game title */
  }
}

@media (max-width: 768px) {
  .banner-container {
    padding-bottom: 50%; /* Taller aspect ratio for smaller screens */
  }

  .title {
    font-size: 1.8rem;
  }

  .buttons-container {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 400px) {
  /* MODIFIED: Adjust button width for very small screens */
  .btn {
    width: 320px;
    height: 52px;
    font-size: 1rem;
  }

  .marquee-content span {
    font-size: 11px;
  }
}

@media (max-width: 350px) {
  .banner-container {
    padding-bottom: 70%; /* Adjust for very small screens */
  }

  /* MODIFIED: Button size adjusted for very small screens */
  .btn {
    width: 300px;
    height: 50px;
    font-size: 0.95rem;
  }

  .marquee-content span {
    font-size: 10px;
  }

  .sidenav-menu {
    width: 100%;
    right: -100%;
  }

  .header-logo {
    width: 150px;
    max-height: 45px; /* Adjust max height for 55px header */
  }

  .sidenav-menu-btn {
    width: 40px;
    height: 35px;
    font-size: 1.1rem;
  }

  /* NEW: Responsive adjustments for the new header image button */
  .header-promo-btn {
    width: 45px;
    height: 45px;
  }

  .game-group img {
    height: 35px; /* Adjust for very small screens */
    margin: 0 10px;
  }
}

/* Add this to your 369.style.css file */

.button-icon {
  width: 32px; /* Set the desired width */
  height: 32px; /* Set the desired height */
  margin-right: 10px; /* Space between icon and text */
  vertical-align: middle; /* Align icon nicely with text */
}

/* For the sidenav buttons, you might need to adjust margin or display */
.sidenav-btn .button-icon {
  margin-right: 8px; /* Slightly less margin for sidenav */
}

/* Ensure buttons have flex display to align icon and text */
.btn,
.sidenav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}