
.navSwiper {
  position: relative;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--tertiary_800);
    }

    .swiper-wrapper { align-items: center; }

    .swiper-slide {
      width: auto;
      /* display: inline-flex; */
    }

    .nav-tabs {
      border-color: var(--tertiary_700);
    }

    .nav-btn {
      color: var(--tertiary_600);
      border: none;
      padding: 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      /* width: 167px; */
      /* font-weight: 600; */
      white-space: nowrap;
      cursor: pointer;
      transition: transform .15s ease, background .15s ease;
      background: transparent;
      font-size: 16px;
    }

    .nav-btn i {
      border-radius: 50%;
      padding: 4px;
      font-size: 20px;
      display:inline-block;
      text-align:center;
      line-height:1;
      color: var(--tertiary_500);
    }


    .nav-btn:hover { }
    .nav-btn.active { 
      color: var(--tertiary_100); border-bottom: 1px solid var(--tertiary_300); border-radius: 0;
      text-shadow: 0px 0px 5px var(--tertiary_500), 0px 0px 6px var(--tertiary_700), 0px 0px 10px var(--tertiary_800);
      color: var(--tertiary_300);
      animation: shine 2s;
      animation-iteration-count: infinite;
  }

  @keyframes shine {
    0% {
      text-shadow: 0 0 0px var(--tertiary_600);
    }
    50% {
      text-shadow: 0 0 4px var(--tertiary_600), 0 0 8px var(--tertiary_600), 0 0 12px var(--tertiary_600);
    }
    100% {
      text-shadow: 0 0 0px var(--tertiary_600);
    }
  }

    .nav-btn.active i {
      text-shadow: 0px 0px 5px var(--tertiary_500), 0px 0px 6px var(--tertiary_700), 0px 0px 10px var(--tertiary_800);
      color: var(--tertiary_300);
      animation: shine 2s;
      animation-iteration-count: infinite;
    }

    .nav-btn.search {
      background: var(--tertiary_800);
      color: #28CAD6;
      border: 1px solid var(--tertiary_700);
      padding: 8px;
    }

    .nav-btn.search i {
      color: var(--tertiary_300);
    }

    /* .navSwiper-wrapper .swiper-slide-active .nav-btn {
      text-shadow: 0px 0px 5px var(--tertiary_500), 0px 0px 6px var(--tertiary_700), 0px 0px 10px var(--tertiary_800);
      color: var(--tertiary_300);
      animation: shine 2s;
      animation-iteration-count: infinite;
      color: var(--tertiary_100); border-bottom: 1px solid var(--tertiary_300); border-radius: 0;
    }

    .navSwiper-wrapper .swiper-slide-active .nav-btn i {
      color: var(--tertiary_100);
    } */

    .gamenav .nav-btn:before {
      position: absolute;
      width: 100%;
      height: 1px;
      border-bottom: 1px solid white;
    }

    /* small circular arrows outside swiper */
    .swiper-button-next,
    .swiper-button-prev {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      top: 78%;
      transform: translateY(-50%);
      position: absolute;
      z-index: 20;
      opacity: .95;
      color: #fff;
      cursor: pointer;
      padding: 10px;
      font-weight: 600;
    }
    .swiper-button-prev { left: 0px; }
    .swiper-button-next { right: 0px; }
    .swiper-button-next::after,
    .swiper-button-prev::after { display: none; }

    .games-swiper-prev, .games-swiper-next,
    .promotions-prev, .promotions-next,
    .testimonial-prev, .testimonial-next,
    .logo-prev, .logo-next {
      border: 1px solid var(--tertiary_700);
      background-color: var(--tertiary_800);
    }

    @media (max-width:420px){
      /* .nav-btn { padding: 8px 12px; font-size: 14px; } */
      .nav-btn i { width:24px; height:24px; padding:4px; font-size:16px; }
      .topbar button {
        padding-right: 0;
      }
    }

    #dGamesFilteredContainer {
      padding-top: 20px;
    }
    
    .clear-search {
      border-color: var(--tertiary_400);
      color: var(--tertiary_300);
    }