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

body{
    font-family:'Poppins',sans-serif;
    background:#0f0f0f;
    color:#fff;
    overflow-x:hidden;
}


/* =========================
   HEADER
========================= */

header{

    width:100%;

    padding:20px 7%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    position:absolute;

    top:0;
    left:0;

    z-index:100;

}

.logo{

    font-size:32px;
    font-weight:700;

    color:#00ffcc;

}

nav{

    display:flex;
    gap:30px;

}

nav a{

    color:#fff;

    text-decoration:none;

    font-size:16px;

    transition:0.3s;

}

nav a:hover{

    color:#00ffcc;

}


/* =========================
   HERO
========================= */

.hero{

    width:100%;
    height:75vh;

    background:
    linear-gradient(rgba(0,0,0,0.7),
    rgba(0,0,0,0.7)),
    url('../images/hero.jpg');

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:0 20px;

}

.hero-content h1{

    font-size:65px;

    margin-bottom:20px;

}

.hero-content p{

    font-size:20px;

    color:#ccc;

    margin-bottom:35px;

}

.hero-btn{

    display:inline-block;

    padding:15px 35px;

    background:#00ffcc;

    color:#000;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:0.3s;

}

.hero-btn:hover{

    transform:translateY(-5px);

}


/* =========================
   SEARCH
========================= */

.search-wrapper{

    width:100%;

    display:flex;
    justify-content:center;

    margin-top:-35px;

    position:relative;

    z-index:20;

}

.search-wrapper form{

    width:700px;

    background:#1a1a1a;

    padding:15px;

    border-radius:60px;

    display:flex;

    box-shadow:0 10px 30px rgba(0,0,0,0.4);

}

.search-wrapper input{

    width:100%;

    background:none;

    border:none;
    outline:none;

    color:#fff;

    font-size:16px;

    padding:0 15px;

}

.search-wrapper button{

    padding:14px 30px;

    border:none;

    background:#00ffcc;

    border-radius:50px;

    font-weight:600;

    cursor:pointer;

}


/* =========================
   PREMIUM GAMES SECTION
========================= */

.games-section{

    padding:100px 5%;

    background:
    radial-gradient(circle at top left,#071421 0%,#050505 45%),
    #050505;

    overflow:hidden;

}


/* TITLE */

.section-title{

    font-size:58px;

    font-weight:800;

    text-align:center;

    margin-bottom:55px;

    color:#fff;

    letter-spacing:1px;

    position:relative;

}


.section-title::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-16px;

    transform:translateX(-50%);

    width:90px;
    height:4px;

    border-radius:50px;

    background:
    linear-gradient(90deg,#00ffcc,#00c3ff);

}


/* GRID */

/* =========================
   GAMES GRID
========================= */

.games-grid{

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:18px;

}


/* CARD */

.game-card{
    background:
    linear-gradient(
    145deg,
    rgba(20,20,20,0.96),
    rgba(10,10,10,0.96)
    );

    border-radius:14px;

    overflow:hidden;

    position:relative;

    transition:0.3s ease;

    border:
    1px solid rgba(255,255,255,0.04);

    box-shadow:
    0 4px 14px rgba(0,0,0,0.25);

}

/* HOVER */

.game-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,255,204,0.18);

}



/* GLOW BORDER */

.game-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,204,0.8),
    rgba(0,102,255,0.6),
    transparent 70%
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

/* IMAGE */

.game-thumb{

    width:100%;

    height:100px;

    overflow:hidden;

    background:#111;

    position:relative;

}

.game-thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.5s ease;

}


.game-card:hover .game-thumb img{

    transform:scale(1.06);

}


/* OVERLAY */

.game-thumb::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.6),
    transparent 60%
    );

}



/* CONTENT */

.game-content{

    padding:10px;

}


/* TITLE */

.game-content h3{

    font-size:14px;

    font-weight:600;

    color:#fff;

    margin-bottom:2px;

    line-height:1.3;

    min-height:50px;

}


