/* Preloader */
#preloader {
    position: fixed;
    z-index: 99999;
    background: #000000 url(Gallary/pre.gif) no-repeat center;
    background-size: 25%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* HTML and Body */
html {
    scroll-behavior: smooth;
}

/* =========================================================
   CRIMSON E-SPORTS — PREMIUM UI OVERHAUL
   All changes: layout/CSS only. Zero text/image/video edits.
   ========================================================= */

html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background-color: rgb(255, 0, 0);
}

html::-webkit-scrollbar-track:hover {
    background-color: rgb(255, 0, 0);
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(160deg, rgba(255, 253, 133, 0), rgb(26, 26, 26));
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
    background: rgb(0, 199, 199);
    border-radius: 10px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    object-fit: cover;
    background-repeat: no-repeat;
    align-items: center;
    align-content: center;
    background-size: cover;
    overflow-x: hidden;
}

/* Main Content */
.content {
    margin: 0;
    padding: 0;
    object-fit: cover;
    background-size: cover;
    height: 100%;
    position: absolute;
    width: 100%;
    transition: 0.5s;
}

.content#blur.active {
    filter: blur(20px);
    margin: 0;
    padding: 0;
    pointer-events: none;
    user-select: none;
    transform: scale(1.1);
}

/* ── Navbar — Black Glassmorphism ── */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4%;
    border-radius: 0 0 26px 26px;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 0, 0, 0.28);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 0, 0, 0.08);
    font-family: 'Red Hat Display', sans-serif;
    width: 100%;
    position: fixed;
    z-index: 200;
    font-weight: 500;
    transition: all 0.4s ease;
}

/* ── YouTube Live Container (nav) ── */
.nav-live-container {
    flex-shrink: 0;
    width: 220px;
    height: 46px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
    transition: box-shadow 0.3s ease;
}

.nav-live-container:hover {
    box-shadow: 0 0 22px rgba(255, 0, 0, 0.5);
}

/* 'No Current Lives' pulsing text */
.no-live-text {
    font-family: 'Play', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff3333;
    text-transform: uppercase;
    text-shadow: 0 0 8px #ff0000, 0 0 16px #ff0000;
    animation: livePulse 2s ease-in-out infinite;
    white-space: nowrap;
    padding: 0 10px;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        text-shadow: 0 0 8px #ff0000, 0 0 16px #ff0000;
    }

    50% {
        opacity: 0.6;
        text-shadow: 0 0 20px #ff4444, 0 0 40px #ff0000;
    }
}

/* Live iframe inside nav */
.live-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 14px;
}

.logo {
    width: 160px;
    height: 100%;
    margin-left: -10px;
}

nav ul li {
    list-style-type: none;
    display: inline-block;
    padding: 5px 20px;
    margin: 0;
    font-family: 'Play', sans-serif;
}

nav ul li a {
    display: flex;
    font-weight: 500;
    font-size: 18px;
    color: rgb(250, 253, 255);
    position: relative;
    padding: 5px 0px;
    overflow: hidden;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
}

nav ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 50%;
    height: 2px;
    background: rgb(255, 0, 0);
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 50%;
    height: 2px;
    background: aqua;
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

nav ul li a:hover {
    color: aqua;
    font-size: 16px;
}

nav ul li a:hover:before {
    right: 0;
}

nav ul li a:hover:after {
    left: 0;
}

/* Buttons */
button {
    border: none;
    background: rgba(12, 12, 12, 0.644);
    padding: 12px 30px;
    border-radius: 15px;
    color: rgb(255, 220, 22);
    border: 0.5px solid rgb(255, 220, 22);
    font-weight: 500;
    font-size: 15px;
    transition: 0.4s;
    margin: 0;
    font-family: 'Play', sans-serif;
    cursor: pointer;
}

button:hover {
    background: rgb(255, 0, 0);
    transform: scale(1.1);
    font-weight: 600;
    border-radius: 30px;
    color: black;
    border: none;
    box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
}

header .nav,
.sticky {
    position: fixed;
    padding: 50px 100%;
    padding-bottom: 80px;
    margin-left: -100%;
    margin-top: -50px;
    background: rgba(12, 12, 12, 0.904);
    box-shadow: 0 0 10px black, 0 0 20px black, 0 0 40px black;
    z-index: 12;
    transition: 0.5s;
}

/* Welcome Section */
.welcome video {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    border-bottom: 11px solid gold;
}

.heading {
    padding-top: 16%;
    text-align: center;
    z-index: 999;
    padding-bottom: 12.5%;
}

.heading h1 {
    font-size: 90px;
    background: linear-gradient(to right, rgb(255, 238, 0), rgb(255, 0, 0), rgb(0, 0, 0));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: "transparent";
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: 0.4s;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite alternate;
}

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

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

.heading h1:hover {
    -webkit-text-stroke: 1px rgb(243, 234, 234);
    color: transparent;
    background: transparent;
}

.heading a {
    position: relative;
    display: inline-block;
    padding: 15px 70px;
    margin-top: 30px;
    color: rgb(243, 233, 233);
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.7);
    font-size: 24px;
    border: 2px solid rgb(243, 233, 233);
    border-radius: 50px;
    overflow: hidden;
    transition: 0.2s;
    font-family: 'Poppins', sans-serif;
}

.heading a:hover {
    font-weight: bold;
    letter-spacing: 7px;
    color: rgb(3, 3, 3);
    background: rgb(255, 0, 0);
    border-radius: 30px;
    border: 3px solid rgb(0, 0, 0);
    box-shadow: 0 0 10px #ff0000, 0 0 40px #ff0000;
}

/* Game Logos Positioning */
.stc1 {
    position: absolute;
    padding-top: 45px;
    padding-left: 629px;
}

.stc2 {
    position: absolute;
    padding-top: 62px;
    padding-left: 475px;
}

.stc3 {
    position: absolute;
    padding-top: 52px;
    padding-left: 745px;
}

.stc4 {
    position: absolute;
    padding-top: 48px;
    padding-left: 910px;
}

.stc5 {
    position: absolute;
    padding-top: 55px;
    padding-left: 1060px;
}

.stc6 {
    position: absolute;
    padding-top: 69px;
    padding-left: 317px;
}

.stc7 {
    position: absolute;
    padding-top: 68px;
    padding-left: 190px;
}

.stc8 {
    position: absolute;
    padding-top: 46px;
    padding-left: 45px;
}

.stc9 {
    position: absolute;
    padding-top: 50px;
    padding-left: 1190px;
}

/* ── Scanline CRT Overlay ── */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.03) 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 1px,
            transparent 3px);
}

/* ── Mouse-Follow Spotlight (CSS var injected by JS) ── */
.content-area,
.wrapper {
    --mx: 50%;
    --my: 50%;
}

.content-area::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(600px circle at var(--mx) var(--my),
            rgba(255, 0, 0, 0.055),
            transparent 60%);
    transition: background 0.1s ease;
}

/* Content Area - Black Background */
.content-area {
    background: #000000;
    position: relative;
}

.wrapper {
    padding-top: 3%;
    width: min(1000px, 95vw);
    height: 100%;
    margin: auto;
    padding-bottom: 700px;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

/* =========================================================
   NEON PULSE — Section Headings
   Targets: OVERVIEW, LATEST NEWS, FEATURED CRIMSON E-SPORT,
            CRIMSON LEADER BOARD
   ========================================================= */
@keyframes neonPulse {

    0%,
    100% {
        text-shadow:
            0 0 10px rgba(255, 0, 0, 0.8),
            0 0 20px rgba(255, 0, 0, 0.5),
            0 0 40px rgba(255, 0, 0, 0.3);
    }

    50% {
        text-shadow:
            0 0 20px rgba(255, 50, 50, 1),
            0 0 40px rgba(255, 0, 0, 0.9),
            0 0 80px rgba(255, 0, 0, 0.6),
            0 0 120px rgba(255, 0, 0, 0.3);
    }
}

/* Section Titles - RED + Neon Pulse */
#overview,
.heading2,
.heading3 {
    color: #ff0000 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 28px;
    animation: neonPulse 2.5s ease-in-out infinite;
}

#overview {
    padding-bottom: 50px;
}

.heading2 {
    padding-top: 110px;
}

.heading3 {
    margin-top: 110px;
}

/* =========================================================
   GLITCH ANIMATION — Overview Card h2 Subtopics
   Targets: Crimson, Play Style, First Crimson E-Sport Game,
            Top Crimson Games, Crimson E-Sport Variety,
            Crimson in E-sports
   ========================================================= */
@keyframes glitchMain {
    0% {
        transform: translate(0);
    }

    2% {
        transform: translate(-3px, 1px);
    }

    4% {
        transform: translate(3px, -1px);
    }

    6% {
        transform: translate(0);
    }

    92% {
        transform: translate(0);
    }

    94% {
        transform: translate(2px, -2px);
    }

    96% {
        transform: translate(-2px, 2px);
    }

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

@keyframes glitchBefore {
    0% {
        clip-path: inset(0% 0% 95% 0%);
        transform: translate(-4px, 0);
        opacity: 0;
    }

    5% {
        clip-path: inset(40% 0% 50% 0%);
        transform: translate(4px, 0);
        opacity: 1;
        color: #ff3333;
    }

    10% {
        clip-path: inset(70% 0% 10% 0%);
        transform: translate(-3px, 0);
    }

    15% {
        clip-path: inset(20% 0% 70% 0%);
        transform: translate(2px, 0);
    }

    20% {
        clip-path: inset(90% 0% 5% 0%);
        transform: translate(0);
        opacity: 0;
    }

    100% {
        clip-path: inset(0% 0% 95% 0%);
        opacity: 0;
    }
}

@keyframes glitchAfter {
    0% {
        clip-path: inset(80% 0% 5% 0%);
        transform: translate(3px, 0);
        opacity: 0;
    }

    5% {
        clip-path: inset(60% 0% 30% 0%);
        transform: translate(-3px, 0);
        opacity: 1;
        color: #00ffff;
    }

    10% {
        clip-path: inset(30% 0% 60% 0%);
        transform: translate(2px, 0);
    }

    15% {
        clip-path: inset(10% 0% 80% 0%);
        transform: translate(-2px, 0);
    }

    20% {
        clip-path: inset(95% 0% 0% 0%);
        transform: translate(0);
        opacity: 0;
    }

    100% {
        clip-path: inset(80% 0% 5% 0%);
        opacity: 0;
    }
}

.card1 h2,
.card1of1 h2,
.card2of1 h2,
.card3of1 h2,
.card4of1 h2,
.card5of1 h2 {
    position: relative;
    animation: glitchMain 6s steps(1) infinite;
}

.card1 h2::before,
.card1of1 h2::before,
.card2of1 h2::before,
.card3of1 h2::before,
.card4of1 h2::before,
.card5of1 h2::before {
    content: attr(data-text, '');
    content: attr(data-glitch, '');
    position: absolute;
    inset: 0;
    color: #ff3333;
    animation: glitchBefore 6s steps(1) infinite;
    pointer-events: none;
    /* fallback — mirrors parent text via CSS */
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
}

.card1 h2::after,
.card1of1 h2::after,
.card2of1 h2::after,
.card3of1 h2::after,
.card4of1 h2::after,
.card5of1 h2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 0, 0, 0.15) 25%,
            rgba(0, 255, 255, 0.10) 50%,
            transparent 75%);
    animation: glitchAfter 6s steps(1) infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ── 3D Tilt on Overview Cards (hover) ── */
