/* =========================
   RK COMPUTER PREMIUM CSS
   PART 1
   ========================= */

:root{

--bg:#050816;
--card:#0f172a;
--glass:rgba(255,255,255,.05);

--orange:#ff7a00;
--orange2:#ffae00;

--white:#ffffff;
--gray:#cbd5e1;

--shadow:0 20px 60px rgba(0,0,0,.3);

}

.light-mode{

--bg:#f7f7f7;
--card:#ffffff;
--glass:rgba(255,255,255,.7);

--white:#111827;
--gray:#475569;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{

background:var(--bg);
color:var(--white);

overflow-x:hidden;

transition:.4s;

}

/* LOADER */

#loader{

position:fixed;
inset:0;

background:#000;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

z-index:999999;

}

.loader-logo{

font-size:42px;
font-weight:900;
letter-spacing:4px;

}

.loader-bar{

width:250px;
height:6px;

background:#222;

margin-top:25px;

border-radius:100px;
overflow:hidden;

}

.loader-bar span{

display:block;

height:100%;
width:0%;

background:linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

animation:load 2s linear forwards;

}

@keyframes load{

to{
width:100%;
}

}

/* CUSTOM CURSOR */

.cursor{

position:fixed;

width:30px;
height:30px;

border:2px solid var(--orange);

border-radius:50%;

pointer-events:none;

transform:translate(-50%,-50%);

z-index:99999;

mix-blend-mode:difference;

}

/* BACKGROUND BLOBS */

.bg-gradient{

position:fixed;

width:700px;
height:700px;

background:var(--orange);

filter:blur(200px);

opacity:.15;

top:-250px;
left:-250px;

animation:blob1 12s infinite alternate;

z-index:-1;

}

.bg-gradient2{

position:fixed;

width:700px;
height:700px;

background:#00c8ff;

filter:blur(200px);

opacity:.08;

right:-250px;
bottom:-250px;

animation:blob2 10s infinite alternate;

z-index:-1;

}

@keyframes blob1{

from{
transform:translate(0,0);
}

to{
transform:translate(180px,120px);
}

}

@keyframes blob2{

from{
transform:translate(0,0);
}

to{
transform:translate(-180px,-120px);
}

}

/* NAVBAR */

#navbar{

position:fixed;

top:0;
left:0;

width:100%;

padding:18px 8%;

display:flex;

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

background:rgba(0,0,0,.15);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.08);

z-index:999;

}

.logo{

font-size:28px;
font-weight:800;

letter-spacing:2px;

}

.logo span{

color:var(--orange);

}

.nav-links{

display:flex;
gap:35px;

list-style:none;

}

.nav-links a{

color:var(--white);

text-decoration:none;

font-weight:500;

position:relative;

}

