/* Game Slider */
.game-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-right: 10px;
  padding-left: 10px; /* Add gap only to the left */
  box-sizing: border-box; /* Include padding within the width calculation */
}

/* Slider Container */
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  gap: 10px; /* Gap between the items */
  transition: transform 0.3s ease-out;
}

.slider-item {
  flex: 0 0 150px; /* Set the width to match .game-card width */
  height: 200px; /* Set the height to match .game-card height */
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Game Name Container and Badge - Positioned over the image */
.game-name-container {
  padding: 10px;
  background: rgba(231, 230, 230, 0.507); /* Semi-transparent white background */
  text-align: center;
  border-radius: 15px; /* Rounded corners */
  z-index: 2; /* Ensures the name appears above the image */
  width: 80%; /* Width is 80% to leave gap on both sides */
  position: absolute;
  bottom: 20px; /* Place the container at the bottom of the image */
  left: 50%; /* Position it in the center horizontally */
  transform: translateX(-50%); /* Adjust for perfect centering */
  backdrop-filter: blur(5px); /* Apply blur to the background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional: to add depth */
}

/* Game Name */
.game-name {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  color: #070707;
  text-transform: capitalize;
}
/* Badge for "Popular" or "On Sale" */
.badge {
  position: relative;
  margin-top: 5px;
  background-color: #FF6347; /* Static red background */
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  border: 2px solid white;
  overflow: hidden; /* Keeps pseudo-element inside */
  z-index: 0;
}

/* Green blinking overlay */
.badge::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #32CD32; /* Green */
  border-radius: 10px;
  opacity: 0;
  animation: blink 1.5s infinite;
  z-index: -1; /* Sit behind text */
  pointer-events: none;
}

/* Blinking Animation using opacity */
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Slider Item Image */
.slider-item img {
  width: 140px; /* Ensure it fills the container */
  height: 180px; /* Adjusted height to fit the available space */
  object-fit: cover; /* Makes sure the image covers the area without distortion */
  border-radius: 8px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .categories-title-container {
    display:  none;
    padding: 8px 15px; /* Reduce padding for smaller screens */
    top: -20px; /* Adjust the position to avoid overlap */
    left: 10px; /* Adjust left position to fit the screen */
    font-size: 1rem; /* Reduce font size for better visibility */
  }
}

/* Hide Game Slider on Larger Screens and Show it on Smaller Screens */
@media (max-width: 768px) {
  /* Show the game slider on smaller devices (tablets and below) */
  .game-slider {
    display: block; /* Ensure the slider is visible */
    margin-top: 20px; /* Move the slider slightly above the hero section */
  }
}

@media (min-width: 769px) {
  /* Hide the game slider on larger screens */
  .game-slider {
    display: none;
  }
}
/* Mobile Navbar */
.mobile-navbar {
  display: none; /* Hidden by default */
  background-color: #4CAF50; /* Green background */
  padding: 10px 0;
  width: 100%;
  z-index: 999; /* Ensure it appears on top */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Navbar floating effect */
}

.mobile-navbar-content {
  display: flex;
  justify-content: space-between; /* Align items evenly */
  align-items: center;
  width: 90%;
  margin: 0 auto; /* Center the content */
  gap: 6px; /* Reduced spacing between containers */
}

/* Login Button - Rectangular */
#login-btn {
  background-color: #FF5252; /* Red background for login */
  border-radius: 10px; /* Slightly rounded corners */
  padding: 10px 18px; /* Adjust padding for mobile */
  color: #ffffff; /* White text color */
  display: flex;
  align-items: center; /* Align text and icon */
  gap: 8px; /* Space between icon and text */
  text-decoration: none; /* Remove underline */
  font-size: 14px; /* Text size */
  transition: all 0.3s ease; /* Smooth effect */
}

#login-btn:hover {
  transform: translateY(-3px); /* Slight lift on hover */
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced hover shadow */
}

#login-btn .mobile-item-icon svg {
  width: 20px;
  height: 20px;
}

/* Search and Notification - Square Containers */
#search-btn,
#notification-btn {
  border-radius: 12px; /* Rounded corners */
  width: 44px; /* Same width as the login button's height */
  height: 44px; /* Match the height of the login button */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Floating effect */
  transition: all 0.3s ease-in-out; /* Smooth hover effect */
}

#search-btn {
  background: linear-gradient(135deg, #cecdcd, #ffffff); /* Smoother gradient background for search */
  margin-right: -120px; /* Reduce spacing between search and notification */
}

#notification-btn {
  background: linear-gradient(135deg, #4CAF50, #81C784); /* Smoother green gradient for notification */
}

#search-btn:hover,
#notification-btn:hover {
  transform: scale(1.1); /* Smooth scaling effect on hover */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

#search-btn .mobile-item-icon svg,
#notification-btn .mobile-item-icon svg {
  width: 22px; /* Adjust icon size for mobile */
  height: 22px;
}

#search-btn .mobile-item-icon svg {
  color: #4CAF50; /* Green search icon */
}

#notification-btn .mobile-item-icon svg {
  color: white; /* White bell icon */
}

