/* Sidbar-extra */

#backdrop {
  background-color: black;
  opacity: 0.2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 85;
  display: none;
}
/* Sidebar */

#sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100%;
  max-height: 100vh;
  background-color: var(--grey-50);
  padding: 24px 40px;
  width: 320px;
  transition: left 0.2s ease-in-out;
  overflow-y: scroll;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2em;
}

#sidebar::-webkit-scrollbar {
  width: 5px;
}

#sidebar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--grey-200);
  border-radius: 10px;
}

#sidebar::-webkit-scrollbar-thumb {
  background: var(--primary-500);
  border-radius: 10px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#sidebar-header {
  display: flex;
  align-items: center;
  gap: 2em;
  margin-bottom: 36px;
}

#sidebar-brand {
  height: 30px;
  width: auto;
}

#sidebar-footer {
  width: 100%;
  text-align: center;
  font-size: 12px;
}

.sidebar-nav-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.sidebar-nav-item {
  padding: 12px;
  border-radius: 8px;
}
.sidebar-nav-item.active {
  background-color: var(--primary-50);
}

.sidebar-nav-item.active .sidebar-nav-link svg,
.sidebar-nav-item.active .sidebar-nav-link path {
  fill: var(--grey-600);
}

.sidebar-nav-item.active .sidebar-nav-link {
  color: var(--primary-500);
}

.sidebar-nav-item.active .sidebar-nav-link svg,
.sidebar-nav-item.active .sidebar-nav-link path {
  fill: var(--primary-500);
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sidebar dropdown */

.btn-sidebar-dropdown {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}

.sidebar-dropdown-list {
  max-height: 100%;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

/* New and Most Popular Games Responsiveness */

@media (max-width: 1024px) {
  .new-games-section .games-grid,
  .games {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .new-games-section .games-grid,
  .games {
    flex-direction: column;
    align-items: center;
  }

  .new-games-section .game-container,
  .games .card {
    width: 90%;
    max-width: 320px;
    height: auto;
  }
}

@media (max-width: 480px) {
  .new-games-section .game-container,
  .games .card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* hero sliders  slight bounce effect*/
@keyframes BounceCenter {
  0% {
    transform: translateX(0) scaleX(1);
  }
  30% {
    transform: translateX(-0.5%) scaleX(0.98);
  }
  50% {
    transform: translateX(0.5%) scaleX(1.03);
  }
  70% {
    transform: translateX(-0.2%) scaleX(1.005);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}

@keyframes BounceLeft {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-5.5%);
  }
  50% {
    transform: translateX(-10.5%);
    opacity: 1;
  }
  70% {
    transform: translateX(-8.2%);
  }

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

@keyframes BounceRight {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(18.5%);
  }
  50% {
    transform: translateX(15.5%);
    opacity: 1;
  }
  70% {
    transform: translateX(8.2%);
    opacity: 1;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-bounce-center {
  animation: BounceCenter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-bounce-left {
  animation: BounceLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-bounce-right {
  animation: BounceRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}