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

KARTEL62 PC GAMING
GAMING BEAST STYLE CSS

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


*{

margin:0;

padding:0;

box-sizing:border-box;

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

}



:root{


--bg:#050505;

--card:#101010;

--dark:#080808;

--neon:#00ffff;

--purple:#8b5cf6;

--text:#ffffff;

--gray:#9ca3af;


}




body{


background:var(--bg);

color:white;

overflow-x:hidden;


}






a{

text-decoration:none;

color:white;

}






/* HEADER */


.header{


width:100%;

padding:25px 8%;

display:flex;

align-items:center;

justify-content:space-between;

background:#050505;

border-bottom:1px solid #222;

position:sticky;

top:0;

z-index:99;


}





.logo{


font-size:28px;

font-weight:800;

letter-spacing:1px;

color:white;


}



.logo span{


display:block;

font-size:13px;

color:var(--neon);

letter-spacing:3px;


}





nav{


display:flex;

gap:25px;


}



nav a{


color:#bbb;

transition:.3s;

font-weight:500;


}



nav a:hover{


color:var(--neon);

text-shadow:
0 0 10px var(--neon);


}





.btn-header{


background:
linear-gradient(
45deg,
var(--neon),
var(--purple)
);


padding:14px 30px;

border-radius:30px;

font-weight:bold;

color:#000;


transition:.3s;


}




.btn-header:hover{


transform:translateY(-3px);

box-shadow:
0 0 25px var(--neon);


}









/* HERO */


.hero{


padding:100px 8%;

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;


}




.hero-text{


width:50%;


}





.hero-text h1{


font-size:70px;

line-height:1.05;

font-weight:900;


background:
linear-gradient(
90deg,
#fff,
var(--neon),
var(--purple)
);


-webkit-background-clip:text;

color:transparent;


}





.hero-text p{


margin-top:25px;

font-size:18px;

line-height:1.8;

color:var(--gray);


}





.hero-button{


display:flex;

gap:20px;

margin-top:40px;


}





.hero-button a{


padding:15px 35px;

border-radius:30px;

border:1px solid var(--neon);


transition:.3s;


}





.hero-button a:first-child{


background:var(--neon);

color:#000;

font-weight:bold;


}




.hero-button a:hover{


box-shadow:
0 0 25px var(--neon);

transform:translateY(-5px);


}






.hero-image{


width:45%;


}




.hero-image img{


width:100%;

filter:

drop-shadow(
0 0 40px var(--purple)
);


}









/* FEATURE */


.feature{


padding:60px 8%;

display:grid;

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

gap:25px;


}




.feature-box{


background:
linear-gradient(
145deg,
#111,
#050505
);


padding:35px;

border-radius:20px;

border:1px solid #222;


transition:.4s;


}




.feature-box:hover{


border-color:var(--neon);

transform:
translateY(-10px);


box-shadow:

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


}





.feature-box h3{


font-size:40px;


}




.feature-box h4{


margin:20px 0 10px;

font-size:22px;


}



.feature-box p{


color:#aaa;

line-height:1.6;


}











/* PRODUCT SECTION */


.products{


padding:100px 8%;


}



.section-title{


text-align:center;

margin-bottom:50px;


}



.section-title h2{


font-size:45px;

font-weight:900;


}



.section-title p{


color:#aaa;

margin-top:15px;


}





.product-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;


}




.card{


background:

linear-gradient(
145deg,
#111,
#070707
);


border:1px solid #222;

padding:25px;

border-radius:25px;

transition:.4s;


}




.card:hover{


transform:

translateY(-10px);


border-color:var(--purple);


box-shadow:

0 0 30px
rgba(139,92,246,.3);


}




.card img{


width:100%;


}




.card h3{


font-size:24px;

margin-top:20px;


}




.card p{


color:#aaa;

line-height:1.8;

margin:15px 0;


}




.card strong{


display:block;

font-size:22px;

color:var(--neon);

margin-bottom:20px;


}




.card a{


display:inline-block;

padding:12px 25px;

border-radius:20px;

background:#151515;

border:1px solid var(--neon);


}









/* ABOUT */


.about-home{


padding:90px 8%;

text-align:center;

background:#090909;


}



