/* =========================
   GLOBAL RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#120f02;
    color:#fff;
}


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

.header{

    height:75px;
    width:100%;
    background:#201900;

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

    padding:0 30px;

    position:sticky;
    top:0;
    z-index:1000;

    border-bottom:1px solid #4c3c00;

}


/* LOGO */

.logo{

    font-size:32px;
    font-weight:900;
    letter-spacing:1px;

}


.blue{
    color:#2196f3;
}


.gold{
    color:#ffc107;
}



/* NAVIGATION */

.navbar{

    display:flex;
    gap:15px;

}


.navbar a{

    color:white;
    text-decoration:none;

    padding:12px 20px;

    border-radius:30px;

    font-size:16px;

    transition:.3s;

}


.navbar a:hover,
.navbar .active{

    background:#ffc107;
    color:#000;

}



/* LOGIN BUTTON */

.login-btn{

    background:#ffc107;

    border:none;

    padding:13px 30px;

    border-radius:30px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}


.login-btn:hover{

    background:#fff;

}



/* =========================
   MAIN CONTAINER
========================= */


.container{

    display:flex;

}



/* =========================
   SIDEBAR
========================= */


.sidebar{

    width:260px;

    background:#fff;

    color:#222;

    min-height:calc(100vh - 75px);

}


.sidebar h3{

    padding:20px;

    background:#f5f5f5;

    color:#111;

    font-size:22px;

}



.sidebar ul{

    list-style:none;

}



.sidebar li{

    padding:18px 20px;

    font-size:18px;

    border-bottom:1px solid #ddd;

    cursor:pointer;

    display:flex;

    gap:15px;

    align-items:center;

    transition:.3s;

}



.sidebar li:hover{

    background:#ffc107;

    color:#000;

}



/* =========================
   CONTENT
========================= */


.content{

    flex:1;

    padding:25px;

}



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


.hero{

    width:100%;

}



.slide{

    height:300px;

    border-radius:25px;

    overflow:hidden;

    background:

    linear-gradient(
        120deg,
        #850000,
        #240000
    );

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:40px;

}



.slide .text h1{

    font-size:45px;

    color:#fff;

}



.slide .text p{

    margin-top:15px;

    font-size:18px;

}



.slide button{

    margin-top:25px;

    padding:14px 35px;

    border:none;

    border-radius:30px;

    background:#ffc107;

    font-size:17px;

    font-weight:bold;

}



.slide img{

    width:40%;

    max-height:250px;

    object-fit:contain;

}




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


.games{

    margin-top:40px;

}



.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:2px solid #d5a900;

    padding-bottom:10px;

    margin-bottom:20px;

}



.section-title h2{

    font-size:35px;

    font-style:italic;

}



.section-title a{

    color:#ffc107;

    text-decoration:none;

}




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


.card-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:20px;

}



.card{

    background:#211a00;

    border-radius:20px;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;

    border:1px solid #453700;

}



.card img{

    width:100%;

    height:170px;

    object-fit:cover;

}



.card h4{

    padding:15px;

    font-size:18px;

}



.card:hover{

    transform:translateY(-8px);

    border-color:#ffc107;

    box-shadow:

    0 10px 25px

    rgba(255,193,7,.3);

}



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


footer{

    background:#201900;

    text-align:center;

    padding:20px;

    color:#aaa;

}
li a {
    text-decoration: none;
    color: inherit;
}

li a:hover {
    color: #007bff; /* Optional hover color */
}