.card1,
.card1of1,
.card2of1,
.card3of1,
.card4of1,
.card5of1 {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.card1:hover,
.card1of1:hover,
.card2of1:hover,
.card3of1:hover,
.card4of1:hover,
.card5of1:hover {
    transform: perspective(900px) rotateX(1.5deg) rotateY(1.5deg) translateY(-6px);
    box-shadow:
        0 30px 50px rgba(255, 0, 0, 0.35),
        0 0 30px rgba(255, 0, 0, 0.15),
        inset 0 0 20px rgba(255, 0, 0, 0.08);
}

/* Overview Cards */
.card1 {
    width: 1200px;
    height: 500px;
    margin-left: -90px;
    color: #ffffff;
    text-align: left;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 30px rgba(29, 29, 29, 0.952), 0 20px 30px rgba(48, 47, 47, 0.507), inset 1px 0px 20px 1px #434e5c;
    backdrop-filter: blur(5px);
    font-family: 'Play', sans-serif;
    font-weight: 500;
    overflow: hidden;
    background: rgba(20, 20, 20, 0.9);
}

.ovimg1 {
    position: absolute;
    width: 1250px;
    z-index: -3;
    margin-top: -60px;
    margin-left: -68px;
    object-fit: cover;
}

.card1 h2 {
    color: #ff0000;
    font-size: 50px;
    padding-top: 70px;
    padding-left: 40px;
}

.card1 p {
    color: #ffffff;
    padding-right: 700px;
    font-size: 20px;
    padding-top: 20px;
    padding-left: 40px;
}

.wrapper .card1of1 {
    width: 1200px;
    height: 500px;
    position: relative;
    color: #ffffff;
    text-align: left;
    margin-left: -90px;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 30px rgba(29, 29, 29, 0.952), 0 20px 30px rgba(48, 47, 47, 0.507), inset 1px 0px 20px 1px #4b6c7c;
    backdrop-filter: blur(5px);
    font-family: 'Play', sans-serif;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
    margin-top: 90px;
    background: rgba(20, 20, 20, 0.9);
}

.ovimg2 {
    position: absolute;
    width: 1250px;
    z-index: -3;
    margin-top: -68px;
    margin-left: -68px;
    object-fit: cover;
}

.card1of1 h2 {
    padding-top: 40px;
    color: #ff0000;
    font-size: 45px;
    padding-left: 710px;
}

.card1of1 p {
    color: #ffffff;
    font-size: 20px;
    padding-top: 20px;
    padding-left: 700px;
    padding-right: 20px;
}

.card1of1 .list1 {
    padding-top: 20px;
    color: #ffffff;
    font-size: 20px;
    padding-left: 700px;
    padding-right: 10px;
}

.wrapper .card2of1 {
    width: 1200px;
    height: 500px;
    position: relative;
    color: #ffffff;
    text-align: left;
    margin-left: -90px;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 30px rgba(29, 29, 29, 0.952), 0 20px 30px rgba(48, 47, 47, 0.507), inset 1px 0px 20px 1px #457470;
    backdrop-filter: blur(5px);
    font-family: 'Play', sans-serif;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
    margin-top: 90px;
    background: rgba(20, 20, 20, 0.9);
}

.ovimg3 {
    position: absolute;
    width: 1250px;
    z-index: -3;
    margin-top: -72px;
    margin-left: -68px;
    object-fit: cover;
}

.card2of1 h2 {
    padding-top: 55px;
    color: #ff0000;
    font-size: 43px;
    padding-left: 20px;
}

.card2of1 p {
    color: #ffffff;
    font-size: 20px;
    padding-top: 30px;
    padding-right: 815px;
    padding-left: 20px;
}

.wrapper .card3of1 {
    width: 1200px;
    height: 500px;
    position: relative;
    color: #ffffff;
    text-align: left;
    margin-left: -90px;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 30px rgba(29, 29, 29, 0.952), 0 20px 30px rgba(48, 47, 47, 0.507), inset 1px 0px 20px 1px #573f45;
    backdrop-filter: blur(5px);
    font-family: 'Play', sans-serif;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
    margin-top: 90px;
    background: rgba(20, 20, 20, 0.9);
}

.ovimg4 {
    position: absolute;
    width: 1250px;
    z-index: -3;
    margin-top: -25px;
    margin-left: -68px;
    object-fit: cover;
}

.card3of1 h2 {
    padding-top: 40px;
    color: #ff0000;
    font-size: 40px;
    padding-left: 740px;
}

.card3of1 p {
    padding-top: 30px;
    color: #ffffff;
    font-size: 20px;
    padding-left: 740px;
}

.card3of1 .list2 {
    color: #ffffff;
    font-size: 19px;
    padding-left: 740px;
    padding-right: 10px;
}

.wrapper .card4of1 {
    width: 1200px;
    height: 500px;
    position: relative;
    color: #ffffff;
    text-align: left;
    margin-left: -90px;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 30px rgba(29, 29, 29, 0.952), 0 20px 30px rgba(48, 47, 47, 0.507), inset 1px 0px 20px 1px #47445a;
    backdrop-filter: blur(5px);
    font-family: 'Play', sans-serif;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
    margin-top: 90px;
    background: rgba(20, 20, 20, 0.9);
}

.ovimg5 {
    position: absolute;
    width: 1250px;
    z-index: -3;
    margin-top: -85px;
    margin-left: -68px;
    object-fit: cover;
}

.card4of1 h2 {
    padding-top: 20px;
    color: #ff0000;
    font-size: 40px;
    padding-left: 20px;
    padding-right: 700px;
}

.card4of1 p {
    padding-top: 30px;
    color: #ffffff;
    font-size: 20px;
    padding-right: 670px;
    padding-left: 20px;
}

.wrapper .card5of1 {
    width: 1200px;
    height: 500px;
    position: relative;
    color: #ffffff;
    text-align: left;
    margin-left: -90px;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 30px rgba(29, 29, 29, 0.952), 0 20px 30px rgba(48, 47, 47, 0.507), inset 1px 0px 20px 1px #4f3c58;
    backdrop-filter: blur(5px);
    font-family: 'Play', sans-serif;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
    margin-top: 90px;
    background: rgba(20, 20, 20, 0.9);
}

.ovimg6 {
    position: absolute;
    width: 1250px;
    z-index: -3;
    margin-top: -10px;
    margin-left: -55px;
    object-fit: cover;
}

.card5of1 h2 {
    padding-top: 10px;
    color: #ff0000;
    font-size: 40px;
    padding-left: 720px;
}

.card5of1 p {
    padding-top: 30px;
    color: #ffffff;
    font-size: 20px;
    padding-left: 720px;
    margin-right: 20px;
}

/* Swiper */
.swiper {
    width: 100%;
    height: 580px;
    align-items: center;
    padding: 48px 100px;
    position: relative;
    overflow: hidden;
}

.swiper-wrapper {
    align-items: center;
    display: flex;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card2 {
    box-shadow: 0 10px 20px rgba(107, 107, 107, 0.952), 0 10px 20px rgba(0, 0, 0, 0.507);
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    padding: 8%;
    position: relative;
    justify-content: space-between;
    padding: 25px 8% 30px;
}

.card2 .content1 {
    display: flex;
    align-items: center;
    width: 100%;
}

.card2 .game1 {
    width: 45%;
    height: 100%;
    position: absolute;
    left: -3px;
    padding: 20px;
}

.card2 .game1 img {
    width: 100%;
    height: auto;
}

.card2 .details1 {
    text-align: left;
    margin-left: 285px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.details1 span {
    font-size: 24px;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
    color: #ff0000;
}

.details1 p {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #ffffff;
}

.details1 b {
    font-weight: 1000;
    color: #ff0000;
    padding-right: 6px;
}

.card2 a {
    text-decoration: none;
    padding: 7px 18px;
    border-radius: 25px;
    color: whitesmoke;
    background-color: rgba(65, 2, 167, 0.986);
    display: inline-block;
    margin-top: 10px;
}

.card2 a:hover {
    background-color: #ff0000;
    transition: 0.3s;
}

/* Swiper Navigation */
.swiper-button-next,
.swiper-button-prev {
    color: rgb(38, 112, 146);
}

.swiper-button-next {
    padding-right: 68px;
}

.swiper-button-prev {
    padding-left: 68px;
}

.swiper-pagination {
    position: absolute;
    bottom: 10px;
}

/* Timeline */
.timeline-wrapper {
    margin: auto;
    max-width: 100%;
    z-index: 1;
}

.timeline-container {
    position: relative;
    width: 100%;
    margin: auto;
    height: 100px;
    margin-top: 90px;
    z-index: 1;
}

.timeline-container ul {
    padding: 0;
    margin: 0;
    padding-top: 15px;
    z-index: 2;
    position: absolute;
    width: 100%;
    margin-top: -40px;
}

.timeline-container li:before {
    content: "";
    display: block;
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 2px rgb(173, 173, 173);
    transition: all ease 0.3s;
}

.timeline-container li.active:before,
.timeline-container li:hover:before {
    border: solid 2px rgba(255, 255, 255, 0.781);
    background: linear-gradient(90deg, #ff0000, #ff3333);
    box-shadow: 0 0 1px white, 0 0 2px #ff0000, 0 0 10px #ff3333;
}

.timeline-container li {
    list-style: none;
    float: left;
    width: 166px;
    padding-left: 8px;
    text-align: center;
    color: rgb(134, 132, 132);
    text-transform: uppercase;
    font-size: 11px;
    cursor: pointer;
    font-weight: 700;
    transition: all ease 0.2s;
    vertical-align: bottom;
    justify-content: center;
    position: relative;
    align-items: center;
}

.timeline-container li .All-Role {
    position: relative;
    width: 100%;
    bottom: 0;
    font-size: 13px;
    color: #ffffff;
}

.timeline-container li.active .All-Role,
.timeline-container li:hover .All-Role {
    color: #ff0000;
}

.timeline-container li:after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: #777;
    margin: auto;
    border: solid 7px #fff;
    border-radius: 50%;
    margin-top: 40px;
    box-shadow: 0 2px 13px -1px rgba(0, 0, 0, 0.3);
    transition: all ease 0.2s;
}

.timeline-container li:hover:after {
    background: #555;
}

.timeline-container li.active:after {
    background: #ff0000;
}

.timeline-container .line {
    width: 82%;
    margin: auto;
    background: #aaa;
    height: 5px;
    position: absolute;
    z-index: 1;
    left: 9%;
    margin-top: 74px;
    border-radius: 50px;
    transition: all ease 0.9s;
}

.timeline-container .line-progress {
    content: "";
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff3333);
    position: absolute;
    z-index: 2;
    border-radius: 50px;
    transition: all ease 0.9s;
}

/* Progress Content Section */
#progress-content-section {
    width: 93%;
    margin: auto;
    background: transparent;
    border-radius: 10px;
    font-family: 'Play', sans-serif;
    font-weight: 600;
    padding: 40px;
}

#progress-content-section .section-content {
    display: none;
    animation: FadeInUp 700ms ease 1;
    animation-fill-mode: forwards;
    transform: translateY(15px);
}

#progress-content-section .section-content.active {
    display: block;
}

#progress-content-section .section-content p {
    text-align: left;
    padding-left: 320px;
    color: #ffffff;
}

#progress-content-section .section-content h2 {
    padding-left: 60px;
    font-size: 27px;
    background: -webkit-linear-gradient(180deg, #ff0000, #ff3333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes FadeInUp {
    0% {
        transform: translateY(15px);
        opacity: 0;
    }

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

/* Parallax Layer */
.layer {
    position: absolute;
    align-content: center;
}

.layer-container {
    position: relative;
    width: 100%;
    height: 100px;
}

/* Timeline Videos */
.section-content .box1,
.section-content .box2,
.section-content .box3,
.section-content .box4,
.section-content .box5,
.section-content .box6 {
    position: relative;
    background: rgba(158, 158, 158, 0);
    width: 290px;
    height: 290px;
    border-radius: 50%;
    overflow: hidden;
}

.section-content .box1 {
    margin-top: -215px;
    margin-left: 10px;
}

.section-content .box2 {
    margin-top: -215px;
    margin-left: 25px;
}

.section-content .box3 {
    margin-top: -230px;
    margin-left: 10px;
}

.section-content .box4 {
    margin-top: -265px;
    margin-left: 25px;
}

.section-content .box5 {
    margin-top: -235px;
    margin-left: 10px;
}

.section-content .box6 {
    margin-top: -235px;
    margin-left: 25px;
}

.section-content .box1::before,
.section-content .box2::before,
.section-content .box3::before,
.section-content .box4::before,
.section-content .box5::before,
.section-content .box6::before {
    content: '';
    position: absolute;
    inset: -10px 67px;
    background: #ff0000;
    transition: 0.5s;
    animation: animate 4s linear infinite;
}

.section-content .box1:hover::before,
.section-content .box2:hover::before,
.section-content .box3:hover::before,
.section-content .box4:hover::before,
.section-content .box5:hover::before,
.section-content .box6:hover::before {
    inset: -20px 0px;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.section-content .box1::after,
.section-content .box2::after,
.section-content .box3::after,
.section-content .box4::after,
.section-content .box5::after,
.section-content .box6::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: #000000;
    border-radius: 50%;
    z-index: 1;
}

.section-content .box1 .TV,
.section-content .box2 .TV1,
.section-content .box3 .TV2,
.section-content .box4 .TV3,
.section-content .box5 .TV4,
.section-content .box6 .TV5 {
    position: absolute;
    inset: 18px;
    border: 6px solid gold;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
}

.section-content .box1 .TV video,
.section-content .box2 .TV1 video,
.section-content .box3 .TV2 video,
.section-content .box4 .TV3 video,
.section-content .box5 .TV4 video,
.section-content .box6 .TV5 video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-content .box2 .TV1 video {
    width: 121%;
    height: 121%;
    margin-right: -20px;
    margin-top: -23px;
}

.section-content .box4 .TV3 video {
    width: 122%;
    height: 122%;
    margin-bottom: -32px;
    margin-left: -25px;
}

/* Sign In Page */
.card3 {
    height: 520px;
    width: 350px;
    z-index: 11;
    visibility: hidden;
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    font-family: 'Play', sans-serif;
}

#card3.active {
    visibility: visible;
    opacity: 1;
    transition: 0.4s;
    position: fixed;
}

.form {
    height: 520px;
    width: 350px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: 0.4s ease-in;
    border-radius: 30px;
    position: relative;
    background-color: #bce6ff1f;
}

.form h2 {
    color: rgb(0, 255, 255);
    font-weight: 600;
    font-size: 28px;
    text-align: center;
    letter-spacing: 0.1em;
}

/* Front */
.form .front {
    height: 100%;
    width: 100%;
    box-shadow: 0 10px 25px 0 rgba(27, 27, 27, 0.644), inset 0 -8px 16px 0 rgba(197, 226, 252, 0.329);
    border-radius: 20px;
    background: none;
    position: absolute;
    z-index: 999;
    padding: 40px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(50px);
    backface-visibility: hidden;
}

.front .close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: rgb(36, 36, 41);
    transition: 0.5s;
    font-size: large;
    background: rgba(196, 221, 255, 0.719);
    padding: 3px 6px;
    border-radius: 50%;
}

.front .close-btn:hover {
    background: rgb(0, 219, 219);
}

.inputbox {
    position: relative;
    width: 265px;
    margin-top: 30px;
}

.inputbox input {
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    border-radius: 20px 10px 20px 10px;
    background: transparent;
    border: none;
    outline: none;
    color: #23242a;
    font-size: 1em;
    letter-spacing: 0.05em;
    z-index: 10;
}

.inputbox span {
    position: absolute;
    left: 0;
    padding: 20px 0px 10px;
    font-size: 1em;
    color: #c0bcbc;
    pointer-events: none;
    letter-spacing: 0.05em;
    transition: 0.5s;
}

.inputbox input:valid~span,
.inputbox input:focus~span {
    color: rgb(0, 219, 219);
    transform: translateX(0) translateY(-34px);
    font-size: 0.85em;
}

.inputbox i {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 265px;
    height: 2px;
    background: rgb(0, 219, 219);
    border-radius: 20px 4px 20px 4px;
    transition: 0.4s;
    pointer-events: none;
    z-index: 9;
}

.inputbox input:valid~i,
.inputbox input:focus~i {
    height: 44px;
}

.links {
    display: flex;
    justify-content: space-between;
}

.links a {
    margin: 20px 0;
    font-size: 0.85em;
    color: #c0bcbc;
    text-decoration: none;
}

.links a:hover {
    color: rgb(0, 219, 219);
}

input[type="submit"] {
    border: none;
    outline: none;
    background: rgb(0, 219, 219);
    padding: 11px 25px;
    margin-top: 2px;
    width: 100%;
    font-weight: 600;
    font-size: 0.9em;
    border-radius: 20px;
    cursor: pointer;
}

.Orlogin {
    margin: 16px 0;
    font-size: 0.9em;
    color: #c0bcbc;
    text-align: center;
}

.link1 {
    display: flex;
    position: relative;
    cursor: pointer;
    color: #e2dbdb;
    margin: 0 0 20px 0;
}

.google,
.facebook,
.twitter {
    width: 50%;
    height: 42px;
    line-height: 45px;
    margin-top: 10px;
    margin-left: 4px;
    transition: 0.4s;
    border-radius: 5px;
    text-align: center;
}

.google:hover,
.facebook:hover,
.twitter:hover {
    background: rgb(0, 219, 219);
    color: #18191b;
    border-radius: 20px;
}

.facebook,
.twitter {
    margin-left: 20px;
}

.signup {
    text-align: center;
    color: #c0bcbc;
    font-size: 0.95em;
}

.signup .sunow {
    color: rgb(0, 219, 219);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: 0.4s;
}

/* Back */
.form .back {
    height: 100%;
    width: 100%;
    box-shadow: 0 10px 25px 0 rgba(27, 27, 27, 0.644), inset 0 -8px 16px 0 rgba(197, 226, 252, 0.329);
    border-radius: 20px;
    background: none;
    padding: 40px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(50px);
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.back .close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: rgb(36, 36, 41);
    transition: 0.5s;
    font-size: 18px;
    background: rgba(196, 221, 255, 0.719);
    padding: 3px 6px;
    border-radius: 50%;
}

.back .close-btn:hover {
    background: rgb(0, 219, 219);
}

.inputbox2 {
    position: relative;
    width: 265px;
    margin-top: 20px;
}

.inputbox2 input {
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    border-radius: 20px 10px 20px 10px;
    background: transparent;
    border: none;
    outline: none;
    color: #23242a;
    font-size: 1em;
    letter-spacing: 0.05em;
    z-index: 10;
}

.inputbox2 span {
    position: absolute;
    left: 0;
    padding: 20px 0px 10px;
    font-size: 1em;
    color: #c0bcbc;
    pointer-events: none;
    letter-spacing: 0.05em;
    transition: 0.5s;
}

.inputbox2 input:valid~span,
.inputbox2 input:focus~span {
    color: rgb(0, 219, 219);
    transform: translateX(0) translateY(-34px);
    font-size: 0.85em;
}

.inputbox2 i {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 265px;
    height: 2px;
    background: rgb(0, 219, 219);
    border-radius: 20px 4px 20px 4px;
    transition: 0.4s;
    pointer-events: none;
    z-index: 9;
}

.inputbox2 input:valid~i,
.inputbox2 input:focus~i {
    height: 44px;
}

.link2 {
    display: flex;
    position: relative;
    cursor: pointer;
    color: #e2dbdb;
    margin: 0 0 20px 0;
}

.OrSign {
    margin: 16px 0;
    font-size: 0.9em;
    color: #c0bcbc;
    text-align: center;
}

.signup1 .sunow1 {
    color: rgb(0, 219, 219);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: 0.4s;
}

.signup1 {
    text-align: center;
    color: #c0bcbc;
    font-size: 0.95em;
}

#overlay .active {
    height: 100%;
    width: 100%;
    right: 0;
    padding-top: 50px;
    padding-left: 500px;
    background: #070707c7;
}

/* Footer */
footer {
    position: absolute;
    margin-top: 600px;
    left: 0;
    width: 100%;
    background: black;
}

footer .footerimg {
    position: absolute;
    margin-top: -43%;
    width: 100%;
    left: 0;
}

#logoimg {
    margin-bottom: -460px;
    width: 270px;
    margin-right: 40px;
}

