/* ===== Variables ===== */
:root {
  --main-color: #df1f26;
  --second-color: #7520ff;
  --third-color: #e9a00a;
  --transition-duration: 0.5s;

  --font-bold: bold;
  --font-semibold: 600;
  --font-regular: 500;

  --font-size-large: 5.5rem;
  --font-size-medium: 3rem;
  --font-size-small: 1rem;

  --navbar-height: 5.5rem;
  --header-padding: 6rem;
  --button-radius: 0.9375rem;
}

/* ===== Resets ===== */
* {
  padding: 0;
  margin: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100vw;
  box-sizing: border-box;
  /* Optional: Keep consistent box-sizing */
  overflow-x: hidden;
  /* Prevent horizontal overflow */
  background-color: black;
  /* Ensures no unexpected background color */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: #1e1e1e;
}

/* ===== Containers ===== */
.heading-container,
.heading-container2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 5;
  padding: 2rem;
}

.heading-container img {
  width: 100%;
  height: auto;
}

/* Remove extra gaps between sections */
.main-hero,
.company,
.games-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove extra spacing within the .company section */
.company * {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ===== Typography ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-bold);
  color: white;
  margin: 0;
}

h1 {
  font-size: var(--font-size-large);
  line-height: 1;
  text-transform: uppercase;
}

h2 {
  font-size: var(--font-size-medium);
  text-transform: capitalize;
}

h3 {
  font-size: 2rem;
  font-weight: var(--font-semibold);
  color: var(--second-color);
  text-transform: uppercase;
  letter-spacing: 0.6rem;
}

h4 {
  font-size: 2rem;
  font-weight: 600;
  text-transform: capitalize;
  margin-top: -0.3125rem;
}

h5 {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--third-color);
  text-transform: uppercase;
  letter-spacing: 1.3rem;
  text-align: left;
}

h6 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--main-color);
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  position: relative;
}

p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-regular);
  color: white;
  line-height: 1.5;
  text-align: left;
}

/* ===== Media Queries ===== */

/* Laptop L - 1440px */
@media (max-width: 1440px) {
  h1 {
    font-size: 5rem;
  }

  h2 {
    font-size: 2.8rem;
  }

  h3,
  h4,
  h5,
  h6 {
    font-size: 1.8rem;
  }

  p {
    font-size: 1.3rem;
  }
}

/* Laptop - 1024px */
@media (max-width: 1024px) {
  h1 {
    font-size: 4.5rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3,
  h4,
  h5,
  h6 {
    font-size: 1.6rem;
  }

  p {
    font-size: 1.2rem;
  }
}

/* Tablet L - 900px */
@media (max-width: 900px) {
  .heading-container {
    padding: 1.5rem;
  }

  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 2.3rem;
  }

  h3,
  h4,
  h5,
  h6 {
    font-size: 1.4rem;
  }

  p {
    font-size: 1.1rem;
  }
}

/* Tablet - 768px */
@media (max-width: 768px) {
  .heading-container {
    padding: 1rem;
  }

  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3,
  h4,
  h5,
  h6 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1rem;
  }
}

/* Mobile L - 430px */
@media (max-width: 430px) {
  .heading-container {
    padding: 0.8rem;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  h3,
  h4,
  h5,
  h6 {
    font-size: 1rem;
  }

  p {
    font-size: 0.9rem;
  }
}

/* Mobile M - 375px */
@media (max-width: 375px) {
  .heading-container {
    padding: 0.6rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  h3,
  h4,
  h5,
  h6 {
    font-size: 0.9rem;
  }

  h3 {
    letter-spacing: 0.4rem;
  }

  p {
    font-size: 0.8rem;
  }
}

/* Mobile S - 320px */
@media (max-width: 320px) {
  .heading-container {
    padding: 0.4rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  h3,
  h4,
  h5,
  h6 {
    font-size: 0.8rem;
  }

  p {
    font-size: 0.7rem;
  }
}

/* ---- NAVIGATION BAR ----- */

.topnav {
  display: flex;
  align-items: center;
  /* Vertically align items */
  justify-content: space-between;
  background-color: black;
  padding: 0 6rem;
  height: 5.5rem;
  /* Navbar height */
  margin-top: 0;
  position: relative;
  z-index: 100;
}

.nav-container {
  display: flex;
  /* flexbox nav container */
  justify-content: space-between;
  /* spread items across width */
  align-items: center;
  /* vertically align center */
  max-width: 120rem;
  /* max-width for the container */
  width: 100%;
  /* Let take full width */
  margin: 0 auto;
  /* Center the content horizontally */
}

/* Nav menu links */
.topnav .nav-menu {
  display: flex;
  /* flexbox nav menu links */
  align-items: center;
  justify-content: center;
  /* Center the nav links */
  gap: 2rem;
  /* Horizontal gap between links */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(5px);
    /* Reduced vertical movement */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-menu .dropdown > a {
  font-weight: bold;
}

.nav-menu a,
.dropdown > a,
.category-title {
  font-size: 1rem;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;
  padding: 1rem 1.5rem;
}

/* Default: white and bold */
.category-toggle {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease;
}

/* Hover: turn red */
.category-toggle:hover {
  color: var(--main-color);
}

.nav-menu a.active,
.category-title.active {
  color: var(--main-color);
}

/* Apply consistent padding for nav links */
.topnav .nav-menu a {
  position: relative;
  color: white;
  padding: 1.5rem 2rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  line-height: 1.5;
  text-align: center;
  animation: fadeIn 0.4s ease forwards;
  transition: color 0.3s ease;
}

.topnav .nav-menu a:hover {
  color: var(--main-color);
}

.topnav .nav-menu a.active {
  color: var(--main-color);
  background-color: transparent;
}

.topnav .logo {
  display: flex;
  align-items: center;
  /* Ensure the logo aligns with other elements */
  height: 100%;
  /* Match navbar height */
  margin-left: 1rem;
  /* Adjust this to match the padding of the hamburger menu */
}

.topnav .logo img {
  max-height: 5.5rem;
  /* Adjust this to match the hamburger icon */
  width: auto;
  display: block;
}

/* Button styling with background transition */
.topnav .contact-button a {
  position: relative;
  /* Set relative positioning to anchor the pseudo-element */
  width: 6.25rem;
  /* Button width */
  display: flex;
  /* Flex to align content */
  align-items: center;
  /* Center text vertically */
  justify-content: center;
  /* Center text horizontally */
  padding: 0.9375rem 1.25rem;
  /* Vertical and horizontal padding */
  border-radius: var(--button-radius);
  /* Corner radius */
  border: 0.1875rem solid var(--main-color);
  /* Stroke (border) */
  background-color: transparent;
  /* Transparent fill color */
  color: white;
  /* Text */
  text-decoration: none;
  font-size: 1rem;
  /* Font size */
  font-weight: bold;
  text-transform: uppercase;
  /* All caps text */
  letter-spacing: 0.2rem;
  /* 20% letter spacing */
  overflow: hidden;
  /* Hide overflow for smooth animation */
  z-index: 1;
  /* Keep the text above the pseudo-element */
  background-image: linear-gradient(
    to right,
    var(--main-color) 0%,
    var(--main-color) 100%
  );
  background-size: 0% 100%;
  /* Initially set to 0% width */
  background-position: left;
  /* Start from the left */
  background-repeat: no-repeat;
  transition: background-size 0.5s ease, color 0.5s ease;
  /* Animate background-size and text color */
  margin-right: -10px !important; /* Try negative margin to move it toward the client button */
}

/* Hover effect to expand the background from left to right */
.topnav .contact-button a:hover::before {
  width: 100%;
  /* Expand the background to cover the entire button */
}

.topnav .contact-button a:hover {
  background-size: 100% 100%;
  /* Fill the entire button on hover */
  color: white;
  /* Ensure text color stays white on hover */
}

/* Dropdown container styling */
.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* Align dropdown container with other links */
}

.caret {
  cursor: pointer;
  display: inline-flex;
  /* Use inline-flex for better alignment with text */
  align-items: center;
  /* Center-align caret with text */
  margin-left: 0.5rem;
  /* Adjust spacing between the text and caret */
}

/* Adjust caret image size and alignment */
.caret img {
  width: auto;
  height: 1rem;
  /* Slightly smaller caret size for better spacing */
  vertical-align: middle;
  /* Align caret with text baseline */
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Rotate caret when active */
.caret.flipped img {
  transform: rotate(180deg);
  /* Flip the caret */
}

/* Make caret red when dropdown is active */
.dropdown a.active + .caret img,
.dropdown:hover .caret img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(94%) saturate(7526%)
    hue-rotate(0deg) brightness(103%) contrast(105%);
}

/* Nav menu links */
.topnav .nav-menu a {
  position: relative;
  color: white;
  padding: 1.5rem 2rem;
  /* Ensure consistent padding for all links */
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  line-height: 1.5;
  /* Adjust line-height to align properly with caret */
  text-align: center;
  transition: color 0.3s ease;
}

/* Dropdown content styling */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  border: none;
  z-index: 10;
  width: 12.25rem;
  height: fit-content;
  top: 3.3rem;
  text-align: center;
}

.dropdown-content a {
  color: white;
  padding: 0.5rem 2rem;
  text-decoration: none;
  display: block;
  text-align: center;
}

/* Hover effects */
.dropdown-content a:hover,
.dropdown-content a:active {
  background-color: #1d1d1d;
  color: var(--main-color);
}

.dropdown-category .sub-dropdown a {
  font-size: 0.9rem;
  font-weight: normal;
  color: white;
  padding: 0.3rem 1.5rem;
}

.dropdown-category .sub-dropdown a:hover {
  color: var(--main-color);
  background-color: #1d1d1d;
}

/* Hide mobile nav by default */
.mobile-nav {
  display: none;
  /* Initially hidden */
  position: absolute;
  top: 100%;
  /* Position it directly below the hamburger icon */
  right: 0;
  /* Align to the right side of the screen */
  background-color: black;
  /* Dark background */
  flex-direction: column;
  text-align: left;
  /* Align text to the left */
  padding: 10px 0;
  z-index: 1000;
  width: 250px;
  /* Adjust width for content */
  min-width: 200px;
  /* Ensure it's wide enough */
  border-radius: var(--button-radius);
  /* Rounded bottom corners */
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  /* Add subtle shadow */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: translateX(100%);
  /* Start hidden offscreen */
  opacity: 0;
  pointer-events: none;
}

/* Show the menu when active */
.mobile-nav.active {
  display: flex;
  transform: translateX(0);
  /* Slide it into view */
  opacity: 1;
  pointer-events: auto;
}

/* Mobile nav links */
.mobile-nav a {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  display: block;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Active & hover state */
.mobile-nav a:hover,
.mobile-nav a.active {
  color: var(--main-color);
  /* Highlight color */
  background-color: #1d1d1d;
  /* Slightly lighter */
}

/* Default: Hide hamburger menu above 900px */
.hamburger-menu {
  display: none;
  /* Hidden by default */
  background: transparent;
  /* Ensure no background */
  border: none;
  cursor: pointer;
  z-index: 1001;
  /* Ensure it's above other elements */
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 40px;
  height: 30px;
}

.hamburger-menu span {
  width: 100%;
  height: 0.3rem;
  background-color: white;
  border-radius: var(--button-radius);
}

/* PNG Icon */
.hamburger-icon {
  width: 40px;
  /* Adjust based on your design */
  height: auto;
  /* Keeps aspect ratio */
  transition: 0.3s;
}

/* Games dropdown */
.dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown a {
  flex-grow: 1;
}

.dropdown .caret {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
  padding-right: 10px;
}

/* Rotate caret when dropdown is open */
.dropdown.active .caret img {
  transform: rotate(180deg);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  z-index: 10;
  top: 3.3rem;
  text-align: left;
  padding: 1rem;
  min-width: 15rem;
  flex-direction: column;
  gap: 1rem;
}

.dropdown-content.show-dropdown {
  display: flex;
}

.dropdown-category {
  display: flex;
  flex-direction: column;
}

.category-title {
  color: var(--main-color);
  /* This should be red in your palette */
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  display: block;
}

/* Rotate caret when dropdown is active */
.dropdown .caret img.flipped {
  transform: rotate(180deg);
}

/* Prevent menu from hiding instantly */
.dropdown-content a {
  display: block;
  color: white;
  padding: 0.5rem 2rem;
  text-decoration: none;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #1d1d1d;
  color: var(--main-color);
}

/* Show dropdown on active state */
.dropdown.active .dropdown-content {
  display: flex;
}

/* Contact button inside mobile menu */
.mobile-contact-button {
  margin-top: 15px;
}

.mobile-contact-button a {
  display: inline-block;
  padding: 10px 20px;
  background-color: black;
  color: white;
  text-decoration: none;
  border-radius: var(--button-radius);
}

.mobile-contact-button a:hover {
  background-color: #1d1d1d;
}

/* Submenu styles */
.dropdown-category.has-submenu .category-toggle {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--main-color);
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}

.sub-caret img {
  width: 0.8rem;
  height: auto;
  transition: transform 0.3s ease;
}

.dropdown-category .sub-dropdown {
  display: none;
  flex-direction: column;
  margin-left: 1rem;
  padding-top: 0.5rem;
}

.dropdown-category .sub-dropdown a {
  font-size: 0.9rem;
  font-weight: normal;
  padding: 0.3rem 1.5rem;
  color: white;
}

.dropdown-category .sub-dropdown a:hover {
  color: var(--main-color);
  background-color: #1d1d1d;
}

.dropdown-category.open .sub-dropdown {
  display: flex;
}

.dropdown-category.open .sub-caret img {
  transform: rotate(180deg);
}

/* ---- RESPONSIVE STYLES BELOW ---- */
/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  .topnav {
    padding: 0 3rem;
    /* Reduce horizontal padding */
    height: 5rem;
    /* Slightly reduce navbar height */
  }

  .nav-menu a {
    padding: 1rem 1.5rem;
    /* Reduce link padding */
    font-size: 0.9rem;
    /* Slightly smaller text */
  }

  .contact-button a {
    width: 5.5rem;
    /* Adjust button width */
    padding: 0.625rem 0.9375rem;
    /* Reduce padding */
    font-size: 0.9rem;
  }
}

/* Responsive Adjustments for 900px and smaller */
@media (max-width: 900px) {
  /* Adjust navbar layout */
  .topnav {
    padding: 0 1rem;
    /* Adjust padding */
    height: 5rem;
    /* Adjust navbar height */
    display: flex;
    flex-direction: row;
    /* Ensure horizontal alignment */
    align-items: center;
    /* Vertically center items */
  }

  /* Fix logo warping */
  .topnav .logo img {
    max-height: 5rem;
    /* Restrict max height */
    height: auto;
    /* Maintain aspect ratio */
    width: auto;
    /* Maintain aspect ratio */
  }

  .nav-menu,
  .contact-button {
    display: none !important;
  }

  /* Hamburger menu adjustments */
  .hamburger-menu {
    position: relative;
    /* Keep positioning relative */
    top: -5px;
    /* Push up slightly to align with logo */
    right: 1rem;
    display: flex !important;
    /* Force it to be visible */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 40px;
    /* Adjust width */
    height: 30px;
    /* Adjust height */
    cursor: pointer;
    z-index: 1000;
    /* Make sure it's above other elements */
  }

  .hamburger-menu span {
    width: 100%;
    /* Full width */
    height: 0.3rem;
    /* Keep bar thickness consistent */
    border-radius: var(--button-radius);
    /* Add slight rounding */
  }

  .hamburger-menu span::before {
    content: " ";
    /* Add space to prevent collapse */
    display: block;
  }

  /* Hide the main navigation links on mobile */
  .nav-menu {
    display: none !important;
  }

  /* Hide the contact button on mobile */
  .contact-button {
    display: none !important;
  }

  /* Show mobile navigation only when active */
  .mobile-nav {
    position: absolute;
    top: 60px;
    /* Adjust to be below the hamburger icon */
    right: 10px;
    /* Slight padding from right */
    width: 220px;
    /* Set a good width */
  }

  .mobile-nav.active {
    display: flex;
    /* Show when active */
  }
}

/* Tablet (768px and below) */
@media (max-width: 768px) {
  /* Keep navbar layout the same but remove extra items */
  .topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Ensure spacing between elements */
    padding: 0 1.5rem;
    /* Reduce horizontal padding */
    height: 5rem;
    /* Adjust navbar height */
  }

  /* Hide nav menu (all links) */
  .nav-menu {
    display: none !important;
  }

  /* Keep logo visible */
  .topnav .logo img {
    height: 4.5rem;
    /* Adjust logo size */
    width: auto;
  }

  /* Ensure hamburger menu is visible */
  .hamburger-menu {
    position: relative;
    /* Keep positioning relative */
    top: -5px;
    /* Push up slightly to align with logo */
    display: flex !important;
  }
}

