/*==========================================================
TABLET
==========================================================*/

@media (max-width:992px){

.header-container{

flex-wrap:wrap;

justify-content:center;

padding:15px 0;

gap:20px;

}

.main-nav ul{

gap:20px;

flex-wrap:wrap;

justify-content:center;

}

.header-search{

width:100%;

display:flex;

justify-content:center;

}

}

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

@media (max-width:768px){

.site-header{

position:relative;

}

.header-container{

flex-direction:column;

align-items:center;

padding:20px 0;

gap:20px;

}

.logo-area{

text-align:center;

}

.logo-link{

flex-direction:column;

gap:10px;

}

.logo-area h1{

font-size:26px;

}

.logo-area p{

font-size:13px;

}

.main-nav{

width:100%;

}

.main-nav ul{

flex-direction:column;

gap:18px;

}

.main-nav a{

display:block;

padding:8px;

}

.header-search{

width:100%;

}

.header-search form{

width:100%;

}

.header-search input{

width:100%;

}

}

/*==========================================================
SMALL MOBILE
==========================================================*/

@media (max-width:480px){

.site-logo{

width:55px;

height:55px;

}

.logo-area h1{

font-size:22px;

}

.header-search button{

width:44px;

height:44px;

}

}

/*==========================================================
MOBILE MENU
==========================================================*/

@media(max-width:768px){

.menu-toggle{

display:block;

}

.main-nav{

display:none;

width:100%;

}

.main-nav.active{

display:block;

}

.main-nav ul{

flex-direction:column;

gap:15px;

padding:20px 0;

}

}

/*==========================================================
LATEST PC BLOGS - MOBILE
==========================================================*/

@media (max-width:768px){

    .card-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .blog-card{
        width:100%;
    }

    .blog-card img{
        width:100%;
        height:200px;
        object-fit:cover;
    }

    .blog-content{
        padding:20px;
    }

    .blog-content h3{
        font-size:22px;
        line-height:1.4;
        margin-bottom:12px;
    }

    .blog-content p{
        font-size:15px;
        line-height:1.7;
        margin-bottom:18px;
    }

}

/*==========================================================
BROWSE CATEGORIES RESPONSIVE
==========================================================*/

@media (max-width:992px){

    .category-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .category-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .category-card{
        padding:25px;
    }

    .category-card i{
        font-size:40px;
    }

}

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

@media (max-width:768px){

    .about-home{
        grid-template-columns:1fr;
        text-align:center;
        padding:30px 20px;
        gap:30px;
    }

    .about-right{
        order:-1;
    }

    .about-right i{
        font-size:120px;
    }

    .about-home h2{
        font-size:30px;
    }

}

/*==========================================================
BLOGS PAGE
==========================================================*/

@media (max-width:768px){

    .featured-blog{

        grid-template-columns:1fr;

        gap:25px;

        padding:20px;

    }

    .featured-image img{

        height:220px;

        object-fit:cover;

    }

    .featured-content h2{

        font-size:28px;

    }

}

@media (max-width:768px){

    .card-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .blog-card{

        width:100%;

    }

    .blog-card img{

        height:180px;

        object-fit:cover;

    }

    .blog-content{

        padding:18px;

    }

    .blog-content h3{

        font-size:20px;

        line-height:1.4;

    }

    .blog-content p{

        font-size:15px;

        margin-bottom:15px;

    }

}

@media(max-width:768px){

.blog-search{

flex-direction:column;

gap:15px;

}

.blog-search input{

border-radius:12px;

border:1px solid #ddd;

}

.blog-search button{

padding:15px;

border-radius:12px;

}

}

@media(max-width:768px){

.hero{

    padding:25px 0;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

    padding:25px;

    gap:25px;

}

.hero img{

    max-width:260px;

    margin:auto;

}

.hero-tags{

    justify-content:center;

}

.hero h2{

    font-size:34px;

}

}