/* Stars Animation */
.stars {
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 1138px 905px #FFF, 79px 684px #FFF, 1197px 1757px #FFF, 1484px 768px #FFF, 432px 1852px #FFF, 815px 1502px #FFF, 84px 199px #FFF, 1334px 1370px #FFF, 1205px 1390px #FFF, 1516px 1719px #FFF, 1733px 922px #FFF, 1102px 1156px #FFF, 1492px 1921px #FFF, 1092px 281px #FFF, 415px 1817px #FFF, 679px 1490px #FFF, 683px 1634px #FFF, 1249px 14px #FFF, 768px 1404px #FFF, 429px 978px #FFF, 1899px 43px #FFF, 197px 186px #FFF, 1740px 346px #FFF, 925px 791px #FFF, 1844px 1356px #FFF, 1687px 334px #FFF, 1399px 1544px #FFF, 692px 291px #FFF, 1312px 291px #FFF, 1536px 1512px #FFF, 812px 1389px #FFF, 1859px 1403px #FFF, 1536px 783px #FFF, 351px 1230px #FFF, 1686px 710px #FFF, 294px 583px #FFF, 1769px 1387px #FFF, 1041px 505px #FFF, 742px 1873px #FFF, 1483px 859px #FFF, 1130px 1822px #FFF, 658px 113px #FFF, 1964px 1241px #FFF, 1896px 2000px #FFF, 347px 421px #FFF, 1717px 695px #FFF, 843px 881px #FFF, 883px 449px #FFF, 296px 1118px #FFF, 1231px 904px #FFF, 537px 1139px #FFF, 1509px 774px #FFF, 187px 1340px #FFF, 1884px 1606px #FFF, 145px 469px #FFF, 1248px 1204px #FFF, 1278px 726px #FFF, 1050px 1208px #FFF, 291px 1304px #FFF, 61px 1363px #FFF, 864px 1484px #FFF, 1316px 137px #FFF, 1055px 215px #FFF, 1535px 1884px #FFF, 1877px 517px #FFF, 1587px 1593px #FFF, 1230px 4px #FFF, 1107px 1114px #FFF, 1722px 1497px #FFF, 1418px 281px #FFF, 1729px 20px #FFF, 1390px 511px #FFF, 666px 1276px #FFF, 979px 1334px #FFF, 880px 258px #FFF, 125px 1057px #FFF, 133px 866px #FFF, 1702px 1918px #FFF, 1184px 31px #FFF, 50px 669px #FFF, 569px 53px #FFF, 1948px 285px #FFF, 270px 1606px #FFF, 340px 1026px #FFF, 1020px 400px #FFF, 641px 673px #FFF, 793px 1696px #FFF, 760px 852px #FFF, 1510px 1633px #FFF, 645px 1831px #FFF, 1505px 570px #FFF, 718px 1870px #FFF, 441px 151px #FFF, 1169px 401px #FFF, 909px 858px #FFF, 502px 1250px #FFF, 312px 1200px #FFF, 985px 1397px #FFF, 210px 1543px #FFF, 35px 225px #FFF, 1232px 1042px #FFF, 1847px 763px #FFF, 1742px 363px #FFF, 268px 1312px #FFF, 1016px 567px #FFF, 180px 1898px #FFF, 1495px 42px #FFF, 1675px 1292px #FFF, 242px 1974px #FFF, 283px 750px #FFF, 626px 945px #FFF, 723px 1940px #FFF, 510px 1154px #FFF, 659px 1974px #FFF, 922px 1506px #FFF, 1975px 1202px #FFF, 1649px 1990px #FFF, 706px 439px #FFF, 897px 1187px #FFF, 155px 326px #FFF, 836px 871px #FFF, 515px 443px #FFF, 1789px 893px #FFF, 779px 563px #FFF, 1269px 954px #FFF, 1260px 1686px #FFF, 718px 472px #FFF, 566px 1794px #FFF, 5px 64px #FFF, 798px 174px #FFF, 1703px 28px #FFF, 1869px 861px #FFF, 1004px 720px #FFF, 1098px 239px #FFF, 315px 1271px #FFF, 932px 1561px #FFF, 337px 532px #FFF, 1974px 1956px #FFF, 1089px 1871px #FFF, 577px 196px #FFF, 478px 502px #FFF, 1291px 1053px #FFF, 225px 724px #FFF, 1662px 495px #FFF, 514px 246px #FFF, 1830px 1569px #FFF, 586px 1632px #FFF, 388px 1547px #FFF, 1811px 974px #FFF, 33px 1470px #FFF, 1231px 115px #FFF, 142px 802px #FFF, 74px 312px #FFF, 816px 1236px #FFF, 473px 449px #FFF, 10px 405px #FFF, 40px 280px #FFF, 72px 465px #FFF, 1920px 859px #FFF, 1571px 1294px #FFF, 1776px 613px #FFF, 1516px 1901px #FFF, 1293px 1660px #FFF, 1718px 1699px #FFF, 1040px 1967px #FFF, 1514px 289px #FFF, 1254px 1343px #FFF, 263px 1844px #FFF, 599px 452px #FFF, 90px 1472px #FFF, 1131px 520px #FFF, 1985px 269px #FFF, 566px 568px #FFF, 1968px 1422px #FFF, 624px 265px #FFF, 1744px 1181px #FFF, 197px 821px #FFF, 296px 1693px #FFF, 571px 28px #FFF, 872px 8px #FFF, 275px 74px #FFF, 1517px 1565px #FFF, 693px 182px #FFF, 1218px 675px #FFF, 185px 18px #FFF, 1938px 574px #FFF, 1929px 128px #FFF, 1292px 1890px #FFF, 1069px 422px #FFF, 1935px 1464px #FFF, 1742px 204px #FFF, 1151px 813px #FFF, 4px 116px #FFF, 904px 1192px #FFF, 1821px 1047px #FFF, 1017px 201px #FFF, 943px 656px #FFF, 1453px 45px #FFF, 37px 1459px #FFF, 440px 223px #FFF, 940px 502px #FFF, 26px 1629px #FFF, 87px 1201px #FFF, 154px 1083px #FFF, 777px 1947px #FFF, 1501px 1053px #FFF, 133px 733px #FFF, 250px 132px #FFF, 1407px 818px #FFF, 116px 1380px #FFF, 336px 1209px #FFF, 577px 1033px #FFF, 298px 1598px #FFF, 530px 4px #FFF, 231px 1436px #FFF, 239px 615px #FFF, 1392px 1621px #FFF, 1427px 290px #FFF, 1004px 1803px #FFF, 801px 1824px #FFF, 91px 1466px #FFF, 5px 1093px #FFF, 579px 1433px #FFF, 701px 1239px #FFF, 737px 953px #FFF, 442px 736px #FFF, 222px 247px #FFF, 17px 1900px #FFF, 1204px 628px #FFF, 807px 1480px #FFF, 875px 610px #FFF, 1129px 941px #FFF, 603px 433px #FFF, 1644px 1633px #FFF, 1717px 868px #FFF, 779px 1968px #FFF, 1046px 828px #FFF, 1860px 829px #FFF, 960px 1930px #FFF, 991px 809px #FFF, 1804px 1399px #FFF, 617px 1534px #FFF, 322px 254px #FFF, 992px 1879px #FFF, 1062px 845px #FFF, 1939px 228px #FFF, 177px 313px #FFF, 365px 925px #FFF, 438px 1720px #FFF, 1347px 1943px #FFF, 1110px 1791px #FFF, 429px 1358px #FFF, 185px 605px #FFF, 603px 102px #FFF, 835px 1135px #FFF, 471px 1174px #FFF, 336px 164px #FFF, 596px 583px #FFF, 1843px 1030px #FFF, 1350px 640px #FFF, 161px 1131px #FFF, 641px 1160px #FFF, 285px 1592px #FFF, 37px 6px #FFF, 1395px 1365px #FFF, 774px 738px #FFF, 1999px 1943px #FFF, 1817px 354px #FFF, 1442px 1804px #FFF, 1945px 1617px #FFF, 1765px 1418px #FFF, 1580px 1546px #FFF, 274px 1934px #FFF, 1694px 1056px #FFF, 1252px 18px #FFF, 1290px 178px #FFF, 1002px 824px #FFF, 1518px 954px #FFF, 978px 640px #FFF, 609px 1803px #FFF, 837px 571px #FFF, 424px 735px #FFF, 1682px 1112px #FFF, 1319px 978px #FFF, 675px 952px #FFF, 1085px 1751px #FFF, 373px 165px #FFF, 575px 122px #FFF, 884px 26px #FFF, 1853px 1950px #FFF, 185px 1867px #FFF, 77px 537px #FFF, 410px 514px #FFF, 338px 777px #FFF, 1513px 1449px #FFF, 678px 807px #FFF, 1319px 1898px #FFF, 1093px 1468px #FFF, 1353px 1398px #FFF, 1366px 1242px #FFF, 1109px 362px #FFF, 842px 70px #FFF, 925px 792px #FFF, 228px 206px #FFF, 946px 1025px #FFF, 1621px 1129px #FFF, 1716px 1838px #FFF, 908px 446px #FFF, 229px 1973px #FFF, 1281px 1549px #FFF, 567px 1356px #FFF, 516px 1445px #FFF, 583px 1589px #FFF, 271px 51px #FFF, 254px 262px #FFF, 974px 1028px #FFF, 1733px 278px #FFF, 28px 275px #FFF, 371px 851px #FFF, 1702px 370px #FFF, 1367px 399px #FFF, 271px 180px #FFF, 733px 590px #FFF, 1753px 182px #FFF, 552px 506px #FFF, 1742px 1984px #FFF, 555px 181px #FFF, 86px 1260px #FFF, 1667px 1842px #FFF, 859px 730px #FFF, 1224px 1863px #FFF, 265px 819px #FFF, 1408px 1264px #FFF, 1750px 1423px #FFF, 748px 1525px #FFF, 1018px 73px #FFF, 965px 705px #FFF, 1333px 835px #FFF, 1568px 1675px #FFF, 1512px 1522px #FFF, 1585px 380px #FFF, 678px 325px #FFF, 279px 275px #FFF, 1723px 1085px #FFF, 1793px 571px #FFF, 19px 1931px #FFF, 1269px 37px #FFF, 590px 452px #FFF, 1027px 1939px #FFF, 894px 578px #FFF, 1025px 665px #FFF, 1879px 713px #FFF, 1103px 1275px #FFF, 460px 840px #FFF, 1808px 1529px #FFF, 129px 1442px #FFF, 764px 968px #FFF, 1353px 1733px #FFF, 603px 1488px #FFF, 1950px 1440px #FFF, 1424px 1220px #FFF, 1276px 724px #FFF, 593px 1401px #FFF, 743px 1863px #FFF, 1625px 1270px #FFF, 243px 438px #FFF, 1292px 1277px #FFF, 734px 515px #FFF, 1915px 1167px #FFF, 1295px 1351px #FFF, 802px 1588px #FFF, 1449px 808px #FFF, 1523px 1236px #FFF, 1665px 717px #FFF, 314px 1825px #FFF, 161px 1395px #FFF, 1020px 272px #FFF, 273px 923px #FFF, 1114px 1340px #FFF, 1540px 592px #FFF, 200px 1096px #FFF, 1492px 1716px #FFF, 107px 1361px #FFF, 547px 1670px #FFF, 367px 864px #FFF, 1003px 1969px #FFF, 429px 201px #FFF, 1589px 766px #FFF, 1316px 135px #FFF, 1754px 266px #FFF, 1874px 1287px #FFF, 969px 358px #FFF, 461px 1051px #FFF, 1844px 722px #FFF, 489px 1346px #FFF, 782px 814px #FFF, 44px 1432px #FFF, 248px 694px #FFF, 557px 1601px #FFF, 1291px 1653px #FFF, 1139px 982px #FFF, 1223px 1202px #FFF, 600px 1594px #FFF, 1037px 1454px #FFF, 1268px 854px #FFF, 172px 1155px #FFF, 1636px 541px #FFF, 567px 484px #FFF, 1692px 473px #FFF, 1348px 1305px #FFF, 137px 222px #FFF, 53px 345px #FFF, 1680px 181px #FFF, 50px 335px #FFF, 492px 793px #FFF, 926px 1348px #FFF, 1052px 1275px #FFF, 2px 504px #FFF, 1139px 261px #FFF, 1101px 42px #FFF, 160px 537px #FFF, 1559px 1311px #FFF, 40px 1790px #FFF, 1883px 658px #FFF, 1793px 919px #FFF, 1990px 14px #FFF, 568px 689px #FFF, 1495px 878px #FFF, 151px 1026px #FFF, 310px 1977px #FFF, 1490px 518px #FFF, 1867px 33px #FFF, 1587px 164px #FFF, 121px 877px #FFF, 1931px 1357px #FFF, 1012px 1631px #FFF, 1550px 149px #FFF, 1027px 72px #FFF, 1180px 1668px #FFF, 1770px 995px #FFF, 1026px 1897px #FFF, 1162px 1227px #FFF, 1284px 1089px #FFF, 622px 829px #FFF, 403px 1844px #FFF, 80px 903px #FFF, 1221px 859px #FFF, 769px 915px #FFF, 1596px 246px #FFF, 1011px 959px #FFF, 602px 811px #FFF, 563px 961px #FFF, 1270px 549px #FFF, 441px 1496px #FFF, 1218px 1516px #FFF, 106px 1342px #FFF, 1610px 1112px #FFF, 1114px 650px #FFF, 1986px 1162px #FFF, 1910px 1395px #FFF, 1772px 1017px #FFF, 1605px 237px #FFF, 1991px 1179px #FFF, 1584px 1988px #FFF, 1261px 298px #FFF, 722px 1735px #FFF, 630px 420px #FFF, 1473px 1255px #FFF, 603px 1122px #FFF, 706px 1631px #FFF, 193px 1755px #FFF, 472px 1429px #FFF, 1070px 113px #FFF, 1159px 108px #FFF, 392px 678px #FFF, 1805px 1175px #FFF, 1484px 1252px #FFF, 38px 1238px #FFF, 1136px 1684px #FFF, 1867px 977px #FFF, 1569px 1647px #FFF, 1836px 193px #FFF, 1953px 746px #FFF, 1380px 1340px #FFF, 258px 1949px #FFF, 969px 350px #FFF, 713px 275px #FFF, 277px 1486px #FFF, 1671px 1976px #FFF, 1727px 1340px #FFF, 81px 750px #FFF, 1538px 519px #FFF, 1647px 792px #FFF, 472px 1462px #FFF, 59px 1357px #FFF, 588px 976px #FFF, 1522px 1325px #FFF, 1291px 708px #FFF, 879px 566px #FFF, 762px 1639px #FFF, 1657px 95px #FFF, 1635px 720px #FFF, 955px 67px #FFF, 268px 1391px #FFF, 514px 1112px #FFF, 1288px 1413px #FFF, 770px 1908px #FFF, 916px 553px #FFF, 697px 1194px #FFF, 158px 1789px #FFF, 882px 544px #FFF, 1646px 643px #FFF, 419px 1889px #FFF, 1352px 573px #FFF, 1209px 1097px #FFF, 84px 472px #FFF, 1064px 1001px #FFF, 962px 1298px #FFF, 910px 1112px #FFF, 272px 481px #FFF, 1607px 352px #FFF, 852px 874px #FFF, 1180px 777px #FFF, 1210px 675px #FFF, 1876px 841px #FFF, 1812px 907px #FFF, 1837px 399px #FFF, 266px 661px #FFF, 1218px 1527px #FFF, 1362px 995px #FFF, 928px 2px #FFF, 1956px 261px #FFF, 1469px 1545px #FFF, 1480px 639px #FFF, 709px 1384px #FFF, 1752px 1951px #FFF, 38px 871px #FFF, 850px 1401px #FFF, 564px 100px #FFF, 83px 1291px #FFF, 112px 1718px #FFF, 598px 1050px #FFF, 1989px 1084px #FFF, 118px 177px #FFF, 78px 1790px #FFF, 858px 1927px #FFF, 867px 894px #FFF, 1392px 171px #FFF, 449px 505px #FFF, 1970px 1737px #FFF, 540px 238px #FFF, 1666px 1843px #FFF, 132px 1141px #FFF, 1968px 626px #FFF, 1219px 1787px #FFF, 1290px 893px #FFF, 580px 406px #FFF, 710px 1286px #FFF, 1151px 826px #FFF, 1273px 1941px #FFF, 517px 147px #FFF, 481px 1060px #FFF, 844px 978px #FFF, 1010px 655px #FFF, 1707px 1635px #FFF, 849px 824px #FFF, 204px 1286px #FFF, 617px 337px #FFF, 1257px 1468px #FFF, 768px 1593px #FFF, 421px 36px #FFF, 636px 1090px #FFF, 422px 480px #FFF, 676px 616px #FFF, 698px 365px #FFF, 356px 667px #FFF, 1358px 1415px #FFF, 665px 451px #FFF, 1547px 1808px #FFF, 277px 1737px #FFF, 1981px 188px #FFF, 273px 85px #FFF, 484px 129px #FFF, 1404px 1176px #FFF, 774px 1121px #FFF, 929px 1796px #FFF, 375px 1376px #FFF, 761px 1327px #FFF, 813px 985px #FFF, 113px 56px #FFF, 1754px 1765px #FFF, 1702px 1837px #FFF, 1420px 733px #FFF, 1690px 907px #FFF, 1047px 591px #FFF, 643px 1816px #FFF, 929px 630px #FFF, 1302px 578px #FFF, 249px 1598px #FFF, 630px 352px #FFF, 887px 1952px #FFF, 433px 1364px #FFF, 1141px 1564px #FFF, 983px 304px #FFF, 422px 1940px #FFF, 1258px 1249px #FFF, 1813px 1539px #FFF, 1490px 1443px #FFF, 1947px 1142px #FFF, 863px 1415px #FFF, 758px 1707px #FFF, 280px 1258px #FFF, 1030px 464px #FFF, 67px 235px #FFF, 1802px 572px #FFF, 1443px 784px #FFF, 284px 1952px #FFF, 1379px 26px #FFF, 549px 1481px #FFF, 569px 1101px #FFF, 1839px 1367px #FFF, 895px 188px #FFF, 1298px 456px #FFF, 1997px 607px #FFF, 343px 168px #FFF, 636px 1012px #FFF, 767px 1380px #FFF, 1186px 1899px #FFF, 1407px 1950px #FFF, 1625px 903px #FFF, 1407px 617px #FFF, 787px 1212px #FFF, 1404px 1575px #FFF, 357px 295px #FFF, 784px 561px #FFF, 1563px 744px #FFF, 182px 1954px #FFF, 3px 749px #FFF, 1080px 1133px #FFF, 792px 641px #FFF, 93px 18px #FFF, 341px 1293px #FFF, 1093px 388px #FFF, 655px 1602px #FFF, 888px 1528px #FFF, 1757px 321px #FFF, 870px 95px #FFF, 978px 997px #FFF, 1329px 1436px #FFF, 700px 16px #FFF, 246px 2px #FFF, 976px 671px #FFF, 470px 1304px #FFF, 1040px 1436px #FFF, 1019px 498px #FFF, 497px 1404px #FFF, 69px 1239px #FFF, 141px 1348px #FFF, 1654px 106px #FFF, 1308px 852px #FFF, 1027px 902px #FFF, 1185px 495px #FFF, 1016px 1573px #FFF, 1986px 1615px #FFF, 1397px 1298px #FFF, 234px 37px #FFF, 992px 737px #FFF, 1741px 1431px #FFF, 1874px 495px #FFF, 129px 458px #FFF, 1661px 1589px #FFF, 1507px 1315px #FFF, 1518px 1757px #FFF, 142px 1037px #FFF, 1234px 527px #FFF, 1609px 1717px #FFF, 767px 1149px #FFF, 1074px 781px #FFF, 724px 955px #FFF, 1882px 588px #FFF, 375px 110px #FFF, 1688px 1719px #FFF, 1088px 1404px #FFF, 646px 1776px #FFF, 569px 1632px #FFF, 429px 370px #FFF, 959px 1104px #FFF, 994px 1853px #FFF, 974px 481px #FFF, 548px 1284px #FFF, 1723px 1025px #FFF, 866px 1979px #FFF, 1886px 851px #FFF, 728px 1038px #FFF, 75px 401px #FFF, 812px 865px #FFF, 1241px 591px #FFF, 1088px 335px #FFF, 1680px 1352px #FFF, 1371px 1341px #FFF;
    animation: animStar 50s linear infinite;
}