@media (max-width: 450px) {
  .topnav {
    position: relative;
    z-index: 1000;
  }

  .mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: black;
    z-index: 2000;
    padding: 1rem;
  }

  .hamburger-menu {
    z-index: 3000; /* Ensures it's clickable */
  }

  .logo img {
    max-width: 140px;
    height: auto;
  }
}

/* Mobile M (375px) & Mobile S (320px) */
@media (max-width: 375px) {
  .topnav {
    padding: 0 1rem;
    /* Reduce padding for a tighter fit */
    height: 4rem;
    /* Reduce navbar height */
  }

  /* Ensure logo doesn't warp and scales properly */
  .topnav .logo img {
    height: 3rem;
    /* Adjust logo size */
    width: auto;
    /* Maintain aspect ratio */
  }

  /* Ensure hamburger menu fits well */
  .hamburger-menu {
    position: relative;
    top: 2px;
    /* Push it down slightly */
    width: 1.5rem;
    /* Reduce width */
    height: 1.5rem;
    /* Reduce height */
  }

  /* Adjust hamburger menu bars */
  .hamburger-menu span {
    position: relative;
    /* Keep positioning relative */
    height: 0.2rem;
    /* Make bars thinner */
    width: 100%;
  }

  /* PNG Icon */
  .hamburger-icon {
    width: 25px;
    /* Adjust based on your design */
    height: auto;
    /* Keeps aspect ratio */
    transition: 0.3s;
  }
}

/* Mobile S (320px) - Further Adjustments */
@media (max-width: 320px) {
  .topnav {
    padding: 0 0.8rem;
    /* Reduce horizontal padding more */
    height: 3.5rem;
    /* Decrease navbar height */
  }

  .topnav .logo img {
    height: 2.5rem;
    /* Reduce logo height slightly */
  }

  .hamburger-menu {
    position: relative;
    top: 2px;
    /* Push it down slightly more for 320px */
    width: 1.3rem;
    /* Slightly smaller hamburger */
    height: 1.3rem;
  }

  .hamburger-menu span {
    height: 0.2rem;
  }

  /* PNG Icon */
  .hamburger-icon {
    width: 20px;
    /* Adjust based on your design */
    height: auto;
    /* Keeps aspect ratio */
    transition: 0.3s;
  }
}

/* NAVIGATION CSS HAS BEEN VALIDATED 1/23/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* NAVIGATION CSS HAS BEEN VALIDATED 1/23/25 */

/* HERO SECTION */
.main-hero {
  position: relative;
  height: 100dvh;
  /* Full screen height */
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Background video styling */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Prevent inline spacing issues */
}

/* ===== Media Queries ===== */

/* Laptop L - 1440px */
@media (max-width: 1440px) {
  .main-hero {
    height: 100vh;
    /* Slightly smaller height */
  }

  .background-video {
    object-fit: cover;
    /* Ensure video scales well */
  }
}

/* Laptop - 1024px */
@media (max-width: 1024px) {
  .main-hero {
    height: 69vh;
    /* Slightly smaller height */
  }

  .background-video {
    object-fit: cover;
    height: auto;
    /* Ensure video doesn't stretch */
  }
}

/* Tablet L - 900px */
@media (max-width: 900px) {
  .main-hero {
    height: 59vh;
    /* Slightly smaller height */
  }

  .background-video {
    object-fit: cover;
    height: auto;
  }
}

/* Tablet - 768px */
@media (max-width: 768px) {
  .main-hero {
    height: 50vh;
    /* Slightly smaller height */
  }

  .background-video {
    object-fit: contain;
    /* Ensure no cropping */
    width: 100%;
    height: auto;
  }
}

/* Mobile L - 430px */
@media (max-width: 430px) {
  .main-hero {
    height: 28vh;
    /* Slightly smaller height */
  }

  .background-video {
    object-fit: contain;
    width: 100%;
    height: auto;
  }
}

/* Mobile M - 375px */
@media (max-width: 375px) {
  .main-hero {
    height: 24vh;
    /* Slightly smaller height */
  }

  .background-video {
    object-fit: contain;
    width: 100%;
    height: auto;
  }
}

/* Mobile S - 320px */
@media (max-width: 320px) {
  .main-hero {
    height: 21vh;
    /* Slightly smaller height */
  }

  .background-video {
    object-fit: contain;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* HERO VIDEO CSS HAS BEEN VALIDATED 1/23/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* HERO VIDEO CSS HAS BEEN VALIDATED 1/23/25 */

/* MAIN SECTION - Parallaxed Background */
@media (prefers-reduced-motion: reduce) {
  .feature-section h5,
  .feature-section h1,
  .floating-box {
    animation: none;
    /* Disable animations */
    opacity: 1;
    /* Ensure content is visible */
    transform: translateX(0);
    /* Reset transformations */
  }
}

/* Optimization: Predefine animations for better performance */
.feature-section h5,
.feature-section h1,
.floating-box {
  will-change: transform, opacity;
}

.company {
  position: relative;
  background-color: black;
  background-image: url("../images/featbackground.png");
  /* Replace with your image */
  background-attachment: fixed;
  /* Parallax effect */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: white;
  z-index: 1;
}

/* Feature Section Styling */
.feature-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 75%;
  margin: auto;
  color: white;
  padding-top: 3rem;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Feature Section Styling */
.feature-section h5,
.feature-section h1 {
  opacity: 0;
  /* Start hidden */
  position: relative;
}

/* h5 (slide in from the left) */
.feature-section h5 {
  transform: translateX(-200px);
  /* Start farther left */
  animation: slideInLeft 1.2s ease-out forwards;
  /* Slightly longer duration */
}

/* h1 (slide in from the right) */
.feature-section h1 {
  transform: translateX(200px);
  /* Start farther right */
  animation: slideInRight 1.2s ease-out forwards;
  /* Slightly longer duration */
  animation-delay: 0.3s;
  /* Delay for staggered effect */
}

/* Keyframes for Animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-200px);
    /* Start far off-screen to the left */
  }

  to {
    opacity: 1;
    transform: translateX(0);
    /* End at the original position */
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(200px);
    /* Start far off-screen to the right */
  }

  to {
    opacity: 1;
    transform: translateX(0);
    /* End at the original position */
  }
}

/* Floating Box */
.floating-box {
  padding: 2.5rem;
  margin: 2rem auto;
  border-radius: var(--button-radius);
  width: 70%;
  background-color: rgba(143, 20, 24, 0.6);
  column-count: 1;
  /* Switch to single column */
  text-align: justify;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(187, 187, 187, 0.75);
  z-index: 10;
  position: relative;
  animation: fadeInUp 1.2s ease-out forwards;
  animation-play-state: paused;
  /* Pause by default */
  will-change: transform, opacity;
}

.floating-box p {
  margin-bottom: 1rem;
  /* Add spacing between paragraphs */
  line-height: 1.8;
  /* Improve readability */
  color: white;
  text-align: center;
  /* Center-align it */
}

/* Style the Call-to-Action */
.floating-box .cta {
  margin-top: 1.5rem;
  font-size: 1.6rem;
  /* Slightly larger font */
  font-weight: bold;
  text-align: center;
  /* Center-align it */
  line-height: 1.4;
  color: #fff;
  /* Ensure it stands out */
}

/* Stats Section */
.stat-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 70%;
  height: auto;
  gap: 2rem;
  margin: 0 auto;
  /* 3rem top and bottom */
  color: white;
  /* Ensure text is visible */
  padding-bottom: 3rem;
}

.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  /* Ensure no margin at the bottom */
  padding-bottom: 0;
  /* Remove any extra padding */
}

