@media(max-width:768px){

header .container{
flex-direction:column;
gap:15px;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:16px;
}

}

/* ===================================
   GAMEPORTAL RESPONSIVE STYLE
=================================== */



/* TABLET */

@media(max-width:1024px){



.container{

    width:92%;

}



/* NAVBAR */

.nav-container{

    flex-direction:column;

    padding:20px 0;

}



.navbar ul{

    gap:20px;

    flex-wrap:wrap;

    justify-content:center;

}






/* ABOUT */


.about-grid{


    grid-template-columns:1fr;


}




/* CARDS */


.card-grid{


    grid-template-columns:

    repeat(2,1fr);


}





/* GAME */


.game-grid{


    grid-template-columns:

    repeat(2,1fr);


}





/* BLOG */


.blog-grid{


    grid-template-columns:

    repeat(2,1fr);


}





/* FEATURE */


.featured-box{


    grid-template-columns:1fr;


}





/* CONTACT */


.contact-grid{


    grid-template-columns:1fr;


}





/* STATS */


.stats-grid{


    grid-template-columns:

    repeat(2,1fr);


}



}










/* MOBILE */

@media(max-width:600px){





.container{

    width:94%;

}






/* HEADER */


.header{


    position:relative;


}




.nav-container{


    min-height:auto;


}




.logo a{


    font-size:24px;


}





.navbar ul{


    flex-direction:column;


    gap:15px;


    text-align:center;


}






/* HERO */


.page-banner{


    padding:60px 0;


}



.page-banner h1{


    font-size:32px;


}



.page-banner p{


    font-size:15px;


}








/* TITLE */


.section-title{


    font-size:28px;


}








/* BUTTON */


.btn-primary{


    padding:

    10px 22px;


}








/* ABOUT */


.game-box{


    height:250px;


    font-size:80px;


}




.about-content h2{


    font-size:28px;


}








/* CARD */


.card-grid{


    grid-template-columns:

    1fr;


}




.info-card{


    padding:25px;


}








/* STAT */


.stats-grid{


    grid-template-columns:

    1fr;


}





.stat-box h3{


    font-size:32px;


}








/* SEARCH */


.search-box{


    flex-direction:column;


    gap:10px;


}



.search-box input{


    border-radius:10px;


}



.search-box button{


    width:100%;


    padding:15px;


}








/* CATEGORY */


.category-list{


    flex-direction:column;


}



.category-list button{


    width:100%;


}








/* GAME */


.game-grid{


    grid-template-columns:

    1fr;


}



.game-info{


    padding:20px;


}








/* BLOG */


.blog-grid{


    grid-template-columns:

    1fr;


}





.featured-box{


    padding:20px;


}








/* NEWSLETTER */


.subscribe-form{


    display:flex;


    flex-direction:column;


    gap:10px;


}



.subscribe-form input{


    width:100%;


}








/* CONTACT */


.contact-form{


    padding:20px;


}








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


    font-size:16px;


}








/* FOOTER */


.footer-grid{


    grid-template-columns:

    1fr;


    text-align:center;


}



}







/* SMALL MOBILE */

@media(max-width:380px){



.logo a{


    font-size:21px;


}



.page-banner h1{


    font-size:28px;


}



.game-box{


    height:200px;


    font-size:60px;


}



}

/* ===================================
   HOMEPAGE MOBILE
=================================== */


@media(max-width:600px){


.hero-content{

    padding:50px 0;

}



.hero h1{

    font-size:36px;

}



.hero p{

    font-size:16px;

}



.hero-button{

    flex-direction:column;

    align-items:flex-start;

}



.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

}



.game-card img{

    height:200px;

}



.subscribe-form{

    flex-direction:column;

}



.subscribe-form button{

    width:100%;

}


}

@media(max-width:768px){


.hero-content{

display:flex;

flex-direction:column;

text-align:center;

}



.hero-text,

.hero-image{

width:100%;

}



.hero-image img{

margin-top:30px;

}


}