.stars:after {
    content: " ";
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 1138px 905px #FFF, 79px 684px #FFF, 1197px 1757px #FFF, 1484px 768px #FFF, 432px 1852px #FFF, 815px 1502px #FFF, 84px 199px #FFF, 1334px 1370px #FFF, 1205px 1390px #FFF, 1516px 1719px #FFF, 1733px 922px #FFF, 1102px 1156px #FFF, 1492px 1921px #FFF, 1092px 281px #FFF, 415px 1817px #FFF, 679px 1490px #FFF, 683px 1634px #FFF, 1249px 14px #FFF, 768px 1404px #FFF, 429px 978px #FFF, 1899px 43px #FFF, 197px 186px #FFF, 1740px 346px #FFF, 925px 791px #FFF, 1844px 1356px #FFF, 1687px 334px #FFF, 1399px 1544px #FFF, 692px 291px #FFF, 1312px 291px #FFF, 1536px 1512px #FFF, 812px 1389px #FFF, 1859px 1403px #FFF, 1536px 783px #FFF, 351px 1230px #FFF, 1686px 710px #FFF, 294px 583px #FFF, 1769px 1387px #FFF, 1041px 505px #FFF, 742px 1873px #FFF, 1483px 859px #FFF, 1130px 1822px #FFF, 658px 113px #FFF, 1964px 1241px #FFF, 1896px 2000px #FFF, 347px 421px #FFF, 1717px 695px #FFF, 843px 881px #FFF, 883px 449px #FFF, 296px 1118px #FFF, 1231px 904px #FFF, 537px 1139px #FFF, 1509px 774px #FFF, 187px 1340px #FFF, 1884px 1606px #FFF, 145px 469px #FFF, 1248px 1204px #FFF, 1278px 726px #FFF, 1050px 1208px #FFF, 291px 1304px #FFF, 61px 1363px #FFF, 864px 1484px #FFF, 1316px 137px #FFF, 1055px 215px #FFF, 1535px 1884px #FFF, 1877px 517px #FFF, 1587px 1593px #FFF, 1230px 4px #FFF, 1107px 1114px #FFF, 1722px 1497px #FFF, 1418px 281px #FFF, 1729px 20px #FFF, 1390px 511px #FFF, 666px 1276px #FFF, 979px 1334px #FFF, 880px 258px #FFF, 125px 1057px #FFF, 133px 866px #FFF, 1702px 1918px #FFF, 1184px 31px #FFF, 50px 669px #FFF, 569px 53px #FFF, 1948px 285px #FFF, 270px 1606px #FFF, 340px 1026px #FFF, 1020px 400px #FFF, 641px 673px #FFF, 793px 1696px #FFF, 760px 852px #FFF, 1510px 1633px #FFF, 645px 1831px #FFF, 1505px 570px #FFF, 718px 1870px #FFF, 441px 151px #FFF, 1169px 401px #FFF, 909px 858px #FFF, 502px 1250px #FFF, 312px 1200px #FFF, 985px 1397px #FFF, 210px 1543px #FFF, 35px 225px #FFF, 1232px 1042px #FFF, 1847px 763px #FFF, 1742px 363px #FFF, 268px 1312px #FFF, 1016px 567px #FFF, 180px 1898px #FFF, 1495px 42px #FFF, 1675px 1292px #FFF, 242px 1974px #FFF, 283px 750px #FFF, 626px 945px #FFF, 723px 1940px #FFF, 510px 1154px #FFF, 659px 1974px #FFF, 922px 1506px #FFF, 1975px 1202px #FFF, 1649px 1990px #FFF, 706px 439px #FFF, 897px 1187px #FFF, 155px 326px #FFF, 836px 871px #FFF, 515px 443px #FFF, 1789px 893px #FFF, 779px 563px #FFF, 1269px 954px #FFF, 1260px 1686px #FFF, 718px 472px #FFF, 566px 1794px #FFF, 5px 64px #FFF, 798px 174px #FFF, 1703px 28px #FFF, 1869px 861px #FFF, 1004px 720px #FFF, 1098px 239px #FFF, 315px 1271px #FFF, 932px 1561px #FFF, 337px 532px #FFF, 1974px 1956px #FFF, 1089px 1871px #FFF, 577px 196px #FFF, 478px 502px #FFF, 1291px 1053px #FFF, 225px 724px #FFF, 1662px 495px #FFF, 514px 246px #FFF, 1830px 1569px #FFF, 586px 1632px #FFF, 388px 1547px #FFF, 1811px 974px #FFF, 33px 1470px #FFF, 1231px 115px #FFF, 142px 802px #FFF, 74px 312px #FFF, 816px 1236px #FFF, 473px 449px #FFF, 10px 405px #FFF, 40px 280px #FFF, 72px 465px #FFF, 1920px 859px #FFF, 1571px 1294px #FFF, 1776px 613px #FFF, 1516px 1901px #FFF, 1293px 1660px #FFF, 1718px 1699px #FFF, 1040px 1967px #FFF, 1514px 289px #FFF, 1254px 1343px #FFF, 263px 1844px #FFF, 599px 452px #FFF, 90px 1472px #FFF, 1131px 520px #FFF, 1985px 269px #FFF, 566px 568px #FFF, 1968px 1422px #FFF, 624px 265px #FFF, 1744px 1181px #FFF, 197px 821px #FFF, 296px 1693px #FFF, 571px 28px #FFF, 872px 8px #FFF, 275px 74px #FFF, 1517px 1565px #FFF, 693px 182px #FFF, 1218px 675px #FFF, 185px 18px #FFF, 1938px 574px #FFF, 1929px 128px #FFF, 1292px 1890px #FFF, 1069px 422px #FFF, 1935px 1464px #FFF, 1742px 204px #FFF, 1151px 813px #FFF, 4px 116px #FFF, 904px 1192px #FFF, 1821px 1047px #FFF, 1017px 201px #FFF, 943px 656px #FFF, 1453px 45px #FFF, 37px 1459px #FFF, 440px 223px #FFF, 940px 502px #FFF, 26px 1629px #FFF, 87px 1201px #FFF, 154px 1083px #FFF, 777px 1947px #FFF, 1501px 1053px #FFF, 133px 733px #FFF, 250px 132px #FFF, 1407px 818px #FFF, 116px 1380px #FFF, 336px 1209px #FFF, 577px 1033px #FFF, 298px 1598px #FFF, 530px 4px #FFF, 231px 1436px #FFF, 239px 615px #FFF, 1392px 1621px #FFF, 1427px 290px #FFF, 1004px 1803px #FFF, 801px 1824px #FFF, 91px 1466px #FFF, 5px 1093px #FFF, 579px 1433px #FFF, 701px 1239px #FFF, 737px 953px #FFF, 442px 736px #FFF, 222px 247px #FFF, 17px 1900px #FFF, 1204px 628px #FFF, 807px 1480px #FFF, 875px 610px #FFF, 1129px 941px #FFF, 603px 433px #FFF, 1644px 1633px #FFF, 1717px 868px #FFF, 779px 1968px #FFF, 1046px 828px #FFF, 1860px 829px #FFF, 960px 1930px #FFF, 991px 809px #FFF, 1804px 1399px #FFF, 617px 1534px #FFF, 322px 254px #FFF, 992px 1879px #FFF, 1062px 845px #FFF, 1939px 228px #FFF, 177px 313px #FFF, 365px 925px #FFF, 438px 1720px #FFF, 1347px 1943px #FFF, 1110px 1791px #FFF, 429px 1358px #FFF, 185px 605px #FFF, 603px 102px #FFF, 835px 1135px #FFF, 471px 1174px #FFF, 336px 164px #FFF, 596px 583px #FFF, 1843px 1030px #FFF, 1350px 640px #FFF, 161px 1131px #FFF, 641px 1160px #FFF, 285px 1592px #FFF, 37px 6px #FFF, 1395px 1365px #FFF, 774px 738px #FFF, 1999px 1943px #FFF, 1817px 354px #FFF, 1442px 1804px #FFF, 1945px 1617px #FFF, 1765px 1418px #FFF, 1580px 1546px #FFF, 274px 1934px #FFF, 1694px 1056px #FFF, 1252px 18px #FFF, 1290px 178px #FFF, 1002px 824px #FFF, 1518px 954px #FFF, 978px 640px #FFF, 609px 1803px #FFF, 837px 571px #FFF, 424px 735px #FFF, 1682px 1112px #FFF, 1319px 978px #FFF, 675px 952px #FFF, 1085px 1751px #FFF, 373px 165px #FFF, 575px 122px #FFF, 884px 26px #FFF, 1853px 1950px #FFF, 185px 1867px #FFF, 77px 537px #FFF, 410px 514px #FFF, 338px 777px #FFF, 1513px 1449px #FFF, 678px 807px #FFF, 1319px 1898px #FFF, 1093px 1468px #FFF, 1353px 1398px #FFF, 1366px 1242px #FFF, 1109px 362px #FFF, 842px 70px #FFF, 925px 792px #FFF, 228px 206px #FFF, 946px 1025px #FFF, 1621px 1129px #FFF, 1716px 1838px #FFF, 908px 446px #FFF, 229px 1973px #FFF, 1281px 1549px #FFF, 567px 1356px #FFF, 516px 1445px #FFF, 583px 1589px #FFF, 271px 51px #FFF, 254px 262px #FFF, 974px 1028px #FFF, 1733px 278px #FFF, 28px 275px #FFF, 371px 851px #FFF, 1702px 370px #FFF, 1367px 399px #FFF, 271px 180px #FFF, 733px 590px #FFF, 1753px 182px #FFF, 552px 506px #FFF, 1742px 1984px #FFF, 555px 181px #FFF, 86px 1260px #FFF, 1667px 1842px #FFF, 859px 730px #FFF, 1224px 1863px #FFF, 265px 819px #FFF, 1408px 1264px #FFF, 1750px 1423px #FFF, 748px 1525px #FFF, 1018px 73px #FFF, 965px 705px #FFF, 1333px 835px #FFF, 1568px 1675px #FFF, 1512px 1522px #FFF, 1585px 380px #FFF, 678px 325px #FFF, 279px 275px #FFF, 1723px 1085px #FFF, 1793px 571px #FFF, 19px 1931px #FFF, 1269px 37px #FFF, 590px 452px #FFF, 1027px 1939px #FFF, 894px 578px #FFF, 1025px 665px #FFF, 1879px 713px #FFF, 1103px 1275px #FFF, 460px 840px #FFF, 1808px 1529px #FFF, 129px 1442px #FFF, 764px 968px #FFF, 1353px 1733px #FFF, 603px 1488px #FFF, 1950px 1440px #FFF, 1424px 1220px #FFF, 1276px 724px #FFF, 593px 1401px #FFF, 743px 1863px #FFF, 1625px 1270px #FFF, 243px 438px #FFF, 1292px 1277px #FFF, 734px 515px #FFF, 1915px 1167px #FFF, 1295px 1351px #FFF, 802px 1588px #FFF, 1449px 808px #FFF, 1523px 1236px #FFF, 1665px 717px #FFF, 314px 1825px #FFF, 161px 1395px #FFF, 1020px 272px #FFF, 273px 923px #FFF, 1114px 1340px #FFF, 1540px 592px #FFF, 200px 1096px #FFF, 1492px 1716px #FFF, 107px 1361px #FFF, 547px 1670px #FFF, 367px 864px #FFF, 1003px 1969px #FFF, 429px 201px #FFF, 1589px 766px #FFF, 1316px 135px #FFF, 1754px 266px #FFF, 1874px 1287px #FFF, 969px 358px #FFF, 461px 1051px #FFF, 1844px 722px #FFF, 489px 1346px #FFF, 782px 814px #FFF, 44px 1432px #FFF, 248px 694px #FFF, 557px 1601px #FFF, 1291px 1653px #FFF, 1139px 982px #FFF, 1223px 1202px #FFF, 600px 1594px #FFF, 1037px 1454px #FFF, 1268px 854px #FFF, 172px 1155px #FFF, 1636px 541px #FFF, 567px 484px #FFF, 1692px 473px #FFF, 1348px 1305px #FFF, 137px 222px #FFF, 53px 345px #FFF, 1680px 181px #FFF, 50px 335px #FFF, 492px 793px #FFF, 926px 1348px #FFF, 1052px 1275px #FFF, 2px 504px #FFF, 1139px 261px #FFF, 1101px 42px #FFF, 160px 537px #FFF, 1559px 1311px #FFF, 40px 1790px #FFF, 1883px 658px #FFF, 1793px 919px #FFF, 1990px 14px #FFF, 568px 689px #FFF, 1495px 878px #FFF, 151px 1026px #FFF, 310px 1977px #FFF, 1490px 518px #FFF, 1867px 33px #FFF, 1587px 164px #FFF, 121px 877px #FFF, 1931px 1357px #FFF, 1012px 1631px #FFF, 1550px 149px #FFF, 1027px 72px #FFF, 1180px 1668px #FFF, 1770px 995px #FFF, 1026px 1897px #FFF, 1162px 1227px #FFF, 1284px 1089px #FFF, 622px 829px #FFF, 403px 1844px #FFF, 80px 903px #FFF, 1221px 859px #FFF, 769px 915px #FFF, 1596px 246px #FFF, 1011px 959px #FFF, 602px 811px #FFF, 563px 961px #FFF, 1270px 549px #FFF, 441px 1496px #FFF, 1218px 1516px #FFF, 106px 1342px #FFF, 1610px 1112px #FFF, 1114px 650px #FFF, 1986px 1162px #FFF, 1910px 1395px #FFF, 1772px 1017px #FFF, 1605px 237px #FFF, 1991px 1179px #FFF, 1584px 1988px #FFF, 1261px 298px #FFF, 722px 1735px #FFF, 630px 420px #FFF, 1473px 1255px #FFF, 603px 1122px #FFF, 706px 1631px #FFF, 193px 1755px #FFF, 472px 1429px #FFF, 1070px 113px #FFF, 1159px 108px #FFF, 392px 678px #FFF, 1805px 1175px #FFF, 1484px 1252px #FFF, 38px 1238px #FFF, 1136px 1684px #FFF, 1867px 977px #FFF, 1569px 1647px #FFF, 1836px 193px #FFF, 1953px 746px #FFF, 1380px 1340px #FFF, 258px 1949px #FFF, 969px 350px #FFF, 713px 275px #FFF, 277px 1486px #FFF, 1671px 1976px #FFF, 1727px 1340px #FFF, 81px 750px #FFF, 1538px 519px #FFF, 1647px 792px #FFF, 472px 1462px #FFF, 59px 1357px #FFF, 588px 976px #FFF, 1522px 1325px #FFF, 1291px 708px #FFF, 879px 566px #FFF, 762px 1639px #FFF, 1657px 95px #FFF, 1635px 720px #FFF, 955px 67px #FFF, 268px 1391px #FFF, 514px 1112px #FFF, 1288px 1413px #FFF, 770px 1908px #FFF, 916px 553px #FFF, 697px 1194px #FFF, 158px 1789px #FFF, 882px 544px #FFF, 1646px 643px #FFF, 419px 1889px #FFF, 1352px 573px #FFF, 1209px 1097px #FFF, 84px 472px #FFF, 1064px 1001px #FFF, 962px 1298px #FFF, 910px 1112px #FFF, 272px 481px #FFF, 1607px 352px #FFF, 852px 874px #FFF, 1180px 777px #FFF, 1210px 675px #FFF, 1876px 841px #FFF, 1812px 907px #FFF, 1837px 399px #FFF, 266px 661px #FFF, 1218px 1527px #FFF, 1362px 995px #FFF, 928px 2px #FFF, 1956px 261px #FFF, 1469px 1545px #FFF, 1480px 639px #FFF, 709px 1384px #FFF, 1752px 1951px #FFF, 38px 871px #FFF, 850px 1401px #FFF, 564px 100px #FFF, 83px 1291px #FFF, 112px 1718px #FFF, 598px 1050px #FFF, 1989px 1084px #FFF, 118px 177px #FFF, 78px 1790px #FFF, 858px 1927px #FFF, 867px 894px #FFF, 1392px 171px #FFF, 449px 505px #FFF, 1970px 1737px #FFF, 540px 238px #FFF, 1666px 1843px #FFF, 132px 1141px #FFF, 1968px 626px #FFF, 1219px 1787px #FFF, 1290px 893px #FFF, 580px 406px #FFF, 710px 1286px #FFF, 1151px 826px #FFF, 1273px 1941px #FFF, 517px 147px #FFF, 481px 1060px #FFF, 844px 978px #FFF, 1010px 655px #FFF, 1707px 1635px #FFF, 849px 824px #FFF, 204px 1286px #FFF, 617px 337px #FFF, 1257px 1468px #FFF, 768px 1593px #FFF, 421px 36px #FFF, 636px 1090px #FFF, 422px 480px #FFF, 676px 616px #FFF, 698px 365px #FFF, 356px 667px #FFF, 1358px 1415px #FFF, 665px 451px #FFF, 1547px 1808px #FFF, 277px 1737px #FFF, 1981px 188px #FFF, 273px 85px #FFF, 484px 129px #FFF, 1404px 1176px #FFF, 774px 1121px #FFF, 929px 1796px #FFF, 375px 1376px #FFF, 761px 1327px #FFF, 813px 985px #FFF, 113px 56px #FFF, 1754px 1765px #FFF, 1702px 1837px #FFF, 1420px 733px #FFF, 1690px 907px #FFF, 1047px 591px #FFF, 643px 1816px #FFF, 929px 630px #FFF, 1302px 578px #FFF, 249px 1598px #FFF, 630px 352px #FFF, 887px 1952px #FFF, 433px 1364px #FFF, 1141px 1564px #FFF, 983px 304px #FFF, 422px 1940px #FFF, 1258px 1249px #FFF, 1813px 1539px #FFF, 1490px 1443px #FFF, 1947px 1142px #FFF, 863px 1415px #FFF, 758px 1707px #FFF, 280px 1258px #FFF, 1030px 464px #FFF, 67px 235px #FFF, 1802px 572px #FFF, 1443px 784px #FFF, 284px 1952px #FFF, 1379px 26px #FFF, 549px 1481px #FFF, 569px 1101px #FFF, 1839px 1367px #FFF, 895px 188px #FFF, 1298px 456px #FFF, 1997px 607px #FFF, 343px 168px #FFF, 636px 1012px #FFF, 767px 1380px #FFF, 1186px 1899px #FFF, 1407px 1950px #FFF, 1625px 903px #FFF, 1407px 617px #FFF, 787px 1212px #FFF, 1404px 1575px #FFF, 357px 295px #FFF, 784px 561px #FFF, 1563px 744px #FFF, 182px 1954px #FFF, 3px 749px #FFF, 1080px 1133px #FFF, 792px 641px #FFF, 93px 18px #FFF, 341px 1293px #FFF, 1093px 388px #FFF, 655px 1602px #FFF, 888px 1528px #FFF, 1757px 321px #FFF, 870px 95px #FFF, 978px 997px #FFF, 1329px 1436px #FFF, 700px 16px #FFF, 246px 2px #FFF, 976px 671px #FFF, 470px 1304px #FFF, 1040px 1436px #FFF, 1019px 498px #FFF, 497px 1404px #FFF, 69px 1239px #FFF, 141px 1348px #FFF, 1654px 106px #FFF, 1308px 852px #FFF, 1027px 902px #FFF, 1185px 495px #FFF, 1016px 1573px #FFF, 1986px 1615px #FFF, 1397px 1298px #FFF, 234px 37px #FFF, 992px 737px #FFF, 1741px 1431px #FFF, 1874px 495px #FFF, 129px 458px #FFF, 1661px 1589px #FFF, 1507px 1315px #FFF, 1518px 1757px #FFF, 142px 1037px #FFF, 1234px 527px #FFF, 1609px 1717px #FFF, 767px 1149px #FFF, 1074px 781px #FFF, 724px 955px #FFF, 1882px 588px #FFF, 375px 110px #FFF, 1688px 1719px #FFF, 1088px 1404px #FFF, 646px 1776px #FFF, 569px 1632px #FFF, 429px 370px #FFF, 959px 1104px #FFF, 994px 1853px #FFF, 974px 481px #FFF, 548px 1284px #FFF, 1723px 1025px #FFF, 866px 1979px #FFF, 1886px 851px #FFF, 728px 1038px #FFF, 75px 401px #FFF, 812px 865px #FFF, 1241px 591px #FFF, 1088px 335px #FFF, 1680px 1352px #FFF, 1371px 1341px #FFF;
}

.stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 1363px 1723px #FFF, 991px 760px #FFF, 1834px 1940px #FFF, 1469px 370px #FFF, 881px 15px #FFF, 1990px 772px #FFF, 1459px 1886px #FFF, 976px 1265px #FFF, 38px 1432px #FFF, 684px 347px #FFF, 559px 1372px #FFF, 1926px 1549px #FFF, 1531px 637px #FFF, 1695px 512px #FFF, 355px 564px #FFF, 1277px 581px #FFF, 1005px 1483px #FFF, 1246px 508px #FFF, 110px 245px #FFF, 1805px 934px #FFF, 1467px 1598px #FFF, 1711px 664px #FFF, 1556px 789px #FFF, 1823px 162px #FFF, 1264px 324px #FFF, 287px 1041px #FFF, 589px 445px #FFF, 831px 535px #FFF, 1062px 1541px #FFF, 808px 1939px #FFF, 365px 707px #FFF, 1038px 1083px #FFF, 1051px 1140px #FFF, 230px 1498px #FFF, 1506px 900px #FFF, 1368px 1445px #FFF, 449px 1958px #FFF, 889px 578px #FFF, 393px 1559px #FFF, 928px 523px #FFF, 953px 1639px #FFF, 1982px 638px #FFF, 1700px 151px #FFF, 1681px 360px #FFF, 1575px 250px #FFF, 893px 961px #FFF, 450px 1152px #FFF, 723px 136px #FFF, 1257px 846px #FFF, 897px 1969px #FFF, 1622px 4px #FFF, 222px 1932px #FFF, 1740px 1913px #FFF, 179px 1925px #FFF, 489px 197px #FFF, 1226px 518px #FFF, 220px 710px #FFF, 900px 71px #FFF, 182px 60px #FFF, 979px 873px #FFF, 1855px 691px #FFF, 22px 1088px #FFF, 1744px 40px #FFF, 2px 831px #FFF, 1110px 1681px #FFF, 1879px 1322px #FFF, 1625px 1516px #FFF, 1163px 1259px #FFF, 616px 571px #FFF, 1110px 856px #FFF, 1865px 44px #FFF, 1742px 1109px #FFF, 77px 1052px #FFF, 398px 1311px #FFF, 860px 311px #FFF, 1628px 514px #FFF, 296px 1309px #FFF, 80px 1280px #FFF, 564px 1649px #FFF, 1882px 718px #FFF, 518px 317px #FFF, 1133px 772px #FFF, 1589px 1486px #FFF, 1190px 589px #FFF, 1623px 535px #FFF, 661px 1185px #FFF, 948px 112px #FFF, 48px 1855px #FFF, 718px 551px #FFF, 143px 1183px #FFF, 1898px 1133px #FFF, 1621px 355px #FFF, 1253px 759px #FFF, 1155px 1656px #FFF, 1009px 727px #FFF, 464px 1395px #FFF, 628px 847px #FFF, 1902px 429px #FFF, 105px 485px #FFF, 1906px 800px #FFF, 1598px 609px #FFF, 184px 97px #FFF, 986px 1774px #FFF, 1148px 1141px #FFF, 1108px 246px #FFF, 1532px 1910px #FFF, 257px 678px #FFF, 1510px 437px #FFF, 206px 13px #FFF, 1884px 1956px #FFF, 105px 1161px #FFF, 1910px 664px #FFF, 1081px 1849px #FFF, 827px 604px #FFF, 1628px 725px #FFF, 1186px 1369px #FFF, 190px 1982px #FFF, 459px 1800px #FFF, 1424px 379px #FFF, 1519px 69px #FFF, 1653px 21px #FFF, 1297px 1534px #FFF, 1122px 1772px #FFF, 1712px 1778px #FFF, 730px 905px #FFF, 1413px 1565px #FFF, 4px 1658px #FFF, 1716px 1275px #FFF, 1474px 1452px #FFF, 295px 1664px #FFF, 167px 1270px #FFF, 1857px 200px #FFF, 828px 1242px #FFF, 954px 1261px #FFF, 625px 1697px #FFF, 584px 252px #FFF, 463px 1754px #FFF, 542px 1477px #FFF, 106px 452px #FFF, 226px 532px #FFF, 1595px 571px #FFF, 1939px 1981px #FFF, 771px 861px #FFF, 625px 904px #FFF, 692px 652px #FFF, 1437px 1974px #FFF, 1220px 1959px #FFF, 151px 777px #FFF, 1035px 396px #FFF, 1311px 421px #FFF, 1403px 23px #FFF, 667px 919px #FFF, 1283px 1839px #FFF, 247px 399px #FFF, 680px 1479px #FFF, 120px 600px #FFF, 136px 1327px #FFF, 622px 107px #FFF, 1225px 465px #FFF, 1111px 561px #FFF, 483px 1995px #FFF, 852px 257px #FFF, 198px 1724px #FFF, 231px 178px #FFF, 1448px 1321px #FFF, 531px 423px #FFF, 1539px 1906px #FFF, 1023px 1235px #FFF, 401px 482px #FFF, 1927px 1671px #FFF, 43px 1065px #FFF, 1799px 1387px #FFF, 42px 991px #FFF, 1086px 27px #FFF, 1728px 1903px #FFF, 604px 1551px #FFF, 1870px 1426px #FFF, 118px 1283px #FFF, 711px 318px #FFF, 1007px 916px #FFF, 838px 1784px #FFF, 1496px 986px #FFF, 1917px 192px #FFF, 294px 1059px #FFF, 1752px 850px #FFF, 178px 871px #FFF, 229px 1553px #FFF, 1390px 904px #FFF, 1647px 1323px #FFF, 1973px 454px #FFF, 1381px 1280px #FFF, 417px 1317px #FFF, 1774px 188px #FFF, 1844px 1086px #FFF, 1928px 953px #FFF, 376px 752px #FFF, 379px 460px #FFF, 1497px 828px #FFF, 272px 505px #FFF, 711px 812px #FFF;
    animation: animStar 100s linear infinite;
}

