@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

p, a { font-weight: 400; }
button, h2 { font-weight: 500; }

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

* {
    box-sizing: border-box;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
}

h1, h2, h3 { font-weight: 700; }
h4, h5, h6 { font-weight: 500; }

body {
    background-color: #111;
    overflow-x: hidden;
    touch-action: pan-y;
}

.neon-text {
    text-shadow:
        -1px -1px 0 #00ffff,
        1px -1px 0 #ff00ff,
        -1px 1px 0 #00ffff,
        1px 1px 0 #ff0000;
}

.text-outline-111 {
    text-shadow:
      -1px -1px 0 #111,
       1px -1px 0 #111,
      -1px  1px 0 #111,
       1px  1px 0 #111;
}

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.button-bg {
    background: conic-gradient(from 0deg, #00F5FF, #000, #000, #00F5FF, #000, #000, #000, #00F5FF);
    background-size: 300% 300%;
    animation: shine 6s ease-out infinite;
}

#Search {
    padding: 5px 10px;

    background-color: #111;
    border-radius: 6px;
    border: #fff solid 1px;
    outline: none;

    color: #fff;
}

#Header-Section {
    width: 100%;
    height: 60vh;
    position: relative;
}

.heroSwiper {
    width: 100%;
    height: 100%;
}

.heroSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.heroSwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.heroSwiper .swiper-pagination-bullet-active {
    background: #fff;
}

.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;

    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.custom-prev {
    left: 20px;
}

.custom-next {
    right: 20px;
}

.category-tab {
    background-color: #1d1931;
    border-color: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

.category-tab:hover {
    color: #fff;
    border-color: rgba(15, 216, 250, 0.4);
}

.category-tab.active {
    background-color: #0fd8fa;
    border-color: #0fd8fa;
    color: #111;
}

.section-tab {
    background-color: #1d1931;
    border-color: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

.section-tab:hover {
    color: #fff;
    border-color: rgba(15, 216, 250, 0.4);
}

.section-tab.active {
    background: linear-gradient(135deg, #0fd8fa, #3533cd);
    border-color: #0fd8fa;
    color: #fff;
}

/* Underline-style category tabs */
.cat-underline-tab {
    background: transparent;
    border: none;
    color: #9ca3af;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
}

.cat-underline-tab:hover {
    color: #e5e7eb;
    border-bottom-color: rgba(15, 216, 250, 0.4);
}

.cat-underline-tab.active {
    color: #0fd8fa;
    border-bottom-color: #0fd8fa;
    background: transparent;
}

/* Hide scrollbar on the category strip (still scrollable) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 639px) {
    #Header-Section { height: 45vh; }
    .custom-arrow img { width: 36px; height: 36px; }
    .custom-prev { left: 8px; }
    .custom-next { right: 8px; }
}