/* =================================

KARTEL62 PC GAMING
RESPONSIVE CSS

================================= */



@media(max-width:1100px){



.header{

padding:20px 5%;

}



nav{

gap:15px;

}



.hero{

padding:80px 5%;

}



.hero-text h1{

font-size:55px;

}



.feature{

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

}



.product-grid{

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

}


}









@media(max-width:768px){



/* HEADER */


.header{

flex-direction:column;

gap:25px;

}



.logo{

text-align:center;

}



nav{


width:100%;

justify-content:center;

flex-wrap:wrap;


}



.btn-header{

display:none;

}







/* HERO */


.hero{


flex-direction:column;

padding:60px 20px;

text-align:center;


}



.hero-text{


width:100%;


}



.hero-text h1{


font-size:42px;


}



.hero-text p{


font-size:16px;


}



.hero-button{


justify-content:center;

flex-direction:column;

align-items:center;


}



.hero-button a{


width:90%;


}




.hero-image{


width:100%;


}









/* FEATURE */


.feature{


padding:50px 20px;

grid-template-columns:

1fr;


}




.feature-box{


padding:30px;


}









/* PRODUCT */


.products{


padding:60px 20px;


}




.section-title h2{


font-size:35px;


}



.product-grid{


grid-template-columns:

1fr;


}




.card{


padding:20px;


}









/* ABOUT */


.about-home{


padding:60px 20px;


}




.about-home h2{


font-size:34px;


}









/* SETUP */


.setup-section{


padding:50px 20px;


}



.setup-section h2{


font-size:35px;


}



.setup-section img{


width:100%;


border-radius:20px;


}





}









@media(max-width:480px){



.hero-text h1{


font-size:35px;


}



.logo{


font-size:24px;


}



nav a{


font-size:14px;


}



.feature-box h3{


font-size:32px;


}



.card h3{


font-size:21px;


}



}

@media(max-width:768px){


.product-detail{

flex-direction:column;

padding:60px 20px;

}



.detail-image,
.detail-info{

width:100%;

}



.detail-info h1{

font-size:35px;

}



.spec-grid{

grid-template-columns:1fr;

}



.performance-grid{

grid-template-columns:1fr;

}


}

@media(max-width:768px){


.builder-section{

padding:60px 20px;

}



.builder-grid{


grid-template-columns:

1fr;


}



.builder-card{


padding:25px;


}


}

@media(max-width:768px){


.promo-grid{


grid-template-columns:

1fr;


}


}

@media(max-width:768px){


.review-grid{


grid-template-columns:

1fr;


}


}

@media(max-width:768px){


.service-grid{


grid-template-columns:

1fr;


}



.about-section{


padding:60px 20px;


}


}

@media(max-width:768px){


.contact-grid{


grid-template-columns:

1fr;


}



.contact-form,
.contact-info{


padding:25px;


}



.cta-section h2{


font-size:30px;


}


}

@media(max-width:768px){


.blog-grid{


grid-template-columns:

1fr;


}



.blog-card img{


height:180px;


}


}