.stars2:after {
    content: " ";
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 1363px 1723px #FFF, 991px 760px #FFF, 1834px 1940px #FFF, 1469px 370px #FFF, 881px 15px #FFF, 1990px 772px #FFF, 1459px 1886px #FFF, 976px 1265px #FFF, 38px 1432px #FFF, 684px 347px #FFF, 559px 1372px #FFF, 1926px 1549px #FFF, 1531px 637px #FFF, 1695px 512px #FFF, 355px 564px #FFF, 1277px 581px #FFF, 1005px 1483px #FFF, 1246px 508px #FFF, 110px 245px #FFF, 1805px 934px #FFF, 1467px 1598px #FFF, 1711px 664px #FFF, 1556px 789px #FFF, 1823px 162px #FFF, 1264px 324px #FFF, 287px 1041px #FFF, 589px 445px #FFF, 831px 535px #FFF, 1062px 1541px #FFF, 808px 1939px #FFF, 365px 707px #FFF, 1038px 1083px #FFF, 1051px 1140px #FFF, 230px 1498px #FFF, 1506px 900px #FFF, 1368px 1445px #FFF, 449px 1958px #FFF, 889px 578px #FFF, 393px 1559px #FFF, 928px 523px #FFF, 953px 1639px #FFF, 1982px 638px #FFF, 1700px 151px #FFF, 1681px 360px #FFF, 1575px 250px #FFF, 893px 961px #FFF, 450px 1152px #FFF, 723px 136px #FFF, 1257px 846px #FFF, 897px 1969px #FFF, 1622px 4px #FFF, 222px 1932px #FFF, 1740px 1913px #FFF, 179px 1925px #FFF, 489px 197px #FFF, 1226px 518px #FFF, 220px 710px #FFF, 900px 71px #FFF, 182px 60px #FFF, 979px 873px #FFF, 1855px 691px #FFF, 22px 1088px #FFF, 1744px 40px #FFF, 2px 831px #FFF, 1110px 1681px #FFF, 1879px 1322px #FFF, 1625px 1516px #FFF, 1163px 1259px #FFF, 616px 571px #FFF, 1110px 856px #FFF, 1865px 44px #FFF, 1742px 1109px #FFF, 77px 1052px #FFF, 398px 1311px #FFF, 860px 311px #FFF, 1628px 514px #FFF, 296px 1309px #FFF, 80px 1280px #FFF, 564px 1649px #FFF, 1882px 718px #FFF, 518px 317px #FFF, 1133px 772px #FFF, 1589px 1486px #FFF, 1190px 589px #FFF, 1623px 535px #FFF, 661px 1185px #FFF, 948px 112px #FFF, 48px 1855px #FFF, 718px 551px #FFF, 143px 1183px #FFF, 1898px 1133px #FFF, 1621px 355px #FFF, 1253px 759px #FFF, 1155px 1656px #FFF, 1009px 727px #FFF, 464px 1395px #FFF, 628px 847px #FFF, 1902px 429px #FFF, 105px 485px #FFF, 1906px 800px #FFF, 1598px 609px #FFF, 184px 97px #FFF, 986px 1774px #FFF, 1148px 1141px #FFF, 1108px 246px #FFF, 1532px 1910px #FFF, 257px 678px #FFF, 1510px 437px #FFF, 206px 13px #FFF, 1884px 1956px #FFF, 105px 1161px #FFF, 1910px 664px #FFF, 1081px 1849px #FFF, 827px 604px #FFF, 1628px 725px #FFF, 1186px 1369px #FFF, 190px 1982px #FFF, 459px 1800px #FFF, 1424px 379px #FFF, 1519px 69px #FFF, 1653px 21px #FFF, 1297px 1534px #FFF, 1122px 1772px #FFF, 1712px 1778px #FFF, 730px 905px #FFF, 1413px 1565px #FFF, 4px 1658px #FFF, 1716px 1275px #FFF, 1474px 1452px #FFF, 295px 1664px #FFF, 167px 1270px #FFF, 1857px 200px #FFF, 828px 1242px #FFF, 954px 1261px #FFF, 625px 1697px #FFF, 584px 252px #FFF, 463px 1754px #FFF, 542px 1477px #FFF, 106px 452px #FFF, 226px 532px #FFF, 1595px 571px #FFF, 1939px 1981px #FFF, 771px 861px #FFF, 625px 904px #FFF, 692px 652px #FFF, 1437px 1974px #FFF, 1220px 1959px #FFF, 151px 777px #FFF, 1035px 396px #FFF, 1311px 421px #FFF, 1403px 23px #FFF, 667px 919px #FFF, 1283px 1839px #FFF, 247px 399px #FFF, 680px 1479px #FFF, 120px 600px #FFF, 136px 1327px #FFF, 622px 107px #FFF, 1225px 465px #FFF, 1111px 561px #FFF, 483px 1995px #FFF, 852px 257px #FFF, 198px 1724px #FFF, 231px 178px #FFF, 1448px 1321px #FFF, 531px 423px #FFF, 1539px 1906px #FFF, 1023px 1235px #FFF, 401px 482px #FFF, 1927px 1671px #FFF, 43px 1065px #FFF, 1799px 1387px #FFF, 42px 991px #FFF, 1086px 27px #FFF, 1728px 1903px #FFF, 604px 1551px #FFF, 1870px 1426px #FFF, 118px 1283px #FFF, 711px 318px #FFF, 1007px 916px #FFF, 838px 1784px #FFF, 1496px 986px #FFF, 1917px 192px #FFF, 294px 1059px #FFF, 1752px 850px #FFF, 178px 871px #FFF, 229px 1553px #FFF, 1390px 904px #FFF, 1647px 1323px #FFF, 1973px 454px #FFF, 1381px 1280px #FFF, 417px 1317px #FFF, 1774px 188px #FFF, 1844px 1086px #FFF, 1928px 953px #FFF, 376px 752px #FFF, 379px 460px #FFF, 1497px 828px #FFF, 272px 505px #FFF, 711px 812px #FFF;
}

.stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 398px 1026px #FFF, 3px 1372px #FFF, 1376px 1157px #FFF, 1149px 1263px #FFF, 647px 1312px #FFF, 660px 587px #FFF, 1831px 877px #FFF, 882px 687px #FFF, 451px 905px #FFF, 1067px 1781px #FFF, 695px 1853px #FFF, 1382px 852px #FFF, 233px 1396px #FFF, 1477px 885px #FFF, 248px 1415px #FFF, 731px 1210px #FFF, 12px 454px #FFF, 266px 1421px #FFF, 540px 158px #FFF, 918px 978px #FFF, 822px 695px #FFF, 504px 60px #FFF, 485px 170px #FFF, 498px 857px #FFF, 465px 1795px #FFF, 1809px 724px #FFF, 148px 572px #FFF, 1311px 337px #FFF, 1807px 137px #FFF, 29px 273px #FFF, 477px 970px #FFF, 929px 1934px #FFF, 529px 1869px #FFF, 410px 305px #FFF, 39px 524px #FFF, 180px 1607px #FFF, 106px 209px #FFF, 1088px 87px #FFF, 611px 827px #FFF, 738px 716px #FFF, 136px 756px #FFF, 1995px 1562px #FFF, 871px 964px #FFF, 644px 1591px #FFF, 1461px 1774px #FFF, 72px 748px #FFF, 1602px 552px #FFF, 1307px 384px #FFF, 310px 1461px #FFF, 1646px 996px #FFF, 1739px 753px #FFF, 1587px 167px #FFF, 539px 1658px #FFF, 1037px 1176px #FFF, 378px 1626px #FFF, 1737px 1899px #FFF, 199px 1221px #FFF, 1519px 484px #FFF, 1722px 841px #FFF, 761px 1365px #FFF, 1907px 1526px #FFF, 915px 635px #FFF, 1336px 510px #FFF, 333px 56px #FFF, 1931px 1717px #FFF, 452px 457px #FFF, 657px 988px #FFF, 1033px 830px #FFF, 234px 1381px #FFF, 1943px 100px #FFF, 1941px 852px #FFF, 1003px 1005px #FFF, 1116px 138px #FFF, 447px 138px #FFF, 1297px 1146px #FFF, 763px 252px #FFF, 1493px 275px #FFF, 982px 1330px #FFF, 779px 1052px #FFF, 533px 880px #FFF, 838px 854px #FFF, 1715px 737px #FFF, 1641px 1151px #FFF, 379px 1670px #FFF, 763px 775px #FFF, 373px 1875px #FFF, 473px 1014px #FFF, 1086px 1667px #FFF, 1694px 1949px #FFF, 294px 1778px #FFF, 839px 612px #FFF, 93px 478px #FFF, 30px 1446px #FFF, 1769px 108px #FFF, 128px 305px #FFF, 385px 821px #FFF, 11px 966px #FFF, 1974px 347px #FFF, 1788px 1856px #FFF, 1085px 937px #FFF;
    animation: animStar 150s linear infinite;
}

.stars3:after {
    content: " ";
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 398px 1026px #FFF, 3px 1372px #FFF, 1376px 1157px #FFF, 1149px 1263px #FFF, 647px 1312px #FFF, 660px 587px #FFF, 1831px 877px #FFF, 882px 687px #FFF, 451px 905px #FFF, 1067px 1781px #FFF, 695px 1853px #FFF, 1382px 852px #FFF, 233px 1396px #FFF, 1477px 885px #FFF, 248px 1415px #FFF, 731px 1210px #FFF, 12px 454px #FFF, 266px 1421px #FFF, 540px 158px #FFF, 918px 978px #FFF, 822px 695px #FFF, 504px 60px #FFF, 485px 170px #FFF, 498px 857px #FFF, 465px 1795px #FFF, 1809px 724px #FFF, 148px 572px #FFF, 1311px 337px #FFF, 1807px 137px #FFF, 29px 273px #FFF, 477px 970px #FFF, 929px 1934px #FFF, 529px 1869px #FFF, 410px 305px #FFF, 39px 524px #FFF, 180px 1607px #FFF, 106px 209px #FFF, 1088px 87px #FFF, 611px 827px #FFF, 738px 716px #FFF, 136px 756px #FFF, 1995px 1562px #FFF, 871px 964px #FFF, 644px 1591px #FFF, 1461px 1774px #FFF, 72px 748px #FFF, 1602px 552px #FFF, 1307px 384px #FFF, 310px 1461px #FFF, 1646px 996px #FFF, 1739px 753px #FFF, 1587px 167px #FFF, 539px 1658px #FFF, 1037px 1176px #FFF, 378px 1626px #FFF, 1737px 1899px #FFF, 199px 1221px #FFF, 1519px 484px #FFF, 1722px 841px #FFF, 761px 1365px #FFF, 1907px 1526px #FFF, 915px 635px #FFF, 1336px 510px #FFF, 333px 56px #FFF, 1931px 1717px #FFF, 452px 457px #FFF, 657px 988px #FFF, 1033px 830px #FFF, 234px 1381px #FFF, 1943px 100px #FFF, 1941px 852px #FFF, 1003px 1005px #FFF, 1116px 138px #FFF, 447px 138px #FFF, 1297px 1146px #FFF, 763px 252px #FFF, 1493px 275px #FFF, 982px 1330px #FFF, 779px 1052px #FFF, 533px 880px #FFF, 838px 854px #FFF, 1715px 737px #FFF, 1641px 1151px #FFF, 379px 1670px #FFF, 763px 775px #FFF, 373px 1875px #FFF, 473px 1014px #FFF, 1086px 1667px #FFF, 1694px 1949px #FFF, 294px 1778px #FFF, 839px 612px #FFF, 93px 478px #FFF, 30px 1446px #FFF, 1769px 108px #FFF, 128px 305px #FFF, 385px 821px #FFF, 11px 966px #FFF, 1974px 347px #FFF, 1788px 1856px #FFF, 1085px 937px #FFF;
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}

/* Footer Icons */
footer .ftr-icons {
    width: 100%;
    padding: 10px;
}

footer a {
    text-align: center;
    display: inline-block;
    z-index: 9;
    margin: 5%;
    text-decoration: none;
    font-size: 3.5em;
    padding-bottom: 10%;
    cursor: pointer;
    color: whitesmoke;
    transition: all 0.5s ease;
}

footer .insta:hover {
    color: rgb(231, 79, 105);
}

footer .fb:hover {
    color: rgb(4, 110, 229);
}

footer .yt:hover {
    color: rgb(253, 0, 0);
}

footer .twit:hover {
    color: rgb(26, 140, 216);
}

.ftr-txt {
    color: #ffffff;
    font-size: 19px;
    font-weight: 100;
    display: flex;
    position: absolute;
    z-index: 9;
    text-align: center;
    margin: -150px 310px 5px 310px;
}

/* Scroll to Top Button */
#scroll-up {
    position: fixed;
    bottom: 20px;
    right: 10px;
    height: 90px;
    width: 90px;
    display: none;
    z-index: 10;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

#progress-scroll {
    display: block;
    height: calc(100% - 18px);
    width: calc(100% - 18px);
    background-color: rgb(24, 23, 23);
    padding: 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

/* Reveal Animation */
.reveal {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s ease;
}

.reveal.active {
    transform: translateY(0px);
    opacity: 1;
}

/* =========================================================
   NEON PULSE — News Heading & Leaderboard Title
   (These are inline-styled in HTML so we use !important to
    layer the animation on top without touching text content)
   ========================================================= */
.news-heading {
    animation: neonPulse 2.5s ease-in-out infinite !important;
}

.leaderboard-main-title {
    animation: neonPulse 2.5s ease-in-out infinite !important;
}

/* =========================================================
   EMAIL ICON — Hover State
   ========================================================= */
.social-icon.email:hover .icon-circle {
    border-color: #ea4335;
    box-shadow: 0 0 20px #ea4335;
}