.card {
  width: 6.5rem;
  height: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 1.5rem;
  opacity: 1;
  /* Ensure visible */
  visibility: visible;
  /* Ensure it's not hidden */
  transform: translateY(0);
  /* Reset animation */
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.vertical-divider {
  position: relative;
  width: 4px;
  height: 15rem;
  background: linear-gradient(to bottom, white, var(--third-color));
  margin: 0 2rem;
  align-self: center;
}

.text-stat {
  color: var(--third-color);
  font-weight: bold;
  font-size: 4rem;
  margin-bottom: 1.2rem;
}

.text-title {
  color: white;
  white-space: normal !important;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
  display: block;
}

/* Keyframes for Animations */
@keyframes fadeInFlyIn {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Adjustments */

/* Laptop L - 1440px */
@media (max-width: 1440px) {
  .feature-section {
    max-width: 80%;
    /* Slightly increase container width */
    padding: 0 2rem;
  }

  .floating-box {
    width: 80%;
    /* Adjust box width */
  }

  .floating-box p {
    font-size: 1.2rem;
    /* Adjust paragraph font size */
  }

  .stat-container {
    gap: 2rem;
    /* Ensure spacing between stats remains balanced */
  }

  .card {
    width: 7rem;
    height: 20rem;
  }

  .text-stat {
    font-size: 3.5rem;
    /* Scale down slightly */
  }

  .text-title {
    font-size: 1.4rem;
  }
}

/* Laptop - 1024px */
@media (max-width: 1024px) {
  .company {
    background-size: cover;
    /* Ensure the background covers the section */
    background-position: top center;
    /* Adjust positioning for better fit */
  }

  .feature-section {
    max-width: 85%;
    padding: 0 1.5rem;
  }

  .floating-box {
    width: 85%;
  }

  .floating-box p {
    font-size: 1.1rem;
  }

  .stat-container {
    gap: 1.5rem;
  }

  .card {
    width: 6.5rem;
    height: 18rem;
  }

  .text-stat {
    font-size: 3.2rem;
  }

  .text-title {
    font-size: 1.3rem;
  }
}

/* Tablet L - 900px */
@media (max-width: 900px) {
  .feature-section h5 {
    font-size: 1.6rem;
    /* Smaller heading */
  }

  .feature-section h1 {
    font-size: 3rem;
    /* Reduce h1 size significantly */
    line-height: 1.2;
    /* Tighten line height */
    margin-bottom: 0.6rem;
    /* Reduce spacing below */
  }

  .floating-box {
    width: 80%;
    /* Shrink floating box width */
    padding: 1rem;
    /* Reduce padding further */
    margin: 1.5rem auto;
    /* Adjust margin for balance */
  }

  .floating-box p {
    font-size: 0.9rem;
    /* Scale down paragraph text */
    line-height: 1.5;
    /* Improve readability */
  }

  .floating-box .cta {
    font-size: 1rem;
    /* Make CTA smaller */
  }

  .stat-container {
    flex-direction: column;
    /* Stack stats vertically */
    gap: 1.5rem;
    /* Reduce spacing between cards */
    width: 90%;
    /* Narrow container */
    margin: 0 auto;
    /* Center align */
    padding-bottom: 5rem;
  }

  .card {
    width: 90%;
    /* Full-width cards */
    max-width: 15rem;
    /* Limit max width */
    height: auto;
    /* Allow flexible height */
    margin: 0 auto;
    /* Center cards */
  }

  .vertical-divider {
    display: none;
    /* Remove dividers for cleaner layout */
  }

  .text-stat {
    font-size: 2.5rem;
    /* Reduce size of the stat number */
  }

  .text-title {
    font-size: 1.2rem;
    /* Adjust title size */
  }
}

/* Tablet - 768px */
@media (max-width: 768px) {
  .floating-box {
    width: 85%;
    /* Slightly narrower box */
    padding: 0.8rem;
    /* Compact padding */
  }

  .floating-box p {
    font-size: 0.85rem;
    /* Smaller paragraph font */
  }

  .floating-box .cta {
    font-size: 0.95rem;
    /* Adjust CTA size */
  }

  .stat-container {
    flex-direction: column;
    gap: 1rem;
    /* Smaller gap between cards */
    width: 95%;
    margin: 0 auto;
    padding-bottom: 4.6rem;
  }

  .card {
    width: 100%;
    /* Full width */
    max-width: 14rem;
    /* Slightly smaller cards */
  }

  .text-stat {
    font-size: 2.2rem;
    /* Further reduce stat number size */
  }

  .text-title {
    font-size: 1.1rem;
    /* Adjust title size */
  }
}

/* Mobile L - 430px */
@media (max-width: 430px) {
  .feature-section h5 {
    font-size: 0.9rem;
    /* Small subheading for mobile */
  }

  .feature-section h1 {
    font-size: 2.4rem;
    /* Scale down h1 even more */
    line-height: 1.1;
    /* Tight spacing */
    margin-bottom: 0.6rem;
    /* Compact spacing */
  }

  .floating-box {
    width: 90%;
    /* Reduce width for smaller screens */
    padding: 0.6rem;
    /* Compact padding */
    margin: 1rem auto;
    /* Adjust margins */
  }

  .floating-box p {
    font-size: 0.8rem;
    /* Smaller paragraph text */
    line-height: 1.4;
  }

  .floating-box .cta {
    font-size: 0.85rem;
    /* Scale down CTA */
  }

  .stat-container {
    gap: 1rem;
    /* Compact spacing between cards */
  }

  .card {
    width: 100%;
    /* Full width */
    max-width: 12rem;
    /* Smaller cards */
    margin-bottom: 1rem;
    /* Add spacing between stacked cards */
  }

  .text-stat {
    font-size: 2rem;
    /* Smaller stat number */
  }

  .text-title {
    font-size: 1rem;
    /* Adjust title size */
  }
}

/* Mobile M - 375px */
@media (max-width: 375px) {
  .feature-section h5 {
    font-size: 0.8rem;
    /* Very small subheading */
  }

  .feature-section h1 {
    font-size: 2.3rem;
    /* Reduce h1 further */
    line-height: 1.1;
    margin-bottom: 0.5rem;
    /* Compact spacing */
  }

  .floating-box {
    width: 90%;
    /* Almost full width */
    padding: 0.5rem;
    /* Minimal padding */
    margin: 0.8rem auto;
    /* Adjust margins */
  }

  .floating-box p {
    font-size: 0.75rem;
    /* Further reduce paragraph font size */
    line-height: 1.3;
  }

  .floating-box .cta {
    font-size: 0.8rem;
    /* Make CTA text smaller */
  }

  .stat-container {
    gap: 0.8rem;
    /* Reduce spacing further */
  }

  .card {
    max-width: 11rem;
    /* Smaller card width */
  }

  .text-stat {
    font-size: 1.8rem;
    /* Reduce number size further */
  }

  .text-title {
    font-size: 0.9rem;
    /* Scale down title */
  }
}

/* Mobile S - 320px */
@media (max-width: 320px) {
  .feature-section h5 {
    font-size: 0.8rem;
    /* Smallest subheading */
  }

  .feature-section h1 {
    font-size: 2.3rem;
    /* Minimal h1 size */
    line-height: 1.1;
    margin-bottom: 0.4rem;
  }

  .floating-box {
    width: 90%;
    /* Full width */
    padding: 0.4rem;
    /* Minimal padding */
    margin: 0.6rem auto;
    /* Compact margin */
  }

  .floating-box p {
    font-size: 0.7rem;
    /* Smallest paragraph text */
    line-height: 1.3;
  }

  .floating-box .cta {
    font-size: 0.75rem;
    /* Smallest CTA size */
  }

  .stat-container {
    gap: 0.6rem;
    /* Minimal gap */
  }

  .card {
    max-width: 10rem;
    /* Smallest card size */
  }

  .text-stat {
    font-size: 1.6rem;
    /* Minimal size for stat number */
  }

  .text-title {
    font-size: 0.8rem;
    /* Smallest title size */
  }
}

/* MAIN SECTION CSS HAS BEEN VALIDATED 1/23/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* MAIN SECTION CSS HAS BEEN VALIDATED 1/23/25 */

/* Games Section */
.games-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: black;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding-top: 0;
  margin: 0;
}

/* Content Layout */
.games-section .content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Header image */
.games-section img {
  width: 100%;
  height: auto;
  max-width: 950px;
}

.heading-and-description {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 80%;
  padding-top: 4rem;
  padding-bottom: 1rem;
  max-width: 1000px;
}

.heading-left {
  animation: slide-in-left 0.8s ease-out forwards;
}

.heading-left img {
  height: 200px;
  width: auto;
  object-fit: contain;
}

/* Adjust Line-after1 for Proper Alignment */
.line-after1 {
  position: relative;
}

/* Horizontal Line (Line-after1) */
.line-after1::after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 48%;
  width: 28%;
  /* Adjusted width */
  height: 3px;
  background-color: var(--main-color);
  margin-left: -110px;
}

/* Diamond at the End of Line-after1 */
.line-after1::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 13px;
  /* Slightly larger diamond */
  height: 13px;
  background-color: var(--main-color);
}

.divider {
  height: 100px;
  background-color: white;
  margin: 0 15px;
}

.description-text {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  animation: slide-in-right 0.8s ease-out forwards;
  max-width: 600px;
  text-align: left;
  line-height: 1.5;
  margin-top: 10px;
}

/* Background Images */
.dragon,
.tiger,
.samurai {
  position: relative;
  width: 100%;
  height: 100vh;
  background-attachment: fixed;
  background-color: black;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title-box1,
.title-box2,
.title-box3 {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  padding: 2rem;
  justify-content: space-between;
}

.title-box1 {
  top: 15%;
  left: 10%;
}

.title-box2 {
  top: 15%;
  left: 55%;
}

.title-box3 {
  top: 30%;
  left: 10%;
}

/* Adjust spacing between logo and tagline */
.title-box2 img {
  margin-bottom: 5px;
  /* Adjust spacing as needed */
}

/* Ensure consistent scaling across all title boxes */
.title-box1 img,
.title-box2 img,
.title-box3 img {
  max-width: 600px;
  /* Adjust the size consistently */
  height: auto;
}

.title-box1 h4,
.title-box2 h4,
.title-box3 h4 {
  font-size: 1.7rem;
  /* Keep font sizes uniform */
  text-align: center;
  margin-top: 10px;
  /* Ensures tagline spacing is consistent */
  white-space: nowrap;
}

/* Ensure Buttons Are Uniform Across All Games */
.title-box .cta-button {
  width: 150px;
  padding: 15px;
  font-size: 1.2rem;
  border-radius: var(--button-radius);
}

/* Call-to-Action Button */
.cta-button {
  width: 150px;
  padding: 15px;
  border-radius: var(--button-radius);
  color: white;
  background: var(--main-color);
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color 0.5s ease, transform 0.3s ease;
}

.cta-button:hover {
  background-color: #af090e;
  transform: scale(1.05);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2), 0 0 10px var(--main-color);
}

@keyframes flyInLeftTogether {
  0% {
    opacity: 0;
    transform: translateX(-200px) rotate(-5deg);
  }

  50% {
    transform: translateX(-100px) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyframe animations */
@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
    /* Start off-screen */
    opacity: 0;
    /* Fade in */
  }

  100% {
    transform: translateX(0);
    /* End at original position */
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    /* Start off-screen */
    opacity: 0;
    /* Fade in */
  }

  100% {
    transform: translateX(0);
    /* End at original position */
    opacity: 1;
  }
}

/* Responsive Styles */

