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

body{
font-family:Arial,sans-serif;
background:#0f172a;
color:#fff;
line-height:1.6;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

header{
background:#111827;
padding:20px 0;
position:sticky;
top:0;
z-index:1000;
}

header .container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:28px;
font-weight:bold;
color:#38bdf8;
}

nav ul{
display:flex;
list-style:none;
gap:25px;
}

nav a{
color:#fff;
text-decoration:none;
transition:.3s;
}

nav a:hover{
color:#38bdf8;
}

.hero{
padding:120px 0;
text-align:center;
background:linear-gradient(
135deg,
#0f172a,
#1e293b
);
}

.hero h1{
font-size:56px;
margin-bottom:20px;
}

.hero p{
font-size:20px;
margin-bottom:30px;
}

.btn{
display:inline-block;
padding:15px 30px;
background:#38bdf8;
color:#fff;
text-decoration:none;
border-radius:8px;
}

.placeholder{
padding:80px 0;
text-align:center;
}

footer{
padding:30px 0;
background:#111827;
text-align:center;
}

/* ===================================
   GAMEPORTAL MAIN STYLE
   Gaming Dark Theme
=================================== */


/* RESET */

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    'Segoe UI',
    Arial,
    sans-serif;

    background:#080b18;

    color:#ffffff;

    line-height:1.6;

}




img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}






/* CONTAINER */


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}





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


.header{

    position:sticky;

    top:0;

    z-index:1000;

    background:

    rgba(8,11,24,0.92);

    backdrop-filter:blur(12px);

    border-bottom:

    1px solid rgba(0,255,255,0.15);

}




.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:75px;

}




.logo a{

    font-size:28px;

    font-weight:800;

    color:#00eaff;

    text-shadow:

    0 0 15px #00eaff;

}






.navbar ul{

    display:flex;

    gap:30px;

}




.navbar a{

    color:#ddd;

    font-weight:600;

    transition:.3s;

}




.navbar a:hover,
.navbar a.active{


    color:#00eaff;


}








/* ===================================
   HERO / PAGE BANNER
=================================== */


.page-banner{


    padding:

    90px 0;


    text-align:center;


    background:


    linear-gradient(

    135deg,

    #0d1125,

    #151044

    );


}




.page-banner h1{


    font-size:48px;


    margin-bottom:15px;


    color:#00eaff;


    text-shadow:

    0 0 20px #00eaff;


}



.page-banner p{

    color:#ccc;

    font-size:18px;

}







/* ===================================
   BUTTON
=================================== */


.btn-primary{


    display:inline-block;


    padding:

    12px 28px;


    border-radius:30px;


    background:

    linear-gradient(

    90deg,

    #00eaff,

    #8a2cff

    );


    color:white;


    font-weight:700;


    margin-top:15px;


    transition:.3s;


}



.btn-primary:hover{


    transform:translateY(-4px);


    box-shadow:

    0 0 25px #00eaff;


}








/* ===================================
   SECTION TITLE
=================================== */


.section-title{


    text-align:center;


    font-size:36px;


    margin-bottom:40px;


    color:#fff;


}






/* ===================================
   ABOUT
=================================== */


.about-section{

    padding:80px 0;

}



.about-grid{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:40px;


    align-items:center;


}



.game-box{


    height:350px;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:120px;


    background:


    linear-gradient(

    135deg,

    #111936,

    #24135b

    );


    border-radius:20px;


    box-shadow:

    0 0 30px rgba(0,234,255,.2);


}





.about-content h2{

    font-size:36px;

    margin-bottom:20px;

}



.about-content p{

    color:#ccc;

    margin-bottom:15px;

}







/* ===================================
   CARDS
=================================== */


.card-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}




.info-card{


    padding:30px;


    background:


    rgba(255,255,255,.05);


    border-radius:18px;


    border:

    1px solid rgba(255,255,255,.1);


    transition:.3s;


}





.info-card:hover{


    transform:translateY(-8px);


    border-color:#00eaff;


    box-shadow:

    0 0 25px rgba(0,234,255,.2);


}



.info-card .icon{


    font-size:45px;


    margin-bottom:15px;


}







/* ===================================
   STATISTICS
=================================== */


.stats-section{


    padding:70px 0;


    background:#050713;


}



.stats-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:20px;


}



.stat-box{


    text-align:center;


    padding:30px;


    background:#10152d;


    border-radius:15px;


}