.social-icon.email:hover .icon-circle::before {
    transform: scale(1);
    background: linear-gradient(135deg, #ea4335, #c1351f);
}

/* Social name nth-child updates after Twitter removal */
.social-names span:nth-child(4):hover {
    color: #7289da;
    text-shadow: 0 0 10px rgba(114, 137, 218, 0.5);
}

.social-names span:nth-child(5):hover {
    color: #ea4335;
    text-shadow: 0 0 10px rgba(234, 67, 53, 0.5);
}

/* =========================================================
   SCROLL-REVEAL — Enhanced
   ========================================================= */
.reveal {
    position: relative;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* --- Large Tablets / Small Desktops --- */
@media (max-width: 1200px) {
    .wrapper {
        width: 95vw;
        padding-bottom: 400px;
    }

    .card1,
    .card1of1,
    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1 {
        width: 100%;
        margin-left: 0;
        height: auto;
        min-height: 380px;
    }

    .ovimg1,
    .ovimg2,
    .ovimg3,
    .ovimg4,
    .ovimg5,
    .ovimg6 {
        width: 100%;
        margin-left: 0;
    }

    .card1 p {
        padding-right: 50%;
    }

    .card2of1 p {
        padding-right: 55%;
    }

    .card4of1 p,
    .card4of1 h2 {
        padding-right: 45%;
    }
}

/* --- Tablet --- */
@media (max-width: 900px) {
    nav {
        padding: 8px 3%;
        flex-wrap: wrap;
        gap: 8px;
        border-radius: 0 0 18px 18px;
    }

    .logo {
        width: 120px;
    }

    nav ul {
        order: 3;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    nav ul li {
        padding: 4px 10px;
    }

    nav ul li a {
        font-size: 0.88rem;
    }

    .nav-live-container {
        width: 180px;
        height: 40px;
        order: 2;
    }

    .no-live-text {
        font-size: 0.68rem;
    }

    .heading h1 {
        font-size: clamp(40px, 8vw, 80px);
    }

    .wrapper {
        width: 98vw;
        padding-bottom: 300px;
    }

    .card1,
    .card1of1,
    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1 {
        width: 100%;
        margin-left: 0;
        height: auto;
        min-height: 320px;
        padding: 24px 16px;
    }

    /* Stack overview text centrally on tablet */
    .card1 h2,
    .card2of1 h2,
    .card4of1 h2 {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 30px;
    }

    .card1of1 h2,
    .card3of1 h2,
    .card5of1 h2 {
        padding-left: 10px;
        font-size: 30px;
    }

    .card1 p,
    .card1of1 p,
    .card2of1 p,
    .card3of1 p,
    .card4of1 p,
    .card5of1 p {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 16px;
    }
}

/* --- Mobile --- */
@media (max-width: 600px) {
    nav {
        padding: 8px 4%;
        gap: 6px;
        border-radius: 0 0 14px 14px;
    }

    .logo {
        width: 100px;
    }

    nav ul li a {
        font-size: 0.78rem;
    }

    .nav-live-container {
        width: 100%;
        order: 4;
        height: 38px;
        border-radius: 10px;
    }

    button {
        padding: 9px 16px;
        font-size: 12px;
    }

    .heading h1 {
        font-size: clamp(28px, 9vw, 56px);
        padding: 0 10px;
    }

    .heading a {
        font-size: 16px;
        padding: 10px 30px;
        letter-spacing: 2px;
    }

    /* Hide game logos below nav on mobile */
    .stc1,
    .stc2,
    .stc3,
    .stc4,
    .stc5,
    .stc6,
    .stc7,
    .stc8,
    .stc9 {
        display: none;
    }

    .wrapper {
        padding-bottom: 200px;
    }

    .card1,
    .card1of1,
    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1 {
        height: auto;
        min-height: unset;
        border-radius: 16px;
    }

    .ovimg1,
    .ovimg2,
    .ovimg3,
    .ovimg4,
    .ovimg5,
    .ovimg6 {
        display: none;
        /* background imgs hidden to avoid overflow */
    }

    #overview {
        font-size: 22px;
    }

    .heading2,
    .heading3 {
        font-size: 20px;
    }

    .news-heading {
        font-size: 28px !important;
    }

    .news-card {
        min-width: unset;
    }

    /* Swiper / Featured cards */
    .card2 .details1 {
        margin-left: 0;
        padding: 10px;
    }

    .card2 .game1 {
        display: none;
    }

    /* Leaderboard title */
    .leaderboard-main-title {
        font-size: 30px !important;
        margin-top: 40px !important;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr !important;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}



/* ==============================================================
   UNIVERSAL VIEWPORT RESPONSIVE AUDIT
   Role: Senior Full-Stack Responsive Overhaul
   Constraint: No text / image sources / video links changed.
   ============================================================== */

/* ── 1. Global Box-Model Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ── 2. Fluid Typography Scale (clamp) ── */
:root {
    /* Heading scale */
    --fs-h1: clamp(2rem, 7vw, 5rem);
    --fs-h2: clamp(1.4rem, 4vw, 3rem);
    --fs-h3: clamp(1.1rem, 2.5vw, 2rem);
    --fs-body: clamp(0.875rem, 1.8vw, 1.1rem);
    --fs-sm: clamp(0.75rem, 1.4vw, 0.95rem);
    --fs-label: clamp(0.65rem, 1.2vw, 0.85rem);

    /* Spacing scale */
    --sp-xs: clamp(4px, 1vw, 8px);
    --sp-sm: clamp(8px, 2vw, 16px);
    --sp-md: clamp(16px, 3vw, 32px);
    --sp-lg: clamp(32px, 5vw, 64px);

    /* Section padding */
    --section-px: clamp(12px, 5vw, 80px);
}

/* Apply fluid heading sizes globally */
.heading h1,
.welcome h1 {
    font-size: var(--fs-h1) !important;
}

#overview,
.heading2,
.heading3,
.news-heading,
.leaderboard-main-title,
.popular-heading {
    font-size: clamp(1.4rem, 4vw, 2.5rem) !important;
}

.card1 h2,
.card1of1 h2,
.card2of1 h2,
.card3of1 h2,
.card4of1 h2,
.card5of1 h2 {
    font-size: clamp(1.5rem, 4vw, 3.1rem);
}

/* ── 3. Media & Asset Alignment ── */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

video {
    max-width: 100%;
    object-fit: cover;
}

/* Welcome section video */
.welcome video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Leaderboard, overview, and gallery images */
.leader-photo img,
.ovimg1,
.ovimg2,
.ovimg3,
.ovimg4,
.ovimg5,
.ovimg6 {
    object-fit: cover;
}

/* Featured card images */
.game1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1/1;
    border-radius: 16px;
}

/* ── 4. Core Layout: Flexbox / Grid First ── */
.content-area {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.wrapper {
    width: min(1000px, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-px);
    padding-right: var(--section-px);
}

/* ── 5. Footer Red Line ── */
.footer-red-line,
footer hr,
.ftr-line {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border: none;
    border-top: 2px solid #ff0000;
    box-shadow: 0 0 16px #ff0000, 0 0 32px rgba(255, 0, 0, 0.3);
    display: block;
}

/* ── 6. Flat Social Icons (Footer) ── */
.flat-social-icons,
.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 3vw, 28px);
    padding: clamp(12px, 2vw, 24px) 0;
}

.flat-social-icon,
.social-icon {
    color: #ffffff !important;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    text-decoration: none;
    transition: transform 0.25s ease, filter 0.25s ease;
    will-change: transform;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Remove circular backgrounds */
}

.flat-social-icon:hover,
.social-icon:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px #ff0000);
    color: #ffffff !important;
}

/* Hide old icon-circle wrappers — flat style */
.icon-circle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

.flat-social-names,
.social-names {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 2.5vw, 28px);
    font-size: var(--fs-sm);
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── 7. Leaderboard Contact Button ── */
.leader-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 0, 0, 0.10);
    border: 2px solid #ff0000;
    border-radius: 50px;
    color: #ffffff;
    font-family: 'Play', sans-serif;
    font-size: clamp(0.75rem, 1.5vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 12px 26px;
    cursor: pointer;
    margin-top: 24px;
    width: 100%;
    justify-content: center;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    will-change: transform;
}

.leader-contact-btn:hover {
    background: #ff0000;
    box-shadow: 0 0 20px #ff0000, 0 0 40px rgba(255, 0, 0, 0.3);
    transform: translateY(-3px) scale(1.02);
    color: #fff;
}

.leader-contact-btn .fab {
    font-size: 1.1em;
    color: #25D366;
    /* WhatsApp green icon */
}

.leader-contact-btn:hover .fab {
    color: #fff;
}

/* ── 8. Swiper / Featured Card Glassmorphism ── */
.card2 {
    background: rgba(0, 0, 0, 0.50) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: transform 0.30s ease, box-shadow 0.30s ease, filter 0.30s ease;
    will-change: transform;
}

.card2:hover {
    transform: translateY(-10px);
    filter: brightness(1.12);
    box-shadow: 0 30px 50px rgba(255, 0, 0, 0.25) !important;
}

/* ── 9. Click Glitch-Ripple (injected via JS — CSS here) ── */
@keyframes clickRipple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    60% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes clickGlitch {
    0% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(-6px, 0);
        opacity: 1;
    }

    25% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(6px, 0);
    }

    50% {
        clip-path: inset(40% 0 30% 0);
        transform: translate(-4px, 0);
    }

    75% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(3px, 0);
    }

    100% {
        clip-path: inset(0% 0 100% 0);
        opacity: 0;
    }
}

.click-ripple {
    position: fixed;
    pointer-events: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #ff0000;
    box-shadow: 0 0 14px #ff0000;
    transform-origin: center;
    animation: clickRipple 0.55s ease-out forwards;
    z-index: 99998;
    will-change: transform, opacity;
}

.click-ripple::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.15);
    animation: clickGlitch 0.55s steps(1) forwards;
    will-change: clip-path, transform, opacity;
}

/* ══════════════════════════════════════════════
   BREAKPOINTS — 3-TIER SYSTEM
   ══════════════════════════════════════════════ */

/* ┌─────────────────────────────────────────────┐
   │  DESKTOP WIDE  (1440px +)                   │
   └─────────────────────────────────────────────┘ */
@media (min-width: 1440px) {
    .wrapper {
        width: min(1200px, 90vw);
    }

    .card1,
    .card1of1 {
        width: 1200px;
    }

    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1 {
        width: 1200px;
    }

    nav {
        padding: 8px 6%;
    }

    .heading h1 {
        font-size: clamp(3.5rem, 5vw, 5.5rem);
    }
}

/* ┌─────────────────────────────────────────────┐
   │  TABLET LANDSCAPE / SMALL DESKTOP           │
   │  (1024px – 1439px)                          │
   └─────────────────────────────────────────────┘ */
@media (max-width: 1200px) {
    .wrapper {
        width: clamp(340px, 95vw, 1000px);
    }

    .card1,
    .card1of1,
    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1 {
        width: 100%;
        margin-left: 0;
        height: auto;
        min-height: 360px;
        border-radius: 24px;
    }

    .ovimg1,
    .ovimg2,
    .ovimg3,
    .ovimg4,
    .ovimg5,
    .ovimg6 {
        width: 100%;
        margin-left: 0;
        object-fit: cover;
    }

    .card1 p,
    .card2of1 p,
    .card4of1 p {
        padding-right: 48%;
    }
}

/* ┌─────────────────────────────────────────────┐
   │  TABLET PORTRAIT  (768px – 1024px)          │
   └─────────────────────────────────────────────┘ */
@media (max-width: 1024px) {

    /* Nav */
    nav {
        padding: 8px 3%;
        flex-wrap: wrap;
        gap: 8px;
        border-radius: 0 0 18px 18px;
    }

    nav ul {
        order: 3;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 4px 0;
        gap: 0;
    }

    nav ul li {
        padding: 4px 8px;
    }

    nav ul li a {
        font-size: clamp(0.75rem, 1.8vw, 0.95rem);
    }

    .nav-live-container {
        order: 2;
        width: 200px;
        height: 42px;
    }

    /* Headings tablet */
    .card1 h2,
    .card2of1 h2,
    .card4of1 h2,
    .card1of1 h2,
    .card3of1 h2,
    .card5of1 h2 {
        font-size: clamp(1.4rem, 3.5vw, 2.2rem);
        padding-left: 12px;
        padding-right: 12px;
    }

    .card1 p,
    .card1of1 p,
    .card2of1 p,
    .card3of1 p,
    .card4of1 p,
    .card5of1 p {
        padding-left: 12px;
        padding-right: 12px;
        font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    }

    /* Featured swiper cards */
    .card2 {
        width: 100% !important;
        height: auto !important;
        min-height: 320px;
        flex-direction: column;
        padding: 24px 20px !important;
        border-radius: 20px 40px !important;
    }

    .card2 .game1 {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        padding: 0 !important;
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
    }

    .card2 .game1 img {
        width: 60%;
        max-width: 240px;
    }

    .card2 .details1 {
        margin-left: 0 !important;
        text-align: center !important;
        width: 100%;
    }

    /* Leaderboard */
    .leader-card-main,
    .leader-info-card {
        width: 100% !important;
        max-width: 480px;
        margin: 0 auto;
    }

    /* Footer grid */
    .footer-main {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px;
    }
}

/* ┌─────────────────────────────────────────────┐
   │  MOBILE  (under 768px)                      │
   └─────────────────────────────────────────────┘ */