/* Laptop (1024px - 1440px) */
@media (max-width: 1440px) {
  .heading-and-description {
    gap: 1.5rem;
    padding: 1rem 2rem;
  }

  .description-text {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .line-after1::after {
    width: 22%;
    /* Reduce line width */
    margin-left: -80px;
    /* Adjust alignment */
  }

  .line-after1::before {
    width: 11px;
    /* Smaller diamond */
    height: 11px;
  }
}

/* Tablet L (900px - 1024px) */
@media (max-width: 1024px) {
  .heading-and-description {
    flex-direction: column;
    gap: 1rem;
    width: 90%;
    margin-top: 2.5rem;
  }

  .title-box1 {
    top: 15%;
    left: 4%;
  }

  .title-box2 {
    top: 30%;
    left: 50%;
  }

  .title-box3 {
    top: 30%;
    left: 4%;
  }

  .divider {
    display: none;
  }

  .description-text {
    text-align: center;
    max-width: 600px;
    margin-top: 0;
    padding-top: 0;
  }

  .line-after1::after {
    width: 22%;
    /* Reduce line width */
    margin-left: -75px;
    /* Adjust alignment */
  }

  .line-after1::before {
    width: 11px;
    /* Smaller diamond */
    height: 11px;
  }

  .cta-button {
    width: 130px;
    /* Slightly smaller width */
    padding: 12px;
    /* Reduce padding */
    font-size: 1.1rem;
    /* Smaller font */
    border-radius: var(--button-radius);
    /* Adjust border radius */
  }
}

/* Tablet (768px - 900px) */
@media (max-width: 900px) {
  .line-after1 {
    text-align: center;
  }

  .line-after1::after,
  .line-after1::before {
    display: none;
  }

  .cta-button {
    width: 120px;
    /* Reduce width further */
    padding: 10px;
    /* Reduce padding */
    font-size: 1rem;
    /* Smaller font */
    border-radius: var(--button-radius);
  }

  /* Ensure consistent scaling across all title boxes */
  .title-box1 img,
  .title-box2 img,
  .title-box3 img {
    max-width: 500px;
    /* Adjust the size consistently */
    height: auto;
  }

  .title-box1 h4,
  .title-box2 h4,
  .title-box3 h4 {
    font-size: 1.5rem;
    /* Keep font sizes uniform */
    margin-top: 5px;
    /* Ensures tagline spacing is consistent */
  }
}

/* Mobile L (430px - 768px) */
@media (max-width: 768px) {
  .dragon,
  .tiger,
  .samurai {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: black;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* Ensure consistent scaling across all title boxes */
  .title-box1 img,
  .title-box2 img,
  .title-box3 img {
    max-width: 400px;
    /* Adjust the size consistently */
    height: auto;
  }

  .title-box1 h4,
  .title-box2 h4,
  .title-box3 h4 {
    font-size: 1.2rem;
    /* Keep font sizes uniform */
    margin-top: 2px;
    /* Ensures tagline spacing is consistent */
  }

  .title-box .cta-button {
    width: 130px;
    font-size: 1.1rem;
  }

  .title-box h4 {
    font-size: 1.3rem;
  }

  .cta-button {
    width: 100px;
    /* Compact width */
    padding: 8px;
    /* Smaller padding */
    font-size: 0.9rem;
    /* Smaller font */
    border-radius: var(--button-radius);
  }
}

/* Mobile M (375px - 430px) */
@media (max-width: 430px) {
  .description-text {
    font-size: 1rem;
    line-height: 1.5;
  }

  .dragon,
  .tiger,
  .samurai {
    position: relative;
    width: 100%;
    height: 65vh;
    background-size: cover;
  }

  .title-box2 {
    left: 10%;
  }

  /* Ensure consistent scaling across all title boxes */
  .title-box1 img,
  .title-box2 img,
  .title-box3 img {
    max-width: 500px;
    /* Adjust the size consistently */
    height: auto;
  }

  .title-box1 h4,
  .title-box2 h4,
  .title-box3 h4 {
    font-size: 1.2rem;
    /* Keep font sizes uniform */
  }

  .title-box .cta-button {
    width: 120px;
    font-size: 1rem;
  }

  .cta-button {
    width: 90px;
    /* Compact width for smaller screens */
    padding: 6px;
    /* Smaller padding */
    font-size: 0.85rem;
    /* Smaller font */
    border-radius: var(--button-radius);
  }
}

/* Mobile S (320px - 375px) */
@media (max-width: 375px) {
  .title-box2 {
    left: 5%;
  }

  .cta-button {
    width: 80px;
    /* Smallest width */
    padding: 5px;
    /* Smallest padding */
    font-size: 0.8rem;
    /* Smallest font */
    border-radius: var(--button-radius);
  }

  .heading-left img {
    height: 150px;
    width: auto;
    object-fit: contain;
  }

  .description-text {
    font-size: 0.9rem;
  }
}

/* Mobile S (320px) */
@media (max-width: 320px) {
  .heading-left img {
    height: 140px;
    width: auto;
  }

  .description-text {
    font-size: 0.8rem;
  }
}

/* GAME SECTION CSS HAS BEEN VALIDATED 1/24/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* GAME SECTION CSS HAS BEEN VALIDATED 1/24/25 */

/* Market Section */
.markets {
  position: relative;
  background-image: url("../images/texturebackground.png");
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  padding: 50px 0;
  color: white;
  margin-bottom: auto;
  z-index: 1;
}

.markets .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  max-width: 80%;
  margin: 50px auto;
  padding-top: 30px;
  padding-bottom: 80px;
  color: white;
}

.market-image {
  position: relative;
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
}

/* Vertical Line with Diamond */
.line-after2 {
  position: relative;
}

.line-after2::after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 48%;
  width: 44%;
  height: 3px;
  background-color: var(--main-color);
  margin-left: -205px;
}

.line-after2::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 15px;
  height: 15px;
  background-color: var(--main-color);
}

/* Highlight Image Styling */
.highlight-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.highlight-image img {
  width: 35px;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Highlight Text Container */
.highlight-text-container {
  text-align: center;
  margin: 4rem;
}

.highlight-text {
  display: inline-flex;
  gap: 2rem;
  /* Space between items */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Hide any overflowing content */
  white-space: nowrap;
  /* Prevent text wrapping */
}

/* Highlight Text Font Size */
.highlight-text span {
  font-size: 1.8rem;
  /* Increase font size here */
  font-weight: bold;
  color: white;
}

.highlight-text div {
  display: flex;
  /* Use flexbox for individual items */
  align-items: center;
  /* Center the icon and text vertically */
  gap: 0.5rem;
  margin-bottom: 4rem;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

/* Sequential Fade-in Animation */
.highlight-text div:nth-child(1) {
  animation-delay: 0.2s;
}

.highlight-text div:nth-child(2) {
  animation-delay: 0.4s;
}

.highlight-text div:nth-child(3) {
  animation-delay: 0.6s;
}

.highlight-text div:nth-child(4) {
  animation-delay: 0.8s;
}

.highlight-text div:nth-child(5) {
  animation-delay: 1s;
}

/* Bullet Icons */
.bullet-icon {
  width: 30px;
  height: 30px;
  margin: 0;
  /* Remove margin-top for proper alignment */
}

/* Animation Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive Styles */

/* Laptop (1024px - 1440px) */
@media (max-width: 1440px) {
  .markets .content {
    max-width: 85%;
    padding: 40px 0;
  }

  .highlight-text span {
    font-size: 1.7rem;
  }

  .line-after2::after {
    width: 38%;
    /* Reduce line width */
    margin-left: -160px;
    /* Adjust alignment */
  }

  .line-after2::before {
    width: 11px;
    /* Smaller diamond */
    height: 11px;
  }
}

/* Tablet L (900px - 1024px) */
@media (max-width: 1024px) {
  .markets .content {
    max-width: 90%;
    padding: 30px 20px;
  }

  .highlight-text-container {
    margin: 3rem;
  }

  .highlight-text span {
    font-size: 1.6rem;
  }

  .line-after2::after {
    width: 36%;
    /* Reduce line width */
    margin-left: -140px;
    /* Adjust alignment */
  }

  .line-after2::before {
    width: 11px;
    /* Smaller diamond */
    height: 11px;
  }
}

/* Tablet (768px - 900px) */
@media (max-width: 900px) {
  .markets {
    background-size: cover;
    padding: 40px 0;
  }

  .highlight-text {
    gap: 1.5rem;
  }

  .highlight-text div {
    flex-wrap: wrap;
  }

  .highlight-text span {
    font-size: 1.4rem;
  }

  .line-after2 {
    text-align: center;
  }

  .line-after2::after,
  .line-after2::before {
    display: none;
  }
}

/* Mobile L (430px - 768px) */
@media (max-width: 768px) {
  .markets .content {
    max-width: 95%;
    padding: 20px 10px;
  }

  .highlight-text-container {
    margin: 2rem;
  }

  .highlight-text span {
    font-size: 1.2rem;
  }

  .highlight-text div {
    margin-bottom: 2rem;
  }
}

/* Mobile M (375px - 430px) */
@media (max-width: 430px) {
  .highlight-text {
    flex-direction: column;
    /* Stack items vertically */
    gap: 1.5rem;
    /* Space between items */
    align-items: center;
    /* Center-align items */
  }

  .highlight-text span {
    font-size: 1rem;
  }

  .highlight-text div {
    flex-direction: column;
    /* Stack text and image vertically */
    text-align: center;
    /* Center-align text and icons */
    gap: 0.5rem;
    /* Adjust spacing between icon and text */
  }

  h2,
  p {
    text-align: center;
    /* Center-align text */
    margin: 0 auto;
    /* Ensure consistent centering */
    max-width: 90%;
    /* Add some restriction for readability */
  }
}

/* Mobile S (320px - 375px) */
@media (max-width: 375px) {
  .highlight-text {
    flex-direction: column;
    /* Stack items vertically */
    gap: 1.2rem;
    /* Slightly smaller gap for tighter screens */
    align-items: center;
    /* Center-align items */
  }

  .highlight-text span {
    font-size: 1rem;
    /* Keep text readable on small screens */
  }

  .highlight-text div {
    flex-direction: column;
    /* Stack text and image vertically */
    text-align: center;
    /* Center-align text and icons */
    gap: 0.4rem;
    /* Adjust spacing for smaller screens */
  }

  h2,
  p {
    text-align: center;
    /* Center-align text */
    margin: 0 auto;
    /* Center text horizontally */
    max-width: 90%;
    /* Restrict width for readability */
  }
}

/* MARKET SECTION CSS HAS BEEN VALIDATED 1/24/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* MARKET SECTION CSS HAS BEEN VALIDATED 1/24/25 */

/* Cabinet Section */
.cabinet {
  position: relative;
  background-color: transparent;
  padding-bottom: 40px;
  color: white;
  z-index: 1;
}

.cabinet .content {
  max-width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Images Row Styling */
.cabinet .images-row {
  display: flex;
  justify-content: center;
  /* Ensures they stay centered */
  align-items: center;
  margin-top: 0px;
  gap: 2rem;
  /* Adjust spacing between images */
  flex-wrap: nowrap;
  /* Keeps them in a row */
  width: 100%;
  max-width: 1200px;
  /* Expands width limit for larger screens */
}

/* Cabinet Images */
.cabinet .images-row a {
  display: flex;
  justify-content: center;
  /* Ensures the image inside is centered */
  width: 50%;
  /* Makes each image take half the row */
  max-width: 600px;
  /* Allows larger images */
}

.cabinet .images-row img {
  width: 100%;
  /* Ensures the image fills the container */
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  margin-top: 0px;
  cursor: pointer;
  z-index: 0;
  position: relative;
}

/* Default State: Full Brightness */
.cabinet .images-row img {
  filter: brightness(1);
}

/* Hover Effect: Highlight Hovered, Dim Others */
.cabinet .images-row:hover img {
  filter: brightness(0.4);
  /* Darkens all images slightly */
}

.cabinet .images-row img:hover {
  transform: scale(1.1);
  filter: brightness(1) !important;
  /* Keep hovered image fully bright */
  z-index: 2;
}

/* Reset to full brightness when not hovered */
.cabinet .images-row:not(:hover) img {
  filter: brightness(1);
}

/* Responsive Design */

/* Tablet */
@media (max-width: 1024px) {
  .cabinet .images-row {
    max-width: 90%;
    /* Ensures proper centering */
  }

  .cabinet .images-row a {
    max-width: 500px;
    /* Adjusts max width for tablets */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .cabinet .images-row {
    flex-wrap: wrap;
    /* Allows stacking */
    max-width: 100%;
  }

  .cabinet .images-row a {
    width: 100%;
    /* Makes images stack full-width */
    max-width: 100%;
  }
}

/* CABINETS SECTION CSS HAS BEEN VALIDATED 1/24/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* CABINETS SECTION CSS HAS BEEN VALIDATED 1/24/25 */

/* Social Section
.social-section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: black;
    height: 100vh;
}

/* Content remains above everything
.social-section .content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Social Links Layout 
.social-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Social Containers 
.social-container {
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    margin: 20px 15px;
}

.social-container img {
    width: 200px;
    height: auto;
    padding-top: 25px;
    transition: transform 0.3s ease;
}

.social-container img:hover {
    transform: scale(1.05);
}

.social-container p {
    text-align: center;
    text-transform: uppercase;
    margin-top: 15px;
    font-size: 26px;
}

/* Media Queries for Mobile 
@media (max-width: 768px) {
    .social-section .content {
        padding: 10px;
    }

    .social-links {
        justify-content: center;
        align-items: center;
    }

    .social-container {
        margin: 15px 10px;
    }

    .social-container img {
        width: 150px;
    }

    .social-container p {
        font-size: 20px;
    }
}
*/

/* Contact Section with Parallax Background */
.contact-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-image: url("../images/bckgrnd.png");
  /* Replace with your image path */
  background-attachment: fixed;
  /* Enables parallax effect */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  overflow: visible;
  padding-bottom: 150px;
}

.contact-section .content {
  position: relative;
  margin-top: 8rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  height: auto;
  gap: 4rem;
}

/* Contact Form Styling */
.contact-form {
  width: 45%;
  background: rgba(255, 255, 255, 0.7);
  /* Semi-transparent background for better readability */
  padding: 20px;
  border: 1.5px solid #c4c4c4;
  border-radius: var(--button-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  margin-bottom: 150px;
  z-index: 1;
  overflow: visible;
}

.contact-form input,
.contact-form textarea {
  font-family: inherit;
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: var(--button-radius);
  font-size: 16px;
  color: #333;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  /* Slightly opaque for readability */
  max-width: 95%;
}

.contact-form textarea {
  height: 200px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
}

.g-recaptcha {
  z-index: 5;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  content: center;
}

.submit-button {
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--button-radius);
  color: white;
  background: var(--main-color);
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.5s ease;
}

.submit-button:hover {
  background-color: #af090e;
}

.disclaimer-message {
  margin-top: 1rem;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

#errors {
  color: red;
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

/* Media Queries */

/* Laptop L (1024px - 1440px) */
@media (max-width: 1440px) {
  .contact-section .content {
    width: 85%;
    gap: 3rem;
  }

  .contact-form {
    width: 50%;
  }

  .submit-button {
    font-size: 1.1rem;
  }
}

/* Laptop (900px - 1024px) */
@media (max-width: 1024px) {
  .contact-section .content {
    width: 90%;
    margin-top: 6rem;
    gap: 3rem;
  }

  .contact-form {
    width: 60%;
  }

  .submit-button {
    font-size: 1rem;
    padding: 12px 16px;
  }
}

/* Tablet L (768px - 900px) */
@media (max-width: 900px) {
  .contact-section .content {
    margin-top: 5rem;
    gap: 2.5rem;
  }

  .contact-form {
    width: 70%;
  }

  .submit-button {
    font-size: 1rem;
    padding: 10px 14px;
  }
}

/* Tablet (768px and smaller) */
@media (max-width: 768px) {
  .contact-section .content {
    width: 95%;
    /* Content slightly shy of the edges */
    margin-top: 4rem;
    gap: 2rem;
  }

  .contact-form {
    width: calc(100% - 30px);
    /* Leave 15px padding on each side */
    max-width: none;
    padding: 15px;
  }

  h3 {
    white-space: nowrap;
    /* Prevent text wrapping */
    overflow: hidden;
    /* Ensure content stays within bounds */
    text-overflow: ellipsis;
    /* Add ellipsis if the text overflows */
    font-size: 1.5rem;
    /* Adjust font size if necessary */
  }

  .submit-button {
    font-size: 0.95rem;
    padding: 10px 14px;
  }
}

/* Mobile L (430px and smaller) */
@media (max-width: 430px) {
  .contact-section .content {
    width: 100%;
    padding: 0 10px;
    /* Add consistent horizontal padding */
    margin-top: 1.5rem;
    gap: 1.5rem;
  }

  .contact-form {
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    /* ensures padding doesn't overflow */
  }

  h3 {
    font-size: 1rem;
  }

  .submit-button {
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .disclaimer-message {
    font-size: 12px;
  }
}

/* Mobile S (320px and smaller) */
@media (max-width: 320px) {
  .contact-section .content {
    margin-top: 1rem;
    gap: 1rem;
  }

  .contact-form {
    width: calc(100% - 20px);
    /* Leave small padding on each side */
    padding: 10px;
  }

  h3 {
    font-size: 0.625rem;
    /* Adjust font size for very small screens */
  }

  .submit-button {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  .disclaimer-message {
    font-size: 10px;
  }
}

/* CONTACT SECTION CSS HAS BEEN VALIDATED 1/24/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* CONTACT SECTION CSS HAS BEEN VALIDATED 1/24/25 */

/* Trapezoid Footer */
.trapezoid-footer {
  position: relative;
  background-color: #1e1e1e;
  padding: 1rem;
  top: -35px;
  margin: 0 auto;
  width: 70%;
  border-bottom: 5px solid #1e1e1e;
  z-index: 5;
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%);
}

.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center content horizontally */
  background: #1e1e1e;
  z-index: 5;
  width: 100%;
  min-height: 38vh;
  overflow: hidden;
}

.footer-separator {
  color: white;
}

/* Background Triangles */
.footer-background {
  position: relative;
  width: 100%;
  height: 120px;
  /* Adjust the height as needed */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Start triangles from the bottom */
  z-index: 1;
}

/* Triangle images */
.triangle {
  position: absolute;
  opacity: 0;
  /* Initially invisible */
  transform: translateY(100%);
  /* Position them below the footer */
  transition: opacity 1s, transform 1s;
  /* Smooth transition when animating */
}

/* Individual triangle positions */
.backshadow {
  z-index: 1;
  left: 0;
  /* Keeps the shadow triangle aligned to the left */
}

.backtriangle {
  z-index: 2;
  left: -50px;
  /* Move it more to the left */
}

.fronttriangle {
  z-index: 3;
  left: -100px;
  /* Move it even more to the left */
}

/* Slide-in animation */
@keyframes slideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Only animate when in view */
.triangle.show {
  opacity: 1;
  transform: translateY(0);
}

/* Default triangle style (desktop) */
.footer-background .triangle {
  position: absolute;
  max-width: none;
}

/* Fix triangle size/position on small screens */
@media (max-width: 1350px) {
  .footer-background .backshadow {
    display: none;
  }

  .footer-background .backtriangle {
    display: none;
  }

  .footer-background .fronttriangle {
    display: none;
  }
}

/* Footer Top - Logo, Links */
.footer-top {
  display: flex;
  flex-direction: column;
  /* Stacks logo and links vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */
  width: 100%;
  /* Full width */
  padding: 40px 0;
  /* Add top and bottom padding */
  text-align: center;
  position: relative;
  z-index: 10;
  /* Ensure it is above other content */
  gap: 20px;
  /* Space between logo and links */
}

/* Logo Styling */
.footer-top .logo img {
  display: block;
  /* Prevent image alignment issues */
  margin: 0 auto;
  /* Center logo horizontally */
  width: 225px;
  /* Maintain logo size */
  height: auto;
  z-index: 10;
}

/* Footer Links */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping on small screens */
  gap: 20px;
  /* Space between links */
  justify-content: center;
  /* Center the links */
  margin-top: 20px;
  /* Space between the logo and links */
}

.footer-link {
  color: rgba(255, 255, 255, 0.7);
  /* White text with opacity */
  text-transform: uppercase;
  /* Make text uppercase */
  text-decoration: none;
  /* Remove underline */
  letter-spacing: 2px;
  font-size: 16px;
  font-weight: bold;
  transition: color 0.3s ease-in-out;
  /* Smooth transition on hover */
}

.footer-link:hover {
  text-decoration: underline;
  /* Underline on hover */
  color: white;
  /* Brighter white on hover */
}

/* Footer divider line */
.footer-divider {
  width: 85%;
  height: 1px;
  background-color: rgba(128, 128, 128, 0.2);
  margin: 20px 0;
  display: flex;
  justify-content: center;
  /* Center the divider */
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.3);
  /* Add shadow at the top */
}

/* Updated Social Media Links
.social-icons,
.social-icons * {
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    z-index: 30;
}

.social-item img {
    width: 40px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-item img:hover {
    transform: scale(1.2);
    opacity: 0.8;
} */

/* Legal Text */
.footer-bottom {
  text-align: center;
  padding: 20px 0;
  z-index: 1;
}

.footer-legal {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
  z-index: 10;
}

/* Responsive Media Queries */

/* Laptop L (1024px - 1440px) */
@media (max-width: 1440px) {
  .footer-top {
    gap: 100px;
  }

  .footer-search {
    width: 180px;
  }

  .footer-links {
    gap: 30px;
  }
}

/* Laptop (900px - 1024px) */
@media (max-width: 1024px) {
  .footer-top {
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 60px;
    justify-content: center;
  }

  .footer-search {
    width: 170px;
  }
}

/* Tablet L (768px - 900px) */
@media (max-width: 900px) {
  .footer-top {
    flex-direction: column;
    /* Stack items vertically */
    gap: 40px;
  }

  .footer-links {
    flex-direction: row;
    /* Ensure links remain in a row */
    gap: 15px;
  }

  .footer-search {
    width: 160px;
  }

  .footer-link {
    font-size: 14px;
    /* Slightly smaller font size */
  }
}

/* Tablet (430px - 768px) */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    /* Stack items vertically */
    gap: 30px;
  }

  .footer-links {
    justify-content: center;
    gap: 10px;
    padding: 40px;
  }

  .footer-search {
    width: 150px;
  }

  .footer-divider {
    width: 90%;
    /* Adjust divider width */
  }

  .footer-link {
    font-size: 14px;
  }
}