.stat-box h3{


    font-size:40px;


    color:#00eaff;


}







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



.game-search{


    padding:40px 0;


}




.search-box{


    display:flex;


    max-width:700px;


    margin:auto;


}



.search-box input{


    flex:1;


    padding:15px;


    background:#10152d;


    border:none;


    color:white;


    border-radius:10px 0 0 10px;


}





.search-box button{


    width:120px;


    border:none;


    background:#00eaff;


    font-weight:bold;


}






.category-section{


    padding:40px 0;


}



.category-list{


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;


}



.category-list button{


    padding:12px 25px;


    border-radius:30px;


    border:

    1px solid #00eaff;


    background:transparent;


    color:white;


}







.game-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



.game-card{


    background:#11162d;


    border-radius:18px;


    overflow:hidden;


    transition:.3s;


}



.game-card:hover{


    transform:translateY(-10px);


    box-shadow:

    0 0 30px rgba(138,44,255,.4);


}



.game-info{


    padding:25px;


}



.game-info p{


    color:#aaa;


}





.rating{


    color:#ffd700;


    margin-top:10px;


}








/* ===================================
   BLOG
=================================== */


.featured-blog{


    padding:70px 0;


}



.featured-box{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:30px;


    background:#11162d;


    padding:30px;


    border-radius:20px;


}




.featured-content span{


    color:#00eaff;


}





.blog-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}



.blog-card{


    background:#11162d;


    border-radius:15px;


    overflow:hidden;


}



.blog-content{


    padding:20px;


}



.blog-content small{

    color:#00eaff;

}








/* ===================================
   NEWSLETTER
=================================== */


.newsletter{


    padding:70px 0;


}



.newsletter-box{


    text-align:center;


    background:#11162d;


    padding:40px;


    border-radius:20px;


}



.subscribe-form{


    margin-top:20px;


}



.subscribe-form input{


    padding:15px;


    width:300px;


}








/* ===================================
   CONTACT
=================================== */


.contact-section{


    padding:80px 0;


}




.contact-grid{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:40px;


}



.contact-item{


    margin-top:25px;


}



.contact-form{


    background:#11162d;


    padding:30px;


    border-radius:20px;


}




.form-group{


    margin-bottom:20px;


}



.form-group input,
.form-group textarea{


    width:100%;


    padding:15px;


    background:#080b18;


    border:none;


    color:white;


}








/* ===================================
   FAQ
=================================== */


.faq-section{


    padding:70px 0;


}



.faq-box{


    background:#11162d;


    padding:25px;


    margin-bottom:20px;


    border-radius:15px;


}



.faq-box h3{


    color:#00eaff;


}







/* ===================================
   FOOTER
=================================== */


.footer{


    padding:50px 0 20px;


    background:#050713;


}



.footer-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



.footer h3{


    color:#00eaff;


    margin-bottom:15px;


}



.footer p,
.footer li{


    color:#aaa;


}



.copyright{


    margin-top:30px;


    padding-top:20px;


    text-align:center;


    border-top:

    1px solid #222;


    color:#777;


}







/* ANIMATION */


@keyframes glow{


    from{

        opacity:.7;

    }


    to{

        opacity:1;

    }

}

.hero,
.page-banner{

background-image:
linear-gradient(
rgba(8,11,24,.75),
rgba(8,11,24,.9)
),
url("../images/banner/hero-bg.jpg");

background-size:
cover;

background-position:
center;

}

.game-card img{

width:100%;

height:220px;

object-fit:cover;

}

/* ===================================
   HOMEPAGE PREMIUM GAMING STYLE
=================================== */



/* HERO CONTENT */

.hero-content{

    max-width:750px;

    padding:80px 0;

}



.hero-tag{


    display:inline-block;


    padding:8px 18px;


    border-radius:30px;


    background:

    rgba(0,234,255,.15);


    border:

    1px solid #00eaff;


    color:#00eaff;


    font-size:14px;


    font-weight:700;


    margin-bottom:20px;


}




.hero h1{


    font-size:60px;


    line-height:1.15;


    margin-bottom:25px;


    color:#fff;


    text-shadow:

    0 0 25px rgba(0,234,255,.4);


}




.hero p{


    font-size:20px;


    color:#cccccc;


    max-width:650px;


    margin-bottom:30px;


}





/* HERO BUTTON */

.hero-button{


    display:flex;


    gap:20px;


    align-items:center;


}