/* General Icon and Text Styling */
.mobile-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-item-text {
  font-size: 14px; /* Adjust text size */
  color: #ffffff; /* White text color */
}

/* Ensure all containers have the same height */
.mobile-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .navbar {
    display: none; /* Hide desktop navbar */
  }
  .mobile-navbar {
    display: block; /* Show mobile navbar */
  }
}

/* Title Container for 'Our Categories' */
.categories-title-container {
  background-color: #ffffff;
  border-radius: 25px;
  padding: 10px 20px;
  position: absolute;
  top: -75px; /* Positions it above the grid container */
  left: 0px; /* Positions it to the left */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}


/* Game Grid Section */
.game-grid {
  padding: 20px;
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  text-align: center;
  max-width: 1200px;
  width: 90%;
  top: -120px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative; /* This is required to position the title above */
}

/* Grid container styling */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Ensures minimum width per item */
  gap: 20px;
  justify-items: center;
  margin-top: 50px;
}

/* Optional: Tweak for smaller screens to keep at least two columns */
@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* Force two per line */
    gap: 15px;
  }
}

/* Game Card */
.game-card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  width: 150px; /* Fixed width for larger screens */
  height: 175px; /* Fixed height for larger screens */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.game-card img {
  width: 100%;
  height: 120px; /* Ensures images fit within the card */
  object-fit: cover;
  border-radius: 8px;
}

.game-card p {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #070707;
  overflow: hidden; /* Ensures text doesn't overflow */
  text-overflow: ellipsis;
  white-space: nowrap; /* Keeps text on a single line */
}

/* For the hidden categories */
.hidden-categories {
  display: none; /* Initially hidden */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Keep grid layout consistent */
  gap: 25px;
  margin-left:20px;
  justify-items: center;
  margin: 0 auto;
  max-width: 100%;
}
/* View All Button */
.view-all {
  display: inline-block;
  margin-top: 20px;
  font-size: 1rem;
  color: #00f9ff;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #00f9ff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.view-all:hover {
  background-color: #00f9ff;
  color: #1b0b26;
}

/* Hide View All Button on mobile devices */
@media (max-width: 768px) {
  .view-all {
    display: none;
  }
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
  /* Remove the white background container on mobile view */
  .game-grid {
    background-color: transparent; /* Make background transparent */
    box-shadow: none; /* Remove the shadow effect */
    top: 0; /* Adjust positioning */
    margin-left: 15px;
    margin-right: 0px;
  }
.game-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

  /* Show the game grid on smaller devices */
  .game-grid {
    display: block; /* Ensure the grid is visible on mobile */
    margin-left: 0px;
    Margin-top: -35px;
    margin-right: 0px;
  }

  /* Prevent overlap between slider and grid sections */
  .game-slider {
    background-color: transparent; /* Remove any background color */
    margin-bottom: 30px; /* Add bottom margin to ensure spacing between the slider and game grid */
  }
}


/* Default styling for buttons */
.category-buttons {
  display: none; /* Hide buttons by default */
}
@media (max-width: 767px) {
  /* Show buttons only on mobile */
  .category-buttons {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    overflow-x: auto; /* Enable horizontal scrolling */
    padding: 5px 0;
    margin-right: -60px;
    gap: 10px; /* Space between buttons */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
  }

  .category-buttons::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers (Chrome, Safari) */
  }

  .category-btn {
    background-color: #00ab07; /* Attractive green background */
    color: white;
    padding: 8px 20px;
    border-radius: 50px; /* Pill shape */
    font-size: 1rem; /* Slightly larger text */
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Smooth color and scale transition */
    border: none; /* Remove default border */
    min-width: 120px; /* Ensure consistent button size */
    text-align: center;
    flex-shrink: 0; /* Prevent button from shrinking */
  }

  .category-btn:hover {
    background-color: #45a049; /* Darker green on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
  }

  .category-btn.selected {
    background-color: #45a049; /* Light green when selected */
    transform: scale(1.1); /* Slightly enlarge when selected */
  }

  /* Optional: Improve touch area for buttons on mobile */
  .category-btn:active {
    background-color: #45a049; /* Immediate visual feedback when tapped */
  }
}


body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #e9f4e5; /* Light green background */
}

.navigation-button-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  background-color: #d0e8cc; /* Light green area */
  border-radius: 0px;
  margin-top: -10px;
}

.navigation-button {
  text-align: center;
}

.navigation-button-div {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  margin-bottom: 10px;
  margin-left: 7px;
}

.navigation-button-div svg {
  width: 32px; /* Adjust the size of the SVG */
  height: 32px; /* Keep it proportional */
  padding: 4px; /* Add padding inside the box */
  box-sizing: border-box; /* Ensure padding is included in width/height */
}

.navigation-button-name {
  font-size: 14px;
  color: #333;
  
}

.add-icon {
  font-size: 24px;
  color: #70b452;
}

/* Media query to hide the navigation button container on wider screens */
@media (min-width: 768px) {
  .navigation-button-container {
    display: none;
  }
}