/* Mobile L (375px - 430px) */
@media (max-width: 430px) {
  .footer-top {
    gap: 20px;
  }

  .footer-links {
    gap: 15px;
    padding: 40px;
  }

  .footer-search {
    width: 140px;
  }

  .footer-link {
    font-size: 13px;
  }

  .footer-legal {
    font-size: 11px;
  }
}

/* Mobile M (320px - 375px) */
@media (max-width: 375px) {
  .footer-top {
    gap: 15px;
  }

  .footer-links {
    gap: 10px;
    padding: 40px;
  }

  .footer-search {
    width: 130px;
  }

  .footer-link {
    font-size: 12px;
  }

  .footer-legal {
    font-size: 10px;
  }
}

/* Mobile S (320px and smaller) */
@media (max-width: 320px) {
  .footer-top {
    gap: 5px;
  }

  .footer-links {
    gap: 8px;
    padding: 40px;
  }

  .footer-search {
    width: 120px;
  }

  .footer-link {
    font-size: 11px;
  }

  .footer-legal {
    font-size: 9px;
  }
}

/* FOOTER SECTION CSS HAS BEEN VALIDATED 1/24/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* FOOTER SECTION CSS HAS BEEN VALIDATED 1/24/25 */

/* GAMES PAGES STYLING */

.hero-container {
  position: relative;
  max-width: 100%;
  /* Always match device width */
  height: 120vh;
  /* Ensure full viewport height */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  /* Ensure no gray color is visible */
  z-index: 1;
  /* Keep it behind the overlap image */
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 2560px;
  height: 100%;
  /* Cover full height */
  object-fit: cover;
  /* Ensures video fills the space */
  z-index: 1;
  /* Keep it behind the overlap image */
}

.overlap-image {
  position: absolute;
  top: 95%;
  /* Lower position so it extends over the next section */
  left: 50%;
  transform: translate(-50%, 20%);
  /* Perfect centering */
  max-width: 100%;
  /* Resize image as needed */
  height: auto;
  z-index: 100;
  /* Ensure it's above the video */
  pointer-events: none;
  /* Prevent interactions */
}

/* INFO SECTION STYLING */
/* Common Styling for All Sections */
.LOMinfo-section,
.FSinfo-section,
.Cinfo-section,
.YNOinfo-section,
.FFinfo-section,
.DRDinfo-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Ensures full screen coverage */
  padding: 300px 50px 50px 50px;
  background-repeat: no-repeat !important;
  background-size: cover;
  /* Ensures it covers entire area */
  background-position: center;
  background-color: black;
  z-index: 1 !important;
}

.BAS2info-section,
.MD3info-section,
.BBBinfo-section,
.Thunderinfo-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Ensures full screen coverage */
  padding: 100px 50px 50px 50px;
  background-repeat: no-repeat !important;
  background-size: cover;
  /* Ensures it covers entire area */
  background-position: center;
  background-color: black;
  z-index: 1 !important;
}

/* Individual Backgrounds */
.LOMinfo-section {
  background-image: url("../images/LOMback.png");
}

.FSinfo-section {
  background-image: url("../images/FIREback.png");
}

.Cinfo-section {
  background-image: url("../images/CLASSICback.png");
}

.BAS2info-section {
  background-image: url("../images/BAS2back.png");
}

.YNOinfo-section {
  background-image: url("../images/yomiback.png");
}

.FFinfo-section {
  background-image: url("../images/fortuneback.png");
}

.DRDinfo-section {
  background-image: url("../images/redeuxback.png");
}

.BBBinfo-section {
  margin-top: -5rem;
  background-image: url("../images/bbbback.png");
}

.Thunderinfo-section {
  margin-top: -5rem;
  background-image: url("../images/thunderback.png");
}

.MD3info-section {
  margin-top: -5rem;
  background-image: url("../images/HotRoyale_back.png");
}

.CSinfo-section {
  padding-top: 80px;
  /* Add vertical space below nav */
  background-image: url("../images/CSback.png");
}

/* Container to hold game-summary and image-container */
.game-title {
  font-size: 2.8rem;
  color: white;
  text-align: left;
  margin-bottom: 30px;
  margin-left: 150px;
  background: transparent;
  z-index: 1 !important;
}

.game-content {
  width: 75%;
  /* Set the container to 80% of the page width */
  margin: 0 auto;
  /* Center the container */
  display: flex;
  /* Align children in a row */
  gap: 45px;
  /* Add space between the game-summary and image-container */
}

/* Game summary styling */
.game-summary {
  flex: 1;
  /* Allow the game-summary to grow and fill available space */
  min-width: 300px;
  /* Ensure it doesn't shrink too much */
}

/* Info text styling */
.info-text {
  color: white;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: left;
  margin-right: 40px;
}

.playable-on {
  margin-top: 50px;
  margin-bottom: 100px;
}

.playable-on-title {
  display: block;
  color: var(--second-color);
  font-size: 2rem;
  font-weight: bold;
}

.platform-icons {
  display: flex;
  gap: 80px;
  /* Reduce the gap between icons */
  margin-top: 20px;
  margin-left: 60px;
}