.btn-secondary{


    display:inline-block;


    padding:12px 28px;


    border-radius:30px;


    border:

    1px solid #00eaff;


    color:#00eaff;


    font-weight:700;


    transition:.3s;


}




.btn-secondary:hover{


    background:#00eaff;


    color:#080b18;


}







/* HERO ANIMATION */


.hero-content{


    animation:

    heroFade 1s ease;


}



@keyframes heroFade{


from{


opacity:0;


transform:

translateY(40px);


}



to{


opacity:1;


transform:

translateY(0);


}


}








/* GAME CARD HOMEPAGE */


.games-section{


    padding:80px 0;


}




.game-card img{


    width:100%;


    height:230px;


    object-fit:cover;


}






.game-card:hover img{


    transform:scale(1.05);


}




.game-card img{


    transition:.5s;


}






/* CATEGORY STYLE */


.category-section{


    padding:70px 0;


    background:#050713;


}







.category-list button{


    cursor:pointer;


    transition:.3s;


}



.category-list button:hover{


    background:#00eaff;


    color:#080b18;


}







/* BLOG SECTION */


.blog-section{


    padding:80px 0;


}






.blog-card img{


    width:100%;


    height:200px;


    object-fit:cover;


}






.blog-card:hover{


    transform:

    translateY(-8px);


}






.blog-card{


    transition:.3s;


}








.blog-content h3{


    margin-bottom:10px;


}



.blog-content a{


    color:#00eaff;


    font-weight:600;


}







/* STAT PREMIUM */


.stat-box{


    border:

    1px solid rgba(0,234,255,.15);


    transition:.3s;


}





.stat-box:hover{


    transform:

    translateY(-8px);


    box-shadow:

    0 0 25px rgba(0,234,255,.2);


}






.stat-box p{


    color:#aaa;


}









/* NEWSLETTER */


.newsletter-box{


    border:

    1px solid rgba(0,234,255,.2);


}





.subscribe-form{


    display:flex;


    justify-content:center;


    gap:10px;


}





.subscribe-form input{


    border-radius:30px;


    border:

    1px solid #333;


    background:#080b18;


    color:white;


}






.subscribe-form button{


    padding:

    12px 30px;


    border-radius:30px;


    border:none;


    background:#00eaff;


    font-weight:700;


    cursor:pointer;


}







.subscribe-form button:hover{


    box-shadow:

    0 0 20px #00eaff;


}







/* IMAGE EFFECT */


.game-card,
.blog-card{


    overflow:hidden;


}





/* GLOW SECTION */


.games-section h2,
.blog-section h2{


    text-shadow:

    0 0 15px rgba(0,234,255,.3);


}

/* ===================================
   BLOG PREMIUM STYLE
=================================== */


.featured-box img{

width:100%;

height:350px;

object-fit:cover;

border-radius:15px;

}



.featured-content span{

color:#00eaff;

font-weight:700;

}



.featured-content h2{

font-size:32px;

margin:15px 0;

}



.blog-card{

background:#11162d;

}



.blog-content small{

color:#00eaff;

font-weight:700;

}



.blog-content h3{

font-size:22px;

margin:10px 0;

}



.blog-content p{

color:#aaa;

}

/* ===================================
   ABOUT PAGE STYLE
=================================== */


.cards-section{

padding:80px 0;

}



.about-content h2{

color:#00eaff;

}



.about-content p{

line-height:1.8;

}



.info-card h3{

margin-bottom:10px;

}



.info-card p{

color:#aaa;

}

/* ===================================
   CONTACT PAGE STYLE
=================================== */


.contact-section{

padding:80px 0;

}



.contact-grid h2{

margin-bottom:20px;

color:#00eaff;

}



.contact-item{

padding:15px 0;

border-bottom:

1px solid rgba(255,255,255,.08);

}



.contact-item h3{

color:white;

margin-bottom:5px;

}



.contact-item p{

color:#aaa;

}



.contact-form h2{

margin-bottom:25px;

}



.contact-form button{

border:none;

cursor:pointer;

}



.faq-box{

transition:.3s;

}



.faq-box:hover{

border:

1px solid #00eaff;

}

/* HERO IMAGE */

.hero-content{

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;

}



.hero-text{

width:50%;

}



.hero-image{

width:50%;

}



.hero-image img{

width:100%;

max-width:600px;

border-radius:25px;

object-fit:cover;

box-shadow:
0 20px 50px rgba(0,0,0,.45);

}