.about-home h2{


font-size:45px;

margin-bottom:30px;


}




.about-home p{


color:#aaa;

margin:15px;

font-size:18px;


}









/* GAMING SETUP */


.setup-section{


padding:80px 8%;

text-align:center;


}




.setup-section h2{


font-size:45px;

margin-bottom:40px;


}




.setup-section img{


width:90%;

max-width:1000px;

border-radius:30px;


box-shadow:

0 0 40px
rgba(0,255,255,.25);


}









/* FOOTER */


footer{


padding:50px 8%;

background:#000;

text-align:center;

border-top:1px solid #222;


}



footer h3{


font-size:28px;

color:var(--neon);


}



footer p{


color:#777;

margin-top:10px;


}

/* PRODUCT DETAIL */


.product-detail{

padding:100px 8%;

display:flex;

gap:50px;

align-items:center;

}



.detail-image{

width:50%;

}



.detail-image img{

width:100%;

filter:
drop-shadow(
0 0 40px #8b5cf6
);

}



.detail-info{

width:50%;

}



.detail-info h1{

font-size:50px;

}



.detail-info h3{

color:#00ffff;

margin:20px 0;

}



.detail-info p{

color:#aaa;

line-height:1.8;

}



.detail-info strong{

display:block;

font-size:35px;

color:#00ffff;

margin:30px 0;

}



.buy-button{

display:inline-block;

padding:15px 40px;

background:#00ffff;

color:#000;

border-radius:30px;

font-weight:bold;

}





.spec-section{

padding:80px 8%;

background:#090909;

}



.spec-section h2,
.performance-section h2{

text-align:center;

font-size:40px;

margin-bottom:40px;

}



.spec-grid{

display:grid;

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

gap:25px;

}



.spec-box{

background:#111;

padding:30px;

border-radius:20px;

border:1px solid #222;

}



.spec-box h3{

color:#00ffff;

}



.spec-box p{

color:#aaa;

margin-top:10px;

}




.performance-section{

padding:80px 8%;

}



.performance-grid{

display:grid;

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

gap:25px;

text-align:center;

}



.performance-grid div{

background:#111;

padding:35px;

border-radius:20px;

}



.performance-grid h3{

color:#8b5cf6;

font-size:25px;

}



.performance-grid p{

font-size:30px;

color:#00ffff;

}

/* CUSTOM BUILDER */


.builder-section{


padding:100px 8%;


}



.builder-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;


}





.builder-card{


background:#111;

padding:30px;

border-radius:20px;

border:1px solid #222;


}



.builder-card:hover{


border-color:#00ffff;

box-shadow:

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


}




.builder-card h3{


margin-bottom:20px;

color:#00ffff;


}




.builder-card select{


width:100%;

padding:15px;

background:#050505;

color:white;

border:1px solid #333;

border-radius:10px;


}







.builder-result{


margin-top:50px;

padding:40px;

text-align:center;

background:

linear-gradient(
145deg,
#111,
#050505
);


border-radius:25px;

border:1px solid #222;


}



.builder-result h2{


font-size:35px;


}




.builder-result p{


color:#aaa;

margin:20px;


}




.builder-result a{


display:inline-block;

padding:15px 40px;

background:#00ffff;

color:#000;

border-radius:30px;

font-weight:bold;


}

/* COMPONENT PAGE */


.component-banner{

padding:80px 8%;

}



.card strong{

letter-spacing:.5px;

}

/* PROMO SECTION */


.promo-section{


padding:100px 8%;


}




.promo-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;


}





.promo-card{


background:

linear-gradient(
145deg,
#111,
#050505
);


padding:35px;

border-radius:25px;

border:1px solid #222;

transition:.4s;


}





.promo-card:hover{


transform:

translateY(-10px);


border-color:#00ffff;


box-shadow:

0 0 30px
rgba(0,255,255,.25);


}




.promo-card h3{


font-size:25px;

color:#00ffff;

margin-bottom:20px;


}




.promo-card p{


color:#aaa;

line-height:1.7;

margin-bottom:20px;


}





.promo-card span{


display:block;

color:#8b5cf6;

font-weight:bold;

margin-bottom:25px;


}