/* BUTTON */

.play-btn{

    width:100%;

    height:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:8px;

    text-decoration:none;

    background:
    linear-gradient(
    135deg,
    #00ffcc,
    #00c3ff
    );

    color:#000;

    font-size:12px;

    font-weight:700;

    transition:0.3s ease;

    position:relative;

    overflow:hidden;

}



/* SHINE EFFECT */

.play-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:70%;
    height:100%;

    background:
    rgba(255,255,255,0.25);

    transform:skewX(-25deg);

    transition:0.6s;

}

.play-btn:hover::before{

    left:130%;

}


/* BUTTON HOVER */

.play-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 25px rgba(0,255,204,0.35);

}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#00ffcc;

    border-radius:20px;

}

/* =========================
   PREMIUM MOBILE UI
========================= */

@media(max-width:768px){

    body{
        overflow-x:hidden;
    }

    /* HEADER */

    header{

        padding:14px 5%;

    }

    .logo{

        font-size:24px;

    }

    nav{
        display:none;
    }


    /* HERO */

    .hero{

        height:65vh;

        padding:0 18px;

    }

    .hero-content h1{

        font-size:34px;

        line-height:1.2;

        margin-bottom:14px;

    }

    .hero-content p{

        font-size:14px;

        margin-bottom:22px;

        color:#bbb;

    }

    .hero-btn{

        padding:11px 24px;

        font-size:13px;

        border-radius:40px;

    }


    /* SEARCH */

    .search-wrapper{

        margin-top:-24px;

        padding:0 12px;

    }

    .search-wrapper form{

        width:100%;

        padding:8px;

        border-radius:18px;

        background:rgba(25,25,25,0.95);

        backdrop-filter:blur(10px);

    }

    .search-wrapper input{

        font-size:13px;

        padding:0 10px;

    }

    .search-wrapper button{

        padding:10px 16px;

        font-size:12px;

        border-radius:12px;

    }


    /* GAMES SECTION */

    .games-section{

        padding:38px 12px 100px;

    }

    .section-title{

        font-size:24px;

        margin-bottom:28px;

    }

    .section-title::after{

        width:70px;
        height:3px;

        bottom:-10px;

    }


    /* GRID */

    .games-grid{

    grid-template-columns:
    repeat(2,1fr);

    gap:10px;

}


    /* CARD */

    .game-card{

        border-radius:14px;

        background:
        linear-gradient(
        145deg,
        rgba(25,25,25,0.95),
        rgba(15,15,15,0.95)
        );

        backdrop-filter:blur(10px);

        box-shadow:
        0 8px 20px rgba(0,0,0,0.35);

    }

    .game-card:hover{

        transform:translateY(-4px);

    }


    /* IMAGE */

    .game-thumb{

        height:100px;

        border-bottom:
        1px solid rgba(255,255,255,0.05);

    }

    .game-thumb img{

        border-radius:0;

    }


    /* CONTENT */

    .game-content{

        padding:10px;

    }

    .game-content h3{

        font-size:12px;

        line-height:1.4;

        height:34px;

        margin-bottom:8px;

        font-weight:600;

        color:#f5f5f5;

    }


    /* BUTTON */

    .play-btn{

        height:34px;

        font-size:11px;

        border-radius:9px;

        font-weight:700;

        letter-spacing:0.3px;

        padding:0;

    }

    .play-btn:hover{

        transform:none;

    }


    /* BOTTOM BANNER */

    .bottom-banner{

        height:75px;

    }

    .signin-btn{

        margin-top:55px;

        padding:8px 18px;

        font-size:11px;

        border-radius:30px;

    }


    /* POPUP */

    .popup-box{

        width:92%;

        border-radius:18px;

    }

    .popup-btn{

        margin-top:70px;

        padding:10px 22px;

        font-size:11px;

    }

    .close-popup{

        width:30px;
        height:30px;

        font-size:16px;

    }

}