@media (max-width: 768px) {

    /* Global padding */
    section,
    .wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Nav → Glassmorphism mobile menu */
    nav {
        padding: 8px 4%;
        gap: 6px;
        border-radius: 0 0 14px 14px;
        flex-wrap: wrap;
        align-items: center;
    }

    .logo {
        width: 100px;
        margin-left: 0;
    }

    nav ul {
        order: 4;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 12px;
        padding: 8px 4px;
        gap: 4px;
        border: 1px solid rgba(255, 0, 0, 0.15);
    }

    nav ul li {
        padding: 4px 8px;
    }

    nav ul li a {
        font-size: clamp(0.7rem, 3.5vw, 0.88rem);
        letter-spacing: 0.5px;
    }

    nav button {
        font-size: clamp(0.6rem, 2.8vw, 0.78rem);
        padding: 8px 14px;
        order: 3;
    }

    .nav-live-container {
        width: 100%;
        order: 5;
        height: 36px;
        border-radius: 10px;
        margin-top: 4px;
    }

    /* Headings mobile */
    #overview,
    .heading2,
    .heading3 {
        font-size: clamp(1.15rem, 5.5vw, 1.6rem) !important;
    }

    .news-heading {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    .leaderboard-main-title {
        font-size: clamp(1.2rem, 5.5vw, 1.8rem) !important;
        margin-top: 32px !important;
    }

    /* Welcome */
    .heading h1 {
        font-size: clamp(1.6rem, 8vw, 3rem) !important;
        padding: 0 10px;
        text-align: center;
    }

    .heading a {
        font-size: clamp(0.75rem, 3.5vw, 1rem);
        padding: 10px 24px;
        letter-spacing: 2px;
    }

    /* Hide decorative game logos on mobile */
    .stc1,
    .stc2,
    .stc3,
    .stc4,
    .stc5,
    .stc6,
    .stc7,
    .stc8,
    .stc9 {
        display: none;
    }

    /* Overview cards — 90vw, stacked */
    .card1,
    .card1of1,
    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1 {
        width: 90vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
        min-height: unset;
        border-radius: 16px;
        padding: 20px 16px;
    }

    .card1 h2,
    .card1of1 h2,
    .card2of1 h2,
    .card3of1 h2,
    .card4of1 h2,
    .card5of1 h2 {
        font-size: clamp(1.4rem, 6vw, 2.2rem);
        padding: 10px 12px 0;
    }

    .card1 p,
    .card1of1 p,
    .card2of1 p,
    .card3of1 p,
    .card4of1 p,
    .card5of1 p {
        padding: 0 12px 16px;
        font-size: clamp(0.82rem, 3.5vw, 1rem);
    }

    /* Background images on cards — hide to prevent overflow */
    .ovimg1,
    .ovimg2,
    .ovimg3,
    .ovimg4,
    .ovimg5,
    .ovimg6 {
        display: none;
    }

    /* Featured swiper cards */
    .card2 {
        width: 90vw !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 16px 24px !important;
        border-radius: 16px 40px !important;
    }

    .card2 .game1 {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
        margin-bottom: 14px;
    }

    .card2 .game1 img {
        width: 55%;
        max-width: 200px;
        height: auto;
        object-fit: contain;
    }

    .card2 .details1 {
        margin-left: 0 !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 8px;
    }

    .card2 .details1 .info {
        font-size: clamp(1rem, 5vw, 1.4rem) !important;
    }

    /* Leaderboard */
    .leader-card-main,
    .leader-info-card {
        width: 90vw !important;
        max-width: 400px;
        padding: 24px 16px !important;
        border-radius: 28px !important;
    }

    .leader-contact-btn {
        font-size: clamp(0.72rem, 3.2vw, 0.9rem);
        padding: 12px 20px;
        min-height: 48px;
        /* Touch target */
    }

    /* Popular section */
    .popular-section {
        margin: 40px auto;
        padding: 0 14px;
    }

    .popular-placeholder {
        padding: 40px 20px;
    }

    .placeholder-title {
        font-size: clamp(1rem, 5vw, 1.5rem);
    }

    .player-neon-frame {
        max-width: 100%;
    }

    .hud-btn {
        min-height: 44px;
        /* Touch target */
        min-width: 44px;
        font-size: clamp(0.7rem, 3vw, 0.85rem);
        padding: 8px 14px;
    }

    .hud-play {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .footer-brand,
    .footer-links,
    .footer-games,
    .footer-leadership {
        align-items: center;
        text-align: center;
    }

    .footer-menu,
    .footer-game-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .flat-social-icons,
    .footer-social-icons {
        justify-content: center;
        gap: clamp(14px, 4vw, 24px);
    }

    .flat-social-icon,
    .social-icon {
        font-size: clamp(1.4rem, 5.5vw, 1.8rem);
        min-height: 44px;
        /* Touch target */
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .flat-social-names,
    .social-names {
        gap: 12px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .ftr-txt,
    .footer-copyright {
        position: static !important;
        margin: 0 !important;
        font-size: clamp(0.7rem, 3vw, 0.85rem);
        text-align: center;
    }

    /* News */
    .news-card {
        min-width: unset;
        width: 90vw;
    }

    /* Sign-in modal */
    #overlay .active {
        padding-left: 50%;
    }
}

/* ┌─────────────────────────────────────────────┐
   │  MOBILE NARROW  (390px – 430px iPhones)     │
   └─────────────────────────────────────────────┘ */
@media (max-width: 430px) {
    nav ul li a {
        font-size: 0.72rem;
        letter-spacing: 0;
    }

    nav button {
        font-size: 0.62rem;
        padding: 7px 10px;
    }

    .heading h1 {
        font-size: clamp(1.4rem, 8.5vw, 2rem) !important;
    }

    .card1 h2,
    .card1of1 h2,
    .card2of1 h2,
    .card3of1 h2,
    .card4of1 h2,
    .card5of1 h2 {
        font-size: clamp(1.2rem, 6.5vw, 1.8rem);
    }

    .card2 .game1 img {
        width: 50%;
    }

    .leader-card-main,
    .leader-info-card {
        padding: 18px 12px !important;
        border-radius: 20px !important;
    }

    .leader-photo {
        width: 160px !important;
        height: 160px !important;
    }

    .leader-contact-btn {
        padding: 11px 18px;
    }

    .popular-placeholder {
        padding: 30px 14px;
    }

    .placeholder-icon {
        font-size: 44px;
    }

    .hud-btn {
        min-height: 46px;
        min-width: 46px;
    }

    .hud-play {
        width: 52px !important;
        height: 52px !important;
    }
}

/* ┌─────────────────────────────────────────────┐
   │  ULTRA-SMALL  (under 380px / iPhone SE)     │
   └─────────────────────────────────────────────┘ */
@media (max-width: 380px) {
    nav ul li {
        padding: 3px 5px;
    }

    nav ul li a {
        font-size: 0.67rem;
    }

    .heading h1 {
        font-size: clamp(1.2rem, 9vw, 1.7rem) !important;
    }

    .card2 .game1 img {
        width: 45%;
    }

    .footer-developer-bar {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ── 10. will-change Performance Hardening ── */
.card1,
.card1of1,
.card2of1,
.card3of1,
.card4of1,
.card5of1,
.card2,
.leader-card-main,
.leader-info-card,
.nav-live-container,
.popular-placeholder,
.player-neon-frame,
.flat-social-icon,
.social-icon,
.leader-contact-btn,
.hud-btn,
.reveal {
    will-change: transform;
}

.no-live-text,
.placeholder-title,
.neonPulse,
#overview,
.heading2,
.heading3 {
    will-change: text-shadow;
}

/* ── 11. Cross-browser Compatibility ── */
/* Ensure backdrop-filter works in Safari */
@supports not (backdrop-filter: blur(1px)) {

    nav,
    .nav-live-container,
    .popular-placeholder,
    .card2 {
        background: rgba(0, 0, 0, 0.85) !important;
    }
}

/* aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 16/9) {
    .popular-iframe {
        height: 0;
        padding-bottom: 56.25%;
        /* 16:9 */
        position: relative;
    }

    .popular-iframe iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

/* ==============================================================
   CRITICAL LAYOUT FIX PATCH — Round 4
   Senior FE Engineer / Layout Specialist
   Constraint: graphics / logic / layout ONLY.
   ============================================================== */

/* ── 1. ROOT FIX — Kills horizontal white-space / overflow bug ── */
html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    /* NEW: prevents absolutely-positioned children from
                           creating phantom horizontal scroll */
}

/* ── 2. DESKTOP CONTAINER — Centered, max 1280px ── */
.content-area {
    max-width: 100%;
    margin: 0 auto;
}

.wrapper {
    max-width: 1280px;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}

/* ── 3. FOOTER — True 100vw flush, zero margin ── */
footer,
.crimson-footer {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: 0;
    box-sizing: border-box;
}

/* Footer Red Line — spans 100% of viewport with no gaps */
.footer-red-line,
footer hr,
.ftr-line,
footer::before,
.crimson-footer::before {
    content: '';
    display: block;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border: none;
    border-top: 3px solid #ff0000;
    box-shadow: 0 0 18px #ff0000, 0 0 36px rgba(255, 0, 0, 0.25);
    margin-bottom: 0;
}

/* ── 4. OVERVIEW CARD IMAGES — object-fit: cover, no distortion ── */
.card1 img,
.card1of1 img,
.card2of1 img,
.card3of1 img,
.card4of1 img,
.card5of1 img,
.ovimg1,
.ovimg2,
.ovimg3,
.ovimg4,
.ovimg5,
.ovimg6 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 5. FEATURED SWIPER CARDS — Glassmorphism (blur 18px) + Float ── */
/* Override any inline background with glassmorphism */
.card2 {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    will-change: transform;
    animation: cardFloat 5s ease-in-out infinite;
}

/* Pause float on hover so the translateY hover takes over cleanly */
.card2:hover {
    animation-play-state: paused;
    transform: translateY(-14px) !important;
    filter: brightness(1.12);
    box-shadow: 0 36px 60px rgba(255, 0, 0, 0.3) !important;
}

@keyframes cardFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ── 6. SOCIAL ICONS — Refined hover (translateY + scale + neon glow) ── */
.flat-social-icon,
.social-icon {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    will-change: transform;
}

.flat-social-icon:hover,
.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 0 10px #ff0000) drop-shadow(0 0 20px rgba(255, 0, 0, 0.5));
    color: #ffffff !important;
}

/* ── 7. MOBILE CARD VISIBILITY — Restore images that were hidden ── */
/* On mobile we hide the ABSOLUTE-POSITIONED bg images (ovimg)
   but the card content/images should still show */
@media (max-width: 768px) {

    /* Container must not clip inner content unexpectedly */
    .card1,
    .card1of1,
    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1 {
        overflow: visible;
        display: block;
    }

    /* Make sure card inner images (non-bg) are always visible */
    .card1 img:not([class*="ovimg"]),
    .card1of1 img:not([class*="ovimg"]),
    .card2of1 img:not([class*="ovimg"]),
    .card3of1 img:not([class*="ovimg"]),
    .card4of1 img:not([class*="ovimg"]),
    .card5of1 img:not([class*="ovimg"]) {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* Swiper game images — show and center on mobile */
    .card2 .game1 {
        display: flex !important;
        justify-content: center;
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        padding: 0 !important;
        margin-bottom: 16px;
    }

    .card2 .game1 img {
        display: block !important;
        width: 55% !important;
        max-width: 220px;
        height: auto !important;
        object-fit: contain !important;
    }

    /* No float animation on mobile (save battery / GPU) */
    .card2 {
        animation: none;
    }

    /* Footer flush on mobile */
    footer,
    .crimson-footer {
        margin-left: 0;
        width: 100%;
    }

    .footer-red-line,
    footer hr,
    .ftr-line {
        width: 100%;
        margin-left: 0;
    }

    /* Social icons — larger touch targets */
    .flat-social-icon,
    .social-icon {
        min-height: 48px;
        min-width: 48px;
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    /* Wrapper padding tightened */
    .wrapper {
        width: calc(100% - 24px);
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ── 8. EXACT BREAKPOINT SPECS (overrides) ── */

/* Mobile narrow: 360px – 480px */
@media (min-width: 360px) and (max-width: 480px) {
    .wrapper {
        width: 90%;
        margin: 0 auto;
        padding: 0 12px;
    }

    .card1,
    .card1of1,
    .card2of1,
    .card3of1,
    .card4of1,
    .card5of1,
    .card2 {
        width: 90% !important;
        margin: 0 auto 20px !important;
    }

    nav ul li a {
        font-size: clamp(0.65rem, 3.8vw, 0.82rem);
    }

    .heading h1 {
        font-size: clamp(1.5rem, 8vw, 2.2rem) !important;
    }
}

/* Tablet: 768px – 1024px — dual column grid where applicable */
@media (min-width: 768px) and (max-width: 1024px) {
    .wrapper {
        max-width: 960px;
        width: calc(100% - 40px);
    }

    /* Leader cards side by side */
    #leader-card-tank,
    #leader-card-marksman,
    #leader-card-assassin,
    #leader-card-fighter,
    #leader-card-mage,
    #leader-card-supporter {
        grid-template-columns: 1fr 1fr;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .leader-card-main,
    .leader-info-card {
        width: calc(50% - 10px) !important;
        min-width: 280px;
    }

    /* Swiper cards — comfortably sized */
    .card2 {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
    }

    /* Touch targets */
    .leader-contact-btn,
    .hud-btn,
    nav button,
    .news-slide-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Desktop: 1140px – 1440px+ */
@media (min-width: 1140px) {
    .wrapper {
        max-width: 1280px;
        width: calc(100% - 80px);
    }

    /* Restore float animation on larger screens */
    .card2 {
        animation: cardFloat 5s ease-in-out infinite;
    }

    /* News cards — 3 across */
    .news-card {
        flex: 0 0 calc(33.333% - 20px);
    }
}

/* 4K / UHD (2560px+) */
@media (min-width: 2560px) {
    .wrapper {
        max-width: 1600px;
    }

    nav {
        padding: 10px 8%;
    }

    .heading h1 {
        font-size: clamp(4rem, 4vw, 7rem) !important;
    }
}

/* ── 9. NEWS SLIDER ARROW VISIBILITY HARDENING ── */
/* Ensure arrows are always accessible and on top */
.news-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: clamp(40px, 5vw, 54px);
    height: clamp(40px, 5vw, 54px);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid #ff0000;
    color: #ff0000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.4);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    will-change: transform;
}

.news-slide-btn.prev {
    left: 6px;
}

.news-slide-btn.next {
    right: 6px;
}

.news-slide-btn:hover {
    background: #ff0000;
    color: #000;
    box-shadow: 0 0 28px #ff0000;
    transform: translateY(-50%) scale(1.1);
}

/* ── 10. SCROLL PERFORMANCE — Layer promotion for animated elements ── */
.card2,
.card1,
.card1of1,
.card2of1,
.card3of1,
.card4of1,
.card5of1,
.leader-card-main,
.leader-info-card,
.news-card,
.flat-social-icon,
.social-icon,
.player-neon-frame {
    transform: translateZ(0);
    /* Force GPU layer */
}

/* ==============================================================
   CRIMSON UI REFACTOR — NEW FEATURES
   ============================================================== */

/* ── OVERVIEW 3D VERTICAL STACK SLIDER ── */
.overview-slider {
    position: relative;
    width: 100%;
    height: 620px;
    perspective: 1200px;
    overflow: visible;
    margin-bottom: 60px;
}

.overview-slider .card1,
.overview-slider .card1of1,
.overview-slider .card2of1,
.overview-slider .card3of1,
.overview-slider .card4of1,
.overview-slider .card5of1 {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 580px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    transform-origin: center center;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

/* Active card state */
.overview-slider .ov-slide-active {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* Next card (below, pushed back) */
.overview-slider .ov-slide-next {
    transform: translate3d(0, 100px, -150px) scale(0.8) !important;
    opacity: 0.5 !important;
    filter: blur(10px) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Previous card (above, pushed back) */
.overview-slider .ov-slide-prev {
    transform: translate3d(0, -100px, -150px) scale(0.8) !important;
    opacity: 0.5 !important;
    filter: blur(10px) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Hidden cards */
.overview-slider .ov-slide-hidden {
    transform: translate3d(0, 200px, -300px) scale(0.7) !important;
    opacity: 0 !important;
    filter: blur(10px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Overview card images — scale(1.15) + cover, disable parallax drift */
.overview-slider .ovimg1,
.overview-slider .ovimg2,
.overview-slider .ovimg3,
.overview-slider .ovimg4,
.overview-slider .ovimg5,
.overview-slider .ovimg6 {
    transform: scale(1.15) !important;
    display: block !important;
    object-fit: cover;
    object-position: center;
    animation: none !important;
    /* kill any Ken Burns / drift */
    transition: none !important;
    /* no parallax movement */
}

/* 3D Tilt + Glow on active card hover */
.overview-slider .ov-slide-active:hover {
    transform: perspective(900px) rotateX(2deg) rotateY(2deg) scale(1.02) !important;
    box-shadow:
        0 30px 60px rgba(255, 0, 0, 0.4),
        0 0 40px rgba(255, 0, 0, 0.15),
        inset 0 0 20px rgba(255, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Slider nav buttons on the left */
.overview-slider-nav {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 50;
}

.overview-slider-nav button {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #ff0000;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    color: #ff0000;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.3);
    padding: 0;
}

.overview-slider-nav button:hover {
    background: #ff0000;
    color: #000;
    box-shadow: 0 0 30px #ff0000;
    transform: scale(1.15);
    border-color: #ff0000;
}

/* Slider dot indicators */
.overview-slider-dots {
    position: absolute;
    left: -80px;
    top: calc(50% + 80px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
    align-items: center;
}

.overview-slider-dots .ov-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.overview-slider-dots .ov-dot.ov-dot-active {
    background: #ff0000;
    box-shadow: 0 0 10px #ff0000;
    transform: scale(1.3);
}

/* ── REDESIGNED SOCIAL ICONS — No circles, white icons, neon glow ── */
.footer-social-icons-new {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.social-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-link-item i {
    font-size: 28px;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-link-item span {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.social-link-item:hover {
    transform: translateY(-5px);
}

.social-link-item:hover i {
    color: #ffffff;
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 16px rgba(255, 0, 0, 0.5));
}

.social-link-item:hover span {
    color: #ff3333;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

/* ── CLICK RIPPLE / GLITCH EFFECT ── */
.click-ripple {
    position: fixed;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 99998;
    animation: clickRippleAnim 0.6s ease-out forwards;
}

.click-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 2px solid #ff0000;
    transform: translate(-50%, -50%);
    animation: rippleExpand 0.6s ease-out forwards;
    box-shadow: 0 0 10px #ff0000, 0 0 20px rgba(255, 0, 0, 0.4);
}

.click-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 30px;
    background: linear-gradient(180deg, #ff0000, transparent);
    transform: translate(-50%, -50%);
    animation: glitchLines 0.5s ease-out forwards;
    box-shadow:
        10px -5px 0 0 rgba(0, 255, 255, 0.4),
        -10px 5px 0 0 rgba(255, 0, 0, 0.4);
}

@keyframes clickRippleAnim {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes glitchLines {
    0% {
        opacity: 1;
        height: 0;
        box-shadow:
            10px -5px 0 0 rgba(0, 255, 255, 0.6),
            -10px 5px 0 0 rgba(255, 0, 0, 0.6);
    }

    30% {
        height: 40px;
        opacity: 0.8;
    }

    100% {
        height: 60px;
        opacity: 0;
        box-shadow:
            20px -10px 0 0 rgba(0, 255, 255, 0),
            -20px 10px 0 0 rgba(255, 0, 0, 0);
    }
}

/* ── POPULAR SECTION — Animated conic-gradient neon border ── */
@property --pop-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.popular-placeholder {
    position: relative;
    border: none !important;
    background: none !important;
    padding: 4px;
}

.popular-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 3px;
    background: conic-gradient(from var(--pop-angle),
            #ff0000 0%,
            #ff4444 15%,
            transparent 30%,
            transparent 70%,
            #ff4444 85%,
            #ff0000 100%);
    animation: popBorderSpin 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.2);
}

@keyframes popBorderSpin {
    to {
        --pop-angle: 360deg;
    }
}

.popular-placeholder .placeholder-inner {
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 60px 30px;
}

/* ── GLASSMORPHISM — Black Glass on Featured Cards ── */
.card2 {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* ── LEADER CONTACT BUTTON — WhatsApp ── */
.leader-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
    margin-top: 20px;
    font-family: 'Poppins', sans-serif;
}

.leader-contact-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
    background: linear-gradient(135deg, #2ecc71, #25D366);
}

.leader-contact-btn i {
    font-size: 20px;
}

/* ── FOOTER — True 100vw flush ── */
.crimson-footer {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    box-sizing: border-box;
}

/* ── DESKTOP-SCALE MOBILE VIEWPORT ── */
@media (max-width: 1024px) {
    .overview-slider-nav {
        left: -60px;
    }

    .overview-slider-nav button {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .overview-slider-dots {
        left: -60px;
    }
}

@media (max-width: 768px) {
    .overview-slider-nav {
        left: 10px;
        top: auto;
        bottom: -60px;
        transform: none;
        flex-direction: row;
    }

    .overview-slider-dots {
        left: auto;
        top: auto;
        bottom: -60px;
        right: 10px;
        flex-direction: row;
        transform: none;
    }

    .overview-slider {
        margin-bottom: 100px;
    }

    .footer-social-icons-new {
        gap: 24px;
    }

    .social-link-item i {
        font-size: 24px;
    }
}