.promo-card a{


display:inline-block;

padding:12px 25px;

border-radius:25px;

background:#00ffff;

color:#000;

font-weight:bold;


}

/* REVIEW PAGE */


.review-section{


padding:100px 8%;


}





.review-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;


}




.review-box{


background:#111;

padding:35px;

border-radius:25px;

border:1px solid #222;

transition:.3s;


}





.review-box:hover{


border-color:#00ffff;

box-shadow:

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


}





.review-box h3{


color:#00ffff;

font-size:25px;


}





.review-box p{


color:#aaa;

line-height:1.8;

margin:20px 0;


}




.review-box b{


color:white;


}

/* FAQ PAGE */


.faq-page{


padding:100px 8%;


}




.faq-item{


background:#111;

border:1px solid #222;

border-radius:20px;

margin-bottom:20px;

overflow:hidden;


}




.faq-question{


width:100%;

padding:25px;

background:none;

border:none;

color:white;

display:flex;

justify-content:space-between;

font-size:18px;

cursor:pointer;

text-align:left;


}



.faq-question span{


color:#00ffff;

font-size:30px;


}





.faq-answer{


padding:0 25px 25px;

color:#aaa;

line-height:1.8;


}

/* ABOUT PAGE */


.about-section{


padding:100px 8%;


}



.about-content{


max-width:900px;

margin:auto;

text-align:center;


}



.about-content p{


color:#aaa;

line-height:1.9;

font-size:18px;

margin-bottom:20px;


}





.service-section{


padding:100px 8%;


}



.service-grid{


display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;


}



.service-card{


background:#111;

padding:30px;

border-radius:20px;

border:1px solid #222;


}



.service-card h3{


color:#00ffff;

margin-bottom:15px;


}



.service-card p{


color:#aaa;

line-height:1.7;


}

/* CONTACT PAGE */


.contact-section{


padding:100px 8%;


}



.contact-grid{


display:grid;

grid-template-columns:

repeat(2,1fr);

gap:40px;


}




.contact-form,
.contact-info{


background:#111;

padding:40px;

border-radius:25px;

border:1px solid #222;


}




.contact-form h3,
.contact-info h3{


color:#00ffff;

font-size:28px;

margin-bottom:30px;


}




.contact-form input,
.contact-form select,
.contact-form textarea{


width:100%;

padding:15px;

margin-bottom:20px;

background:#050505;

border:1px solid #333;

color:white;

border-radius:10px;


}



.contact-form textarea{


height:150px;

resize:none;


}



.contact-form button{


padding:15px 35px;

border:none;

background:#00ffff;

color:#000;

border-radius:30px;

font-weight:bold;

cursor:pointer;


}




.contact-info h4{


color:#8b5cf6;

margin-top:20px;


}



.contact-info p{


color:#aaa;

line-height:1.8;


}




.cta-section{


padding:80px 8%;

text-align:center;

background:#0b0b0b;


}



.cta-section h2{


font-size:40px;


}



.cta-section p{


color:#aaa;

margin:20px;


}



.cta-section a{


display:inline-block;

padding:15px 40px;

background:#00ffff;

color:#000;

border-radius:30px;

font-weight:bold;


}

/* BLOG PAGE */


.blog-section{

padding:100px 8%;

}




.blog-grid{


display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;


}




.blog-card{


background:#111;

border-radius:25px;

overflow:hidden;

border:1px solid #222;

transition:.3s;


}




.blog-card:hover{


transform:translateY(-10px);

border-color:#00ffff;


}




.blog-card img{


width:100%;

height:220px;

object-fit:cover;


}



.blog-card div{


padding:30px;


}




.blog-card h3{


color:#00ffff;

font-size:22px;


}




.blog-card p{


color:#aaa;

line-height:1.7;

margin:15px 0;


}



.blog-card a{


display:inline-block;

padding:12px 25px;

background:#00ffff;

color:#000;

border-radius:25px;

font-weight:bold;


}

body{

font-family:
'Orbitron',
Arial,
sans-serif;

background:#050505;

color:white;

margin:0;

}

img{


max-width:100%;

height:auto;

display:block;


}

html{

scroll-behavior:smooth;

}

a,
button{

transition:.3s;

}



a:hover,
button:hover{


transform:

translateY(-3px);


}