:root{
--bg:#0f172a;
--card:#1e293b;
--text:#ffffff;
--accent:#3b82f6;
--gradient: linear-gradient(135deg,#3b82f6,#9333ea,#06b6d4);
}

.light{
--bg:#f8fafc;
--card:#ffffff;
--text:#111827;
--accent:#2563eb;
--gradient: linear-gradient(135deg,#2563eb,#7c3aed,#0891b2);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
background:var(--bg);
color:var(--text);
overflow-x:hidden;
transition:0.4s;
}

/* ===== Loader ===== */
#loader{
position:fixed;
width:100%;
height:100%;
background:var(--bg);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
transition:opacity 0.6s ease;
}

.loader-text{
font-size:28px;
font-weight:700;
background:linear-gradient(90deg, #f00, #00f); 
/* vendor-prefixed for WebKit (text clipping) */
-webkit-background-clip: text;
/* standard property for compatibility */
background-clip: text;
/* if clipping text, make text transparent for WebKit */
-webkit-text-fill-color: transparent;
animation:pulse 1.5s infinite;
}

@keyframes pulse{
0%{opacity:0.3}
50%{opacity:1}
100%{opacity:0.3}
}

/* ===== Smooth Page Fade ===== */
.fade-out{
opacity:0;
transform:translateY(20px);
transition:0.4s ease;
}

/* ===== Navbar ===== */
header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 8%;
backdrop-filter:blur(15px);
background:rgba(0,0,0,0.25);
z-index:1000;
}

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav a{
color:var(--text);
text-decoration:none;
transition:0.3s;
}

nav a:hover{
color:var(--accent);
}

/* ===== Hero ===== */
.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:120px 8% 0 8%;
}
.hero h1{
font-size:55px;
font-weight:800;
 background: linear-gradient(90deg, #f00, #00f);
    -webkit-background-clip: text; /* WebKit */
    background-clip: text;         /* standard - for compatibility */
    -webkit-text-fill-color: transparent; /* needed on WebKit to show background through text */
animation:floatText 4s ease-in-out infinite;
}

@keyframes floatText{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-15px)}
}

.btn{
margin-top:25px;
padding:12px 25px;
background:var(--gradient);
border:none;
color:#fff;
border-radius:10px;
text-decoration:none;
transition:0.3s;
}

.btn:hover{
transform:scale(1.05);
}

/* ===== Pages ===== */
.page{
padding:150px 8%;
min-height:100vh;
}

/* ===== Cards ===== */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.card{
background:var(--card);
padding:25px;
border-radius:20px;
transition:0.4s;
}

.card:hover{
transform:translateY(-12px);
box-shadow:0 15px 40px rgba(0,0,0,0.3);
}

/* ===== Skill Bars ===== */
.skill{
margin:20px 0;
}

.skill-bar{
height:10px;
background:#334155;
border-radius:10px;
overflow:hidden;
}

.skill-progress{
height:100%;
background:var(--gradient);
width:0;
transition:width 2s ease;
}

/* ===== Mobile ===== */
.hamburger{display:none;}

@media(max-width:768px){
nav ul{
position:absolute;
top:70px;
right:0;
flex-direction:column;
background:var(--card);
width:200px;
padding:20px;
display:none;
}
nav ul.active{display:flex;}
.hamburger{display:block;}
.hero h1{font-size:42px;}
}

.map-container{
margin-top:40px;
border-radius:15px;
overflow:hidden;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
}


#particles-js{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

/* === Glass Blur Hero Box === */
.hero-box{
position:relative;
z-index:2;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(20px);
padding: 40px;
border-radius: 25px;
max-width: 700px;
display:flex;
flex-direction:column;
gap:20px;
}

/* Typing effect text */
.typing{
font-size:24px;
color:var(--text);
height:30px;
}

/* 3D Mouse Parallax container */
.hero-box{
transform-style: preserve-3d;
transition: transform 0.1s ease;
}

/* Gradient Animated Cursor */
body{
cursor: none;
}

/* Custom cursor */
.cursor{
position:fixed;
top:0;
left:0;
width:20px;
height:20px;
border-radius:50%;
pointer-events:none;
background:linear-gradient(45deg,#3b82f6,#9333ea,#06b6d4,#facc15);
background-size:400% 400%;
animation:cursorGradient 4s linear infinite;
transform:translate(-50%,-50%);
z-index:9999;
}

@keyframes cursorGradient{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

footer{
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(15px);
  padding: 30px 8%;
  text-align: center;
  color: var(--text);
  margin-top: 50px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.1);
}

footer .social-icons{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

footer .social-icons a{
  color: var(--text);
  text-decoration:none;
  font-weight:500;
  transition: 0.3s;
}

footer .social-icons a:hover{
  color: var(--accent);
  transform: scale(1.1);
}


.contact-form{
  max-width:600px;
  margin:40px auto;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  padding:30px;
  border-radius:25px;
  display:flex;
  flex-direction:column;
  gap:20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.contact-form h3{
  font-size:28px;
  color: var(--text);
}

.contact-form label{
  color: var(--text);
  font-weight:500;
}

.contact-form input,
.contact-form textarea{
  padding:12px 15px;
  border-radius:12px;
  border:none;
  background:rgba(255,255,255,0.1);
  color: var(--text);
  resize:none;
  transition:0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--accent);
  background: rgba(255,255,255,0.15);
}

.contact-form button{
  margin-top:10px;
  padding:12px 20px;
  background: var(--gradient);
  color:#fff;
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:0.3s;
}

.contact-form button:hover{
  transform: scale(1.05);
}

.error{
  color: #f87171; /* Red for errors */
  font-size:14px;
  display:block;
  height:16px;
}