.platform-icons a {
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.platform-icons img {
  width: 80px;
  /* Adjust size as needed */
  height: auto;
  display: block;
}

/* Hover Effect */
.platform-icons a:hover {
  transform: scale(1.1);
  /* Grow slightly */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* Optional: Add a subtle shadow */
}

/* Icon Containers */
.icon-left,
.icon-right {
  width: 145px;
  /* Smaller width for the containers */
  height: 145px;
  /* Set a height for consistency */
}

/* Icon Images */
.icon-left img,
.icon-right img {
  width: 100%;
  /* Make the images take full container width */
  height: 100%;
  /* Maintain aspect ratio */
  object-fit: contain;
  /* Ensure the images fit without distortion */
}

/* Image container styling */
.image-container {
  flex: 1;
  /* Allow the image-container to grow and fill available space */
  min-width: 350px;
  height: auto;
}

/* Carousel container */
.carousel {
  position: relative;
  width: 90%;
  max-width: 800px;
  /* Adjust as needed */
  height: 500px;
  /* Adjust to fit your images */
  margin: auto;
  margin-top: -40px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  /* Ensure arrows are visible outside the container */
}

/* Carousel images container */
.carousel-images {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ensure only the active image is visible */
.carousel-images img {
  display: none;
  /* Hide all images initially */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Active image */
.carousel-images img.active {
  display: block;
}

/* Navigation buttons */
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  /* Removes any background */
  color: white;
  padding: 25px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 10;
  font-size: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  /* Ensures no border around the button */
  outline: none;
  /* Removes focus outline */
}

/* Position arrows outside the carousel images */
.prev {
  left: -60px;
}

.next {
  right: -60px;
}

/* Ensure dots are displayed properly */
.dots {
  text-align: center;
  margin-top: 20px;
}

.dots span {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #707070;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Active dot */
.dots span.active {
  background-color: var(--main-color);
}

/* Section Styling */
.stat-games-section {
  display: flex;
  justify-content: center;
  padding: 100px 50px;
  background-color: transparent;
  /* Transparent background */
}

/* Stats Section */
.design-stats {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: transparent;
  /* Ensure the section background is transparent */
}

/* Stats Container */
.stats-container {
  position: relative;
  padding: 30px 40px;
  border: 3px solid rgba(142, 142, 142, 0.25);
  border-radius: var(--button-radius);
  background-color: rgba(0, 0, 0, 0.4);
  /* Black with 10% opacity */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
}

/* Stats Items */
.stats-items {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: white;
  text-align: left;
  /* Align text to the left */
  flex-wrap: nowrap;
  /* Prevent wrapping to the next line */
  gap: 40px;
  /* Add space between each stat */
}

/* Individual Stat */
.stat {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  white-space: nowrap;
  /* Prevent text wrapping */
}

/* Apply Animation to <p> Elements */
.stat p {
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0;
  /* Start hidden */
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sequential Delays */
.stat p:nth-child(1) {
  animation-delay: 0.2s;
}

.stat p:nth-child(2) {
  animation-delay: 0.4s;
}

.stat p:nth-child(3) {
  animation-delay: 0.6s;
}

.stat p:nth-child(4) {
  animation-delay: 0.8s;
}

/* Stat Value */
.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
  white-space: normal;
  /* Allow text to wrap */
  overflow: visible;
  /* Ensure text is fully visible */
  text-overflow: clip;
  /* Remove ellipsis */
  word-break: break-word;
  /* Allow long words to break and wrap */
  max-width: 100%;
  /* Prevent overflowing beyond the container */
}

/* Make images under .stat-value smaller */
.stat-value img {
  width: 60px;
  /* Adjust the width as needed */
  height: auto;
  /* Maintain aspect ratio */
  vertical-align: middle;
  /* Align the image with the text if needed */
}

/* Stat Label */
.stat-label {
  font-size: 1rem;
  color: #ff4d4d;
  /* Red color for labels */
}

/* Available Titles Container */
.available-on {
  padding: 25px 35px;
  background-color: transparent;
  /* Keep the background transparent */
  max-width: 1250px;
  /* Set a max width for the container */
  margin: 0 auto;
  /* Center the container itself */
}

/* Available Titles Text */
.available-titles {
  font-size: 2rem;
  font-weight: bold;
  color: var(--second-color);
  display: block;
  margin-top: 100px;
  margin-bottom: 20px;
}

/* Aligning the title icons */
.title-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* Adjust as necessary for spacing */
}

/* Individual Title Icons */
.title-icons .title-left img,
.title-icons .title-middle img,
.title-icons .title-right img {
  width: 425px;
  /* Increase the icon size */
  height: auto;
  /* Maintain aspect ratio */
  transition: transform 0.3s ease;
  /* Smooth scaling effect on hover */
}

.title-left,
.title-middle,
.title-right {
  flex: 1;
  /* Ensures icons are spaced out evenly */
}

/* Responsive Design Adjustments */

@media (min-width: 2560px) {
  .overlap-image {
    max-width: 100%;
    /* Slightly smaller */
  }
}

@media (min-width: 1440px) {
  .LOMinfo-section,
  .FSinfo-section,
  .Cinfo-section,
  .BAS2info-section,
  .YNOinfo-section,
  .FFinfo-section,
  .MD3info-section,
  .CSinfo-section {
    background-position: center center;
    /* Adjusted for better visibility */
  }

  .overlap-image {
    max-width: 75%;
    /* Slightly smaller */
    top: 70%;
    /* Move lower */
  }

  .hero-video {
    aspect-ratio: 16 / 9;
  }
}

/* Laptop (1024px) */
@media (max-width: 1024px) {
  .LOMinfo-section,
  .FSinfo-section,
  .Cinfo-section,
  .BAS2info-section,
  .YNOinfo-section,
  .FFinfo-section,
  .MD3info-section,
  .CSinfo-section {
    background-position: center center;
  }

  .hero-container {
    height: 80vh !important;
  }

  .hero-video {
    aspect-ratio: 16 / 9;
    max-height: 67vh;
    /* Adjusted for smaller screens */
  }

  .overlap-image {
    max-width: 80%;
    /* Slightly smaller */
    top: 70%;
    /* Move lower */
  }

  .game-title {
    font-size: 2.3rem;
    margin-left: 50px;
  }

  .game-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Align Playable On section to the left */
  .playable-on {
    text-align: left;
    margin-left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .platform-icons {
    justify-content: flex-start;
    gap: 40px;
    margin-left: 50px;
  }

  /* Center Carousel with minimal top padding and extra bottom padding */
  .carousel {
    max-width: 700px;
    height: 400px;
    margin: 0 auto;
    /* Centered with no extra margin */
    padding: 0 20px 10px;
    /* No top padding, only left-right and bottom padding */
  }

  /* Adjust dots section to add bottom margin */
  .dots {
    margin-top: 10px;
    margin-bottom: 80px;
    /* Additional space below the dots */
  }

  /* Shift Available Titles title text slightly to the right */
  .available-titles {
    margin-left: 20px;
  }
}

/* Tablet L (900px) */
@media (max-width: 900px) {
  .game-title {
    margin-left: 65px;
  }

  .hero-container {
    height: 70vh !important;
    /* Prevent it from growing unexpectedly */
  }

  .hero-video {
    aspect-ratio: 16 / 9;
    max-height: 59vh;
  }

  .overlap-image {
    max-width: 80%;
    /* Slightly smaller */
    top: 70%;
    /* Move lower */
  }

  .game-title {
    font-size: 2rem;
    text-align: left;
  }

  /* Reduce space between Playable On and Carousel */
  .playable-on {
    margin-bottom: 30px;
    /* Less space before the carousel */
  }

  .platform-icons {
    gap: 30px;
  }

  /* Center Carousel and adjust spacing */
  .carousel {
    max-width: 600px;
    height: 350px;
    margin: 0 auto;
    padding: 0 20px 10px;
    /* No top padding, small bottom padding */
  }

  /* Center the dots and add more space below */
  .dots {
    text-align: center;
    /* Ensure dots are centered */
    margin-top: 10px;
    margin-bottom: 50px;
    /* Increased bottom margin for better spacing */
  }

  /* Make stats container vertical and centered */
  .stats-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    justify-content: center;
    /* Center content vertically */
    width: 80%;
    /* Reduce width so it looks better in vertical mode */
    max-width: 700px;
    /* Limit max width */
  }

  .stats-items {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
  }

  .stat {
    min-width: unset;
    /* Allow it to adjust dynamically */
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ensure each stat is centered */
  }

  /* Make Available Title Icons Vertical and Centered */
  .title-icons {
    display: flex;
    flex-direction: column;
    /* Change layout to vertical */
    align-items: center;
    /* Center align */
    justify-content: center;
    gap: 20px;
    /* Space between each icon */
  }

  /* Make sure title icons are centered and resize properly */
  .title-icons img {
    width: 350px;
    /* Adjust size for smaller screens */
    height: auto;
  }
}

/* Tablet (768px) */
@media (max-width: 768px) {
  .LOMinfo-section,
  .FSinfo-section,
  .Cinfo-section,
  .BAS2info-section,
  .YNOinfo-section,
  .FFinfo-section,
  .MD3info-section {
    padding: 10px 0;
  }

  .hero-container {
    height: 65vh !important;
    /* Prevent it from growing unexpectedly */
  }

  .hero-video {
    aspect-ratio: 16 / 9;
    max-height: 50vh;
  }

  .overlap-image {
    max-width: 80%;
    /* Slightly smaller */
    top: 65%;
    /* Move lower */
  }

  .game-title {
    text-indent: -4%;
    font-size: 1.4rem !important;
  }

  .game-content {
    width: 90%;
  }

  .info-text {
    font-size: 1rem;
    margin-right: 20px;
  }

  .carousel {
    max-width: 550px;
    height: 300px;
  }

  .prev,
  .next {
    font-size: 28px;
    width: 40px;
    height: 40px;
  }

  .prev {
    left: -30px;
  }

  .next {
    right: -30px;
  }

  .stats-container {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}

/* Mobile L (430px) */
/* Devices up to 430px wide */
@media (max-width: 430px) {
  /* Taller header for full MP4 visibility */
  .hero-container {
    height: 75vh;
  }

  .hero-video {
    aspect-ratio: 16 / 9;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .overlap-image {
    top: 50%;
    transform: translate(-50%, 0%);
  }

  .LOMinfo-section,
  .FSinfo-section,
  .Cinfo-section,
  .YNOinfo-section,
  .FFinfo-section,
  .DRDinfo-section,
  .BAS2info-section,
  .MD3info-section,
  .BBBinfo-section,
  .Thunderinfo-section {
    padding: 30px 20px 40px 20px;
  }

  .MD3info-section,
  .BBBinfo-section,
  .Thunderinfo-section {
    margin-top: -10rem;
  }

  .hero-container {
    height: 48vh;
  }

  .hero-video {
    aspect-ratio: 16 / 9;
    max-height: 50vh;
  }

  .game-title {
    text-indent: 5%;
    font-size: 1.3rem;
  }

  .game-content {
    width: 100%;
  }

  .info-text {
    font-size: 0.9rem;
  }

  .playable-on-title {
    font-size: 1.6rem;
    margin-left: 20px;
  }

  .carousel {
    max-width: 350px;
    height: 250px;
  }

  .prev,
  .next {
    font-size: 24px;
    width: 35px;
    height: 35px;
  }

  .prev {
    left: -20px;
  }

  .next {
    right: -20px;
  }

  .stat-value {
    font-size: 1.5rem;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
  }

  .stat-label {
    font-size: 0.9rem;
  }

  .available-titles {
    font-size: 1.6rem;
  }

  /* Apply consistent side padding to all info sections under the header */
  .game-content,
  .info-text,
  .playable-on-title,
  .platform-icons,
  .carousel,
  .stat-value,
  .stat-label,
  .available-titles,
  .LOMinfo-section,
  .FSinfo-section,
  .Cinfo-section,
  .YNOinfo-section,
  .FFinfo-section,
  .DRDinfo-section,
  .BAS2info-section,
  .MD3info-section,
  .BBBinfo-section,
  .Thunderinfo-section {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* Optional: force carousel centering visually */
  .carousel {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile M (375px) */
@media (max-width: 375px) {
  .hero-container {
    height: 40vh;
  }

  .hero-video {
    aspect-ratio: 16 / 9;
    max-height: 35vh;
  }

  .game-title {
    text-indent: -15%;
  }

  .info-text {
    font-size: 0.85rem;
  }

  .platform-icons img {
    width: 90px;
  }

  .carousel {
    max-width: 250px;
    height: 180px;
  }

  .prev,
  .next {
    font-size: 18px;
    width: 28px;
    height: 28px;
  }
}

/* Mobile S (320px) */
@media (max-width: 320px) {
  .hero-video {
    aspect-ratio: 16 / 9;
    max-width: 320px;
  }

  .game-title {
    text-indent: -18%;
    font-size: 1.2rem;
  }

  .hero-container {
    width: 320px;
  }

  .info-text {
    width: 80%;
    font-size: 0.8rem;
  }

  .playable-on-title {
    text-indent: 15%;
    white-space: nowrap;
  }

  .platform-icons img {
    width: 90px;
  }

  .carousel {
    max-width: 250px;
    height: 180px;
  }

  .prev,
  .next {
    font-size: 18px;
    width: 28px;
    height: 28px;
  }
}

/* GAMES PAGES CSS HAS BEEN VALIDATED 1/30/25 */
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* GAMES PAGES CSS HAS BEEN VALIDATED 1/30/25 */

p.subheader {
  font-size: 1.25rem;
  margin-bottom: 50px;
  max-width: 600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 per row */
  gap: 24px; /* more breathing room */
  width: 100%;
  margin: 0 auto;
  background: transparent;
  justify-items: center; /* center cards in their cells */
}

.game-card {
  width: 100%;
  text-align: center;
  background: transparent;
}

.game-card img {
  width: 100%; /* take full width of the grid cell */
  max-width: 320px; /* bigger cap */
  height: auto; /* maintain aspect ratio */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card img:hover {
  transform: scale(1.05);
  border-radius: 360px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .game-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .game-grid {
    grid-template-columns: 1fr;
  }
}

.game-title {
  font-size: 3rem;
  font-weight: 900;
  color: #c9080e;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

/* CABINET PAGE */
.hero-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  /* Prevent extra space */
  z-index: 2;
  /* Ensure it is stacked above lower sections if needed */
}

.hero-image {
  width: 100%;
  height: auto;
  /* Force it to always cover the hero section */
  object-fit: cover;
  /* Ensures the image covers the area properly */
  display: block;
}

.cabinet-main {
  position: relative;
  background-color: black;
  /* Adjusts to the size of the image */
  background-image: url("../images/texturebackground.png");
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  padding-top: 50px;
  padding-bottom: 0;
  margin-bottom: 0;
  color: white;
  z-index: 1;
}

/* Semi-Translucent Box */
.floating-box2 {
  display: flex;
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  text-align: center;
  /* Ensure text is centered */
  flex-direction: column;
  /* Stack content properly */
  padding: 2.5rem;
  margin: 2rem auto;
  border-radius: var(--button-radius);
  width: 75%;
  background-color: rgba(143, 20, 24, 0.6);
  column-count: 1;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(187, 187, 187, 0.75);
  z-index: 10;
  position: relative;
  opacity: 0;
  /* Start hidden */
  transform: translateY(20px);
  /* Slightly offset for animation */
  animation: fadeInUp 1.2s ease-out 0.6s forwards;
  /* Custom fade-in animation */
}

/* Individual rows for text */
.floating-box2 p.row {
  margin: 0 auto;
  /* Center it horizontally */
  text-align: center;
  /* Center text */
  width: 90%;
  /* Prevent it from stretching too wide */
  font-size: 1.6rem !important;
  line-height: 1.6;
}

.cabinet-details {
  width: 80%;
  /* Restrict section to 80% of the page width */
  margin: 0 auto;
  /* Center the section horizontally */
  padding: 2rem 1rem;
  background-color: transparent;
}

.cabinet-details .left-side,
.cabinet-details .right-side {
  flex: 1;
  text-align: left;
}

.cabinet-details .title-container {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Space between "The" and line */
  margin-bottom: 10px;
}

.cabinet-details .cabinet-prefix {
  font-size: 2rem;
  color: #ff8c00;
  text-transform: uppercase;
}

.cabinet-details .title-line {
  flex: 1;
  height: 2px;
  background: #ff8c00;
}

.cabinet-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  position: relative;
  text-align: center;
  padding: 50px 20px;
  color: white;
}

.cabinet-section h5 {
  font-size: 1.5rem;
  color: var(--third-color);
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cabinet-section h1 {
  font-size: 3rem;
  color: white;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.cabinet-section .image-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  /* Adjust gap for spacing */
  margin-top: 30px;
}

.cabinet-section .image-row img {
  max-width: 45%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cabinet-section .image-row img:hover {
  transform: scale(1.05);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
}

.cabinet-section .vertical-line {
  height: 120px;
  width: 4px;
  background: linear-gradient(to bottom, #ff8c00, #ff0080);
}

/* CABINET CARDS */
.cabinet4,
.cabinet5 {
  display: flex;
  background-color: transparent;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 4rem 0;
}

/* Left and Right Side Animation Styling */
.left-side,
.right-side {
  transform: translateX(0);
  /* Starting point for animations */
  animation-duration: 1s;
  animation-fill-mode: forwards;
  /* Retain the final state after animation */
}

.left-side {
  flex: 1;
}

.right-side {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* RIGHT SIDE IMAGE */
.right-side img {
  width: 100%;
  max-width: 1000px;
  /* Adjust max width for images */
  height: auto;
}

/* TITLE CONTAINER */
.title-container {
  display: flex;
  align-items: center;
  /* Vertically align "The" and the line */
  justify-content: space-between;
  /* Spread items to fill the container */
  margin-bottom: 0.5rem;
  /* Space below the title container */
  width: 100%;
  /* Ensure it spans the full width */
}

.cabinet-prefix {
  font-size: 1.2rem;
  /* Smaller font size */
  font-weight: bold;
  color: var(--main-color);
  /* White text */
  text-transform: uppercase;
  margin-right: 1rem;
  /* Space between "The" and the line */
  white-space: nowrap;
  /* Prevents wrapping */
}

.title-line {
  flex-grow: 1;
  /* Allows the line to take up remaining space */
  height: 2px;
  background-color: var(--main-color);
  /* Accent color for the line */
  border-radius: var(--button-radius);
}

.cabinet-title {
  font-size: 3.2rem;
  /* Large title for emphasis */
  font-weight: bold;
  color: white;
  /* White text for the title */
  margin-bottom: 2rem;
  text-transform: uppercase;
  line-height: 1.5;
  /* Ensure title is compact */
}

.cabinet-description {
  font-size: 1.8rem;
  /* Large description text */
  font-weight: normal;
  /* Regular weight for readability */
  line-height: 1.5;
  /* Normal line height for readability */
  color: white;
  /* White text for the description */
  text-align: left;
  /* Left-aligned text */
  margin-left: 90px;
  margin-bottom: 0;
  margin-top: 0;
}

/* Additional Paragraph Styling */
.additional-paragraph {
  font-size: 2rem;
  text-align: left;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8%;
  padding-right: 8%;
  max-width: 84%;
  color: white;
  line-height: 1.6;
}

/* Additional Paragraph Animation: Fade In from Top */
@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
    /* Start slightly above */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* End in original position */
  }
}

/* End Section Animation: Fade In from Bottom */
@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
    /* Start slightly below */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* End in original position */
  }
}

/* End Section Styling */
.end-section {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
  background: none;
}

/* Styling for the Image */
.end-image {
  max-width: 100%;
  height: auto;
}

/* Headings */
.end-section h1 {
  font-size: 5rem;
  /* Adjusted for a clean look */
  color: white;
  /* White text */
  margin-bottom: 1rem;
}

.end-section h6 {
  font-size: 1.5rem;
  color: #bbbbbb;
  /* Slightly lighter text for contrast */
  margin-bottom: 1rem;
}

/* Paragraph Text */
.end-section p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: white;
  /* White text */
}

/* Laptop (1024px) */
@media (max-width: 1024px) {
  .floating-box2 p.row {
    font-size: 1.4rem !important;
    line-height: 1.4;
    text-align: center;
  }

  .cabinet-prefix {
    font-size: 0.8rem;
  }

  .cabinet-title {
    font-size: 2.6rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }

  /* Description Styling */
  .cabinet-description {
    font-size: 1.2rem;
    /* Increase the description size */
    line-height: 1.4;
    /* Improve readability with line height */
    color: white;
    margin-left: 80px;
    margin-top: 12px;
    /* Add space above the description */
  }

  /* Additional Paragraph Styling */
  .additional-paragraph {
    font-size: 1.2rem;
    text-align: left;
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 9%;
    padding-right: 13%;
    max-width: 78%;
    color: white;
    line-height: 1.4;
  }
}

/* Tablet (768px) */
@media (max-width: 768px) {
  .cabinet-main {
    padding-top: 25px;
  }

  .floating-box2 p.row {
    font-size: 1.2rem !important;
  }

  .cabinet-prefix {
    font-size: 0.6rem;
  }

  .cabinet-title {
    font-size: 2.4rem;
    margin-bottom: 0.2rem;
    line-height: 1;
  }

  /* Description Styling */
  .cabinet-description {
    font-size: 1rem;
    /* Increase the description size */
    margin-left: 50px;
  }

  /* Additional Paragraph Styling */
  .additional-paragraph {
    font-size: 1rem;
    text-align: left;
    max-width: 100%;
  }
}

/* Mobile L (430px) */
@media (max-width: 430px) {
  .cabinet-main {
    padding-top: 5px;
  }

  /* Semi-Translucent Box */
  .floating-box2 {
    width: 70%;
    padding: 1.5rem;
    /* Adjust padding for better fit */
  }

  .floating-box2 p.row {
    font-size: 1rem !important;
    width: 90%;
    /* Ensures it doesn't stretch */
  }

  .cabinet-prefix {
    font-size: 0.4rem;
  }

  .cabinet-title {
    text-align: center;
    font-size: 2.2rem;
  }

  /* Description Styling */
  .cabinet-description {
    margin-left: 25px;
  }

  .cabinet-section {
    flex-direction: column;
    /* Stack elements vertically */
    align-items: center;
    /* Center align the items */
    text-align: center;
    /* Ensure text is centered */
  }

  .left-side,
  .right-side {
    width: 100%;
    /* Ensure full width */
  }
}

/* Mobile L (375px) */
@media (max-width: 375px) {
  .cabinet-main {
    padding-top: 5px;
  }

  /* Semi-Translucent Box */
  .floating-box2 {
    width: 70%;
    padding: 1.5rem;
    /* Adjust padding for better fit */
  }

  .floating-box2 p.row {
    font-size: 0.8rem !important;
    width: 90%;
    /* Ensures it doesn't stretch */
  }

  .cabinet-prefix {
    font-size: 0.2rem;
  }

  .cabinet-title {
    font-size: 2rem;
  }
}

/* CONTACT PAGE STYLING */
.hero-container2 {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  /* Prevent extra space */
  margin: 0;
}

.hero-container2 img {
  width: 100%;
  height: auto;
  /* Force it to always cover the hero section */
  object-fit: cover;
  /* Ensures the image covers the area properly */
  display: block;
}

.hero-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 8rem;
  font-weight: bolder;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
  white-space: nowrap;
}

.hero-subheading {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.contact-page {
  width: 100%;
  background-color: black;
  padding: 30px;
  box-sizing: border-box;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  /* Adjusted gap for better spacing */
  width: 100%;
  padding-top: 50px;
}

.contact-form-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
}

.contact-form {
  width: 100%;
  height: auto;
  max-width: 700px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid #c4c4c4;
  border-radius: var(--button-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.contact-info-wrapper {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-container {
  width: 100%;
  height: 380px;
  border-radius: var(--button-radius);
  overflow: hidden;
}

.contact-details {
  background: black;
  color: white;
  border-radius: var(--button-radius);
}

.contact-details h1 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 25px;
}

.contact-details p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Responsive Adjustments */
/* Laptop L - 1440px */
@media (max-width: 1440px) {
  .hero-text {
    font-size: 6rem;
    /* Scale text for smaller screens */
  }

  .hero-subheading {
    font-size: 2rem;
  }

  .contact-grid {
    grid-template-columns: 2fr 1fr;
  }
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    /* Stack elements vertically */
    text-align: center;
    /* Center text */
    align-items: center;
    /* Ensure proper centering */
    justify-content: center;
    display: flex;
    flex-direction: column;
    /* Ensure stacking */
  }

  .contact-form-wrapper,
  .contact-info-wrapper {
    width: 100%;
    /* Ensure full width */
    max-width: 600px;
    /* Prevent excessive stretching */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center content */
  }

  .map-container {
    margin-top: -85px;
    width: 100%;
    /* Ensure it fills the available space */
    max-width: 600px;
    /* Keep a reasonable max width */
    height: 350px;
    /* Adjust height */
    display: flex;
    justify-content: center;
  }

  .map-container iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--button-radius);
  }

  .contact-map-iframe {
    border: 0;
  }

  .contact-details {
    text-align: center;
    padding: 0px 20px;
    padding-bottom: 60px;
    width: 100%;
    max-width: 500px;
    /* Keep reasonable size */
  }

  .contact-details p {
    margin-left: 70px;
  }
}

/* Tablet L - 900px */
@media (max-width: 900px) {
  .hero-text {
    font-size: 4rem;
  }

  .hero-subheading {
    font-size: 1.5rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .map-container {
    height: 280px;
  }
}

/* Tablet - 768px */
@media (max-width: 768px) {
  .hero-text {
    font-size: 3.5rem;
  }

  .hero-subheading {
    font-size: 1.3rem;
  }
}

@media (max-width: 430px) {
  .hero-container2 .hero-text {
    margin-bottom: 1.5rem;
  }

  .hero-container2 .hero-subheading {
    margin-top: 0;
  }

  .contact-page {
    margin-top: 0;
  }

  .contact-form-wrapper {
    margin-bottom: 8rem;
  }
}

/* Mobile L - 430px */
@media (max-width: 430px) {
  .hero-text {
    font-size: 2.5rem;
  }

  .hero-subheading {
    padding-top: 18px;
    font-size: 1rem;
  }

  .contact-details p {
    margin-left: 15px;
  }
}

/* Mobile M - 375px */
@media (max-width: 375px) {
  .hero-text {
    font-size: 2rem;
  }

  .hero-subheading {
    font-size: 0.9rem;
  }
}

/* Mobile S - 320px */
@media (max-width: 320px) {
  .hero-text {
    font-size: 1.8rem;
  }

  .hero-subheading {
    font-size: 0.7rem;
    padding-top: 20px;
  }
}

/* Contact CTA Section */
.contact-cta {
  position: relative;
  background-color: none;
  color: white;
  padding: 80px 20px;
  /* Adjusted padding */
  text-align: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  min-height: 150px;
  box-sizing: border-box;
}

.cta-content {
  margin: 0 auto;
  /* Center content horizontally */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  /* Limit the width for larger screens */
}

.cta-text {
  font-size: 2rem;
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 10px;
  text-align: center;
}

.cta-heading {
  font-size: 2.5rem;
  color: white;
  font-weight: bolder;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* space between text and arrow */
  flex-wrap: wrap;
  justify-content: center;
}

.cta-arrow img {
  height: 32px;
  width: auto;
  vertical-align: middle;
  /* Slightly smaller arrow */
  transition: transform 0.3s ease;
}

/* Responsive CTA Section */
@media (max-width: 768px) {
  .cta-text {
    font-size: 1.8rem;
  }

  .cta-heading {
    font-size: 2rem;
  }

  .cta-arrow img {
    height: 22px;
  }
}

@media (max-width: 430px) {
  .cta-text {
    font-size: 1.5rem;
  }

  .cta-heading {
    font-size: 1.8rem;
  }
}

@media (max-width: 375px) {
  .cta-text {
    font-size: 1.1rem;
  }

  .cta-heading {
    font-size: 1.6rem;
  }
}

@media (max-width: 320px) {
  .cta-text {
    font-size: 1rem;
  }

  .cta-heading {
    font-size: 1.4rem;
  }
}

/* Contact Page Styling */
.thanku-page {
  display: flex;
  justify-content: center;
  /* Centers content horizontally */
  align-items: center;
  /* Centers content vertically */
  text-align: center;
  height: 50vh;
  /* Full viewport height */
  padding: 20px;
  background-color: black;
}

/* Style the heading */
.thanku-page h1 {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  /* Darker text for readability */
  max-width: 800px;
  /* Limits width for better readability */
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .thanku-page {
    height: auto;
    /* Remove full height for smaller screens */
    padding: 40px 20px;
  }

  .thanku-page h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .thanku-page h1 {
    font-size: 1.5rem;
  }
}

.topnav .button-group {
  display: flex;
  align-items: center;
  gap: 18px; /* Controls spacing between buttons */
}

/* Button styling with background transition */
.topnav .client-button a {
  position: relative;
  /* Set relative positioning to anchor the pseudo-element */
  width: 11.25rem;
  /* Button width */
  display: inline-block;
  vertical-align: middle;
  align-items: center;
  /* Center text vertically */
  justify-content: center;
  /* Center text horizontally */

  padding: 0.9375rem 1.25rem;
  /* Vertical and horizontal padding */
  border-radius: var(--button-radius);
  /* Corner radius */
  border: 0.1875rem solid var(--main-color);
  /* Stroke (border) */
  background-color: transparent;
  /* Transparent fill color */
  color: white;
  /* Text */
  text-decoration: none;
  font-size: 1rem;
  /* Font size */
  font-weight: bold;
  text-transform: uppercase;
  /* All caps text */
  letter-spacing: 0.2rem;
  /* 20% letter spacing */
  overflow: hidden;
  /* Hide overflow for smooth animation */
  z-index: 1;

  /* Keep the text above the pseudo-element */
  background-image: linear-gradient(
    to right,
    var(--main-color) 0%,
    var(--main-color) 100%
  );
  background-size: 0% 100%;
  /* Initially set to 0% width */
  background-position: left;
  /* Start from the left */
  background-repeat: no-repeat;
  transition: background-size 0.5s ease, color 0.5s ease;
  /* Animate background-size and text color */
  white-space: nowrap;
}

/* Hover effect to expand the background from left to right */
.topnav .client-button a:hover::before {
  width: 100%;
  /* Expand the background to cover the entire button */
}

.topnav .client-button a:hover {
  background-size: 100% 100%;
  /* Fill the entire button on hover */
  color: white;
  /* Ensure text color stays white on hover */
}

/* client button inside mobile menu */
.mobile-client-button {
  margin-top: 15px;
}

.mobile-client-button a {
  display: inline-block;
  padding: 10px 20px;
  background-color: black;
  color: white;
  text-decoration: none;
  border-radius: var(--button-radius);
}

.mobile-client-button a:hover {
  background-color: #1d1d1d;
}

/* ---- RESPONSIVE STYLES BELOW ---- */
/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  .client-button a {
    width: 5.5rem;
    /* Adjust button width */
    padding: 0.625rem 0.9375rem;
    /* Reduce padding */
    font-size: 0.9rem;
  }
}

/* Responsive Adjustments for 900px and smaller */
@media (max-width: 900px) {
  .nav-menu,
  .client-button {
    display: none !important;
  }
}

.client-hero {
  background: url("../images/gateway_background.png") no-repeat center center;
  background-size: cover;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Login Box Styling */
.login-container {
  background: rgba(255, 255, 255, 0.1); /* translucent white */
  padding: 2rem;
  border-radius: var(--button-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(12px); /* Safari */
  backdrop-filter: blur(12px); /* glass effect */
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 450px;
  max-width: 100%;
  margin: auto;
  color: #fff;
  box-sizing: border-box;
  text-align: left;
}

.video-library {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 icons per row */
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .video-library {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .video-library {
    grid-template-columns: 1fr;
  }
}

.video-section {
  text-align: center;
  position: relative;
}

.video-icon {
  cursor: pointer;
  width: 300px;
  height: auto;
  transition: transform 0.3s ease;
  display: block;
  margin: 0 auto;
}

.video-icon:hover {
  transform: scale(1.05);
}

.video-dropdown {
  display: none; /* collapsed by default */
  margin-top: 1rem;
  text-align: left;
}

.video-page {
  max-width: 1000px;
  margin: auto;
  padding: 2rem;
}

.video-wrapper {
  max-width: 1400px;
  width: 100%;
  margin: 2rem auto;
  padding: 2rem;
}

.video-wrapper h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.video-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap; /* Allows wrapping when needed on smaller screens */
}

.video-entry {
  flex: 1 1 30%;
  max-width: 30%;
  text-align: center;
}

.video-entry video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  object-fit: contain;
}

.video-entry p {
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
  .video-entry {
    flex: 1 1 45%;
    max-width: 45%;
  }
}

@media (max-width: 600px) {
  .video-entry {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.toggle-button {
  background-color: var(--main-color);
  color: white;
  font-weight: bold;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  width: 100%;
  text-align: left;
}

.video-dropdown video {
  display: block;
  width: 100%;
  max-width: 500px;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-entry .missing {
  color: red;
  font-style: italic;
  text-align: center;
}

.video-card {
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 100%;
  max-width: 350px;
  box-sizing: border-box;
}

.video-card iframe {
  width: 100%;
  height: 200px;
  border: none;
  border-radius: 5px;
}

.video-card p {
  color: var(--main-color);
  font-weight: 600;
  margin-top: 0.75rem;
}

.login-container h2 {
  text-align: center !important;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

/* Form Elements */
/* Form group layout */
.login-container .form-group {
  margin-bottom: 1.5rem;
}

.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
  font-size: 1rem;
  border-radius: var(--button-radius);
  border: 1px solid #ccc;
}

/* Form actions: button + admin link side by side */
.form-actions {
  display: flex;
  align-items: flex-end; /* ensures same line bottom alignment */
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}

/* Style for Admin Log In link */
.admin-link {
  font-size: 1.05rem !important; /* Slightly larger */
  font-weight: 600;
  text-decoration: underline !important; /* Underlined */
  color: var(--main-color);
  line-height: 1; /* Prevent extra vertical space */
  margin-bottom: 4px !important; /* Nudges it down to align with button baseline */
  display: inline-block;
  white-space: nowrap;
  transition: color 0.3s ease;
  padding-top: 0.25rem; /* Optional: tweak vertical alignment */
}

.admin-link:hover {
  color: #fff;
}

/* Responsive tweaks */
@media (max-width: 500px) {
  .login-container {
    width: 100%;
    padding: 1rem;
  }

  .form-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

.form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: #fff;
}

.form-group input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--button-radius);
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.form-group input:focus {
  border-color: var(--main-color);
  outline: none;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Login Button */
.login-button {
  width: 100%;
  padding: 0.6rem;
  background-color: rgba(0, 123, 255, 0.7);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: rgba(0, 123, 255, 1);
}

/* Error Message */
.error-message {
  color: #ff4c4c;
  margin-top: 1rem;
  text-align: center;
  display: block;
}

.dashboard-container {
  max-width: 1000px;
  margin: 4rem auto;
  padding: 2rem;
  background: #f9f9f9;
  border-radius: 10px;
  text-align: center;
}

.admin-link {
  font-size: 0.9rem;
  color: var(--main-color) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.admin-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ========== HERO MARQUEE ========= */
.hero-marquee {
  height: 125px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: rgba(17, 17, 17, 0.85);
  padding: 0 20px;
  margin: 80px 0;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  color: #ff4444;
  font-family: "Courier New", Courier, monospace;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-marquee p {
  animation: scrollText 28s linear infinite !important;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.2em;
}

.hero-marquee p span {
  display: inline-block;
  padding-right: 35%;
}

/* ========== SCROLL ANIMATION ========= */
@keyframes scrollText {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ========== FILTERS ========= */
.filters {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px;
}

select {
  padding: 10px;
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #555;
}

/* Medium screens (≤900px) → reduce spacing */
@media (max-width: 900px) {
  .filters {
    gap: 10px;
    margin: 10px;
  }

  select {
    padding: 8px;
    font-size: 14px;
  }
}

/* Small screens (≤500px) → stack vertically */
@media (max-width: 500px) {
  .filters {
    flex-direction: column; /* stack filters */
    align-items: center; /* center them */
    gap: 8px; /* smaller vertical gap */
  }

  select {
    width: 100%; /* take full width */
    max-width: 280px; /* but not too wide */
  }
}

/* ========== LEADERBOARD LAYOUT ========= */
.leaderboard {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 760px);
  column-gap: 40px; /* same horizontal spacing */
  row-gap: 20px; /* reduced vertical spacing */
  justify-content: center;
  padding: 20px 20px; /* reduced top/bottom padding */
  box-sizing: border-box;
}

/* ========== PLAYER CARD ========= */
.player-card {
  width: 760px;
  height: 120px;
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: rgba(25, 25, 25, 0.75);
  border: 1px solid #3e3e3e;
  border-radius: 15px;
  padding: 0 10px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.player-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.player-card:hover {
  box-shadow: 0 0 10px #ff073a;
}

/* ========== CARD CONTENT ========= */
.game-icon {
  width: 100px;
  height: 100px;
  background: #222; /* fallback background */
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; /* center the image */
  align-items: center;
  justify-content: center;
  overflow: hidden; /* keep image inside */
}

.game-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* scale to fit */
  display: block;
}

.details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.amount {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: #df1f26;
}

.time-place {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4px;
}

.time-place .no-italic {
  font-style: normal; /* cancels the italic */
}

.badge {
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 20px;
  color: black;
  display: inline-block;
  text-align: center;
  min-width: 120px;
}

/* Badge Variants */
.badge-gold {
  background: #ffd700; /* Gold */
}

.badge-silver {
  background: #c0c0c0; /* Silver */
}

.badge-bronze {
  background: #cd7f32; /* Bronze */
}

/* ========== RESPONSIVE ========= */
@media (max-width: 900px) {
  .leaderboard {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .player-card {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 20px;
  }

  .game-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: center;
    margin-bottom: 20px;
  }

  .details {
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .badge {
    align-self: center;
    margin-top: 20px;
  }
}

.winners-main {
  position: relative;
  background-color: black;
  /* Adjusts to the size of the image */
  background-image: url("../images/winners_background.png");
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 50px;
  color: white;
  z-index: 1;
}

.winners-title {
  text-align: center;
}