.nav-links a::after{

content:'';

position:absolute;

left:0;
bottom:-6px;

width:0%;
height:2px;

background:var(--orange);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

/* MOBILE MENU */

.menu-btn{

font-size:30px;
cursor:pointer;

display:none;

}

.mobile-menu{

position:fixed;

top:0;
right:-100%;

width:300px;
height:100vh;

background:#0f172a;

display:flex;
flex-direction:column;

padding:120px 30px;

gap:25px;

transition:.4s;

z-index:9999;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

text-decoration:none;
color:white;

font-size:20px;

}

/* HERO */

.hero{

min-height:100vh;

display:flex;

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

padding:120px 8%;

gap:50px;

}

.hero-content{

max-width:700px;

}

.hero-badge{

display:inline-flex;

padding:10px 20px;

background:var(--glass);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:100px;

margin-bottom:25px;

}

.hero-content h1{

font-size:95px;

line-height:1;

font-weight:900;

}

.hero-content h1 span{

background:linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-content p{

font-size:20px;

color:var(--gray);

margin-top:25px;

}

.hero-buttons{

display:flex;

gap:15px;

margin-top:35px;

}

.btn{

padding:15px 35px;

border-radius:14px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.primary-btn{

background:linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

color:white;

}

.primary-btn:hover{

transform:translateY(-6px);

box-shadow:
0 20px 40px rgba(255,122,0,.35);

}

.secondary-btn{

border:1px solid rgba(255,255,255,.15);

color:white;

background:var(--glass);

}

.hero-glass-card{

width:380px;

padding:35px;

background:var(--glass);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.08);

border-radius:30px;

box-shadow:var(--shadow);

}

.hero-glass-card h3{

font-size:28px;

margin-bottom:15px;

}

.status{

display:flex;
align-items:center;
gap:10px;

margin-top:20px;

font-weight:600;

}

.status span{

width:12px;
height:12px;

background:#00ff5e;

border-radius:50%;

box-shadow:
0 0 15px #00ff5e;

}

.timing{

margin-top:15px;

line-height:1.8;

color:var(--gray);

}
/* =========================
   RK COMPUTER PREMIUM CSS
   PART 2
   ========================= */

/* STATS SECTION */

.stats-section{

padding:80px 8%;

display:grid;

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

gap:25px;

}

.stat-box{

background:var(--glass);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(25px);

padding:35px;

border-radius:25px;

text-align:center;

transition:.35s;

}

.stat-box:hover{

transform:translateY(-10px);

box-shadow:
0 20px 40px rgba(0,0,0,.25);

}

.stat-box h2{

font-size:55px;

font-weight:900;

color:var(--orange);

}

.stat-box p{

color:var(--gray);

margin-top:8px;

}

/* SECTION HEADER */

.section-header{

text-align:center;

margin-bottom:60px;

}

.section-header span{

color:var(--orange);

font-size:14px;

letter-spacing:4px;

font-weight:700;

}

.section-header h2{

font-size:55px;

font-weight:800;

margin-top:12px;

}

/* SERVICES */

.services{

padding:120px 8%;

}

.services-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.service-card{

position:relative;

padding:35px;

background:var(--glass);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(25px);

border-radius:25px;

overflow:hidden;

transition:.35s;

}

.service-card::before{

content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

transition:.6s;

}

.service-card:hover::before{

left:100%;

}

.service-card:hover{

transform:
translateY(-10px);

border-color:var(--orange);

}

.service-card i{

font-size:42px;

color:var(--orange);

margin-bottom:20px;

}

.service-card h3{

font-size:24px;

font-weight:700;

margin-bottom:10px;

}

.service-card p{

color:var(--gray);

line-height:1.7;

}

/* DESIGN SECTION */

.design-section{

padding:120px 8%;

}

.design-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.design-card{

height:220px;

display:flex;

justify-content:center;
align-items:center;

font-size:24px;
font-weight:700;

border-radius:25px;

background:
linear-gradient(
135deg,
rgba(255,122,0,.18),
rgba(255,255,255,.03)
);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(25px);

transition:.35s;

cursor:pointer;

}

.design-card:hover{

transform:
translateY(-10px)
scale(1.03);

box-shadow:
0 25px 50px rgba(255,122,0,.25);

}

/* ABOUT */

.about-section{

padding:120px 8%;

display:grid;

grid-template-columns:
1fr 1fr;

gap:50px;

align-items:center;

}

.about-left span{

color:var(--orange);

font-size:14px;

font-weight:700;

letter-spacing:3px;

}

.about-left h2{

font-size:60px;

margin-top:15px;

font-weight:900;

}

.about-left p{

margin-top:25px;

line-height:2;

font-size:18px;

color:var(--gray);

}

.about-right{

display:grid;

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

gap:20px;

}

.about-card{

padding:40px;

border-radius:25px;

background:var(--glass);

border:1px solid rgba(255,255,255,.08);

text-align:center;

font-size:20px;

font-weight:700;

transition:.35s;

}

.about-card:hover{

transform:translateY(-10px);

border-color:var(--orange);

}

/* CONTACT */

.contact-section{

padding:120px 8%;

}

.contact-card{

max-width:900px;

margin:auto;

padding:60px;

text-align:center;

border-radius:35px;

background:var(--glass);

backdrop-filter:blur(30px);

border:1px solid rgba(255,255,255,.08);

}

.contact-card h2{

font-size:55px;

font-weight:900;

margin-bottom:20px;

}

.contact-card p{

font-size:18px;

line-height:2;

color:var(--gray);

}

.contact-btn{

display:inline-block;

margin-top:30px;

padding:16px 40px;

border-radius:14px;

background:
linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

color:white;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.contact-btn:hover{

transform:translateY(-6px);

}

/* FOOTER */

footer{

padding:60px 8%;

text-align:center;

border-top:
1px solid rgba(255,255,255,.08);

}

.footer-logo{

font-size:35px;

font-weight:900;

margin-bottom:10px;

}

footer p{

color:var(--gray);

margin-top:10px;

}

/* WHATSAPP BUTTON */

.whatsapp-btn{

position:fixed;

bottom:25px;
right:25px;

width:70px;
height:70px;

display:flex;

justify-content:center;
align-items:center;

border-radius:50%;

background:#25D366;

color:white;

font-size:32px;

text-decoration:none;

z-index:999;

box-shadow:
0 10px 30px rgba(0,0,0,.3);

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{transform:scale(1);}
50%{transform:scale(1.08);}
100%{transform:scale(1);}

}

/* THEME BUTTON */

#themeToggle{

position:fixed;

left:25px;
bottom:25px;

width:60px;
height:60px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:20px;

background:var(--glass);

color:var(--white);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.08);

z-index:999;

}

/* REVEAL ANIMATIONS */

.show{
opacity:1 !important;
transform:translateY(0) !important;
}

.service-card,
.design-card,
.about-card,
.stat-box,
.contact-card{

opacity:0;
transform:translateY(50px);

transition:.8s;

}

/* BUTTON RIPPLE */

.btn{

position:relative;
overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

background:rgba(255,255,255,.4);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/* ACTIVE NAV LINK */

.active{

color:var(--orange) !important;

}

/* RESPONSIVE */

@media(max-width:1000px){

.hero{

flex-direction:column;
text-align:center;

}

.hero-content h1{

font-size:70px;

}

.hero-buttons{

justify-content:center;

}

.about-section{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.stats-section{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:50px;

}

.section-header h2{

font-size:40px;

}

.contact-card h2{

font-size:38px;

}

.about-left h2{

font-size:42px;

}

.hero-glass-card{

width:100%;

}

.menu-btn{

display:block;

}

.nav-links{

display:none;

}

.cursor{

display:none;

}

}