body{
background:#0f172a;
color:#e5e7eb;
}
header{
position:fixed;
top:0;
width:100%;
background:rgba(15,23,42,.85);
backdrop-filter:blur(10px);
z-index:99;
}
a{
text-decoration:none;
}

.nav{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
}

.logo{
font-weight:700;
font-size:20px;
color:#38bdf8;
}

.nav a{
margin-left:20px;
font-size:14px;
color:#cbd5f5;
}
.nav a:hover{
color:#38bdf8;
}
section{
max-width:1500px;
margin:auto;
padding:20px 20px;
}

/* Hero Section */
.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:center;
min-height:75vh;
background:linear-gradient(135deg,#020617,#0f172a);
}

.hero h1{
font-size:42px;
color:white;
padding-left:10px; 
}

.hero span{
color:#38bdf8;
}

.hero p{
margin:20px 0;
color:#cbd5f5;
padding-left:10px;
}
/* Button */
.btn{
display:inline-block;
padding:12px 25px;
margin-left: 10px;
background:linear-gradient(135deg,#38bdf8,#0ea5e9);
color:#020617;
border-radius:30px;
font-weight:500;
box-shadow:0 10px 30px #38bdf833;
}
.btn:hover{
transform:translateY(-2px);
}
.photo{
text-align:center;
}

.photo img{
width:260px;
height:260px;
border-radius:50%;
object-fit:cover;
border:6px solid #38bdf8;
box-shadow:0 0 40px #38bdf866;
}
/* About text */
#about p{
color:#cbd5f5;
}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.card{
background:#020617;
border:1px solid #1e293b;
transition:.3s;
border-radius:16px;
padding:25px;
text-align:center;
}
.card:hover{
transform:translateY(-6px);
border-color:#38bdf8;
}
.card i{
font-size:28px;
color:#38bdf8;
margin-bottom:10px;
}
.card h4{
color:white;
}
.card p{
color:#94a3b8;
}

/* ===== Qualification Section ===== */

.qual-box{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:25px;
}

.qual-item{
background:#020617;
border:1px solid #1e293b;
border-radius:16px;
padding:20px;
transition:.3s;
}

.qual-item:hover{
border-color:#38bdf8;
box-shadow:0 0 20px #38bdf866;
transform:translateY(-4px);
}

.qual-item h4{
color:white;
margin-bottom:6px;
}

.qual-item span{
color:#38bdf8;
font-size:13px;
}

.qual-item p{
color:#94a3b8;
margin-top:8px;
font-size:14px;
}
/* ===== Experience Section ===== */

.exp-box{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:25px;
}

.exp-item{
background:#020617;
border:1px solid #1e293b;
border-radius:16px;
padding:20px;
transition:.3s;
}

.exp-item:hover{
border-color:#38bdf8;
box-shadow:0 0 20px #38bdf866;
transform:translateY(-4px);
}

.exp-item h4{
color:white;
margin-bottom:6px;
}

.exp-item span{
color:#38bdf8;
font-size:13px;
}

.exp-item p{
color:#94a3b8;
margin-top:8px;
font-size:14px;
}
/* ===== Currently Working Badge (Premium) ===== */

.exp-item{
position:relative;
}

.badge{
position:absolute;
top:12px;
right:12px;
background:#020617;
border:1px solid #38bdf8;
color:#38bdf8;
padding:4px 12px;
font-size:11px;
border-radius:14px;
font-weight:500;
box-shadow:0 0 12px #38bdf866;
}
.badge i{
margin-right:5px;
font-size:10px;
}
.exp-item span i{
margin-right:6px;
color:#38bdf8;
}

/* Subtle highlight for current job */
.exp-item.current{
border-color:#38bdf8;
}

.exp-item.current:hover{
box-shadow:0 0 25px #38bdf866;
}


/* Skills */
.skills span{
display:inline-block;
background:#020617;
padding:8px 15px;
border:1px solid #1e293b;
color:#cbd5f5;
border-radius:20px;
margin:6px;
font-size:13px;
}
.skills span:hover{
border-color:#38bdf8;
}
/* Footer */
footer{
text-align:center;
padding:20px 20px;
background:#020617;
color:#94a3b8;
}
/* Contact */
#contact p{
color:#cbd5f5;
}
/* Contact Icons */

#contact i{
color:#38bdf8;
margin-right:8px;
}

/* Section Titles */
section h2{
color:white;
}

/* Photo glow improvement */
.photo img{
box-shadow:0 0 0 6px #020617,0 0 40px #38bdf866;
}

@media(max-width:800px){
.hero{
grid-template-columns:1fr;
text-align:center;
}

.photo{
order:-1;
}
}

/* ===== Animated Skill Pills ===== */

.skills span{
opacity:0;
transform:scale(.6);
transition:.4s ease;
}

.skills span.show{
opacity:1;
transform:scale(1);
}

/* Glow hover */
.skills span:hover{
box-shadow:0 0 15px #38bdf866;
}
#typewriter::after{
content:"|";
animation:blink 1s infinite;
margin-left:4px;
}

@keyframes blink{
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}
/* ===== Floating WhatsApp Button ===== */

.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:white;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
box-shadow:0 10px 25px #25d36666;
z-index:999;
transition:.3s;
}

.whatsapp-float:hover{
transform:scale(1.1);
box-shadow:0 0 30px #25d366;
}

/* ===== Projects Gallery ===== */

.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:30px;
}

.project-card{
background:#020617;
border:1px solid #1e293b;
border-radius:18px;
overflow:hidden;
transition:.3s;
}

.project-card:hover{
transform:translateY(-8px);
border-color:#38bdf8;
}

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

.project-card h4{
color:white;
padding:15px 15px 5px;
}

.project-card p{
color:#94a3b8;
padding:0 15px 10px;
font-size:14px;
}

.project-card a{
display:inline-block;
margin:10px 15px 20px;
color:#38bdf8;
font-size:14px;
}
/* ===== Project Image Popup ===== */

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(2,6,23,.9);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.popup img{
max-width:90%;
max-height:80%;
border-radius:12px;
}

#closePopup{
position:absolute;
top:20px;
right:30px;
font-size:40px;
color:white;
cursor:pointer;
}

/* ===== Global Premium Glow System ===== */

/* Cards */
.card:hover,
.project-card:hover{
border-color:#38bdf8;
box-shadow:0 0 25px #38bdf866;
transform:translateY(-6px);
}

/* Skills */
.skills span:hover{
border-color:#38bdf8;
box-shadow:0 0 20px #38bdf866;
}

/* Buttons */
.btn:hover{
box-shadow:0 0 25px #38bdf866;
}

/* Social icons */
.socials a:hover{
box-shadow:0 0 25px #38bdf866;
}

/* Project images */
.project-card img:hover{
filter:brightness(1.1);
}

/* Contact text */
#contact p:hover{
color:#38bdf8;
text-shadow:0 0 10px #38bdf8;
}

/* ===== Social Icons ===== */

.socials{
display:flex;
gap:14px;
margin-top:12px;
}

.socials a{
width:44px;
height:44px;
border-radius:50%;
background:#020617;
border:1px solid #1e293b;
display:flex;
align-items:center;
justify-content:center;
color:#38bdf8;
font-size:18px;
transition:.25s ease;
}

/* Hover */
.socials a:hover{
border-color:#38bdf8;
box-shadow:0 0 18px #38bdf866;
transform:translateY(-2px);
}


/* ===== Section Divider Glow ===== */

.divider{
width:60%;
height:2px;
margin:30px auto;
background:linear-gradient(90deg,transparent,#38bdf8,transparent);
box-shadow:0 0 20px #38bdf8;
}